@extends('admin.layouts.main')

@section('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="{{ 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="{{ 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="{{ csrf_token() }}" />
								<select id="id_categoria" name="id_categoria" class="form-control">
									<option value="0">Todas las categor&iacute;as</option>
									@foreach($categorias as $categoria)
									<option value="{{$categoria->id}}">{{$categoria->nombre}}</option>
									@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">
		@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/{{ $tecnologia->id }}" style="font-size: 18px;">{{ $tecnologia->nombre }}</a></h3>
					<!--<div class="tech-description text-success font-bold m-b-xs">
						{{ $tecnologia->descripcion }}
					</div>-->
					<div class="row">
						<div class="col-md-12">
							<img src="{{ $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/{{ $tecnologia->id }}" class="btn btn-sm"
							   title="Editar {{ $tecnologia->nombre }}">
								<i class="fa fa-edit"></i>
							</a>
							<a href="/admin/tecnologias/delete/{{ $tecnologia->id }}" class="btn btn-sm"
							   title="Eliminar {{ $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>
		@endforeach
	</div>

</div>

@endsection
@section('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 = "{{ 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 = "{{ 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>
@endsection