@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="OFICINAS" 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_oficinas" 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>TIPO DE ÁREA</th>
                                        <th>DESCRIPCIÓN</th>
                                        <th>AÑO</th>
                                        <th>ACCIONES</th>
                                    </tr>
                                </thead>
                                @empty($oficinas)
                                    <tr>
                                        <td colspan="10" class="text-center">No hay oficinas registrados</td>
                                    </tr>
                                @else
                                <tbody>
                                    @php
                                        $contador = 1;
                                    @endphp
                                    @foreach ($oficinas as $oficina)
                                        <tr>
                                            <td>{{ $contador }}</td>
                                            <td>{{ $oficina->tipo_oficina }}</td>
                                            <td>{{ $oficina->nombre_oficina }}</td>
                                            <td>{{ $oficina->anio_oficina }}</td>
                                            <td class="btn-container">
                                                <button class="btn btn-warning btnEdit" name="btnEdit" title="EDITAR" id="btnEdit" data-id="{{ $oficina->id }}" data-toggle="modal" data-target="#oficinaEdit">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <form action="{{ url('config/oficinas/destroy',$oficina->id) }}" id="delete-form-{{ $oficina->id }}" method="POST" style="display: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                                <button class="btn btn-danger" type="button" title="ELIMINAR" onclick="confirmDelete({{ $oficina->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.oficinas.modalCreate')
@include('administracion.configuraciones.oficinas.modalEdit')

@section('css')
@stop

@section('js')

<script>

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

            // Hacer una solicitud AJAX para obtener los datos del vehículo
            $.ajax({
                url: 'config/oficinas/'+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['nombre_oficina']);
                    console.log(response.nombre_oficina);

                    $('#nombreOfEdit').val(response.nombre_oficina);
                    $('#tipoOfEdit').val(response['tipo_oficina']);
                    $('#anioOfEdit').val(response['anio_oficina']);
                    
                }
            });
        });
    });

    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();
            }
        })
    }

</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