<div class="container vh-100 d-flex flex-column pb-5" style="max-width: 80%;">

    <!-- 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">Generate PDF</button>
            </div>
            <div class="col-auto">
                <button id="btnfilters" class="btn btn-secondary mt-3">Filters</button>
            </div>
        </div>
    </div>




    <!-- Entries Label Section -->
    <div class="container mt-2">
        <div class="row">
            <div class="col">
                <label id="lblentries"></label>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div id="order_table_section" class="overflow-auto mt-2 flex-grow-1">
        <table id="tblPhoneGrid" class="table table-striped table-bordered">
            <thead style="position: sticky; top: 0; z-index: 1; background-color: white; border-bottom: 2px solid #dee2e6;">
                <tr>
                    <th>Order ID</th>
                    <th>Company Name</th>
                    <th>Job Name</th>
                    <th>Order Date</th>
                    <th>Proof Due</th>
                    <th>Proof Date</th>
                    <th>Art Due</th>
                    <th>Art Done</th>
                    <th>Plate Due</th>
                    <th>Plate Done</th>
                    <th>Mount Due</th>
                    <th>Mount Done</th>
                    <th>Ship Due</th>
                    <th>Ship Done</th>
                    <th>Price</th>
                    <th>QuickBooks Ref Number</th>
                    <th>Colors</th>
                </tr>
            </thead>
            <tbody>
                <!-- Rows will be dynamically added -->
            </tbody>
        </table>
    </div>

    <!-- Pagination Section -->
    <div class="container mt-4">
        <div class="row justify-content-center">
            <nav aria-label="Page navigation">
                <ul id="pagination" class="pagination">
                    <!-- Pagination items added dynamically -->
                </ul>
            </nav>
        </div>
    </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>