{{-- Modal Select Project --}}
<div class="modal fade" id="modalSelectProject" tabindex="-1" aria-labelledby="modalSelectProjectLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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="position: top: 0; background: white;">
                            <tr>
                                <th class="text-center">Aksi</th>
                                <th class="text-center">No</th>
                                <th class="text-center">Nama Project</th>
                                <th class="text-center">Lokasi</th>
                                <th class="text-center">No. SPK</th>
                            </tr>
                        </thead>
                        <tbody id="projectTableBody">
                            <tr>
                                <td colspan="5" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> Loading...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('msproj') }}" class="btn btn-success btn-sm" target="_blank">
                    <i class="fas fa-external-link-alt me-1"></i> Kelola Master Project
                </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="modalSelectKategori" tabindex="-1" aria-labelledby="modalSelectKategoriLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalSelectKategoriLabel">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="searchKategori" placeholder="Cari kategori...">
                </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">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="kategoriTableBody">
                            <tr>
                                <td colspan="8" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> Loading...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('msdkat') }}" class="btn btn-success btn-sm" target="_blank">
                    <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 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="position: top: 0; background: white;">
                            <tr>
                                <th class="text-center">Aksi</th>
                                <th class="text-center">No</th>
                                <th class="text-center">Unit</th>
                            </tr>
                        </thead>
                        <tbody id="unitTableBody">
                            <tr>
                                <td colspan="3" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> Loading...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <a href="{{ url('msunit') }}" class="btn btn-success btn-sm" target="_blank">
                    <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>