@extends('externo/layout')
@section('contenido')
<!-- Page Title -->
<div class="page-title-area">
    <img src="{!! asset('externo/assets/img/home-one/footer-car.png') !!}" alt="Title">
    <div class="container">
        <div class="page-title-content">
            <h2>Manuales Vehículares</h2>
            <ul>
                <li>
                    <a href="{{ route('index') }}">Inicio</a>
                </li>
                <li>
                    <i class='bx bx-chevron-right'></i>
                </li>
                <li>Manuales</li>
            </ul>
        </div>
    </div>
</div>
<!-- Sign Up -->
<div class="signup-area pt-100 pb-70">
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-12">
                <div class="blog-details-item">
                    <div class="blog-details-search">
                        <form  action="{{ route('directorio.manuales.buscar') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-12 col-lg-12 col-12 mt-2">
                                    <input type="text" class="form-control" name="buscar" @if ($buscarDtos) value="{{ $buscarDtos }}"  @endif placeholder="Buscar">
                                </div>
                                <div class="col-md-4 col-lg-4 col-12 mt-2">
                                    <select class="form-control marca" aria-label="Default select example" name="marca">
                                        @if ($marcaDtos)
                                        <option value="{{ $marcaDtos }}">{{ $marcaDtos }}</option>
                                        @else
                                        <option value="">Selecciona la marca asociada</option>
                                        @endif
                                    @foreach ($marcas as $marca)
                                        <option value="{{$marca->marca}}">{{$marca->marca}}</option>
                                    @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 col-lg-4 col-12 mt-2">
                                    <select class="form-control modelo" aria-label="Default select example" name="modelo">
                                        @if ($modeloDtos)
                                        <option value="{{ $modeloDtos }}">{{ $modeloDtos }}</option>
                                        @else
                                        <option value="">Selecciona el modelo</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-4 col-lg-4 col-12 mt-2">
                                    <select class="form-control" aria-label="Default select example" name="anio">
                                    @if ($anioDtos)
                                    <option value="{{ $anioDtos }}">{{ $anioDtos }}</option>
                                    @else
                                    <option value="">Selecciona el año del vehículo</option>
                                    @endif
                                    @foreach($years as $year)
                                        <option value="{{ $year->anio_mana }}">{{ $year->anio_mana }}</option>
                                    @endforeach
                                    </select>
                                </div>
                                <div class="col-md-12 col-lg-12 col-12 mt-2">
                                    <button type="submit" class="btn search-btn">
                                        <i class='bx bx-search'></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="blog-details-category">
                        <h3>Lista de resultados</h3>
                        <ul>
                            @foreach ($datos as $item)
                            <li>
                                <a href={{ route('directorio.manuales.detalle',  $item->codigo_mana) }}>
                                    {{ $item->titulo_mana }}
                                    <i class='bx bx-right-arrow-alt'></i>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script>
        $(function(){
            $('.marca').off('change'); // Desvincular eventos 'change' anteriores
            $('.marca').on('change', onSelectMarca);
        });
        function onSelectMarca(){
            var id = $(this).val();
            $.get('{{Request::root()}}/directorio/buscar/modelos/'+id+'', function(data){
                var html_select = '';
                for(var i=0; i<data.length; ++i)
                html_select += '<option value="'+data[i].modelo+'">'+data[i].modelo+'</option>';
                $('.modelo').html(html_select);
            });
        }
    </script>
@endsection