@extends('adminlte::page')

@section('title', 'CONFIGRUACIÓN')

@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="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="config_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>MARCA</th>
                                        <th>MODELO</th>
                                        <th>DENOMINACIÓN</th>
                                        <th>ACCIONES</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->marca_modelo }}</td>
                                            <td>{{ $vehiculo->nombre_modelo }}</td>
                                            <td>{{ $vehiculo->clase_denominacion_modelo }}</td>
                                            <td class="btn-container">
                                                <button class="btn btn-warning btnEdit" name="btnEdit" title="EDITAR" id="btnEdit" data-id="{{ $vehiculo->id }}" data-toggle="modal" data-target="#vehiculoEdit">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <form action="{{ url('config/modelos/destroy',$vehiculo->id) }}" id="delete-form-{{ $vehiculo->id }}" method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                                <button class="btn btn-danger" type="button" title="ELIMINAR" onclick="confirmDelete({{ $vehiculo->id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @php
                                            $contador++;
                                        @endphp
                                    @endforeach
                                </tbody>
                                @endempty
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-adminlte-card>
@stop
@include('administracion.configuraciones.vehiculos.modalCreate')
@include('administracion.configuraciones.vehiculos.modalEdit')


@section('css')
@stop

@section('js')

<script>
    document.getElementById('switchToInput').addEventListener('click', function(e) {
        e.preventDefault();

        var select = document.getElementById('marca');
        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 = 'marca';
        input.id = 'marca';
        input.required = true;
        input.className = 'form-control';
        input.placeholder = 'Ingrese la marca';

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

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

            // Hacer una solicitud AJAX para obtener los datos del vehículo
            $.ajax({
                url: 'config/modelos/'+idUser+'/edit',
                method: 'GET', 
                success: function(response) {

                    // Actualizar la acción del formulario del modal
                    $('#formEdit').attr('action', url);
                    $('#formEdit').find('input[name="_method"]').val('POST'); // Asegúrate de que el método sea PUT
                    // Actualizar el formulario del modal con los datos recibidos
                    
                    /* console.log(response);
                    console.log(response['marca_modelo']);
                    console.log(response.marca_modelo); */

                    $('#marcaEdit').val(response.marca_id);
                    $('#modeloEdit').val(response['nombre_modelo']);
                    $('#denominacionEdit').val(response['clase_denominacion_modelo']);
                    
                }
            });
        });
    });

    function confirmDelete(id) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "No podrás revertir esta acción",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminarlo',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        })
    }

    
    /* document.querySelector(".formDeleteModelo").addEventListener("submit", function(event) {
        event.preventDefault(); 
        const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
            confirmButton: "btn btn-success mx-2",
            cancelButton: "btn btn-danger"
        },
        buttonsStyling: false
        });
        swalWithBootstrapButtons.fire({
        title: "¿Estás seguro?",
        text: "Esta acción no se podra revertir!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Si, Eliminar!",
        cancelButtonText: "No, Cancelar!",
        reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('formDeleteModelo').submit();
                    swal.fire({
                    title: "Eliminado!",
                    text: "Tu registro ha sido eliminado.",
                    icon: "success"
                }).then(() => {
                    window.history.back();
                });
            } else if (result.dismiss === Swal.DismissReason.cancel) 
            {
                swalWithBootstrapButtons.fire({
                title: "Cancelado",
                text: "Tu registro esta a salvo :)",
                icon: "error"
                });
            }
        });
    }); */
</script>


@if(session('success'))
    <script>
        Swal.fire({
            icon: 'success',
            title: '¡Éxito!',
            text: '{{ session('success') }}',
        });
    </script>
@endif

@if(session('error'))
    <script>
        Swal.fire({
            icon: 'error',
            title: '¡Error!',
            text: '{{ session('error') }}',
        });
    </script>
@endif

@stop