@extends('layout.main')
@section('body_main')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h4 class="mb-0" id="pendingTitle">Data Persetujuan</h4>
                </div>
                <div class="card-body p-3">
                      <ul class="nav nav-tabs mb-3" id="pengajuanTabs">
                        <li class="nav-item">
                            <button class="nav-link active" type="button" data-mode="pengajuan">Data Persetujuan</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" type="button" data-mode="history">Log History</button>
                        </li>
                    </ul>
                    <div class="d-flex flex-column flex-md-row align-items-md-center gap-2 mb-3 flex-wrap">
                        <div class="input-group input-group-sm flex-grow-1" 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="tableSearch"
                                   class="form-control border-start-0"
                                   placeholder="Cari nama / nomor dokumen"
                                   oninput="debouncedTableSearch(this.value)">
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <label class="small mb-0 text-muted">Mulai</label>
                            <input type="date" id="startDate" class="form-control form-control-sm" onchange="applyDateFilter()">
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <label class="small mb-0 text-muted">Selesai</label>
                            <input type="date" id="endDate" class="form-control form-control-sm" onchange="applyDateFilter()">
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <select id="tablePageSize" class="form-select form-select-sm" style="width: auto;">
                                <option value="5">5</option>
                                <option value="10"selected>10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <div class="d-flex align-items-center gap-2" id="pendingBulkActions">
                            <button class="btn btn-success btn-sm" id="bulkApproveBtn" disabled>
                                <i class="fa-solid fa-check"></i> Approve dipilih (<span id="selectedCount">0</span>)
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" id="clearSelectionBtn" disabled>
                                Reset pilihan
                            </button>
                        </div>
                        <button class="btn btn-outline-secondary btn-sm" onclick="refreshLog()">
                            <i class="fa fa-rotate"></i> Refresh
                        </button>
                        <div class="small text-muted ms-md-auto" id="tableSummary"></div>
                    </div>
                    <div id="tabPengajuan">
                        <div class="table-responsive" style="max-height: 75vh; overflow-y:auto; overflow-x:auto;">
                        <table class="table table-sm table-hover table-striped align-middle mb-0 pending-table" id="lastUpdatedTable">
                            <thead>
                                <tr>
                                    <th class="col-select text-center">
                                        <input type="checkbox" class="form-check-input" id="selectAllPending" title="Pilih semua di halaman">
                                    </th>
                                    <th class="col-actions text-center">Aksi</th>
                                    <th>No. Dokumen</th>
                                    <th>Status</th>
                                    <th>Akses</th>
                                    <th>Nama</th>
                                    <th class="col-kategori">Kategori</th>
                                    <th class="col-unit">Unit</th>
                                    <th>Tanggal Terbit</th>
                                    <th>Tanggal Kedaluwarsa Dokumen</th>
                                    <th>Tanggal Upload</th>
                                    <th class="col-uploader">Pengunggah</th>
                                </tr>
                            </thead>
                            <tbody id="tablePendingFile">
                                <!-- data dari fetch masuk sini -->
                            </tbody>
                        </table>
                        </div>
                        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mt-3" id="paginationControls"></div>
                    </div>
                    <div id="tabHistory" class="d-none">
                        <div class="table-responsive" style="max-height: 55vh; overflow-y:auto; overflow-x:auto;">
                            <table class="table table-sm table-hover align-middle mb-0" id="tableHistory">
                                <thead>
                                    <tr>
                                        <th>No Dokumen</th>
                                        <th>Akses</th>
                                        <th>Nama</th>
                                        <th>Kategori</th>
                                        <th>Unit</th>
                                        <th>Aksi</th>
                                        <th>Tanggal Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="tableHistoryFile">
                                    <!-- data dari fetch masuk sini -->
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2 mt-3" id="paginationHistory"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    @include('pendingFile.modal.view')
<script>
    window.isKomiteMutu = @json($isKomiteMutu);
    window.isTurt = @json($isTurt);
</script>
<script src="{{ ver('/js/pendingFile/index.js') }}"></script>
@endsection