@extends('personals.layout')

@section('personal.m_header')
    <!-- DataTables -->
    <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <link rel="stylesheet" href="/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
@endsection

@section('personal.breadcrumbs')
    <!-- Content Header (personal breadcrumbs) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Unidad: {{ $unidad->unidad }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right"></ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('personal.content')
    <div class="pt-3">
        <!-- Sección de Grupos -->
        <h4 class="mb-2"><strong>Grupos</strong></h4>
<div class="row">
    @foreach([1, 2, 3, 4] as $index)
        <div class="col-md-3 col-sm-6 col-12">
            <div class="info-box">
                <a href="/unidad/{{ $unidad->id }}/grupo/{{ $index }}">
                    <span class="info-box-icon {{ ['bg-primary', 'bg-success', 'bg-info', 'bg-teal'][$index - 1] }}">
                        {{ $index }}
                    </span>
                </a>
                <div class="info-box-content">
                    <span class="info-box-text">Integrantes:</span>
                    <span class="info-box-number fs-4">{{ $grupos[$index - 1] }}</span>
                </div>
            </div>
        </div>
    @endforeach
</div>

        <!-- Sección de Estadísticas -->
        <div class="row">
            <!-- Tabla de Disponibilidad -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body p-0">
                        <table class="table fs-5 mb-0">
                            <tbody>
                                <tr>
                                    <td style="width: 14rem;">Disponibles</td>
                                    <td style="width: 16rem;">
                                        <div class="progress">
                                            <div class="progress-bar {{ $disponibilidad ? 'bg-success' : 'bg-danger' }}" 
                                                 style="width: {{ $stats['disponible'][0] }}%"></div>
                                        </div>
                                    </td>
                                    <td><span class="badge {{ $disponibilidad ? 'bg-success' : 'bg-danger' }} fs-5">{{ $stats['disponible'][0] }}%</span></td>
                                </tr>
                                <tr>
                                    <td>Unidad de origen</td>
                                    <td>
                                        <div class="progress">
                                            <div class="progress-bar bg-primary" style="width: {{ $stats['unidadorigen'][0] }}%"></div>
                                        </div>
                                    </td>
                                    <td><span class="badge bg-primary fs-5">{{ $stats['unidadorigen'][0] }}%</span></td>
                                </tr>
                                <tr>
                                    <td>Alertas SIIPNE</td>
                                    <td>
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar bg-warning" style="width: {{ $stats['alertasiipne'][0] }}%; height:10px;"></div>
                                        </div>
                                    </td>
                                    <td><span class="badge bg-warning fs-5">{{ $stats['alertasiipne'][0] }}%</span></td>
                                </tr>
                                <tr>
                                    <td>Despacho</td>
                                    <td>
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar bg-success" style="width: {{ $stats['despacho'][0] }}%"></div>
                                        </div>
                                    </td>
                                    <td><span class="badge bg-success fs-5">{{ $stats['despacho'][0] }}%</span></td>
                                </tr>
                                <tr>
                                    <td>Sin Considerar</td>
                                    <td>
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar bg-success" style="width: {{ $stats['noconsiderado'][0] }}%"></div>
                                        </div>
                                    </td>
                                    <td><span class="badge bg-success fs-5">{{ $stats['noconsiderado'][0] }}%</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Card de Totales -->
            <div class="col-md-6">
                <div class="card card-widget widget-user">
                    <div class="widget-user-header {{ $disponibilidad ? 'bg-success' : 'bg-danger' }}" style="height: 4rem;">
                        <h5 class="widget-user-desc">Totales</h5>
                    </div>
                    <div class="card-footer pt-3">
                        <div class="row">
                            <div class="col-sm-4 border-right">
                                <div class="description-block">
                                    <h5 class="description-header">{{ $stats['total'] }}</h5>
                                    <span class="description-text">Personal Total</span>
                                </div>
                            </div>
                            <div class="col-sm-4 border-right">
                                <div class="description-block">
                                    <h5 class="description-header">{{ $stats['disponible'][1] }}</h5>
                                    <span class="description-text">Disponible</span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="description-block">
                                    <h5 class="description-header">{{ $stats['unidadorigen'][1] }}</h5>
                                    <span class="description-text">Und. Origen</span>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col">
                                @if($disponibilidad)
                                    <div class="callout callout-success">
                                        <h5>¡Ha completado las observaciones con éxito!</h5>
                                        <p>Los grupos han alcanzado el requerimiento de disponibilidad.</p>
                                    </div>
                                @else
                                    <div class="callout callout-danger">
                                        <h5>Por favor Actualice los grupos</h5>
                                        <p>La cantidad de personal Disponible debe ser Mayor al 80% y la suma del personal en Unidad de origen y Alertas Siipne no deben ser mayor al 20% del total del personal de la unidad. Por favor reorganice los grupos.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabla de Personal -->
        <div class="card mt-4">
            <div class="card-header d-flex p-0">
                <h3 class="card-title p-3"><strong>Seleccione el personal de cada grupo</strong></h3>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-hover" id="unidad-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Cedula: </th>
                            <th>Grupo: </th>
                            <th>Grado: </th>
                            <th>Nombre: </th>
                            <th>Cargo: </th>
                            <th>Sexo: </th>
                            <th>Tipo: </th>
                            <th>Sector: </th>
                            <th>Novedad: </th>
                            <th>Designacion: </th>
                            <th>Funcion: </th>
                            <th>Posee Discapacidad: </th>
                            <th>Describa Discapacidad: </th>
                            <th>Posee Enfermedad Catastrofica: </th>
                            <th>Describa Enfermedad Catastrofica: </th>
                            <th>Sector vive (direccion): </th>
                            <th>Oficio: </th>
                            <th>Detalle Oficio: </th>
                            <th>Observaciones: </th>
                            <th>Fecha Inicio: </th>
                            <th>Fecha Fin: </th>
                            <th>Cargo Asignado: </th>
                            <th>Celular: </th>
                            <th>Salió: </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal de Edición de Personal -->
    <div class="modal fade" id="personal-single-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="nombre"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="form-personal" method="POST" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="id" id="id">

                        <div class="form-group">
                            @if(Auth::user()->id == 1)
                                <div class="mb-3">
                                    <label for="grupo" class="form-label">Grupo:</label>
                                    <select name="grupo" id="grupo" class="form-control form-select" required>
                                        <option value="">Seleccione Grupo</option>
                                        @foreach(['1', '2', '3', '4'] as $value)
                                            <option value="{{ $value }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif

                            <div class="mb-3">
                                <label for="novedad_id" class="form-label">Novedad:</label>
                                <select name="novedad_id" id="novedad_id" class="form-control form-select">
                                    <option value="">Seleccione Novedad</option>
                                    @foreach($novedades as $novedad)
                                        <option value="{{ $novedad->id }}">{{ $novedad->novedad }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="posee_discapacidad" class="form-label">Posee Discapacidad:</label>
                                <select name="posee_discapacidad" id="posee_discapacidad" class="form-control form-select">
                                    <option value="">Seleccione</option>
                                    <option value="Si">Si</option>
                                    <option value="No">No</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="describa_discapacidad" class="form-label">Describa Discapacidad:</label>
                                <input type="text" name="describa_discapacidad" id="describa_discapacidad" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="posee_enfermedad_catastrofica" class="form-label">Posee Enfermedad Catastrofica:</label>
                                <select name="posee_enfermedad_catastrofica" id="posee_enfermedad_catastrofica" class="form-control form-select">
                                    <option value="">Seleccione</option>
                                    <option value="Si">Si</option>
                                    <option value="No">No</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="describa_enfermedad_catastrofica" class="form-label">Describa Enfermedad Catastrofica:</label>
                                <input type="text" name="describa_enfermedad_catastrofica" id="describa_enfermedad_catastrofica" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="direccion" class="form-label">Sector:</label>
                                <select name="direccion" id="direccion" class="form-control form-select">
                                    <option value="">Seleccione Sector</option>
                                    @foreach(['NORTE' => 'Norte', 'SUR' => 'Sur', 'CENTRO' => 'Centro', 'VALLE LOS CHILLOS' => 'Valle Los Chillos', 'VALLE DE TUMBACO' => 'Valle de Tumbaco'] as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="oficio" class="form-label">Tipo Documento:</label>
                                <select name="oficio" id="oficio" class="form-control form-select">
                                    <option value="">Seleccione Tipo</option>
                                    @foreach(['MEMO' => 'Memo', 'OFICIO' => 'Oficio', 'TELEGRAMA' => 'Telegrama', 'DELEGACION' => 'Delegacion'] as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="detalle_oficio" class="form-label">Detalle Documento:</label>
                                <textarea name="detalle_oficio" id="detalle_oficio" class="form-control" rows="3"></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="documento" class="form-label">Link del Documento:</label>
                                <input type="text" name="documento" id="documento" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="observaciones" class="form-label">Observaciones:</label>
                                <textarea name="observaciones" id="observaciones" class="form-control" rows="3"></textarea>
                            </div>

                            <div class="mb-3">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio:</label>
                                <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="fecha_fin" class="form-label">Fecha Fin:</label>
                                <input type="date" name="fecha_fin" id="fecha_fin" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="departamento" class="form-label">Departamento:</label>
                                <input type="text" name="departamento" id="departamento" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="cargo_asignado" class="form-label">Cargo Asignado:</label>
                                <input type="text" name="cargo_asignado" id="cargo_asignado" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="celular" class="form-label">Celular:</label>
                                <input type="text" name="celular" id="celular" class="form-control">
                            </div>

                            <div class="mb-3">
                                <label for="libre" class="form-label">Libre:</label>
                                <select name="libre" id="libre" class="form-control form-select">
                                    <option value="">Seleccione</option>
                                    <option value="NAVIDAD">NAVIDAD</option>
                                    <option value="FIN DE AÑO">FIN DE AÑO</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary" id="btn-submit">Actualizar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('personal.scripts')
    <!-- DataTables & Plugins -->
    <script src="/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="/plugins/jszip/jszip.min.js"></script>
    <script src="/plugins/pdfmake/pdfmake.min.js"></script>
    <script src="/plugins/pdfmake/vfs_fonts.js"></script>
    <script src="/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="/plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

    <script>
        // ========================================
        // CONFIGURACIÓN GLOBAL
        // ========================================
        const myModalEl = document.getElementById('personal-single-modal');
        const myModal = new bootstrap.Modal(myModalEl, { keyboard: false });
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const formPersonal = document.getElementById('form-personal');
        const btnSubmit = document.getElementById('btn-submit');

        // ========================================
        // INICIALIZACIÓN DE DATATABLE
        // ========================================
       $(function () {
    const table = $('#unidad-table').DataTable({
        responsive: true,
        lengthChange: false,
        autoWidth: false,
        searching: true,
        paging: false,
        order: [[0, 'asc']],
        ajax: '/unidad/data/{{ $unidad->id }}',
        deferRender: true,
        processing: true,
        destroy: true,
        buttons: ['excel', 'pdf', 'print', 'colvis'],
        columns: [
            { data: null },                                 // índice
            { data: 'cedula' },                             // cedula (renderizado en columnDefs)
            { data: 'grupo' },
            { data: 'grado' },
            { data: 'nombre' },
            { data: 'cargo' },
            { data: 'sexo' },
            { data: 'tipo' },
            { data: 'direccion' },
            { data: 'novedad' },                            // novedad (renderizado en columnDefs)
            { data: 'designacion' },
            { data: 'funcion' },
            { data: 'posee_discapacidad' },
            { data: 'describa_discapacidad' },
            { data: 'posee_enfermedad_catastrofica' },
            { data: 'describa_enfermedad_catastrofica' },
            { data: 'sector_vive' },
            { data: 'oficio' },
            { data: 'detalle_oficio' },
            { data: 'observaciones' },
            { data: 'fecha_inicio' },
            { data: 'fecha_fin' },
            { data: 'cargo_asignado' },
            { data: 'celular' },
            { data: 'libre' }
        ],
        columnDefs: [
            // Índice
            {
                targets: 0,
                render: function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            // Cédula
            {
                targets: 1,
                render: function (data, type, row, meta) {
                    // Validar si permiso_vencido es true
                    const isExpired = row.permiso_vencido === true || row.permiso_vencido === 1;
                    const style = isExpired ? 'color: red; font-weight: bold;' : '';

                    return '<a href="#" class="cedula-link" data-cedula="' + escapeHtml(data) + '" style="' + style + '">' + escapeHtml(data) + '</a>';
                }
            },
            // Novedad
            {
                targets: 9,
                render: function (data, type, row, meta) {
                    if (row.novedad && row.novedad.novedad) {
                        // Validar si permiso_vencido es true
                        const isExpired = row.permiso_vencido === true || row.permiso_vencido === 1;
                        const style = isExpired ? 'color: red; font-weight: bold;' : '';

                        if (row.documento) {
                            return '<a href="' + escapeHtml(row.documento) + '" target="_blank" rel="noopener noreferrer" style="' + style + '">' + escapeHtml(row.novedad.novedad) + ' (Link Doc.)</a>';
                        }

                        return '<span style="' + style + '">' + escapeHtml(row.novedad.novedad) + '</span>';
                    }

                    return 'No disponible';
                }
            }
        ]
    });

    table.buttons().container().appendTo('#unidad-table_wrapper .col-sm-12:eq(0)');
});

        // ========================================
        // FUNCIONES AUXILIARES
        // ========================================

        /**
         * Escapa caracteres especiales de HTML para prevenir XSS
         */
        function escapeHtml(text) {
            if (!text) return '';
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.toString().replace(/[&<>"']/g, m => map[m]);
        }

        /**
         * Obtiene datos del personal y muestra el modal
         */
        async function updatePersonal(ced) {
            try {
                const res = await fetch('/personal/get/' + encodeURIComponent(ced), {
                    headers: { 'Accept': 'application/json' }
                });

                if (!res.ok) {
                    throw new Error('Error al obtener datos: ' + res.status);
                }

                const data = await res.json();
                populateForm(data);
                myModal.show();
            } catch (err) {
                console.error('Error en updatePersonal:', err);
                alert('Error al cargar datos del personal. Revise la consola.');
            }
        }

        /**
         * Rellena el formulario con datos del personal
         * Soporta: input, select, textarea, checkbox, radio
         */
        function populateForm(data) {
            for (const key in data) {
                if (!Object.prototype.hasOwnProperty.call(data, key)) continue;

                const el = document.getElementById(key);
                if (!el) continue;

                const value = data[key] === null ? '' : data[key];

                if (el.tagName === 'INPUT') {
                    const type = el.type.toLowerCase();
                    if (type === 'checkbox') {
                        el.checked = !!value;
                    } else if (type === 'radio') {
                        const radios = document.querySelectorAll('input[name="' + el.name + '"]');
                        radios.forEach(r => r.checked = (r.value == value));
                    } else {
                        el.value = value;
                    }
                } else if (el.tagName === 'SELECT' || el.tagName === 'TEXTAREA') {
                    el.value = value;
                } else {
                    // Para elementos de texto (h4, span, div, etc)
                    el.textContent = value;
                }
            }
        }

        /**
         * Serializa un formulario a objeto JSON
         */
        function serializeFormToObject(formElement) {
            const formData = new FormData(formElement);
            const obj = {};

            for (const [key, val] of formData.entries()) {
                if (obj.hasOwnProperty(key)) {
                    if (!Array.isArray(obj[key])) obj[key] = [obj[key]];
                    obj[key].push(val);
                } else {
                    obj[key] = val;
                }
            }

            return obj;
        }

        /**
         * Muestra un mensaje de éxito o error
         */
        function showNotification(message, type = 'success') {
            console.log(`[${type.toUpperCase()}] ${message}`);
        }

        // ========================================
        // DELEGACIÓN DE EVENTOS
        // ========================================

        /**
         * Maneja click en enlaces de cédula
         */
        document.addEventListener('click', function (e) {
            const target = e.target;
            if (target && target.matches('.cedula-link')) {
                e.preventDefault();
                const ced = target.dataset.cedula;
                if (ced) {
                    updatePersonal(ced);
                }
            }
        });

        // ========================================
        // SUBMIT DEL FORMULARIO
        // ========================================
        formPersonal.addEventListener('submit', async function (e) {
            e.preventDefault();

            try {
                btnSubmit.disabled = true;
                const originalBtnText = btnSubmit.innerHTML;
                btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Actualizando...';

                const datos = serializeFormToObject(formPersonal);
                const idpersonal = datos.id || document.getElementById('id').value;

                if (!idpersonal) {
                    throw new Error('ID de personal no encontrado');
                }

                const res = await fetch('/unidad/personal/' + encodeURIComponent(idpersonal), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify(datos)
                });

                if (!res.ok) {
                    const errorData = await res.json().catch(() => ({}));
                    const errorMsg = errorData.message || 'Error en la respuesta del servidor';
                    throw new Error(errorMsg);
                }

                const response = await res.json();
                showNotification('Personal actualizado correctamente', 'success');

                // Cerrar modal y recargar
                myModal.hide();
                setTimeout(() => {
                    window.location.reload();
                }, 500);

            } catch (err) {
                console.error('Error en submit:', err);
                showNotification('Error: ' + (err.message || 'Intente nuevamente'), 'error');
                alert('Error al actualizar: ' + (err.message || 'Ver consola'));
            } finally {
                btnSubmit.disabled = false;
                btnSubmit.innerHTML = originalBtnText;
            }
        });

        // ========================================
        // EVENTO: CIERRE DEL MODAL
        // ========================================
        myModalEl.addEventListener('hidden.bs.modal', function () {
            formPersonal.reset();
            // Limpiar campos de texto
            document.getElementById('nombre').textContent = '';
        });
    </script>
@endsection