<script id="checkoutPageCartItemsHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="container text-center mt-3 mt-md-0">
        <h5>
            Cart
            <a href="" class="link-danger-dark toDisableAnchorTag" onclick="displayCart(event);"><i class="bi bi-pencil"></i></a>
        </h5>
        <div class="row">
            <div class="col-7 text-start"><h5>Amount ({{cart.currency}})</h5></div>
            <div class="col-5 text-end"><h5>{{cart.cart_amount.amount}}</h5></div>
            {{#if cart.cart_amount.discount}}
            <div class="col-7 text-start"><h5>Discount (%)</h5></div>
            <div class="col-5 text-end"><h5>{{cart.cart_amount.discount}}</h5></div>
            {{/if}}
            <div class="col-7 text-start"><h5>Amount Payable ({{cart.currency}})</h5></div>
            <div class="col-5 text-end"><h5>{{cart.cart_amount.amount_payable}}</h5></div>
        </div>
        <h6>{{cart.count}} Item(s)</h6>
        <div class="accordion">
            {{#each cart.cart_items}}
            <div class="accordion-item">
                <h2 class="accordion-header" id="heading{{this.id}}">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{this.id}}" aria-expanded="true" aria-controls="collapse{{this.id}}">
                        <span class="me-auto">{{this.title}}</span>
                        {{#if this.discount}}
                        <span class="ms-auto">{{this.discount}}% off</span>
                        {{/if}}
                    </button>
                </h2>
                <div id="collapse{{this.id}}" class="accordion-collapse collapse show" aria-labelledby="heading{{this.id}}">
                    <div class="accordion-body">
                        <h6 class="text-start mb-0">Product ID: {{this.id}}</h6>
                        {{#if this.zipcode_availability}}
                            {{#if this.zipcode_availability.availability}}
                            <h6 class="mt-0 text-start text-success">Delivery In: {{this.zipcode_availability.delivery_time_in_days}} day(s)</h6>
                            {{else}}
                            <h6 class="mt-0 text-start text-danger">This item is not deliverable at your location.</h6>
                            {{/if}}
                        {{else}}
                            <h6 class="mt-0 text-start text-success">Delivery In: {{this.delivery_time_in_days}} day(s)</h6>
                        {{/if}}
                        <div class="table-responsive">
                            {{#if this.key_value_pair}}
                            <table class="table table-sm table-borderless text-center mb-0">
                                <tbody>
                                    {{#each this.key_value_pair}}
                                    <tr>
                                        <td style="width: 35%;">{{this.key}}</td>
                                        <td style="width: 65%;">{{this.value}}</td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                            {{/if}}
                            <table class="table table-sm table-borderless text-center  mb-0">
                                <thead>
                                    <tr>
                                        <th>Price ({{this.currency}})</th>
                                        <th>Qty ({{this.unit}})</th>
                                        <th>Amt. ({{this.currency}})</th>
                                        <th>Payable ({{this.currency}})</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>{{this.unit_price}}</td>
                                        <td>{{this.qty}}</td>
                                        <td>{{this.amount}}</td>
                                        <td>{{this.amount_payable}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
    {% endverbatim %}
</script>


<script id="checkoutPageAddressFormHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <h5 class="mb-0 pb-0">Add Delivery Address</h5>
    <h6 class="text-muted mt-0 pt-0"><a onclick="displayDeliveryAddress(event);" class="link-danger-dark toDisableAnchorTag" href="">Select a Saved Address</a></h6>
    <form class="row g-2 text-center" id="addDeliveryAddressForm" onsubmit="addDeliveryAddress(event);">
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputFirstName" class="form-label"><span class="requirement">*</span>First Name</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputFirstName" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputLastName" class="form-label"><span class="requirement">*</span>Last Name</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputLastName" placeholder="Last Name">
        </div>
        <div class="col-12">
            <label for="addDeliveryAddressFormInputEmail" class="form-label"><span class="requirement">*</span>Email</label>
            <input type="email" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputEmail" placeholder="Email Address">
        </div>
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputMobile" class="form-label"><span class="requirement">*</span>Mobile Number</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputMobile" placeholder="Mobile Number">
        </div>
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputTelephone" class="form-label">Home Phone Number</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputTelephone" placeholder="Home Phone Number">
        </div>
        <div class="col-md-12">
            <label for="addDeliveryAddressFormInputAddresss1" class="form-label"><span class="requirement">*</span>Address Line 1</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputAddresss1" placeholder="Address Line 1">
        </div>
        <div class="col-md-12">
            <label for="addDeliveryAddressFormInputAddresss2" class="form-label">Address Line 2</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputAddresss2" placeholder="Address Line 2">
        </div>
        <div class="col-md-12">
            <label for="addDeliveryAddressFormInputLandmark" class="form-label"><span class="requirement">*</span>Landmark</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputLandmark" placeholder="Landmark">
        </div>
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputCity" class="form-label"><span class="requirement">*</span>City</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputCity" placeholder="City">
        </div>
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputPincode" class="form-label"><span class="requirement">*</span>Pincode</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputPincode" placeholder="Pin/Zip Code">
        </div>
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputState" class="form-label"><span class="requirement">*</span>State</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputState" placeholder="State">
        </div>
        <div class="col-md-6">
            <label for="addDeliveryAddressFormInputCountry" class="form-label"><span class="requirement">*</span>Country</label>
            <input type="text" class="form-control form-control-sm toDisable" id="addDeliveryAddressFormInputCountry" placeholder="Country">
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-sm btn-outline-dark w-100 mt-3 toDisable">
                <div class="spinner-border spinner-border-sm toHide" hidden role="status"></div>
                Add
            </button>
        </div>
    </form>
    <div id="addDeliveryAddressError" class="errormessage"><br></div>
    {% endverbatim %}
</script>


<script id="checkoutPageAddressHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="text-start container">
        <h5>Payment and Delivery</h5>
        <form class="row" onsubmit="placeOrder(event)">
            <div class="col-12">Choose a Preferred Time of Delivery (optional)</div>
            <div class="col-6 mb-3">
                <label for="checkoutPreferredDate" class="form-label">Preferred Date</label>
                <input type="date" class="form-control toDisable" pattern="\d{4}-\d{2}-\d{2}" id="checkoutPreferredDate" name="checkoutPreferredDate">
            </div>
            <div class="col-6 mb-3">
                <label for="checkoutPreferredTime" class="form-label">Preferred Time</label>
                <input type="time" class="form-control toDisable" pattern="[0-9]{2}:[0-9]{2}" id="checkoutPreferredTime" name="checkoutPreferredTime">
            </div>
            <div class="col-12">Choose a Method of Payment</div>
            <div class="col-12 form-check ms-3">
                <input class="form-check-input" type="radio" value="CCD" name="checkoutPaymentMethod" id="checkoutPaymentMethodCreditCard" disabled>
                <label class="form-check-label" for="checkoutPaymentMethodCreditCard">
                    <i class="bi bi-credit-card me-2"></i>Credit Card
                </label>
            </div>
            <div class="col-12 form-check ms-3">
                <input class="form-check-input" type="radio" value="DCD" name="checkoutPaymentMethod" id="checkoutPaymentMethodDebitCard" disabled>
                <label class="form-check-label" for="checkoutPaymentMethodDebitCard">
                    <i class="bi bi-credit-card-2-front me-2"></i>Debit Card
                </label>
            </div>
            <div class="col-12 form-check ms-3">
                <input class="form-check-input" type="radio" value="PPL" name="checkoutPaymentMethod" id="checkoutPaymentMethodPaypal" disabled>
                <label class="form-check-label" for="checkoutPaymentMethodPaypal">
                    <i class="bi bi-paypal me-2"></i>PayPal
                </label>
            </div>
            <div class="col-12 form-check ms-3">
                <input class="form-check-input toDisable" type="radio" value="COD" name="checkoutPaymentMethod" id="checkoutPaymentMethodCOD" checked>
                <label class="form-check-label" for="checkoutPaymentMethodCOD">
                    <i class="bi bi-wallet2 me-2"></i>Cash on Delivery
                </label>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-sm w-100 btn-outline-dark toDisable">
                    <div class="spinner-border spinner-border-sm" hidden id="chechoutPlaceOrderSpinner" role="status"></div>
                    Place Order
                </button>
            </div>
        </form>
        <div class="errormessage" id="placeOrderError" style="height: 50px;"></div>
    </div>
    <div class="container">
        <h5 class="mb-0 pb-0">Delivery Address</h5>
        <h6 class="text-muted mt-0 pt-0"><a onclick="displayDeliveryAddress(event);" class="link-danger-dark toDisableAnchorTag" href="">Select a different Address</a></h6>
        <div class="card">
            <div class="card-body text-start">
                <h5 class="card-title">{{first_name}} {{last_name}}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{{email}}</h6>
                <p class="card-text">
                    <div><i class="bi bi-phone me-2"></i>{{mobile}}</div>
                    <div><i class="bi bi-telephone me-2"></i>{{#if landline}}{{landline}}{{else}}-{{/if}}</div>
                    <div><i class="bi bi-mailbox me-2"></i>Delivery Address</div>
                    <div class="ms-4">
                        <span>{{address1}}</span><br>
                        <span>{{#if address2}}{{address2}}{{else}}-{{/if}}</span><br>
                        <span>{{city}} - {{pincode}}</span><br>
                        <span>{{state}} - {{country}}</span><br>
                    </div>
                    <div><i class="bi bi-signpost me-2"></i>{{landmark}}</div>
                </p>
                <a class="card-link link-danger-dark toDisableAnchorTag" href="" onclick="removeSelectedDeliveryAddress(event, '{{id}}');">
                    Remove
                    <div class="spinner-grow spinner-grow-sm" id="removeDeliveryAddressSpinner" hidden role="status"></div>
                </a>
            </div>
        </div>
    </div>
    {% endverbatim %}
</script>


<script id="checkoutPageSelectAddressHandlebars" type="text/x-handlebars-template">
    {% verbatim %}
    <div class="modal fade" id="selectDeliveryAddressModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="selectDeliveryAddressModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
            <div class="modal-content container-fluid">
                <div class="modal-header">
                    <h5 class="modal-title" id="selectDeliveryAddressModalLabel">Select a Delivery Address</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{#if address}}
                        <div class="row row-cols-1 row-cols-md-2 g-1">
                            {{#each address}}
                            <div class="col">
                                <div class="card h-100 w-100">
                                    <div class="card-body">
                                        <h5 class="card-title">{{this.first_name}} {{this.last_name}}</h5>
                                        <h6 class="card-subtitle mb-2 text-muted">{{this.email}}</h6>
                                        <p class="card-text">
                                            <div><i class="bi bi-phone me-2"></i>{{this.mobile}}</div>
                                            <div><i class="bi bi-telephone me-2"></i>{{#if this.landline}}{{this.landline}}{{else}}-{{/if}}</div>
                                            <div><i class="bi bi-mailbox me-2"></i>Delivery Address</div>
                                            <div class="ms-4">
                                                <span>{{this.address1}}</span><br>
                                                <span>{{#if this.address2}}{{this.address2}}{{else}}-{{/if}}</span><br>
                                                <span>{{this.city}} - {{this.pincode}}</span><br>
                                                <span>{{this.state}} - {{this.country}}</span><br>
                                            </div>
                                            <div><i class="bi bi-signpost me-2"></i>{{this.landmark}}</div>
                                        </p>
                                        {{#if this.selected_address}}
                                        <span>Selected Address</span>
                                        {{else}}
                                        <a href="" onclick="selectDeliveryAddress(event, '{{this.id}}');" class="card-link link-danger-dark">Select This Address</a>
                                        {{/if}}
                                    </div>
                                </div>
                            </div>
                            {{/each}}
                        </div>
                    {{else}}
                    <p>There are no saved addresses.</p>
                    {{/if}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-outline-dark" data-bs-dismiss="modal" id="selectDeliveryAddressModalCloseBtn">Close</button>
                </div>
            </div>
        </div>
    </div>
    {% endverbatim %}
</script>