@extends('adminlte::page')

@section('title', 'VEHICULOS')

@section('content_header')
<style>
    .btn-container {
        display: flex;
        gap: 10px; /* Espacio entre los botones */
    }
    .btn-container form {
        margin: 0; /* Elimina el margen del formulario */
    }
</style>
@stop

@section('content')
<x-adminlte-card title="REGISTRO DE VEHICULOS" class="m-2" theme="dark" icon="fas fa-id-card">
    <div class="col-12">                                         
        <div class="row">
            <div class="col-12">
                <div class="card-body">
                    <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                        <div class="col-sm-12">
                            <table id="tabla_vehiculos" class="table table-hover align-middle dataTable dtr-inline collapsed" aria-describedby="example1_info">
                                <thead class="text-center px-2 py-2 text-nowrap bg-gray">
                                    <tr>
                                        <th>N°</th>
                                        <th>CODIGO SBN</th>
                                        <th>PLACA</th>
                                        <th>CLASE DENOMINACIÓN</th>
                                        <th>MARCA</th>
                                        <th>MODELO</th>
                                        <th>COLOR</th>
                                        <th>MOTOR</th>
                                        <th>SERIE</th>
                                        <th>ACCIONES</th>
                                        <th>ÁREA ASIGNADA</th>
                                        <th>FECHA ADQUISICIÓN</th>
                                        <th>AÑO DEL VEHICULO</th>
                                        <th>POLIZA SEGURO</th>
                                        <th>ESTADO</th>
                                        <th>ENTIDAD</th>
                                        <th>OBSERVACIÓN</th>
                                    </tr>
                                </thead>
                                @empty($vehiculos)
                                    <tr>
                                        <td colspan="10" class="text-center">No hay vehiculos registrados</td>
                                    </tr>
                                @else
                                <tbody>
                                    @php
                                        $contador = 1;
                                    @endphp
                                    @foreach ($vehiculos as $vehiculo)
                                        <tr>
                                            <td>{{ $contador }}</td>
                                            <td>{{ $vehiculo->codigo_SBN }}</td>
                                            <td>{{ $vehiculo->placa }}</td>
                                            <td>{{ $vehiculo->clase_denominacion }}</td>
                                            <td>{{ $vehiculo->nombre_marca  }}</td>
                                            <td>{{ $vehiculo->nombre_modelo  }}</td>
                                            <td>{{ $vehiculo->color }}</td>
                                            <td>{{ $vehiculo->motor }}</td>
                                            <td>{{ $vehiculo->serie }}</td>
                                            <td class="btn-container">
                                                <button class="btn btn-warning btnEdit" name="btnEdit" id="btnEdit" data-id="{{ $vehiculo->id }}" data-toggle="modal" data-target="#vehiculoEdit">
                                                    <i class="fas fa-edit"></i>
                                                </button>

                                                <form action="{{ url('vehiculos/destroy',$vehiculo->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                            <td>{{ $vehiculo->nombre_oficina  }}</td>
                                            <td>{{ $vehiculo->fecha_adquisicion }}</td>
                                            <td>{{ $vehiculo->anio_vehiculo }}</td>
                                            <td>{{ $vehiculo->estado }}</td>
                                            <td>{{ $vehiculo->poliza_seguro }}</td>
                                            <td>{{ $vehiculo->entidad }}</td>
                                            <td>{{ $vehiculo->observacion }}</td>
                                        </tr>
                                        @php
                                            $contador++;
                                        @endphp
                                    @endforeach
                                </tbody>
                                @endempty
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-adminlte-card>
@include('vehiculos.modalEdit')
@include('vehiculos.modalCreate')
@include('vehiculos.modalConfig')

@stop

@section('css')
@stop

@section('js')

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

<script>

$("#marca").on("change", function(){
    $("#modelo").html("");
    var marca = $("#marca").val();
    var url = "{{ route('getModelo', ':marca') }}";                
    url = url.replace(':marca', marca);
    /* console.log(url); */
    $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function (response) {
            /* console.log(response[0]['nombre_modelo']); */
            $("#modelo").append("<option>-- Seleccione --</option>");
            $('#denominacion_clase').val('');
            response.forEach(element => {
                $("#modelo").append("<option value='"+element.id+"'>"+element.nombre_modelo+"</option>");
                /* console.log(element.clase_denominacion_modelo); */
            })
            $('#modelo').on('change', function(){
                var modelo = $(this).val();
                response.forEach(element => {
                    if(element.id == modelo)
                        $('#denominacion_clase').val(element.clase_denominacion_modelo);
                });
            });
        }
    });
});


$(document).ready(function() {
    $(document).on('click','.btnEdit',function(){
        var vehiculoId = $(this).data('id');
        var url = vehiculoId+'/update';

        // Hacer una solicitud AJAX para obtener los datos del vehículo
        $.ajax({
            url: 'edit/'+vehiculoId,
            method: 'GET',
            success: function(response) {
                // Actualizar el formulario del modal con los datos recibidos
                $('#formEdit').attr('action', url);
                $('#formEdit').find('input[name="_method"]').val('POST'); // Asegúrate de que el método sea PUT

                $('#placaEdit').val(response[0]['placa']);
                $('#serieEdit').val(response[0]['serie']);
                $('#motorEdit').val(response[0]['motor']);
                $('#colorEdit').val(response[0]['color']);
                $('#marcaEdit').val(response[0]['marca']);
                $('#modeloEdit').val(response[0]['modelo']);
                $('#fecha_adquisicionEdit').val(response[0]['fecha_adquisicion']);
                $('#anio_vehiculoEdit').val(response[0]['anio_vehiculo']);
                $('#denominacion_claseEdit').val(response[0]['clase_denominacion']);
                // Actualiza otros campos según los datos recibidos
            }
        });
    });
});

$('#checkPoliza').change(function(){
    if($(this).is(':checked')){
        $('.poliza').show();
    }else{
        $('.poliza').hide();
    }
});

/* $('#checkTtiulo').change(function(){
    if($(this).is(':checked')){
        $('.poliza').show();
        $('#poliza_seguro').val("3012400007626");
    }else{
        $('.poliza').hide();
        $('#poliza_seguro').val("-")
    }
}); */
    document.getElementById('switchToInput').addEventListener('click', function(e) {
        e.preventDefault();

        var select = document.getElementById('numPoliza');
        var inputGroup = select.parentElement; // Assuming the input group is the direct parent
        
        // Create a new input element
        var input = document.createElement('input');
        input.type = 'text';
        input.name = 'numPoliza';
        input.id = 'numPoliza';
        input.required = true;
        input.className = 'form-control';
        input.placeholder = 'Ingrese número de poliza';
        input.readonly = false;

        // Replace the select element with the input element
        inputGroup.replaceChild(input, select);
    });
</script>

@if(session('error') == 'validator')
    <script>
        Swal.fire(
        'Error!',
        'Se requiere ingresar todos los datos',
        'error'
        );

        $('#vehiculoAdd').modal('show');
    </script>
@endif

@if(session('edit') == 'modificar')
    <script>
        Swal.fire(
        'Error!',
        'Se requiere ingresar todos los datos',
        'error'
        );

        $('#vehiculoEdit').modal('show');
    </script>
@endif

@stop