@extends('layout.main')
@section('body_main')
<div class="row">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white border-0">
                <div class="d-flex flex-column flex-md-row align-items-md-center gap-2">
                    <div>
                        <h4 class="mb-0">Rekap Dokumen</h4>
                        <small class="text-muted">Ringkasan jumlah file per Unit dan Folder</small>
                    </div>
                    <div class="ms-md-auto d-flex gap-2 align-items-center">
                        <div class="input-group input-group-sm" style="max-width:320px;">
                            <span class="input-group-text bg-white border-end-0">
                                <i class="fa fa-search text-muted"></i>
                            </span>
                            <input type="search" id="recapSearch" class="form-control border-start-0" placeholder="Cari unit atau folder" oninput="debouncedRecapSearch(this.value)">
                        </div>
                        <select id="recapPerPage" class="form-select form-select-sm" style="width:auto;" onchange="changePerPage(this.value)">
                            <option value="5">5</option>
                            <option value="10" selected>10</option>
                            <option value="20">20</option>
                            <option value="50">50</option>
                        </select>
                        <button class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1" onclick="fetchRecap()">
                            <i class="fa fa-rotate"></i>
                            <span>Refresh</span>
                        </button>


                    </div>
                </div>
            </div>
            <div class="card-body pb-2">
                <div class="table-responsive" style="max-height: 55vh; overflow-y:auto;">
                    <table class="table table-sm table-hover align-middle">
                        <thead class="table-light shadow-sm">
                            <tr>
                                <th style="width:5%;" class="text-center">#</th>
                                <th style="width:30%;">Unit</th>
                                <th style="width:30%;">Sub Unit</th>
                                <th style="width:20%;">Folder</th>
                                <th style="width:15%;" class="text-center">Jumlah</th>
                            </tr>
                        </thead>
                        <tbody id="recapBody">
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">Memuat data...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-2 mt-3" id="recapPagination"></div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
document.addEventListener('DOMContentLoaded', () => fetchRecap());

let recapDebounce;
const recapState = { page:1, perPage:10, keyword:'', lastPage:1 };

function debouncedRecapSearch(val){
    clearTimeout(recapDebounce);
    recapDebounce = setTimeout(() => {
        recapState.keyword = val;
        recapState.page = 1;
        fetchRecap();
    }, 250);
}

function changePerPage(val){
    recapState.perPage = parseInt(val) || 10;
    recapState.page = 1;
    fetchRecap();
}

function fetchRecap(){
    const tbody = document.getElementById('recapBody');
    const pager = document.getElementById('recapPagination');
    tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">Memuat data...</td></tr>`;
    if(pager) pager.innerHTML = '';

    const params = new URLSearchParams({
        page: recapState.page,
        per_page: recapState.perPage,
        keyword: recapState.keyword || ''
    });
    fetch('/data/recap?' + params.toString())
        .then(res => res.json())
        .then(json => {
            const rows = json?.data || [];
            recapState.lastPage = json?.pagination?.last_page || 1;
            if(!rows.length){
                tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted py-4">Tidak ada data</td></tr>`;
                return;
            }
            const html = rows.map((row, idx) => {
                const folderRows = (row.data || []).map((f, i) => `
                    <tr>
                        ${i === 0 ? `<td rowspan="${row.data.length}" class="text-center align-middle fw-semibold">${idx+1}</td>` : ''}
                        ${i === 0 ? `<td rowspan="${row.data.length}" class="fw-semibold">${row.unit || '-'}</td>` : ''}
                        <td>${f.subUnit || '-'}</td>
                        <td>${f.folder || '-'}</td>
                        <td class="text-center fw-bold">${f.count || 0}</td>
                    </tr>
                `).join('');
                return folderRows;
            }).join('');
            tbody.innerHTML = html;
            renderRecapPagination();
        })
        .catch(err => {
            console.error(err);
            tbody.innerHTML = `<tr><td colspan="4" class="text-center text-danger py-4">Gagal memuat data</td></tr>`;
        });
}

function renderRecapPagination(){
    const pager = document.getElementById('recapPagination');
    if(!pager) return;
    if(recapState.lastPage <= 1){
        pager.innerHTML = '';
        return;
    }
    const maxButtons = 5;
    let start = Math.max(1, recapState.page - Math.floor(maxButtons/2));
    let end = Math.min(recapState.lastPage, start + maxButtons - 1);
    start = Math.max(1, end - maxButtons + 1);

    let buttons = '';
    buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="prev" ${recapState.page === 1 ? 'disabled' : ''}>‹</button>`;
    for(let i=start; i<=end; i++){
        buttons += `<button class="btn btn-sm ${i === recapState.page ? 'btn-primary' : 'btn-outline-secondary'}" data-page="${i}">${i}</button>`;
    }
    buttons += `<button class="btn btn-outline-secondary btn-sm" data-page="next" ${recapState.page === recapState.lastPage ? 'disabled' : ''}>›</button>`;

    pager.innerHTML = `
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <div class="btn-group" role="group">${buttons}</div>
            <span class="small text-muted">Halaman ${recapState.page} dari ${recapState.lastPage}</span>
        </div>
    `;

    pager.querySelectorAll('button[data-page]').forEach(btn => {
        btn.addEventListener('click', () => {
            const page = btn.getAttribute('data-page');
            if(page === 'prev' && recapState.page > 1) recapState.page--;
            else if(page === 'next' && recapState.page < recapState.lastPage) recapState.page++;
            else if(!isNaN(parseInt(page))) recapState.page = parseInt(page);
            fetchRecap();
        });
    });
}
</script>