@extends('layouts.app')
<br>
<br>
<br>
<br>
@section('content')
<style>
    .table-responsive { margin-top: 20px; }
    .modal-body .form-label { font-weight: bold; }
    .alert-dismissible { position: fixed; top: 20px; right: 20px; z-index: 1050; }
</style>
<section>

    <div class="container-fluid">
        <div class="card shadow-sm">
            <div class="card-body">
                <h1 class="card-title text-center mb-4 fw-bold">Gestión de Instituciones</h1>
                <button class="btn btn-dark mb-3" data-bs-toggle="modal" data-bs-target="#institucionModal" id="create-btn">
                    <i class="fas fa-plus"></i> Nueva Institución
                </button>
                <hr>
                <div class="table-responsive">
                    <table id="instituciones-table" class="table table-striped table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>Nombre</th>
                                <th>Tipo</th>
                                <th>Nómina</th>
                                <th>Planta</th>
                                <th>Acrónimo</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <div class="modal fade" id="institucionModal" tabindex="-1" aria-labelledby="institucionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="institucionModalLabel">Nueva Institución</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="institucionForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="id" id="institucion_id">
                        <div class="mb-3">
                            <label for="nombre" class="form-label">Nombre <span class="text-danger">*</span></label>
                            <input type="text" name="nombre" id="nombre" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label for="tipo" class="form-label">Tipo</label>
                            <select name="tipo" id="tipo" class="form-control">
                                <option value="REGIONAL">REGIONAL</option>
                                <option value="NACIONAL">NACIONAL</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="nomina" class="form-label">Nómina</label>
                            <input type="number" name="nomina" id="nomina" class="form-control" min="0">
                        </div>
                        <div class="mb-3">
                            <label for="planta" class="form-label">Planta</label>
                            <select name="planta" id="planta" class="form-select">
                                <option value="1">Sí</option>
                                <option value="0" selected>No</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="acronimo" class="form-label">Acrónimo</label>
                            <input type="text" name="acronimo" id="acronimo" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirmar Eliminación</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ¿Estás seguro de que deseas eliminar esta institución?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="button" class="btn btn-danger" id="confirm-delete">
                        <i class="fas fa-trash"></i> Eliminar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
</section>
@endsection
@section('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function () {
    // Initialize DataTables
    const table = $('#instituciones-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("instituciones.data") }}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'nombre', name: 'nombre' },
            { data: 'tipo', name: 'tipo', defaultContent: 'N/A' },
            { data: 'nomina', name: 'nomina', defaultContent: 'N/A' },
            { data: 'planta', name: 'planta' },
            { data: 'acronimo', name: 'acronimo', defaultContent: 'N/A' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        language: {
            url: '{{ asset("electoral/public/assets/js/datatables/es-ES.json") }}'
        }
    });

    // Reset modal form
    function resetForm() {
        $('#institucionForm')[0].reset();
        $('#institucion_id').val('');
        $('#institucionModalLabel').text('Nueva Institución');
        $('#institucionForm').find('.is-invalid').removeClass('is-invalid');
        $('#institucionForm').find('.invalid-feedback').remove();
    }

    // Show create modal
    $('#create-btn').click(function () {
        resetForm();
        $('#institucionModal').modal('show');
    });

    // Handle edit button
    $(document).on('click', '.edit-btn', function () {
        const id = $(this).data('id');
        $.ajax({
            url: '{{ route("instituciones.edit", ":id") }}'.replace(':id', id),
            method: 'GET',
            success: function (data) {
                resetForm();
                $('#institucion_id').val(data.id);
                $('#nombre').val(data.nombre);
                $('#tipo').val(data.tipo);
                $('#nomina').val(data.nomina);
                $('#planta').val(data.planta ? '1' : '0');
                $('#acronimo').val(data.acronimo);
                $('#institucionModalLabel').text('Editar Institución');
                $('#institucionModal').modal('show');
            },
            error: function (xhr) {
                showAlert('danger', xhr.responseJSON?.error || 'Error al cargar la institución.');
            }
        });
    });

    // Handle form submission
    $('#institucionForm').submit(function (e) {
        e.preventDefault();
        const id = $('#institucion_id').val();
        const url = id ? '{{ url("instituciones") }}/' + id : '{{ route("instituciones.store") }}';
        const method = id ? 'PUT' : 'POST';
        const data = $(this).serializeArray();
        if (method === 'PUT') {
            data.push({ name: '_method', value: 'PUT' });
        }

        $.ajax({
            url: url,
            method: 'POST',
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                $('#institucionModal').modal('hide');
                table.ajax.reload();
                showAlert('success', response.success);
            },
            error: function (xhr) {
                const errors = xhr.responseJSON?.errors;
                if (errors) {
                    $.each(errors, function (key, messages) {
                        const input = $('#' + key);
                        input.addClass('is-invalid');
                        input.after('<div class="invalid-feedback">' + messages[0] + '</div>');
                    });
                } else {
                    showAlert('danger', xhr.responseJSON?.error || 'Error al guardar la institución.');
                }
            }
        });
    });

    // Handle delete button
    let deleteId;
    $(document).on('click', '.delete-btn', function () {
        deleteId = $(this).data('id');
        $('#deleteModal').modal('show');
    });

    // Confirm delete
    $('#confirm-delete').click(function () {
        $.ajax({
            url: '{{ url("instituciones") }}/' + deleteId,
            method: 'POST',
            data: {
                _method: 'DELETE',
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                $('#deleteModal').modal('hide');
                table.ajax.reload();
                showAlert('success', response.success);
            },
            error: function (xhr) {
                $('#deleteModal').modal('hide');
                showAlert('danger', xhr.responseJSON?.error || 'Error al eliminar la institución.');
            }
        });
    });

    // Show alert
    function showAlert(type, message) {
        const alert = `<div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>`;
        $('body').append(alert);
        setTimeout(() => $('.alert').alert('close'), 5000);
    }
});
</script>

@endsection