@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')

    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 ">
                    <div class="card">
                        <div class="card-header">
                            <div class="p-3 fw-semibold fs-3" style="color: var(--text-dark);">Bitácora del sistema</div>
                            <div class="d-flex gap-3">
                                <div class="">
                                    <a href="{{ route('addBitacora') }}" class="btn btn-info">Agregar nueva incidencia</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p>Se muestran los registros de actividades más recientes en el sistema. Se puede hacer búsqueda de términos.</p>
                <p style="font-size: 1.3rem;color: var(--text-dark);">
                    Número de registros mostrados: <strong id="totalRegistros">{{ $totalRegistros }}</strong>&nbsp;&nbsp;&nbsp;
                    <span id="searchTerm" style="font-style: italic;"></span>
                </p>

                {{-- Cuadro de búsqueda --}}
                <div class="mb-3 position-relative">
                    <input type="text" id="bitacoraSearchInput" class="search form-control" placeholder="Buscar registros..." style="padding-left: 3.3rem;">
                    <button type="button" id="clearBitacoraSearch" class="search btn bg-transparent" style="transform: translateY(-95%);">
                        <i class="fa-solid fa-x"></i>
                    </button>
                </div>

                @if($registros->isEmpty())
                    <p>No se encontraron datos relacionados.</p>
                @else

                <div id="dataTableContainer">
                     @include('application.Bitacora.dataTableBitacora', ['registros' => $registros])
                </div>

                @endif
            </div>
        </div>

    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Elemento para iniciar la búsqueda
        const searchInput = document.getElementById('bitacoraSearchInput');
        // Elemento para borrar la entrada de búsqueda
        const clearSearch = document.getElementById('clearBitacoraSearch');
        // Elemento para mostrar la vista parcial de la tabla
        const dataTableContainer = document.getElementById('dataTableContainer');
        // Elemento para mostrar el número de registros
        const totalRegistrosElement = document.querySelector('strong#totalRegistros');
        // Elemento para mostrar el término de búsqueda
        const searchTermElement = document.getElementById('searchTerm');

        clearSearch.addEventListener('click', function () {
            // Limpiar el valor del campo
            searchInput.value = '';
            searchInput.focus();
            searchInput.select();
            // Disparar el evento 'input' para actualizar los resultados
            searchInput.dispatchEvent(new Event('input'));
        });

        searchInput.addEventListener('input', function () {
            const query = searchInput.value;

            fetch(`{{ route('bitacora') }}?search=${query}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                dataTableContainer.innerHTML = data.html;
            // Actualizar en la vista el número de registros coincidentes
                totalRegistrosElement.textContent = data.totalRegistros;
                
                if(query)
                {
                    // Muestra el término de búsqueda utilizado
                    searchTermElement.textContent = ` (Término Búscado: '${query}')`;
                } else {
                    // Limpiando el término de búsqueda cuando es vacío
                    searchTermElement.textContent = '';
                }
                // Reasignar eventos a los checkboxes después de actualizar la tabla
                //assignCheckboxEvents();
            })
            .catch(error => console.error('Error:', error));
        });
    });


    document.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.closest('.pagination')) {
            e.preventDefault();
            const url = e.target.href;

            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                document.querySelector('#dataTableContainer').innerHTML = data.html;
                // Reasignar eventos a los checkboxes después de actualizar la tabla
                //assignCheckboxEvents();
            });
        }
    });
</script>
@endpush