@extends('layouts.app')

@section('content')
<!-- Modal Formulario -->
<div class="modal fade" id="modal-form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Entidad</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-entidad">
                    <div class="mb-3">
                        <label for="nombre_entidad" class="col-form-label">Nombre de la Entidad:</label>
                        <input type="text" class="form-control" id="nombre_entidad" name="nombre_entidad">
                    </div>
                    <div class="mb-3">
                        <label for="nombre_encargado" class="col-form-label">Nombre del Encargado:</label>
                        <input type="text" class="form-control" id="nombre_encargado" name="nombre_encargado">
                    </div>
                    <div class="mb-3">
                        <label for="cedula" class="col-form-label">Cédula:</label>
                        <input type="text" class="form-control" id="cedula" name="cedula">
                    </div>
                    <div class="mb-3">
                        <label for="cargo" class="col-form-label">Cargo:</label>
                        <input type="text" class="form-control" id="cargo" name="cargo">
                    </div>
                    <div class="mb-3">
                        <label for="numero_tlf" class="col-form-label">Número de Teléfono:</label>
                        <input type="text" class="form-control" id="numero_tlf" name="numero_tlf">
                    </div>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!-- ALERT -->
        <div class="alert au-alert-success alert-dismissible fade show au-alert au-alert--70per m-b-40" role="alert" id="alert">
            <i class="zmdi zmdi-check-circle"></i>
            <span class="content" id="alert-content">Operación realizada exitosamente.</span>
            <button class="close" type="button" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                    <i class="zmdi zmdi-close-circle"></i>
                </span>
            </button>
        </div>
        <!-- END ALERT -->
        <hr>
        <button class="btn btn-dark btn-lg" data-bs-toggle="modal" data-bs-target="#modal-form">
            <i class="fas fa-plus"></i> 
            Registrar Entidad
        </button>
        <hr>
        <!-- DATA TABLE -->
        <div class="table-responsive m-b-40 m-t-40">
            <table class="table table-borderless table-data3">
                <thead>
                    <tr class="text-center">
                        <th>Nombre Entidad</th>
                        <th>Nombre Encargado</th>
                        <th>Cédula</th>
                        <th>Cargo</th>
                        <th>Teléfono</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <!-- END DATA TABLE -->
    </div>
</div>
@endsection

@section('scripts')
<script>
    var id_entidad = 0;
    $('.responsive-table').hide();
    $('#alert').hide();
    $('#preloader').show();

    index();

    function index() {
        $('table').DataTable().destroy();
        $('table').DataTable({
            responsive: true,
            language: {
                url: '{{ asset("json/es-ES.json") }}',
            },
            processing: true,
            serverSide: false,
            ajax: {
                url: '/api/entidades',
                type: 'GET',
                dataSrc: function(json) {
                    $('#preloader').hide();
                    $('.responsive-table').fadeIn();
                    return json;
                }
            },
            columns: [
                { data: 'nombre_entidad' },
                { data: 'nombre_encargado' },
                { data: 'cedula' },
                { data: 'cargo' },
                { data: 'numero_tlf' },
                { data: null, orderable: false, searchable: false }
            ],
            columnDefs: [
                {
                    targets: -1,
                    render: function(data, type, row) {
                        return `
                            <button class="btn btn-dark btn-sm ver" data-id="${row.id}">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-dark btn-sm editar" data-id="${row.id}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-danger btn-sm eliminar" data-id="${row.id}">
                                <i class="fas fa-trash"></i>
                            </button>
                        `;
                    }
                }
            ],
            order: [[0, 'desc']],
        });
    }

    $(document).on('submit', '#form-entidad', function(e) {
        e.preventDefault();
        let form = new FormData(this);
        let url = id_entidad ? `/api/entidades/${id_entidad}` : '/api/entidades';
        let method = id_entidad ? 'PUT' : 'POST';

        if (id_entidad) {
            form.append('_method', 'PUT');
            method = 'POST'; // Laravel requires POST for PUT due to form spoofing
        }

        fetch(url, {
            method: method,
            body: form
        })
        .then(response => response.json())
        .then(data => {
            $('#modal-form').modal('hide');
            $('#form-entidad').trigger('reset');
            $('#alert-content').text(data.message);
            $('#alert').fadeIn();
            id_entidad = 0;
            index();
        })
        .catch(error => {
            console.error(error);
            $('#alert-content').text('Error al procesar la solicitud');
            $('#alert').removeClass('au-alert-success').addClass('au-alert-danger').fadeIn();
        });
    });

    $(document).on('click', '.editar', function() {
        let id = $(this).data('id');
        fetch(`/api/entidades/${id}`)
        .then(response => response.json())
        .then(data => {
            id_entidad = data.id;
            $('#modal-form').modal('show');
            $('#nombre_entidad').val(data.nombre_entidad);
            $('#nombre_encargado').val(data.nombre_encargado);
            $('#cedula').val(data.cedula);
            $('#cargo').val(data.cargo);
            $('#numero_tlf').val(data.numero_tlf);
        })
        .catch(error => console.error(error));
    });

    $(document).on('click', '.eliminar', function() {
        let id = $(this).data('id');
        if (confirm('¿Estás seguro de eliminar la entidad?')) {
            fetch(`/api/entidades/${id}`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                $('#alert-content').text(data.message);
                $('#alert').fadeIn();
                index();
            })
            .catch(error => console.error(error));
        }
    });

    $(document).on('hidden.bs.modal', '#modal-form', function () {
        $('#form-entidad').trigger('reset');
        id_entidad = 0;
    });
</script>
@endsection