@extends('adminlte::page')

@section('title', 'SOAT')

@section('content_header')
@stop

@section('content')
<x-adminlte-card title="REGISTRO DE SOAT" 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_soat" 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>COD. SBN</th>
                                        <th>N° PLACA</th>
                                        <th>CLASE DENOMINACIÓN</th>
                                        <th>N° SOAT</th>
                                        <th>FECHA SOAT</th>
                                        <th>VIGENCIA SOAT</th>
                                        <th>ESTADO SOAT</th>
                                        <th>EDITAR</th>
                                        <th>ELIMINAR</th>
                                    </tr>
                                </thead>
                                @empty($soats)
                                    <tr>
                                        <td colspan="7" class="text-center">No hay soats registrados</td>
                                    </tr>
                                @else
                                <tbody>
                                    @php
                                        $contador = 1;
                                    @endphp
                                    @foreach ($soats as $soat)
                                        <tr>
                                            <td>{{ $contador }}</td>
                                            <td>{{ $soat->cod_sbn_soat }}</td>
                                            <td>{{ $soat->placa_soat }}</td>
                                            <td>{{ $soat->clase_denominacion_soat }}</td>
                                            <td>{{ $soat->numero_soat }}</td>
                                            <td>{{ $soat->fecha_soat }}</td>
                                            <td>{{ $soat->vigencia_soat }}</td>
                                            <td>{{ $soat->estado_soat }}</td>
                                            <td>
                                                <button class="btn btn-primary btnEditSoat" name="btnEditSoat" id="btnEditSoat" data-id="{{ $soat->id }}" data-toggle="modal" data-target="#soatEdit">Editar</button>
                                            </td>
                                            <td>
                                                <form action="{{ url('soat/destroy',$soat->id) }}" method="POST">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger">Eliminar</button>
                                                </form>
                                            </td>
                                        </tr>
                                        @php
                                            $contador++;
                                        @endphp
                                    @endforeach
                                </tbody>
                                @endempty
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-adminlte-card>

@include('vehiculos.soat.modalCreate')
@include('vehiculos.soat.modalEdit')

@stop

@section('css')

@stop

@section('js')

<script>

$("#placa_soat").on("change", function(){
    $("#modelo").html("");
    var marca = $("#marca").val();
    var url = "{{ route('getModelo', ':marca') }}";                
    url = url.replace(':marca', marca);
    $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function (response) {
            $("#modelo").append("<option>-- Seleccione --</option>");
            $('#clase_denominacion').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)
                        $('#clase_denominacion').val(element.clase_denominacion_modelo);
                });
            });
        }
    });
});


    $(document).ready(function() {
        $(document).on('click','.btnEditSoat',function(){
            console.log('jdiasjd');

            // Variables para la consulta de datos
            var soatId = $(this).data('id');
            var url = 'soat/'+soatId+'/update';

            // Hacer una solicitud AJAX para obtener los datos del vehículo
            $.ajax({
                url: 'soat/edit/'+soatId,
                method: 'GET',
                success: function(response) {
                    // Actualizar el formulario del modal con los datos recibidos
                    console.log(response);
                    $('#formEdit').attr('action', url);

                    // Cambiamos el metodo del formulario a POST
                    $('#formEdit').find('input[name="_method"]').val('POST'); 

                    $('#codSbnSoatEdit').val(response[0]['cod_sbn_soat']);
                    $('#placaSoatEdit').val(response[0]['placa_soat']);
                    $('#denominacionSoatEdit').val(response[0]['clase_denominacion_soat']);
                    $('#numSoatEdit').val(response[0]['numero_soat']);
                    $('#fechaSoatEdit').val(response[0]['fecha_soat']);
                    $('#vegenciaSoatEdit').val(response[0]['vigencia_soat']);
                    $('#estadoSoatEdit').val(response[0]['estado_soat']);
                    // Actualiza otros campos según los datos recibidos
                }
            });
        });
    });
</script>

@stop