@extends('layout.main')
@section('body_main')
    <style>
        .pending-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8f9fa;
            white-space: nowrap;
        }
        .pending-table th,
        .pending-table td {
            padding-top: 0.6rem;
            padding-bottom: 0.6rem;
            vertical-align: top;
        }
        .pending-table .col-select {
            width: 36px;
        }
        .pending-table .col-actions {
            width: 92px;
        }
        .pending-table .cell-wrap {
            line-height: 1.25;
            white-space: normal;
            word-break: break-word;
            display: block;
        }
        .pending-table .doc-title {
            max-width: 260px;
            display: inline-block;
            white-space: normal;
            word-break: break-word;
        }
        .pending-table .col-kategori {
            max-width: 180px;
        }
        .pending-table .col-unit {
            max-width: 200px;
        }
        .pending-table .col-uploader {
            max-width: 160px;
        }
    </style>
    <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">Data Pending</h4>
                </div>
                <div class="card-body p-3">
                    <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">
                            <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 class="table-responsive" style="max-height: 55vh; overflow-y: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 / Sub Unit</th>
                                <th>Tanggal Terbit</th>
                                <th>Tanggal Expired</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>
        </div>
    </div>
    @include('pendingFile.modal.view')
<script src="{{ ver('/js/pendingFile/index.js') }}"></script>
@endsection