<div style="display: none;">
    <!-- Saved Delivery Address Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#savedDeliveryAddressModal" id="savedDeliveryAddressModalBtn">
        Saved Delivery Address Modals
    </button>

    <!-- No Saved Delivery Address Message Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#noSavedDeliveryAddressMessageModal" id="noSavedDeliveryAddressMessageModalBtn">
        Saved Delivery Address Modals
    </button>

    <!-- Place order Confirmation Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#placeOrderConfirmationModal">
        Saved Delivery Address Modals
    </button>
</div>


<!-- Saved Delivery Address Modals -->
<div class="modal fade" id="savedDeliveryAddressModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="savedDeliveryAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="savedDeliveryAddressModalLabel">Select Delivery Address</h5>
                <button type="button" class="btn-close toDisable" data-bs-dismiss="modal" aria-label="Close" id="savedDeliveryAddressModalCloseBtn"></button>
            </div>
            <div class="modal-body" id="savedDeliveryAddresses"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark toDisable btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<!-- Place order Confirmation Modals -->
<div class="modal fade" id="placeOrderConfirmationModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="placeOrderConfirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="placeOrderConfirmationModalLabel">Confirm</h5>
                <button type="button" class="btn-close toDisable" data-bs-dismiss="modal" aria-label="Close" id="placeOrderConfirmationModalCloseBtn"></button>
            </div>
            <div class="modal-body">
                <h5>Preferred Date and Time of Delivery</h5>
                <form onsubmit="place_order(event);" id="orderConfirmationForm">
                    <div class="row mb-3">
                        <div class="col">
                            <label for="OrderConfirmationInputDate" class="form-label">Date</label>
                            <input type="date" class="form-control" id="OrderConfirmationInputDate">
                        </div>
                        <div class="col">
                            <label for="OrderConfirmationInputTime" class="form-label">Time</label>
                            <input type="time" class="form-control" id="OrderConfirmationInputTime">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="OrderConfirmationInputInfo" class="form-label">Additional Info</label>
                        <textarea class="form-control" maxlength="200" id="OrderConfirmationInputInfo" rows="3"></textarea>
                    </div>
                </form>
                <div>Press <strong>Back</strong> to return and <strong>Confirm</strong> to place your order.</div>
                <div>
                    Expected delivery time: {{delivery_time_hours}} working hour{{ delivery_time_hours|pluralize }} /
                    {{delivery_time_days}} business day{{delivery_time_days|pluralize}}
                </div>
                <div class="errormessage" id="placeOrderError"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark toDisable btn-sm w-25 me-auto toDisable" data-bs-dismiss="modal">Back</button>
                <button type="submit" form="orderConfirmationForm" class="btn btn-outline-dark toDisable btn-sm w-25 ms-auto toDisable">
                    <span class="spinner-border spinner-border-sm text-dark" role="status" aria-hidden="true" hidden id="placeOrderConfirmationSpinner"></span>
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>


<!-- No saved delivery address message modal -->
<div class="modal fade" id="noSavedDeliveryAddressMessageModal" tabindex="-1" aria-labelledby="noSavedDeliveryAddressMessageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="noSavedDeliveryAddressMessageModalLabel">Oops!!!</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="noSavedDeliveryAddressMessageModalCloseBtn"></button>
            </div>
            <div class="modal-body">You do not have any saved address.</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>