<?php $__env->startSection('content'); ?>

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>
            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="<?php echo e(route('admin/dashboard')); ?>">Dashboard</a></li>
                    <li class="active">
                        <span>Tecnologías</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
				<i class="fa fa-cogs"></i>
                Tecnologías
            </h2>
            <small>Tecnologías presentes en los modelos.</small>
        </div>
    </div>
</div>

<div class="content animate-panel">

	<div class="row">
		<div class="col-md-12">
			<div class="hpanel">
				<div class="panel-body">
					<div class="col-md-6">
						<a href="<?php echo e(url('admin/tecnologias/create')); ?>" class="btn btn-success">
							<i class="fa fa-plus-circle"></i>
							Agregar tecnología
						</a>
					</div>
					<div class="col-md-6 pull-right">
						<form id="categorias_tecnologia" class="form-inline pull-right">
							<div class="form-group">
								<meta name="csrf-token" content="<?php echo e(csrf_token()); ?>" />
								<select id="id_categoria" name="id_categoria" class="form-control">
									<option value="0">Todas las categor&iacute;as</option>
									<?php foreach($categorias as $categoria): ?>
									<option value="<?php echo e($categoria->id); ?>"><?php echo e($categoria->nombre); ?></option>
									<?php endforeach; ?>
								</select>
							</div>
							<button id="buscar_tecnologias" class="btn btn-default">Buscar</button>
						</form>
						<div class="pull-right" style="padding-right: 10px;">
							<input class="form-control" id="search" type="text" placeholder="Buscar tecnología">
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<div id="lista_tecnologias" class="row">
		<?php foreach($tecnologias as $tecnologia): ?>
		<div class="col-sm-6 col-md-3">
			<div class="hpanel blue">
				<div class="panel-body panel-tech">
					<h3 class="tech-title"><a href="/admin/tecnologias/view/<?php echo e($tecnologia->id); ?>" style="font-size: 18px;"><?php echo e($tecnologia->nombre); ?></a></h3>
					<!--<div class="tech-description text-success font-bold m-b-xs">
						<?php echo e($tecnologia->descripcion); ?>

					</div>-->
					<div class="row">
						<div class="col-md-12">
							<img src="<?php echo e($tecnologia->imagen); ?>" onerror="this.onerror=null;this.src='/photos/tecnologias/no_image.jpg';" width="100%" height="208"/>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 text-center">
							<a href="/admin/tecnologias/edit/<?php echo e($tecnologia->id); ?>" class="btn btn-sm"
							   title="Editar <?php echo e($tecnologia->nombre); ?>">
								<i class="fa fa-edit"></i>
							</a>
							<a href="/admin/tecnologias/delete/<?php echo e($tecnologia->id); ?>" class="btn btn-sm"
							   title="Eliminar <?php echo e($tecnologia->nombre); ?>"
							   data-confirm="¿Est&aacute; seguro que desea eliminar esta tecnolog&iacute;a?">
								<i class="fa fa-trash"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php endforeach; ?>
	</div>

</div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('scripts'); ?>
<script type="text/javascript">
	$(document).ready( () => {

		$("#categorias_tecnologia").submit(function(e){
			e.preventDefault();
		});

		$("#buscar_tecnologias").click(function(){
			var categoria = $("#id_categoria").val();
			var value = $('#search').val().toLowerCase();
			var token = "<?php echo e(csrf_token()); ?>";
			var route = "/admin/tecnologias/tecnologias_categoria";
			$.ajax({
				type: "POST",
				url: route,
				data: {
					_token: token,
					id_categoria: categoria,
					value
				},
				success: function(data){
					console.log(data);
					updateListaTecnologias(data);
				}
			}).done(function(){
				console.log("yay!");
			})	
		});

		// $('#search').on("keyup", function() {
		// 	var value = $(this).val().toLowerCase();
		// 	var token = "<?php echo e(csrf_token()); ?>";
		// 	var route = "/admin/tecnologias/words";
		// 	$.ajax({
		// 		type:'POST',
		// 		url: route,
		// 		data: {
		// 			_token: token,
		// 			value: value
		// 		},
		// 		success: (data) => {
		// 			updateListaTecnologias(data);
		// 		}
		// 	}).done( () => {
		// 		console.log("It's done to load");
		// 	});
		// });
	});

</script>
<script>

	function updateListaTecnologias(data){
		if(data.tecnologias.length > 0){

			$("#lista_tecnologias").empty();

			$.each(data.tecnologias, function(key, value){
				var html_lista_tecnologias = `
					<div class="col-sm-6 col-md-3 animated-panel zoomIn" style="animation-delay: 0.2s;">
						<div class="hpanel blue">
							<div class="panel-body panel-tech">
								<h3 class="tech-title"><a href="/admin/tecnologias/view/${value.id}" style="font-size: 18px;">${value.nombre}</a></h3>
								<div class="row">
									<div class="col-md-12">
										<img src="${value.imagen}" onerror="this.onerror=null;this.src='/photos/tecnologias/no_image.jpg';" width="100%" height="208"/>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12 text-center">
										<a href="/admin/tecnologias/edit/${value.id}" class="btn btn-sm" title="Editar ${value.nombre}">
											<i class="fa fa-edit"></i>
										</a>
										<a href="/admin/tecnologias/delete/${value.id}" class="btn btn-sm" title="Eliminar ${value.nombre}" data-confirm="¿Est&aacute; seguro que desea eliminar esta tecnolog&iacute;a?">
											<i class="fa fa-trash"></i>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				`;

				$("#lista_tecnologias").append( html_lista_tecnologias );
				});

		}else{
			$("#lista_tecnologias").empty();
			$("#lista_tecnologias").append(
				"<div class=\"message\" style=\"padding-top:0px;\">" +
					"<div class=\"row\">" +
						"<div class=\"col-md-12\">" +
							"<div class=\"alert alert-warning\">No existen tecnolog&iacute;as para esta categor&iacute;a</div>" +
						"</div>" +
					"</div>" +
				"</div>"
			);
		}

	}

</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.main', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>