@extends("theme.$theme.layout$ext")
@section('styles')
    <link href="{{ asset('css/circuito.css') }}" rel="stylesheet">
    <link href="{{ asset('css/autocomplete.css') }}" rel="stylesheet">
@endsection
@section('content')
<!-- Titulo -->
<div class="container-fluid title">
    <div class="container">
      <p class="text-center">{{__('Oferta de Circuito')}}</p>
    </div>
</div>
<!-- Filtros -->
<div class="container">
    <form action="{{(empty($token)) ? route('filter_circuitos') : (($token == 'circuitos') ? route('filter_circuitos_agencia',['api_token'=>$token]) : route('filter_circuitos_ext',['api_token'=>$token]))}}" method="post" class="card" id="search_circuitos">
        @csrf
        <div class="row px-4 py-2">
            <div class="col-12 col-md-3"></div>
            <div class="col-12 col-md-6 p-2">
                <p class="h5 text-left titulo_rojo">
                    {{__('Buscar por Continente ó Ciudad ó Salida')}}:
                </p>
                <p class="text-left">
                    <select name="continente" class="form-control" id="continente">
                        <option value="" selected>{{__('Seleccionar Continente')}}</option>
                        <option value="America">{{__('AMÉRICA')}}</option>
                        <option value="Africa">{{__('ÁFRICA')}}</option>
                        <option value="Asia">{{__('ASIA')}}</option>
                        <option value="Europa">{{__('EUROPA')}}</option>
                    </select>
                </p>
                <p class="text-left">
                    <input type="text" id="ciudad" name="ciudad" value="" class="form-control" placeholder="{{__('Nombre de ciudad sin acentos')}}" autocomplete="off"/>
                </p>
                <p class="text-left">
                    <select name="mes" class="form-control" id="mes">
                        <option value="" selected>{{__('Seleccionar mes')}}</option>
                        <option value="01">{{__('ENERO')}}</option>
                        <option value="02">{{__('FEBRERO')}}</option>
                        <option value="03">{{__('MARZO')}}</option>
                        <option value="04">{{__('ABRIL')}}</option>
                        <option value="05">{{__('MAYO')}}</option>
                        <option value="06">{{__('JUNIO')}}</option>
                        <option value="07">{{__('JULIO')}}</option>
                        <option value="08">{{__('AGOSTO')}}</option>
                        <option value="09">{{__('SEPTIEMBRE')}}</option>
                        <option value="10">{{__('OCTUBRE')}}</option>
                        <option value="11">{{__('NOVIEMBRE')}}</option>
                        <option value="12">{{__('DICIEMBRE')}}</option>
                    </select>
                </p>
            </div>
            <div class="col-12 col-md-3 align-self-center">
                <p class="text-center mt-md-4 mb-md-0 pt-2">
                    <input class="btn btn-block btn-primary col-12 col-md-6 m-auto" type="submit" value="{{__('Search')}}">
                </p>
            </div>
        </div>
    </form>
    <div class="clearfix"></div>
    <!-- Lista de productos -->
    <div id="lista-producto">
        @forelse ($listProducts as $circuito)
            @include('circuito.circuito', ['detalle' => false, 'edit' => false])
        @empty
            <p>{{__('Sin resultados')}}</p>
        @endforelse
        {{ $listProducts->links() }}
    </div>
    <!-- Loader -->
    <div class="modal fade" id="modalLoader" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="modalLoaderLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header align-self-center">
                    <h5 class="modal-title" id="modalLoaderLabel">{{__('Buscando circuitos')}}</h5>
                </div>
                <div class="modal-body text-center">
                    <div class="spinner-border text-info" role="status">
                        <span class="sr-only">{{__('Buscando')}}...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
@section('scripts')
    <script src="{{ asset('js/circuito.js') }}"></script>
    <script type="text/javascript">
    var  urlMain ="{{($token == 'circuitos') ? 'circuitos' : 'circuito'}}"
    var ext      ="{{(empty($token) || ($token == 'circuitos')) ? '' : str_replace('-','_',$ext)}}";
    var tokenApi ="{{(empty($token)) ? '?' : '?api_token='.$token.'\u0026'}}";
    var token =  $('input[name="_token"]').attr('value')
    $.ajaxSetup({
        beforeSend: function(xhr) {
            xhr.setRequestHeader('Csrf-Token', token);
        }
    });
        $(document).ready(function () {
            $('#ciudad').autocomplete({
                lookup: function (query, done) {
                    var query     = $('#ciudad').val();
                    var continent = $('#continente').val();
                    var month     = $('#mes').val();
                    if(query != '') {
                        var _token = $('input[name="_token"]').val();
                        $.ajax({
                            url:"{{(empty($token)) ? route('autocomplete.fetch') : (($token == 'circuitos') ? route('autocomplete.fetch_agencia',['api_token'=>$token]) : route('autocomplete.fetch_ext',['api_token'=>$token]))}}",
                            method:"POST",
                            data:{query:query, continent:continent, month:month, _token:_token},
                            success:function(data){
                                result = {
                                    suggestions: $.map(data, function(description, id) {
                                        return { value: description, data: id };
                                    })
                                }
                                done(result);
                            }
                        });
                    }
                }
            });
        });



    </script>
@endsection