@php
    use Illuminate\Support\Str;
@endphp

<x-app-layout>
    <div class="card border-0 shadow bg-success text-white mb-4">
        <div class="card-body py-4 px-4">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="display-6 fw-bold mb-2 text-white">Historial de reportes</h1>
                    <p class="mb-0 text-white-50">
                        Consulta prestamos, devoluciones y observaciones registradas por ambiente.
                    </p>
                </div>
                <div class="col-md-4 text-center d-none d-md-block">
                    <i class="bi bi-clipboard-data display-3 text-white opacity-75"></i>
                </div>
            </div>
        </div>
    </div>

    <section class="mb-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-0">
                <div class="row g-3 align-items-center">
                    <div class="col-12 col-md">
                        <div class="d-flex align-items-center gap-2">
                            <h5 class="fw-bold mb-1">Datos de reportes</h5>
                            <!-- contador oculto hasta realizar búsqueda -->
                            <span class="badge bg-success d-none" id="reportes-count">0</span>
                        </div>
                        <p class="text-muted small mb-0">Busca por instructor (nombre o cedula) o por ambiente para ver el historial.</p>
                    </div>
                    <div class="col-12 col-md-5 col-lg-4">
                        <form id="searchForm" class="w-100" onsubmit="return false;">
                            <div class="d-flex flex-column gap-2">
                                <div class="input-group">
                                    <span class="input-group-text bg-white"><i class="bi bi-person"></i></span>
                                    <input type="text" id="searchInstructorInput" class="form-control" placeholder="Buscar instructor (nombre o cedula)">
                                    <button type="button" id="searchInstructorBtn" class="btn btn-primary">
                                        <i class="bi bi-search"></i> Instructor
                                    </button>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-text bg-white"><i class="bi bi-building"></i></span>
                                    <input type="text" id="searchAmbienteInput" class="form-control" placeholder="Buscar ambiente (ej: Ambiente 1)">
                                    <button type="button" id="searchAmbienteBtn" class="btn btn-outline-primary">
                                        <i class="bi bi-search"></i> Ambiente
                                    </button>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button
                                        type="button"
                                        id="sortPrestamoToggle"
                                        class="btn btn-outline-secondary btn-sm d-none"
                                        title="Ordenar por fecha prestamo">
                                        <i class="bi bi-caret-down-fill me-1"></i> Fecha prestamo: mayor a menor
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Contenedor de resultados: oculto al inicio -->
            <div class="table-responsive d-none" id="reportesContainer">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light text-uppercase small text-muted">
                        <tr>
                            <th class="py-3">Instructor</th>
                            <th class="py-3">Ambiente</th>
                            <th class="py-3">
                                <div class="d-inline-flex align-items-center gap-2">
                                    <span class="text-muted fw-semibold">Fecha prestamo</span>
                                    <span class="d-inline-flex align-items-center">
                                        <button
                                            type="button"
                                            class="btn btn-link p-0 text-decoration-none text-muted"
                                            data-sort="fecha_prestamo"
                                            data-direction="asc"
                                            title="Ordenar ascendente">
                                            <i class="bi bi-caret-up-fill"></i>
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-link p-0 text-decoration-none text-muted ms-1"
                                            data-sort="fecha_prestamo"
                                            data-direction="desc"
                                            title="Ordenar descendente">
                                            <i class="bi bi-caret-down-fill"></i>
                                        </button>
                                    </span>
                                </div>
                            </th>
                            <th class="py-3">
                                <div class="d-inline-flex align-items-center gap-2">
                                    <span class="text-muted fw-semibold">Fecha devolucion</span>
                                    <span class="d-inline-flex align-items-center">
                                        <button
                                            type="button"
                                            class="btn btn-link p-0 text-decoration-none text-muted"
                                            data-sort="fecha_devolucion"
                                            data-direction="asc"
                                            title="Ordenar ascendente">
                                            <i class="bi bi-caret-up-fill"></i>
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-link p-0 text-decoration-none text-muted ms-1"
                                            data-sort="fecha_devolucion"
                                            data-direction="desc"
                                            title="Ordenar descendente">
                                            <i class="bi bi-caret-down-fill"></i>
                                        </button>
                                    </span>
                                </div>
                            </th>
                            <th class="py-3">Observacion</th>
                        </tr>
                    </thead>
                    <tbody id="reportesTable">
                        <!-- vacío hasta realizar búsqueda -->
                    </tbody>
                </table>
            </div>

            <div id="reportesFooter" class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3 mt-3 px-2 pb-3" style="display:none;">
                 <div class="text-muted small" id="reportes-summary">
                    Mostrar resultados
                 </div>
                 <div id="reportes-pagination">
                    <!-- paginación generada dinámicamente si es necesario -->
                 </div>
             </div>
         </div>
     </section>

    <div class="modal fade" id="observacionModal" tabindex="-1" aria-labelledby="observacionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="observacionModalLabel">Detalle del reporte</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" style="overflow-x: hidden;">
                    <div class="row g-3 mb-3">
                        <div class="col-12 col-md-6">
                            <div class="small text-muted">Instructor</div>
                            <div class="fw-semibold" id="observacion-instructor"></div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted">Ambiente</div>
                            <div class="fw-semibold" id="observacion-ambiente"></div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted">Fecha prestamo</div>
                            <div id="observacion-prestamo"></div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="small text-muted">Fecha devolucion</div>
                            <div id="observacion-devolucion"></div>
                        </div>
                    </div>
                    <div class="small text-muted mb-2">Observacion</div>
                    <div
                        class="border rounded-3 bg-light p-3"
                        id="observacion-texto"
                        style="white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-slot name="scripts">
        <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
        <script>
            let typingTimer;
            const debounceTime = 300;
            const observacionFallback = 'sin observacion';
            const observacionLimit = 60;
            const pageSize = 10;
            let initialReportesState = null;
            let hasPerformedSearch = false;
            let currentPage = 1;
            let currentSort = { field: null, direction: 'asc' };

            function escapeHtml(value) {
                return String(value ?? '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
            }

            function truncateText(text, limit) {
                const value = String(text ?? '');
                if (value.length <= limit) {
                    return value;
                }
                return `${value.slice(0, limit - 3)}...`;
            }

            function formatDateTime(value) {
                if (!value) {
                    return '-';
                }

                const match = String(value).match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2}):(\d{2})(?::\d{2})?/);
                if (!match) {
                    return value;
                }

                let hour = parseInt(match[2], 10);
                const minute = match[3];
                const suffix = hour >= 12 ? 'pm' : 'am';
                hour = hour % 12;
                if (hour === 0) {
                    hour = 12;
                }
                const hourText = String(hour).padStart(2, '0');
                return `${match[1]} ${hourText}:${minute} ${suffix}`;
            }

            function parseDateToMs(value) {
                if (!value) {
                    return null;
                }
                const normalized = String(value).replace(' ', 'T');
                const parsed = new Date(normalized);
                const time = parsed.getTime();
                return Number.isNaN(time) ? null : time;
            }

            function sortReportes(reportes) {
                if (!currentSort.field) {
                    return reportes.slice();
                }
                const field = currentSort.field;
                const direction = currentSort.direction === 'asc' ? 1 : -1;
                return reportes.slice().sort((a, b) => {
                    const aVal = parseDateToMs(a[field]);
                    const bVal = parseDateToMs(b[field]);

                    if (aVal == null && bVal == null) return 0;
                    if (aVal == null) return 1;
                    if (bVal == null) return -1;
                    if (aVal === bVal) return 0;
                    return (aVal < bVal ? -1 : 1) * direction;
                });
            }

            function updateSortIndicators() {
                document.querySelectorAll('[data-sort][data-direction]').forEach((button) => {
                    const field = button.getAttribute('data-sort');
                    const direction = button.getAttribute('data-direction');
                    const isActive = field === currentSort.field && direction === currentSort.direction;
                    button.classList.toggle('text-primary', isActive);
                    button.classList.toggle('text-muted', !isActive);
                });
                updatePrestamoSortButton();
            }

            function updatePrestamoSortButton() {
                const toggle = document.getElementById('sortPrestamoToggle');
                if (!toggle) {
                    return;
                }

                toggle.classList.toggle('d-none', !hasPerformedSearch);

                const isPrestamo = currentSort.field === 'fecha_prestamo';
                const direction = isPrestamo ? currentSort.direction : 'desc';
                const isDesc = direction === 'desc';

                toggle.setAttribute('aria-pressed', isPrestamo ? 'true' : 'false');
                toggle.classList.toggle('btn-outline-primary', isPrestamo);
                toggle.classList.toggle('btn-outline-secondary', !isPrestamo);
                toggle.innerHTML = `<i class="bi ${isDesc ? 'bi-caret-down-fill' : 'bi-caret-up-fill'} me-1"></i> Fecha prestamo: ${isDesc ? 'mayor a menor' : 'menor a mayor'}`;
            }

            function buildPageItem(page, current) {
                const active = page === current ? ' active' : '';
                return `<li class="page-item${active}"><button class="page-link" type="button" data-page="${page}">${page}</button></li>`;
            }

            function getPaginationRange(totalPages) {
                const maxButtons = 5;
                let start = Math.max(1, currentPage - 2);
                let end = Math.min(totalPages, currentPage + 2);

                const visibleCount = end - start + 1;
                if (visibleCount < maxButtons) {
                    const missing = maxButtons - visibleCount;
                    start = Math.max(1, start - missing);
                    end = Math.min(totalPages, end + missing);
                    if (end - start + 1 < maxButtons) {
                        start = Math.max(1, end - maxButtons + 1);
                    }
                }

                return { start, end };
            }

            function renderPagination(totalPages) {
                const pagination = document.getElementById('reportes-pagination');
                if (!pagination) {
                    return;
                }

                if (totalPages <= 1) {
                    pagination.innerHTML = '';
                    pagination.style.display = 'none';
                    return;
                }

                pagination.style.display = '';

                const range = getPaginationRange(totalPages);
                const parts = [];

                parts.push('<nav aria-label="Paginacion de reportes">');
                parts.push('<ul class="pagination pagination-sm mb-0">');

                const prevDisabled = currentPage === 1;
                parts.push(
                    `<li class="page-item ${prevDisabled ? 'disabled' : ''}">` +
                    `<button class="page-link" type="button" data-page="${currentPage - 1}" aria-label="Anterior">Anterior</button>` +
                    '</li>'
                );

                if (range.start > 1) {
                    parts.push(buildPageItem(1, currentPage));
                    if (range.start > 2) {
                        parts.push('<li class="page-item disabled"><span class="page-link">...</span></li>');
                    }
                }

                for (let page = range.start; page <= range.end; page += 1) {
                    parts.push(buildPageItem(page, currentPage));
                }

                if (range.end < totalPages) {
                    if (range.end < totalPages - 1) {
                        parts.push('<li class="page-item disabled"><span class="page-link">...</span></li>');
                    }
                    parts.push(buildPageItem(totalPages, currentPage));
                }

                const nextDisabled = currentPage === totalPages;
                parts.push(
                    `<li class="page-item ${nextDisabled ? 'disabled' : ''}">` +
                    `<button class="page-link" type="button" data-page="${currentPage + 1}" aria-label="Siguiente">Siguiente</button>` +
                    '</li>'
                );

                parts.push('</ul>');
                parts.push('</nav>');

                pagination.innerHTML = parts.join('');
            }

            function applySortAndRender(reportes, options = {}) {
                if (options.resetPage) {
                    currentPage = 1;
                }

                const sorted = sortReportes(reportes);
                const total = sorted.length;
                const totalPages = Math.max(1, Math.ceil(total / pageSize));

                if (currentPage > totalPages) {
                    currentPage = totalPages;
                }

                const startIndex = total === 0 ? 0 : (currentPage - 1) * pageSize;
                const endIndex = total === 0 ? 0 : Math.min(startIndex + pageSize, total);
                const pageItems = total === 0 ? [] : sorted.slice(startIndex, endIndex);

                updateTable(pageItems, { total, startIndex, endIndex });
                renderPagination(totalPages);
                updateSortIndicators();
            }

            function updateTable(reportes, meta = {}) {
                const tbody = document.getElementById('reportesTable');
                const count = document.getElementById('reportes-count');
                const summary = document.getElementById('reportes-summary');

                if (!tbody) {
                    return;
                }

                const total = meta.total ?? reportes.length;
                const startIndex = meta.startIndex ?? 0;
                const endIndex = meta.endIndex ?? reportes.length;

                tbody.innerHTML = '';

                if (count) {
                    count.textContent = total;
                }

                if (summary) {
                    if (total > 0) {
                        summary.innerHTML = `Mostrando <strong>${startIndex + 1}</strong> a <strong>${endIndex}</strong> de <strong>${total}</strong> reportes`;
                    } else {
                        summary.innerHTML = `Mostrando <strong>0</strong> reportes`;
                    }
                }

                if (!reportes.length) {
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted fst-italic">
                                No hay reportes
                            </td>
                        </tr>`;
                    return;
                }

                reportes.forEach(reporte => {
                    const instructor = `${reporte.Instruc_Nombres ?? ''} ${reporte.Instruc_Apellidos ?? ''}`.trim();
                    const ambiente = reporte.Ambien_Nombre || '-';
                    const fechaPrestamo = formatDateTime(reporte.fecha_prestamo);
                    const fechaDevolucion = formatDateTime(reporte.fecha_devolucion);
                    const observacion = reporte.observacion || observacionFallback;
                    const observacionCorta = truncateText(observacion, observacionLimit);

                    tbody.innerHTML += `
                        <tr>
                            <td>
                                <div class="fw-semibold text-dark">
                                    ${escapeHtml(instructor || '-')}
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-info text-dark">
                                    ${escapeHtml(ambiente)}
                                </span>
                            </td>
                            <td class="text-muted">${escapeHtml(fechaPrestamo)}</td>
                            <td class="text-muted">${escapeHtml(fechaDevolucion)}</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <span class="text-truncate d-inline-block" style="max-width: 260px;">
                                        ${escapeHtml(observacionCorta)}
                                    </span>
                                    <button
                                        type="button"
                                        class="btn btn-outline-primary btn-sm"
                                        data-bs-toggle="modal"
                                        data-bs-target="#observacionModal"
                                        data-instructor="${escapeHtml(instructor || '-')}"
                                        data-ambiente="${escapeHtml(ambiente)}"
                                        data-fecha-prestamo="${escapeHtml(fechaPrestamo)}"
                                        data-fecha-devolucion="${escapeHtml(fechaDevolucion)}"
                                        data-observacion="${escapeHtml(observacion)}">
                                        Ver
                                    </button>
                                </div>
                            </td>
                        </tr>`;
                });
            }

            function showError() {
                const tbody = document.getElementById('reportesTable');
                if (!tbody) {
                    return;
                }

                tbody.innerHTML = `
                    <tr>
                        <td colspan="5" class="text-center text-danger py-4">
                            Error al cargar los datos
                        </td>
                    </tr>`;
            }

            document.addEventListener('DOMContentLoaded', () => {
                const searchInstructorInput = document.getElementById('searchInstructorInput');
                const searchAmbienteInput = document.getElementById('searchAmbienteInput');
                const searchInstructorBtn = document.getElementById('searchInstructorBtn');
                const searchAmbienteBtn = document.getElementById('searchAmbienteBtn');
                const sortPrestamoToggle = document.getElementById('sortPrestamoToggle');
                const reportesContainer = document.getElementById('reportesContainer');
                const reportesTable = document.getElementById('reportesTable');
                const reportesCount = document.getElementById('reportes-count');
                const reportesSummary = document.getElementById('reportes-summary');
                const reportesPagination = document.getElementById('reportes-pagination');
                const reportesFooter = document.getElementById('reportesFooter');

                // ocultar contenedor al inicio
                if (reportesContainer) reportesContainer.classList.add('d-none');
                if (reportesFooter) reportesFooter.style.display = 'none';

                function getInstructorQuery() {
                    return String(searchInstructorInput.value || '').replace(/\s+/g, ' ').trim();
                }

                function getAmbienteQuery() {
                    return String(searchAmbienteInput.value || '').replace(/\s+/g, ' ').trim();
                }

                function updateDisableStates() {
                    let instrHas = getInstructorQuery().length > 0;
                    let ambHas = getAmbienteQuery().length > 0;

                    if (instrHas && ambHas && searchAmbienteInput) {
                        searchAmbienteInput.value = '';
                        ambHas = false;
                    }

                    const disableAmbiente = instrHas;
                    const disableInstructor = ambHas;

                    if (searchAmbienteInput) searchAmbienteInput.disabled = disableAmbiente;
                    if (searchAmbienteBtn) searchAmbienteBtn.disabled = disableAmbiente;

                    if (searchInstructorInput) searchInstructorInput.disabled = disableInstructor;
                    if (searchInstructorBtn) searchInstructorBtn.disabled = disableInstructor;
                }

                function handleInstructorInput() {
                    if (getInstructorQuery().length && searchAmbienteInput) {
                        searchAmbienteInput.value = '';
                    }
                    updateDisableStates();
                }

                function handleAmbienteInput() {
                    if (getAmbienteQuery().length && searchInstructorInput) {
                        searchInstructorInput.value = '';
                    }
                    updateDisableStates();
                }

                function renderNoResults() {
                    initialReportesState = [];
                    applySortAndRender([], { resetPage: true });
                    if (reportesContainer) reportesContainer.classList.remove('d-none');
                    if (reportesFooter) reportesFooter.style.display = '';
                }

                function performSearch(query, tipo) {
                    if (!query) {
                        hasPerformedSearch = false;
                        // si el usuario ejecuta búsqueda vacía, mostrar no resultados
                        renderNoResults();
                        return;
                    }

                    // realizar petición fetch
                    hasPerformedSearch = true;

                    const url = `{{ route('reportes.search') }}?q=${encodeURIComponent(query)}&tipo=${tipo}`;
                    fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(res => res.ok ? res.json() : Promise.reject(res))
                        .then(data => {
                            const items = (data && data.data) ? data.data : [];
                            initialReportesState = items;
                            applySortAndRender(items, { resetPage: true });
                            if (reportesContainer) reportesContainer.classList.remove('d-none');
                            if (reportesFooter) reportesFooter.style.display = '';
                        })
                        .catch(() => {
                            renderNoResults();
                        });
                }

                // ejecutar busqueda al presionar Enter
                if (searchInstructorInput) {
                    searchInstructorInput.addEventListener('input', handleInstructorInput);
                    searchInstructorInput.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            performSearch(getInstructorQuery(), 'instructor');
                        }
                    });
                }

                if (searchAmbienteInput) {
                    searchAmbienteInput.addEventListener('input', handleAmbienteInput);
                    searchAmbienteInput.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            performSearch(getAmbienteQuery(), 'ambiente');
                        }
                    });
                }

                if (searchInstructorBtn) {
                    searchInstructorBtn.addEventListener('click', () => {
                        performSearch(getInstructorQuery(), 'instructor');
                    });
                }

                if (searchAmbienteBtn) {
                    searchAmbienteBtn.addEventListener('click', () => {
                        performSearch(getAmbienteQuery(), 'ambiente');
                    });
                }

                updateDisableStates();
                updateSortIndicators();

                if (reportesPagination) {
                    reportesPagination.addEventListener('click', (event) => {
                        const button = event.target.closest('[data-page]');
                        if (!button) {
                            return;
                        }

                        const page = Number.parseInt(button.getAttribute('data-page'), 10);
                        if (Number.isNaN(page)) {
                            return;
                        }

                        if (!Array.isArray(initialReportesState)) {
                            return;
                        }

                        const totalPages = Math.max(1, Math.ceil(initialReportesState.length / pageSize));
                        if (page < 1 || page > totalPages) {
                            return;
                        }

                        currentPage = page;
                        applySortAndRender(initialReportesState);
                    });
                }

                if (sortPrestamoToggle) {
                    sortPrestamoToggle.addEventListener('click', () => {
                        let nextDirection = 'desc';
                        if (currentSort.field === 'fecha_prestamo') {
                            nextDirection = currentSort.direction === 'desc' ? 'asc' : 'desc';
                        }

                        currentSort.field = 'fecha_prestamo';
                        currentSort.direction = nextDirection;

                        if (Array.isArray(initialReportesState)) {
                            applySortAndRender(initialReportesState);
                        } else {
                            updateSortIndicators();
                        }
                    });
                }

                document.querySelectorAll('[data-sort][data-direction]').forEach((button) => {
                    button.addEventListener('click', () => {
                        const field = button.getAttribute('data-sort');
                        const direction = button.getAttribute('data-direction');
                        if (!field || !direction) {
                            return;
                        }

                        currentSort.field = field;
                        currentSort.direction = direction;

                        if (Array.isArray(initialReportesState)) {
                            applySortAndRender(initialReportesState);
                        } else {
                            updateSortIndicators();
                        }
                    });
                });

                const modal = document.getElementById('observacionModal');
                if (modal) {
                     modal.addEventListener('show.bs.modal', (event) => {
                         const button = event.relatedTarget;
                         if (!button) {
                             return;
                         }

                         const getAttr = (name, fallback) => button.getAttribute(name) || fallback;

                         const instructor = getAttr('data-instructor', '-');
                         const ambiente = getAttr('data-ambiente', '-');
                         const fechaPrestamo = getAttr('data-fecha-prestamo', '-');
                         const fechaDevolucion = getAttr('data-fecha-devolucion', '-');
                         const observacion = getAttr('data-observacion', observacionFallback);

                         const instructorEl = document.getElementById('observacion-instructor');
                         const ambienteEl = document.getElementById('observacion-ambiente');
                         const prestamoEl = document.getElementById('observacion-prestamo');
                         const devolucionEl = document.getElementById('observacion-devolucion');
                         const observacionEl = document.getElementById('observacion-texto');

                         if (instructorEl) {
                             instructorEl.textContent = instructor;
                         }
                         if (ambienteEl) {
                             ambienteEl.textContent = ambiente;
                         }
                         if (prestamoEl) {
                             prestamoEl.textContent = fechaPrestamo;
                         }
                         if (devolucionEl) {
                             devolucionEl.textContent = fechaDevolucion;
                         }
                         if (observacionEl) {
                             observacionEl.textContent = observacion;
                         }
                     });
                 }
             });
         </script>
     </x-slot>
 </x-app-layout>