{{-- Modal Select Project --}}
<div class="modal fade" id="modalSelectProject" tabindex="-1" aria-labelledby="modalSelectProjectLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectProjectLabel">Pilih Project</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchProject" placeholder="Cari project...">
                </div>
                            <div class="table-responsive" style="max-height: 400px;">
                                <table class="table table-hover table-sm">
                                    <thead style="background-color:#e9ecef;">
                                        <tr>
                                            <th class="text-center">Aksi</th>
                                            <th class="text-center">No</th>
                                            <th>Nama Project</th>
                                            <th>No. SPK</th>
                                        </tr>
                                    </thead>
                                    <tbody id="projectTableBody">
                                        <tr>
                                            <td colspan="4" class="text-center">Loading...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('trsbgt') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-external-link-alt me-1"></i> Kelola Anggaran Plan
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Select Detail Kategori --}}
<div class="modal fade" id="modalSelectDetailKategori" tabindex="-1" aria-labelledby="modalSelectDetailKategoriLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectDetailKategoriLabel">Pilih Detail Kategori</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchDetailKategori" placeholder="Cari kategori...">
                </div>
                            <div class="table-responsive" style="max-height: 400px;">
                                <table class="table table-hover table-sm">
                                    <thead style="background-color:#e9ecef;">
                                        <tr>
                                            <th class="text-center">Aksi</th>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Kategori</th>
                                            <th class="text-center">Kode</th>
                                            <th class="text-center">Detail Kategori</th>
                                            <th class="text-center">Supplier</th>
                                            <th class="text-center">Brand</th>
                                            <th class="text-center">Spesifikasi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="detailKategoriTableBody">
                                        <tr>
                                            <td colspan="5" class="text-center">Loading...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('msdkat') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-external-link-alt me-1"></i> Kelola Master Detail Kategori
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Select Supplier --}}
<div class="modal fade" id="modalSelectSupplier" tabindex="-1" aria-labelledby="modalSelectSupplierLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectSupplierLabel">Pilih Supplier</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchSupplier" placeholder="Cari supplier...">
                </div>
                            <div class="table-responsive" style="max-height: 400px;">
                                <table class="table table-hover table-sm">
                                    <thead style="background-color:#e9ecef;">
                                        <tr>
                                            <th class="text-center">Aksi</th>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Nama Supplier</th>
                                            <th class="text-center">Keterangan</th>
                                        </tr>
                                    </thead>
                                    <tbody id="supplierTableBody">
                                        <tr>
                                            <td colspan="4" class="text-center">Loading...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('msvend') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-external-link-alt me-1"></i> Kelola Master Supplier
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Select Supplier Bank --}}
<div class="modal fade" id="modalSelectSupplierBank" tabindex="-1" aria-labelledby="modalSelectSupplierBankLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectSupplierBankLabel">Pilih Rekening Supplier</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchSupplierBank"
                        placeholder="Cari rekening supplier...">
                </div>
                            <div class="table-responsive" style="max-height: 400px;">
                                <table class="table table-hover table-sm">
                                    <thead style="background-color:#e9ecef;">
                                        <tr>
                                            <th class="text-center">Aksi</th>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Nama Bank</th>
                                            <th class="text-center">Nomor Akun</th>
                                            <th class="text-center">Nama Akun</th>
                                        </tr>
                                    </thead>
                                    <tbody id="supplierBankTableBody">
                                        <tr>
                                            <td colspan="5" class="text-center">Loading...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('msvbnk') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-external-link-alt me-1"></i> Kelola Master Supplier Bank
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Select Unit --}}
<div class="modal fade" id="modalSelectUnit" tabindex="-1" aria-labelledby="modalSelectUnitLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectUnitLabel">Pilih Unit</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchUnit" placeholder="Cari unit...">
                </div>
                            <div class="table-responsive" style="max-height: 400px;">
                                <table class="table table-hover table-sm">
                                    <thead style="background-color:#e9ecef;">
                                        <tr>
                                            <th class="text-center">Aksi</th>
                                            <th class="text-center">No</th>
                                            <th>Unit</th>
                                        </tr>
                                    </thead>
                                    <tbody id="unitTableBody">
                                        <tr>
                                            <td colspan="3" class="text-center">Loading...</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
            </div>
            <div class="modal-footer">
            <a href="{{ url('msunit') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-external-link-alt me-1"></i> Kelola Master Unit
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- Anggaran Plan detail collapse row styles (match PO Assign styles) --}}
<style>
    .anggaran-detail-row {
        background-color: #f8f9fa !important;
        display: none;
    }

    .anggaran-detail-row.show {
        display: table-row;
    }

    .anggaran-detail-content {
        padding: 12px 16px;
        border: 1px solid #dee2e6;
        border-top: none;
    }

    .anggaran-detail-table {
        width: 100%;
        margin-bottom: 0;
    }

    .anggaran-detail-table th {
        background-color: #fff;
        font-weight: 600;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        padding: 6px 8px;
        white-space: nowrap;
    }

    .anggaran-detail-table td {
        font-size: 0.8rem;
        padding: 6px 8px;
        vertical-align: middle;
    }

    .btn-toggle-anggaran-detail i {
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .btn-toggle-anggaran-detail.expanded i {
        transform: rotate(180deg);
    }

    .anggaran-detail-table .form-check-input {
        border: 2px solid #adb5bd;
        border-radius: 4px;
        cursor: pointer;
        width: 18px;
        height: 18px;
    }

    .anggaran-detail-table .form-check-input:checked {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    .anggaran-detail-table .form-check-input:hover {
        border-color: #0d6efd;
    }
</style>

{{-- Modal Select Anggaran Plan Project (PO Assign style) --}}
<div class="modal fade" id="modalSelectAnggaranPlan" tabindex="-1" aria-labelledby="modalSelectAnggaranPlanLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectAnggaranPlanLabel">Pilih Budget Project</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchAnggaranPlan" placeholder="Cari project, no SPK, lokasi, deskripsi...">
                </div>
                <div class="table-responsive" style="max-height: 400px;">
                    <table class="table table-hover table-sm">
                        <thead style="position: top: 0; background: white;">
                            <tr>
                                <th class="text-center">Aksi</th>
                                <th class="text-center">No</th>
                                <th class="text-center">Project</th>
                                <th class="text-center">No. SPK</th>
                                <th class="text-center">Deskripsi</th>
                                <th class="text-center">Items</th>
                                <th class="text-center">Total Amount</th>
                            </tr>
                        </thead>
                        <tbody id="anggaranPlanTableBody">
                            <tr>
                                <td colspan="7" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> Loading...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <small id="anggaranPlanInfo" class="text-muted fst-italic">Memuat data...</small>
                    <nav id="anggaranPlanPagination"></nav>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('trsbgt') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-external-link-alt me-1"></i> Kelola Anggaran Plan
                </a>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>