<div class="container h-100 d-flex flex-column mt-0" style="max-width: 95%;">
    <!-- Alert Section -->
    <div class="row">
        <div class="col-sm">
            <div id="pnl_message" class="alert alert-danger">
                <button id="view.login.message.button" type="button" class="btn-close" aria-label="Close"></button>
                <span id="view.login.message.label"></span>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="container mb-3">
        <!-- Filters Row (Hidden Initially) -->
        <div id="filter_info" style="display: none;">
            <div class="row justify-content-center">
                <div class="col-auto">
                    <label for="edtsearch" class="fw-bold">Search:</label>
                    <input type="text" id="edtsearch" class="form-control">
                </div>
                <div class="col-auto">
                    <label for="dtpstartdate" class="fw-bold">Start Date:</label>
                    <input type="date" id="dtpstartdate" class="form-control">
                </div>
                <div class="col-auto">
                    <label for="dtpenddate" class="fw-bold">End Date:</label>
                    <input type="date" id="dtpenddate" class="form-control">
                </div>
                <div class="col-auto">
                    <label for="wcbsortby" class="fw-bold">Property Type*</label>
                    <select class="form-select" id="wcbsortby"></select>
                </div>
                <div class="col-auto d-flex align-items-end">
                    <button id="btnapply" class="btn btn-primary">Apply</button>
                </div>
            </div>
        </div>

        <!-- Actions Row -->
        <div class="row mt-3 justify-content-center">
            <div class="col-auto">
                <button id="btnaddorder" class="btn btn-secondary mt-3">Add Order</button>
            </div>
            <div class="col-auto">
                <button id="btnsetstatus" class="btn btn-secondary mt-3">Set Status</button>
            </div>
            <div class="col-auto">
                <button id="btngeneratepdf" class="btn btn-secondary mt-3" type="button">Generate PDF</button>
                <div class="invalid-feedback">
                    No order selected. Please select an order to generate a PDF.
                </div>
            </div>
            <div class="col-auto">
                <button id="btnfilters" class="btn btn-secondary mt-3">Filters</button>
            </div>
        </div>
    </div>

    <!-- Entries Label Section -->
    <div class="d-flex justify-content-between w-100 mt-2">
        <label id="lblentries"></label>
    </div>

    <!-- Table Section -->
    <div id="order_table_section" class="overflow-auto mt-2"
         style="max-height: calc(100vh - 380px); border-bottom: none; padding-bottom: 0;">
        <table id="tblPhoneGrid" class="table table-striped table-bordered">
            <thead class="sticky-top bg-light">
                <tr style="font-size: 0.875rem;">
                    <!-- Table headers are dynamically generated -->
                </tr>
            </thead>
            <tbody id="orderTableBody" class="align-middle">
                <!-- Table rows are dynamically generated -->
            </tbody>
        </table>
    </div>

    <!-- Pagination Section -->
    <div class="d-flex justify-content-center w-100 mt-4">
        <nav aria-label="Page navigation">
            <ul id="pagination" class="pagination">
                <!-- Pagination items added dynamically -->
            </ul>
        </nav>
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirmation_modal" class="modal fade" tabindex="-1" aria-labelledby="confirmation_modal_label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="confirmation_modal_label" class="modal-title">Select Customer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <select id="wcbcustomer" class="form-control input-sm"></select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="btn_confirm_order">Confirm</button>
            </div>
        </div>
    </div>
</div>