@extends('layouts.app')

@section('content')
    @php
        // Datos de prueba con vacunas y documentación adicional
        $students = [
            [
                'id' => 1,
                'name' => 'María Isidora González López',
                'rut' => '12.345.678-9',
                'program' => 'Medicina',
                'vaccines' => [
                    'hepb' => [
                        'id' => 1001,
                        'title' => 'Vacuna Hepatitis B',
                        'status' => 'uploaded',
                        'date' => '2024-05-10',
                        'preview' => 'Carnet: 1 dosis',
                        'url' => '/storage/vacunas/hepb_1001.pdf',
                    ],
                    'covid' => [
                        'id' => 1002,
                        'title' => 'Vacuna COVID',
                        'status' => 'expired',
                        'date' => '2021-08-20',
                        'preview' => '2 dosis. Vencida para refuerzo.',
                        'url' => '/storage/vacunas/covid_1002.pdf',
                    ],
                    'influenza' => null,
                ],
                'additional_docs' => [
                    [
                        'id' => 101,
                        'title' => 'Consentimiento informado',
                        'type' => 'PDF',
                        'size' => '75 KB',
                        'uploaded_at' => '2025-04-02',
                        'preview' => 'Consentimiento firmado por paciente.',
                        'url' => '/storage/docs/consent_102.pdf',
                    ],
                ],
            ],
            [
                'id' => 2,
                'name' => 'Juan Ricardo Pérez Ramírez',
                'rut' => '9.876.543-2',
                'program' => 'Enfermería',
                'vaccines' => [
                    'hepb' => null,
                    'covid' => [
                        'id' => 2001,
                        'title' => 'Vacuna COVID',
                        'status' => 'uploaded',
                        'date' => '2023-11-12',
                        'preview' => 'Dosis completa 2023.',
                        'url' => '/storage/vacunas/covid_2001.pdf',
                    ],
                    'influenza' => [
                        'id' => 2002,
                        'title' => 'Vacuna Influenza',
                        'status' => 'uploaded',
                        'date' => '2025-03-05',
                        'preview' => 'Vacuna temporada 2025.',
                        'url' => '/storage/vacunas/flu_2002.pdf',
                    ],
                ],
                'additional_docs' => [
                    [
                        'id' => 201,
                        'title' => 'Trabajo de práctica',
                        'type' => 'DOCX',
                        'size' => '1.2 MB',
                        'uploaded_at' => '2025-02-21',
                        'preview' => 'Informe de prácticas hospitalarias.',
                        'url' => '/storage/docs/practica_201.docx',
                    ],
                ],
            ],
            [
                'id' => 3,
                'name' => 'Julia Samira Soto Fernández',
                'rut' => '19.836.513-6',
                'program' => 'Tecnología Médica',
                'vaccines' => [
                    'hepb' => [
                        'id' => 3001,
                        'title' => 'Vacuna Hepatitis B',
                        'status' => 'expired',
                        'date' => '2019-07-01',
                        'preview' => 'Dosis hace años, vencida.',
                        'url' => '/storage/vacunas/hepb_3001.pdf',
                    ],
                    'covid' => null,
                    'influenza' => [
                        'id' => 3002,
                        'title' => 'Vacuna Influenza',
                        'status' => 'uploaded',
                        'date' => '2025-04-15',
                        'preview' => 'Vacuna vigente 2025.',
                        'url' => '/storage/vacunas/flu_3002.pdf',
                    ],
                ],
                'additional_docs' => [],
            ],
        ];

        // Extraer programas únicos para filtros
        $programs = [
            'Enfermería',
            'Fonoaudiología',
            'Kinesiología',
            'Medicina',
            'Nutrición y Dietética',
            'Obstetricia y Puericultura',
            'Tecnología Médica',
            'Terapia Ocupacional'
        ];
    @endphp

    <div class="container-fluid py-4" style="max-width:95%; margin:0 auto;">
        <div class="card mb-4">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <h2 class="card-title mb-1">Resumen de documentos y vacunas</h2>
                    <p class="card-text text-muted mb-2">Gestione vacunas y documentación adicional por estudiante.</p>
                </div>

                <div class="ms-3">
                    <select id="filterPeriod" class="form-select w-auto">
                        <option value="">-- Seleccione un Periodo --</option>
                        @for ($y = date('Y'); $y >= date('Y') - 5; $y--)
                            <option value="{{ $y }}">{{ $y }}</option>
                        @endfor
                    </select>
                </div>
            </div>
        </div>

        <!-- Filtros -->
        <div class="row mb-3 g-2 align-items-center">
            <div class="col-md-4">
                <input id="globalSearch" class="form-control" placeholder="Buscar (RUT, nombre, programa...)">
            </div>

            <div class="col-md-3">
                <select id="filterProgram" class="form-select">
                    <option value="">Todas las carreras</option>
                    @foreach ($programs as $p)
                        <option value="{{ $p }}">{{ $p }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <select id="pageLength" class="form-select">
                    <option value="5">5 por página</option>
                    <option value="10" selected>10 por página</option>
                    <option value="25">25 por página</option>
                </select>
            </div>

            <div class="col-md-3 text-end">
                <button id="clearFilters" class="btn btn-outline-secondary">Limpiar filtros</button>
            </div>
        </div>

        <!-- Tabla principal: una fila por estudiante -->
        <div class="card">
            <div class="card-body p-2">
                <div class="table-responsive">
                    <table id="studentsTable" class="table table-hover table-striped mb-3" style="width:100%">
                        <thead class="table-light">
                            <tr>
                                <th>Datos Estudiante</th>
                                <th>Carrera</th>
                                <th>Hepatitis B</th>
                                <th>COVID</th>
                                <th>Influenza</th>
                                <th>Documentación adicionales</th>
                                <th class="text-end">Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($students as $student)
                                <tr data-student-id="{{ $student['id'] }}" data-program="{{ $student['program'] }}">
                                    <td>
                                        <div class="small text-muted">{{ $student['rut'] }}</div>
                                        <div class="fw-semibold">{{ $student['name'] }}</div>
                                    </td>
                                    <td>{{ $student['program'] }}</td>

                                    <!-- Use el componente con clase adicional -->
                                    <td class="vaccine-cell">
                                        <x-vaccine-cell :vaccine="$student['vaccines']['hepb'] ?? null" />
                                    </td>
                                    <td class="vaccine-cell">
                                        <x-vaccine-cell :vaccine="$student['vaccines']['covid'] ?? null" />
                                    </td>
                                    <td class="vaccine-cell">
                                        <x-vaccine-cell :vaccine="$student['vaccines']['influenza'] ?? null" />
                                    </td>

                                    <td>
                                        <button class="btn btn-sm btn-primary btn-additional"
                                            data-student-id="{{ $student['id'] }}" data-bs-toggle="modal"
                                            data-bs-target="#additionalModal">
                                            Ver ({{ count($student['additional_docs']) }})
                                        </button>
                                    </td>

                                    <td class="text-end">
                                        <a href="#" class="btn btn-sm btn-primary me-1">Ver Ficha</a>
                                        <a href="#" class="btn btn-sm btn-warning me-1 text-white">Editar</a>
                                        <button class="btn btn-sm btn-danger btn-delete-student">Eliminar</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <small class="text-muted mt-2 d-block">Datos de prueba —
            {{ collect($students)->sum(function ($s) {return count($s['additional_docs']) + count(array_filter($s['vaccines']));}) }}
            ítems (vacunas + docs), {{ count($students) }} estudiantes.</small>
    </div>

    <!-- Modal de preview reutilizable -->
    <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Vista previa</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <h6 id="previewTitle" class="mb-2"></h6>
                    <div class="mb-2"><span id="previewType" class="badge bg-secondary"></span></div>
                    <div id="previewBody" class="border rounded p-3 bg-light" style="min-height:120px;"></div>
                </div>
                <div class="modal-footer">
                    <a id="previewDownload" class="btn btn-success" href="#" download>Descargar</a>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para documentación adicional -->
    <div class="modal fade" id="additionalModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Documentación adicional</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <table id="additionalDocsTable" class="table table-sm table-striped" style="width:100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Título</th>
                                <th>Tipo</th>
                                <th>Tamaño</th>
                                <th>Subido</th>
                                <th class="text-end">Acciones</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- DataTables CSS/JS (CDN) y script -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.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.addEventListener('DOMContentLoaded', function() {
            // Datos para uso en JS
            const studentsData = @json($students);

            // Inicializar DataTable principal
            const studentsTable = $('#studentsTable').DataTable({
                pageLength: parseInt($('#pageLength').val(), 10) || 10,
                lengthChange: true,
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
                },
                dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>><"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
                columnDefs: [{
                    orderable: false,
                    targets: [2, 3, 4, 5, 6],
                    className: 'text-center'
                }],
                drawCallback: function(settings) {
                    // Actualizar información personalizada si es necesario
                    const api = this.api();
                    const pageInfo = api.page.info();
                    console.log(`Página ${pageInfo.page + 1} de ${pageInfo.pages}`);
                }
            });

            // Búsqueda y filtros
            $('#globalSearch').on('input', function() {
                studentsTable.search(this.value).draw();
            });
            $('#filterProgram').on('change', function() {
                const val = this.value ? '^' + $.fn.dataTable.util.escapeRegex(this.value) + '$' : '';
                studentsTable.column(1).search(val, true, false).draw();
            });
            $('#pageLength').on('change', function() {
                studentsTable.page.len(parseInt(this.value, 10)).draw();
            });
            $('#clearFilters').on('click', function() {
                $('#globalSearch').val('');
                $('#filterProgram').val('');
                $('#pageLength').val('10');
                studentsTable.search('').columns().search('').page.len(10).draw();
            });

            // Eliminar estudiante (simulado)
            $('#studentsTable tbody').on('click', '.btn-delete-student', function() {
                const tr = $(this).closest('tr');
                if (confirm('Eliminar estudiante (simulado)?')) {
                    studentsTable.row(tr).remove().draw();
                }
            });

            // Preview modal population (evento Bootstrap nativo)
            const previewModalEl = document.getElementById('previewModal');
            previewModalEl.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const title = button ? button.getAttribute('data-title') || '' : '';
                const type = button ? button.getAttribute('data-type') || '' : '';
                const preview = button ? button.getAttribute('data-preview') || '' : '';
                const url = button ? button.getAttribute('data-url') || '#' : '#';
                document.getElementById('previewTitle').textContent = title;
                document.getElementById('previewType').textContent = type;
                document.getElementById('previewBody').textContent = preview;
                document.getElementById('previewDownload').setAttribute('href', url);
            });

            // Manejo modal documentación adicional
            let additionalTable = null;
            $('#additionalModal').on('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const studentId = parseInt(button.getAttribute('data-student-id'), 10);
                const student = studentsData.find(s => s.id === studentId) || {
                    additional_docs: [],
                    name: ''
                };

                // poblar tbody
                const tbody = $('#additionalDocsTable tbody').empty();
                student.additional_docs.forEach(d => {
                    tbody.append('<tr>' +
                        '<td>' + d.id + '</td>' +
                        '<td>' + $('<div>').text(d.title).html() + '</td>' +
                        '<td>' + (d.type || '') + '</td>' +
                        '<td>' + (d.size || '') + '</td>' +
                        '<td>' + (d.uploaded_at || '') + '</td>' +
                        '<td class="text-end">' +
                        '<a class="btn btn-sm btn-primary me-1" href="' + d.url +
                        '" download>Descargar</a>' +
                        '<button class="btn btn-sm btn-outline-primary btn-view-doc" data-bs-toggle="modal" data-bs-target="#previewModal" data-title="' +
                        $('<div>').text(d.title).html() + '" data-type="' + (d.type || '') +
                        '" data-preview="' + $('<div>').text(d.preview || '').html() +
                        '" data-url="' + d.url + '">Ver</button>' +
                        '</td>' +
                        '</tr>');
                });

                // Inicializar DataTable (si ya existe, reiniciarla)
                if ($.fn.dataTable.isDataTable('#additionalDocsTable')) {
                    $('#additionalDocsTable').DataTable().clear().destroy();
                }
                additionalTable = $('#additionalDocsTable').DataTable({
                    paging: true,
                    pageLength: 5,
                    lengthChange: false,
                    language: {
                        url: "//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json"
                    },
                    columnDefs: [{
                        orderable: false,
                        targets: -1
                    }]
                });
            });

            // Al cerrar modal adicional destruir DataTable para evitar conflictos
            $('#additionalModal').on('hidden.bs.modal', function() {
                if ($.fn.dataTable.isDataTable('#additionalDocsTable')) {
                    $('#additionalDocsTable').DataTable().clear().destroy();
                }
                $('#additionalDocsTable tbody').empty();
            });

            // Actualizar (simulado) - delegación
            $('#studentsTable tbody').on('click', '.btn-update', function() {
                const docId = $(this).data('doc-id') || '';
                alert('Función actualizar documento (simulada). ID: ' + docId);
            });
        });
    </script>
    <style>
        .vaccine-cell {
            min-height: 120px;
            vertical-align: middle !important;
        }

        .vaccine-cell .btn-group {
            flex-wrap: nowrap;
        }

        /* Asegurar que las celdas tengan un tamaño consistente */
        #studentsTable td {
            vertical-align: middle;
            padding: 0.75rem;
        }

        /* Mejorar la visualización en móviles */
        @media (max-width: 768px) {
            .vaccine-cell .btn-group {
                flex-direction: column;
            }

            .vaccine-cell .btn-group .btn {
                margin-bottom: 0.25rem;
            }
        }
    </style>
@endsection