@extends('layouts.index', ['subHeader' => 'Sanofians'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('sanofians.index') }}" class="text-decoration-none text-dark"> / Sanofians</a>

    {{-- CSS para Select2 (necesario para los filtros) --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <style>
        .filter-header {
            position: relative;
            padding-right: 30px !important;
            min-width: 62px !important;
        }
        .filter-trigger {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            opacity: 0.5;
            transition: opacity 0.3s;
            font-size: 14px;
        }
        .filter-trigger:hover {
            opacity: 1;
            color: #0d6efd;
        }
        .filter-container {
            position: absolute;
            top: 100%;
            left: 0;
            width: 220px;
            background: white;
            z-index: 100;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            display: none;
        }
        .filter-active {
            color: #0d6efd !important;
            opacity: 1 !important;
        }
        .filter-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #495057;
        }
        .select2-container {
            width: 100% !important;
            margin-bottom: 10px;
        }
        .filter-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .filter-actions .btn-sm {
            font-size: 12px;
        }
        .th-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
@endsection

@section('js')
    {{-- Alerta de sesión (se mantiene) --}}
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    
    {{-- JS para Select2 (necesario para los filtros) --}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            // Opciones de exportación comunes con la corrección para los headers.
            const commonExportOptions = {
                exportOptions: {
                    columns: ':not(:last-child)', // Exportar todas las columnas excepto la última (Acciones)
                    search: 'applied', // Exportar solo las filas filtradas
                    format: {
                        header: function (data, columnIdx) {
                            return $(data).clone().find('.filter-trigger, .filter-container').remove().end().text().trim();
                        }
                    }
                }
            };

            // SE REEMPLAZA LA INICIALIZACIÓN DE DATATABLE CON LA VERSIÓN AVANZADA
            var table = $('#tabla_sanofians').DataTable({
                dom: `<'row d-flex align-items-center justify-content-between'
                        <'col-8 d-flex align-items-center'f>
                        <'col-4 d-flex align-items-center justify-content-end'B>>
                    <'row mt-3'<'col-sm-12'tr>>
                    <'row'<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>`,
                
                buttons: [
                    { ...commonExportOptions, extend: 'print', title: 'Sanofians' },
                    { ...commonExportOptions, extend: 'csv', title: 'Sanofians' },
                    { ...commonExportOptions, extend: 'excel', title: 'Sanofians' },
                    { ...commonExportOptions, extend: 'pdf', title: 'Sanofians' }
                ],
                // Lógica para crear los filtros por columna
                initComplete: function() {
                    this.api().columns().every(function() {
                        var column = this;
                        
                        if ($(column.header()).text().trim() === 'Acciones') return; 
                        
                        var uniqueValues = [];
                        column.data().unique().sort().each(function(d) {
                            var cleanedData = typeof d === 'string' ? d.replace(/<[^>]+>/g, '').trim() : d;
                            if (cleanedData && uniqueValues.indexOf(cleanedData) === -1) {
                                uniqueValues.push(cleanedData);
                            }
                        });
                        
                        if (uniqueValues.length === 0) return;

                        var $filterContainer = $(
                            '<div class="filter-container">' +
                                '<select class="filter-select" multiple="multiple" style="width:100%"></select>' +
                                '<div class="filter-actions">' +
                                    '<button class="btn btn-sm btn-light clear-filter mr-3" style="width: 31px !important; padding: 2px 0 6px 4px !important; height: 32px;"><i class="bi bi-trash2"></i></button>' +
                                    '<button class="btn btn-sm btn-primary apply-filter" style="width: 31px !important; padding: 2px 0 6px 4px !important; height: 32px;"><i class="bi bi-check-circle"></i></button>' +
                                '</div>' +
                            '</div>'
                        );
                        
                        uniqueValues.forEach(function(value) {
                            $filterContainer.find('select').append($('<option></option>').attr('value', value).text(value));
                        });
                        
                        $(column.header()).addClass('filter-header').append('<i class="bi bi-funnel filter-trigger"></i>').append($filterContainer);
                        
                        $filterContainer.find('select').select2({
                            placeholder: "Seleccione opciones",
                            allowClear: true,
                            dropdownParent: $filterContainer,
                            closeOnSelect: false
                        });
                        
                        $(column.header()).find('.filter-trigger').on('click', function(e) {
                            e.stopPropagation();
                            $('.filter-container').not($filterContainer).hide();
                            $('.filter-trigger').not($(this)).removeClass('filter-active');
                            $(this).toggleClass('filter-active');
                            $filterContainer.toggle();
                        });
                        
                        $filterContainer.find('.apply-filter').on('click', function(e) {
                            e.stopPropagation();
                            var values = $filterContainer.find('select').val();
                            if (values && values.length > 0) {
                                var searchRegex = values.map(v => `^${$.fn.dataTable.util.escapeRegex(v)}$`).join('|');
                                column.search(searchRegex, true, false).draw();
                                $(column.header()).find('.filter-trigger').addClass('filter-active');
                            } else {
                                column.search('').draw();
                                $(column.header()).find('.filter-trigger').removeClass('filter-active');
                            }
                            $filterContainer.hide();
                            $('.filter-trigger').removeClass('filter-active');
                        });
                        
                        $filterContainer.find('.clear-filter').on('click', function(e) {
                            e.stopPropagation();
                            $filterContainer.find('select').val(null).trigger('change');
                            column.search('').draw();
                            $(column.header()).find('.filter-trigger').removeClass('filter-active');
                            $filterContainer.hide();
                            $('.filter-trigger').removeClass('filter-active');
                        });
                    });
                }
            });
            
            // Ocultar filtros si se hace clic fuera de ellos
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.filter-container, .select2-container, .select2-dropdown').length && !$(e.target).is('.filter-trigger')) {
                    $('.filter-container').hide();
                    $('.filter-trigger').removeClass('filter-active');
                }
            });
        });

        // SE CONSERVA TU SCRIPT ORIGINAL PARA EL MODAL DE DETALLES
        $(document).on('click', '.btn-toggle-details', function () {
            var sanofianId = $(this).data('id');

            $.ajax({
                url: `/sanofians/${sanofianId}`,
                method: 'GET',
                success: function (sanofian) {
                    // (Tus funciones de formato se mantienen igual)
                    function formatDate(value) {
                        if (!value) return 'Indefinido';
                        const date = new Date(value);
                        const pad = (num) => String(num).padStart(2, '0');
                        const year = date.getFullYear();
                        const month = pad(date.getMonth() + 1);
                        const day = pad(date.getDate());
                        const hours = pad(date.getHours());
                        const minutes = pad(date.getMinutes());
                        return `${year}-${month}-${day} ${hours}:${minutes}`;
                    }

                    var detailsHtml = `
                        <div class="row g-3">
                            <div class="col-md-6"><strong>Nombre:</strong> ${sanofian.nombre ?? 'Indefinido'}</div>
                            <div class="col-md-6"><strong>Teléfono:</strong> ${sanofian.celular ?? 'Indefinido'}</div>
                            <div class="col-md-6"><strong>Email:</strong> ${sanofian.email ?? 'Indefinido'}</div>
                            <div class="col-md-6"><strong>Código validación:</strong> ${sanofian.codigo_validacion ?? 'Indefinido'}</div>
                            <div class="col-md-6"><strong>Tipo notificación:</strong> ${sanofian.type_notification?.nombre ?? 'Indefinido'}</div>
                            <div class="col-md-6"><strong>Categoría viajero:</strong> ${sanofian.categoria_viajero?.toUpperCase() ?? 'Indefinido'}</div>
                            <div class="col-md-6"><strong>Nivel VIP:</strong> ${sanofian.nivel_vip ?? 'Indefinido'}</div>
                            <div class="col-md-6"><strong>Fecha validación:</strong> ${formatDate(sanofian.fecha_validacion)}</div>
                            <div class="col-md-6"><strong>Fecha aceptación habeas data:</strong><br> ${formatDate(sanofian.fecha_aceptacion_habeas_data)}</div>
                        </div>
                    `;

                    $('#sanofianDetails').html(detailsHtml);
                    $('#sanofianModal').modal('show');
                },
                error: function (error) {
                    console.log(error);
                }
            });
        });
    </script>
@endsection

@section('content')
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2" role="group" aria-label="">
                    <a href="{{ route('sanofians.createView') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-file-earmark-plus"></i> Nuevo registro
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="container-fluid"> {{-- Cambiado a container-fluid para mejor uso del espacio --}}
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_sanofians" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th class="grayt">Nombre</th>
                            <th class="grayt">Celular</th>
                            <th class="grayt">Email</th>
                            <th class="grayt">Categoría</th>
                            <th class="grayt">Nivel VIP</th>
                            <th class="grayt">Tipo de Notificación</th>
                            <th class="grayt">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (!$sanofians->isEmpty())
                            @foreach ($sanofians as $sanofian)
                                <tr>
                                    <td>{{ $sanofian?->nombre ?? 'N/A' }}</td>
                                    <td>{{ $sanofian?->celular ?? 'N/A' }}</td>
                                    <td>{{ $sanofian?->email ?? 'N/A' }}</td>
                                    <td>{{ strtoupper($sanofian?->categoria_viajero ?? 'N/A') }}</td>
                                    <td>{{ $sanofian?->nivel_vip ?? 'N/A' }}</td>
                                    <td>{{ $sanofian?->typeNotification?->nombre ?? 'N/A' }}</td>
                                    <td>
                                        <a href="{{ route('sanofians.editView', ['id' => $sanofian->id]) }}" class="btn btn-outline-p">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                        <button type="button" class="btn btn-outline-p btn-toggle-details" data-id="{{ $sanofian->id }}">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="7" style="text-align: center">No hay registros para mostrar</td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    {{-- Modal para mostrar detalles del Sanofian --}}
    <div class="modal fade" id="sanofianModal" tabindex="-1" aria-labelledby="sanofianModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-info text-white" style="align-items: center;">
                    <h5 class="modal-title"><i class="bi bi-info-circle"></i> Detalles del Sanofian</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="sanofianDetails">
                        <!-- Aquí se cargan los detalles dinámicamente -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection