@props(['room_list'])

<!-- Booking Modal -->
<div class="modal fade" id="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-start" id="bookingModalLabel">Daftar Pemesan</h4>
                <h4 class="modal-title text-end" id="bookingDateTitle"></h4>
            </div>
            <div class="modal-header">
                <div class="row justify-content-start w-100">
                    <div class="col-md-12">
                        <label for="room-all" class="btn btn-outline-primary text-center w-100 room-label">
                            <input type="checkbox" id="room-all" class="d-none" checked>
                            Semua
                        </label>
                    </div>
                    @foreach ($room_list as $value)
                        <div class="col-md-2">
                            <label for="room-{{ $value['id'] }}"
                                class="btn btn-outline-primary text-center w-100 room-label">
                                <input type="checkbox" id="room-{{ $value['id'] }}" name="room_list[]"
                                    value="{{ $value['name'] }}" class="d-none room-checkbox" checked>
                                {{ $value['name'] }}
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-body magang-overflow-x-auto">
                <div class="d-flex align-items-center mb-3">
                    <label for="statusFilter" class="me-2">Filter Status:</label>
                    <select id="statusFilter" class="form-select form-select-sm w-20" name="status">
                        <option value="approved" selected>Approved</option>
                        <option value="pending">Pending</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
                <table class="table table-flush">
                    <thead class="magang-sticky magang-top-0 magang-bg-white">
                        <tr class="magang-font-semibold magang-bg-gray-200">
                            <td>Ruangan</td>
                            <td>Nama Pengguna</td>
                            <td>Departemen</td>
                            <td>Jam Mulai</td>
                            <td>Jam Selesai</td>
                            <td>Deskripsi</td>
                            <td>Status</td>
                        </tr>
                    </thead>
                    <tbody id="bookingTableBody">
                        <!-- data tabel -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>