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

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard </a>
    <a href="{{ route('incidentesindex') }}" class="text-decoration-none text-dark">/ Incidentes</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')
    {{-- 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();
                        }
                    }
                }
            };

            // Inicialización de DataTable con la lógica de filtros
            var table = $('#tabla_incidentes').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: 'Incidentes' },
                    { ...commonExportOptions, extend: 'csv', title: 'Incidentes' },
                    { ...commonExportOptions, extend: 'excel', title: 'Incidentes' },
                    { ...commonExportOptions, extend: 'pdf', title: 'Incidentes' }
                ],
                // Lógica para crear los filtros por columna
                initComplete: function() {
                    this.api().columns().every(function() {
                        var column = this;
                        
                        // Excluimos la última columna "Acciones" del filtrado.
                        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');
                }
            });
        });
    </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="">
                    {{-- El botón y el enlace se pueden simplificar a un solo tag <a> --}}
                    <a href="{{ route('incidentescrearView') }}" class="btn btn-enviar btn-lg btn-block text-white">
                        <i class="bi bi-file-earmark-plus"></i> Nuevo registro
                    </a>
                </div>
            </div>
        </div>
    </div><br>
    <div class="container-fluid">
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_incidentes" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt">Nombre</th>
                            <th scope="col" class="grayt">Apellido</th>
                            <th scope="col" class="grayt">País</th>
                            <th scope="col" class="grayt">Ciudad</th>
                            <th scope="col" class="grayt">Fecha del Incidente</th>
                            <th scope="col" class="grayt">Tipo de Incidente</th>
                            <th scope="col" class="grayt">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($incidentes as $incidente)
                            <tr>
                                <td>{{ $incidente->nombre }}</td>
                                <td>{{ $incidente->apellido }}</td>
                                <td>{{ $incidente->pais->nombre }}</td>
                                <td>{{ $incidente->ciudad->nombre }}</td>
                                <td>{{ $incidente->fecha_incidente }}</td>
                                <td>{{ $incidente->tipo_incidente }}</td>
                                <td>
                                    <a class="btn btn-outline-p" href="{{ route('incidentesdetailedView', ['id' => $incidente->id]) }}">
                                        <i class="bi bi-eye-fill"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection