@extends('layouts.dashboard', ['menu_activo' => 'drop_publicador_mla_categoria', 'menu_superior' => 'drop_publicador'])

@section('css')
	<link rel="stylesheet" href="{{asset('dashboard/plugins/select2/css/select2.min.css')}}">
	<script src="{{asset('dashboard/plugins/select2/js/select2.full.min.js')}}"></script>
	<style>
		.select2-selection.select2-selection--single
		{
			height: calc(2.25rem + 2px)!important;
		}
	</style>
@endsection

@section('contenido')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<div class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
				<div class="col-sm-6">
					<h1 class="m-0 text-dark">Publicador Masivo</h1>
				</div><!-- /.col -->
				<div class="col-sm-6">
					<ol class="breadcrumb float-sm-right">
						<li class="breadcrumb-item"><a href="{{url('admin')}}">Inicio</a></li>
						<li class="breadcrumb-item">DROP</li>
						<li class="breadcrumb-item">Publicador masivo</li>
						<li class="breadcrumb-item active">MLA Busqueda</li>
					</ol>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.container-fluid -->
	</div>
	<!-- /.content-header -->

	<!-- Main content -->
	<section class="content">
		<div class="container-fluid">
			<!-- Main row -->
			<div class="row">
				<section class="col-lg-12">
					
					<div class="card">
						<div class="card-header">
							<div class="row">
								<div class="col">
									<h3 class="card-title">
										Publicador desde MercadoLibre AR por categoria
									</h3>
								</div>
								<div class="col text-right">
									
								</div>	
							</div>
						</div>
						<div class="card-body">
							<div class="row">
								<div class="col-12">
									<div class="row">
										<div class="col-9 col-md-10">
											<div class="form-group">
												<label for="">Categoria de publicación en MLA</label>
												<select id="categoria" name="categoria" class="form-control select2" style="width:100%!important; height: calc(2.25rem + 2px)!important;">
													@foreach($categorias as $categoria)
														<option value="{{$categoria['id']}}">{{$categoria['name']}} - {{$categoria['id']}}</option>
													@endforeach
												</select>
											</div>
										</div>
										<div class="col-3 col-md-2">
											<br>
											<a class="btn btn-info btn-block mt-2 btn_ver_filtros">
												<i class="fa fa-filter"></i>
												Ver filtros
											</a>
										</div>
										
										<div class="col-12 filtros_contenedor" style="display:none;">
											<hr>
											<div class="row filtros">
												
											</div>
											<hr>
										</div>

										<div class="col-12 col-md-6">
											<div class="form-group">
												<label for="">Que cantidad buscamos?</label>
												<input type="number" name="cantidad" id="cantidad" class="form-control" value="100" required>
											</div>
										</div>
										<div class="col-12 col-md-6">
											<label for="">Ordenar por</label>
											<select name="orden" class="form-control">
												<option value="">Relevancia</option>
												<option value="price_desc">Mayor precio</option>
												<option value="price_asc">Menor precio</option>
											</select>
										</div>
										<div class="col-12 text-right">
											<hr>
											<div class="form-group">
												<button class="btn btn-info btn_buscar">
													<i class="fa fa-search"></i>
													Consultar
												</button>
											</div>	
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</section>
</div>
@endsection

@section('scripts')
	<script>
		$(document).ready(function()
		{
			$('.select2').select2();

			$('#categoria').change(function()
			{
				$('.filtros_contenedor').hide();
				$('.filtros').html("");
			});

			$('.btn_ver_filtros').click(function()
			{
				$('.cargando').fadeIn();
				id = $('#categoria option:selected').val();
				
				$.ajax({
					method: 'get',
					url: '{{url("drop/publicador/mla/categoria/filtros")}}/'+id,
					data:{
						_token: "{{csrf_token()}}",
					},
				}).done(function(respuesta)
				{	
					var mostrar = "";
				
					$.each(respuesta, function(index, filtro)
					{
						if(filtro['id'] != 'product')
						{
							mostrar += '<div class="col-12 col-md-4">';
							mostrar += '<label for="">'+filtro['name']+'</label><br>';
							
							$.each(filtro['values'], function(index, filtro_hijo)
							{
								mostrar += '<input type="radio" class="ml-4" name="'+filtro['id']+'" id="'+filtro['id']+"_"+filtro_hijo['id']+'" value="'+filtro_hijo['id']+'"> ';
								mostrar += '<label for="'+filtro['id']+"_"+filtro_hijo['id']+'">'+filtro_hijo['name']+'</label><br>';
							});

							mostrar += '</div>';
						}
					});
					
					$('.filtros').html(mostrar);

					$('.filtros_contenedor').show();
					$('.cargando').fadeOut();
				});
			});

			$('.btn_buscar').click(function()
			{
				if(($('#categoria option:selected').val() == "") || ($('#cantidad').val() == ""))
				{
					ttf_notificacion('La cantidad no puede estar vacia', 'error');
				}else
				{
					$('.cargando').fadeIn();

					$.ajax({
						method: 'post',
						url: "{{url('drop/publicador/mla/productos')}}",
						data:{
							_token: 	"{{csrf_token()}}",
							tipo: 		"categoria",
							categoria: 	$('#categoria option:selected').val(),
							cantidad: 	$('#cantidad').val(),
							orden: 		$('#orden option:selected').val(),
						},
					});

					setTimeout(function()
					{
						$('.cargando').fadeOut();
						window.location.href = "{{url('drop/publicador/mla/productos')}}";
					}, 3000);
				}
					
			});
		});
	</script>
@endsection