@extends('layouts.index', ['subHeader' => 'Gestión de PQRS'])

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

    {{-- 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 (Acción)
                    search: 'applied', // Exportar solo las filas filtradas
                    format: {
                        header: function (data, columnIdx) {
                            return $(data).clone().find('.filter-trigger, .filter-container').remove().end().text().trim();
                        },
                        // El formateador del body asegura que el texto se exporte limpio
                        body: function (data, row, column, node) {
                            // Extrae solo el texto, eliminando HTML como <div>, <small>, <span>, etc.
                            return $(node).text().trim();
                        }
                    }
                }
            };

            // SE REEMPLAZA LA INICIALIZACIÓN DE DATATABLE CON LA VERSIÓN AVANZADA
            var table = $('#tabla_pqrs').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: 'Gestión de PQRS' },
                    { ...commonExportOptions, extend: 'csv', title: 'Gestión de PQRS' },
                    { ...commonExportOptions, extend: 'excel', title: 'Gestión de PQRS' },
                    { ...commonExportOptions, extend: 'pdf', title: 'Gestión de PQRS' }
                ],
                // Lógica para crear los filtros por columna
                initComplete: function() {
                    this.api().columns().every(function() {
                        var column = this;
                        
                        if ($(column.header()).text().trim() === 'Acción') return; 
                        
                        var uniqueValues = [];
                        column.data().unique().sort().each(function(d) {
                            // La lógica de limpieza de HTML es clave aquí para columnas con "badges" o texto anidado
                            var cleanedData = typeof d === 'string' ? d.replace(/<[^>]+>/g, ' ').replace(/\s\s+/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) {
                                // Buscamos los valores como texto plano, sin importar el HTML interno.
                                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');
                }
            });

            // Manejo del modal para gestionar PQRS
            $(document).on('click', '.btn-gestionar', function () {
                const pqrs = $(this).data('pqrs');
                const respuestas = $(this).data('respuestas');
                // Marcar visualización en backend
                $.post('/pqrs/marcar-visualizado/' + pqrs.id, {_token: '{{ csrf_token() }}'})
                    .done(res => console.log(res.message))
                    .fail(err => console.error(err.responseJSON.message));

                $('#formGestionar').attr('action', `/pqrs/gestionar/${pqrs.id}`);
                $('#modalPQRS input[name="pqrs_id"]').val(pqrs.id);
                $('#detalleCodigo').text(pqrs.codigo);
                $('#detalleTexto').html(pqrs.texto ? pqrs.texto : '<span class="text-muted">Sin contenido</span>');
                $('#detalleEstado').val(pqrs.estado);

                if (pqrs.fecha_visualizacion) {
                    $('#infoVisualizacion').removeClass('d-none').text('Visto por primera vez el ' + pqrs.fecha_visualizacion);
                } else {
                    $('#infoVisualizacion').addClass('d-none');
                }

                if (pqrs.fecha_respuesta && pqrs.tiempo_respuesta) {
                    $('#infoRespuesta').removeClass('d-none').text(`Respondido el ${pqrs.fecha_respuesta} en ${pqrs.tiempo_respuesta} minutos`);
                } else {
                    $('#infoRespuesta').addClass('d-none');
                }

                let html = '';
                if (respuestas.length === 0) {
                    html = '<div class="text-muted">Sin respuestas registradas</div>';
                } else {
                    respuestas.forEach(r => {
                        html += `
                            <div class="mb-2 p-3 border rounded bg-light">
                                <div class="d-flex justify-content-between">
                                    <strong>${r.usuario}</strong>
                                    <small class="text-muted">${r.fecha}</small>
                                </div>
                                <div class="mt-1 mb-1"><span class="badge" style="${r.estado_color}">${r.estado}</span></div>
                                <div>${r.texto}</div>
                            </div>
                        `;
                    });
                }
                $('#chatRespuestas').html(html);
            });

            $('#formGestionar').on('submit', function(e) {
                e.preventDefault();
                const form = this;
                Swal.fire({
                    title: '¿Confirmar envío?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Sí, guardar',
                    cancelButtonText: 'Cancelar'
                }).then(result => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });

            $('#modalPQRS').on('hidden.bs.modal', function () {
                $('#formGestionar')[0].reset();
                $('#formGestionar').attr('action', '');
                $('#detalleCodigo').text('');
                $('#detalleTexto').text('');
                $('#detalleEstado').val('');
                $('#infoVisualizacion').addClass('d-none').text('');
                $('#infoRespuesta').addClass('d-none').text('');
                $('#chatRespuestas').empty();
            });
        });
    </script>
@endsection

@section('content')
    <div class="shadow-s p-4">
        <table class="table table-striped" id="tabla_pqrs">
            <thead>
                <tr>
                    <th>Código</th>
                    <th>Tipo</th>
                    <th>Estado</th>
                    <th>Texto</th>
                    <th>Creado</th>
                    <th>Acción</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($pqrs as $item)
                    <tr>
                        <td>{{ $item->codigo }}</td>
                        <td>{{ $item->tipo_texto }}</td>
                        <td>
                            <span class="badge" style="{{ $item->estado_color }}">
                                {{ $item->estado_texto }}
                            </span>
                        </td>
                        <td>
                            <div>{{ Str::limit($item->texto, 100) }}</div>
                            <small class="text-muted">{{ $item->tiempoTranscurridoDesdeCreacion() }}</small>
                        </td>
                        <td>
                            <div>{{ $item->fecha_creacion->format('Y-m-d H:i') }}</div>
                            @if ($item->tiempo_respuesta)
                                <small style="color: #00ba26 !important;">Respuesta en {{ $item->tiempo_respuesta }} min</small>
                            @endif
                        </td>
                        @php
                            $pqrsData = json_encode([
                                'id' => $item->id,
                                'codigo' => $item->codigo,
                                'texto' => $item->texto,
                                'estado' => $item->estado,
                                'fecha_visualizacion' => optional($item->fecha_visualizacion)->format('Y-m-d H:i'),
                                'fecha_respuesta' => optional($item->fecha_respuesta)->format('Y-m-d H:i'),
                                'tiempo_respuesta' => $item->tiempo_respuesta,
                            ]);
                            $respuestasData = json_encode(
                                $item->respuestas->map(function ($r) {
                                    return [
                                        'texto' => $r->respuesta,
                                        'estado' => $r->estado,
                                        'estado_color' => $r->estado_color,
                                        'usuario' => $r->nombre_autor ?? 'N/D',
                                        'fecha' => $r->created_at->format('Y-m-d H:i'),
                                    ];
                                })
                            );
                        @endphp
                        <td>
                            <button class="btn btn-outline-p btn-gestionar"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalPQRS"
                                    data-pqrs='{{ $pqrsData }}'
                                    data-respuestas='{{ $respuestasData }}'>
                                <i class="bi bi-chat-dots-fill"></i> Gestionar
                            </button>
                        </td>
                    </tr>
                @endforeach
                @if ($pqrs->isEmpty())
                    <tr>
                        <td colspan="6" class="text-center text-muted">No hay PQRS registradas</td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>
    {{-- Modal para gestionar PQRS --}}
    <div class="modal fade" id="modalPQRS" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form id="formGestionar" method="POST" class="modal-content" action="">
                @csrf
                <input type="hidden" name="pqrs_id" value="">
                <div class="modal-header">
                    <h5 class="modal-title">Gestionar PQRS - <span id="detalleCodigo"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="submit">Guardar cambios</button>
                    <button class="btn btn-light" type="button" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </form>
        </div>
    </div>
@endsection