@extends('layout.main')
<style>
/* select2 readability like dataUnit */
.select2-container--default .select2-selection--multiple {
    background: #fff !important;
    border: 1px solid #ced4da !important;
    min-height: 31px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-results__option {
    color: #111 !important;
}
.select2-container--default .select2-dropdown {
    background: #fff !important;
    border: 1px solid #ced4da !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #e9ecef !important;
    color: #111 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #f1f3f5 !important;
    border: 1px solid #dee2e6 !important;
    color: #111 !important;
}
</style>
@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="pengajuanTitle">Data Pengajuan</h4>
                    <button
                        type="button"
                        class="btn btn-success btn-sm"
                        data-bs-toggle="modal"
                        data-bs-target="#modalCreateFile"
                    >
                        <i class="ti ti-plus me-1"></i>
                        Tambah Dokumen
                    </button>
                </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 Pengajuan</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 dokumen / 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>
                        <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: 55vh; overflow-y:auto;">
                        <table class="table table-sm table-hover align-middle mb-0" id="tablePengajuan">
                            <thead>
                                <tr>
                                    <th>Aksi</th>
                                    <th>No Dokumen</th>
                                    <th>Status</th>
                                    <th>Akses</th>
                                    <th>Nama</th>
                                    <th>Kategori</th>
                                    <th>Unit</th>
                                    <th>Tanggal Terbit</th>
                                    <th>Tanggal Kedaluwarsa Dokumen</th>
                                    <th>Tanggal Upload</th>
                                </tr>
                            </thead>
                            <tbody id="tablePengajuanFile">
                                <!-- 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="paginationPengajuan"></div>
                    </div>
                    <div id="tabHistory" class="d-none">
                        <div class="table-responsive" style="max-height: 55vh; overflow-y: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 Terbit</th>
                                    <th>Tanggal Kedaluwarsa Dokumen</th>
                                    <th>Tanggal Upload</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')
    @include('pengajuanFile.modal.edit')
    @include('dataUnit.modal.create')
<script>
    window.katDok = @json($katDok);
</script>
<script src="{{ ver('/js/pengajuanFile/index.js') }}"></script>
@endsection