{% extends "base.html" %}
{% import "macros/financials.html" as financials %}
{% import "macros/user_cell.html" as user_cell %}
{% import "macros/savings_highlights.html" as savings %}

{% block page_title %}Checkout{% endblock %}

{% block head %}
<link rel="stylesheet" href="/plugins/checkout/assets/css/checkout-flow.ui.css">
{{ savings::assets() }}
{% endblock %}

{% block content %}
{% set phone_raw = user.phone | default(value="") %}
<main class="checkout-page-container" id="checkout-page" aria-labelledby="checkout-page-title" data-currency-symbol="{{ currency_symbol }}"
    data-min-order-amount="{{ min_order_amount }}">
    <div id="checkout-payment-config" hidden
        data-gateway-script-url="{{ gateway_script_url | default(value='') }}"
        data-active-gateway="{{ active_gateway | default(value='') }}"
        data-online-payment-available="{% if online_payment_available %}true{% else %}false{% endif %}"></div>

    <h1 class="section-title" id="checkout-page-title">Checkout</h1>
    <div id="checkout-feedback" class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>

    <div id="checkout-unavailable-warning" class="checkout-unavailable-warning-banner hidden" role="alert">
        <div class="warning-banner-header">
            <span>⚠️ Some items in your cart are currently unavailable</span>
        </div>
        <p class="warning-banner-text">These items have been excluded from your order total. Please review them below:</p>
        <ul id="checkout-unavailable-list" class="warning-items-list"></ul>
        <a href="/plugins/checkout/cart" class="font-semibold text-danger underline">Go back to your cart to review</a>
    </div>

    <div id="checkout-empty-state" class="checkout-empty-state-card hidden">
        <div class="text-center p-5">
            <div class="empty-cart-icon mb-3">🛒</div>
            <h2>Your Checkout is Empty</h2>
            <p class="text-muted">All items in your cart are currently unavailable or your cart has been cleared.</p>
            <a href="/plugins/checkout/cart" class="checkout-return-link">Return to cart</a>
        </div>
    </div>

    <div class="checkout-layout">
        <!-- Left Column: Shipping & Info -->
        <div class="checkout-form-column">
            <form id="checkout-form">

                <div class="checkout-fulfillment-group">
                    <!-- 1. Contact Info -->
                    <div class="checkout-step-card checkout-contact-card">
                        <div class="step-header">
                            <h3>👤 Contact Information</h3>
                        </div>
                        <div class="contact-grid">
                            <input type="hidden" name="full_name" value="{{ user.name }}">
                            <div class="form-group checkout-contact-name-field">
                                <span class="form-label">Customer</span>
                                {{ user_cell::render(name=user.name, email=user.email, avatar=user.avatar) }}
                            </div>

                            <div class="form-group checkout-contact-phone-field">
                                <label class="form-label checkout-phone-label-desktop" for="phone">Phone
                                    (Required)</label>
                                <label class="form-label checkout-phone-label-mobile" for="phone">Add contact
                                    number</label>
                                <input type="tel" name="phone" id="phone" value="{{ phone_raw }}" {% if phone_raw==""
                                    %}required{% endif %}
                                    placeholder="Enter your phone number">
                            </div>
                        </div>


                        <input type="hidden" name="email" value="{{ user.email }}">
                    </div>

                    <!-- 2. Shipping Address -->
                    <div class="checkout-step-card checkout-shipping-card">
                        <div class="step-header">
                            <h3>🏠 Shipping Address</h3>
                        </div>

                        <div id="checkout-address-editor"
                            class="checkout-address-editor{% if addresses and addresses | length > 0 %} checkout-address-editor--has-saved{% endif %}">
                            {% if addresses and addresses | length > 0 %}
                            <div class="toggle-group" id="address-mode-toggle">
                                <label class="toggle-option active">
                                    <input type="radio" name="address_mode" value="saved" checked id="radio-saved">
                                    Saved Address
                                </label>
                                <label class="toggle-option">
                                    <input type="radio" name="address_mode" value="new" id="radio-new">
                                    New Address
                                </label>
                            </div>

                                    <div id="saved-address-section">
                                <div class="address-grid">
                                    {% for addr in addresses %}
                                    <label id="address-card-{{ addr.id }}"
                                        class="address-card-modern {% if addr.is_default %}selected{% endif %}"
                                        data-address-id="{{ addr.id }}">
                                        <div class="address-card-header">
                                            <span class="address-type-badge">{{ addr.address_type | title }}</span>
                                            <input type="radio" name="saved_address_id" value="{{ addr.id }}" {% if
                                                addr.is_default %}checked{% endif %}>
                                        </div>
                                        <div class="address-details">
                                            {{ addr.full_address }}<br>
                                            <span class="address-aux">{{ addr.city }}{% if addr.state %}, {{ addr.state
                                                }}{% endif %} {{ addr.postal_code }}</span>
                                        </div>

                                        <input type="hidden" class="addr-params" data-full="{{ addr.full_address }}"
                                            data-city="{{ addr.city }}" data-state="{{ addr.state }}"
                                            data-postal="{{ addr.postal_code }}"
                                            data-latitude="{{ addr.geo_latitude | default(value='') }}"
                                            data-longitude="{{ addr.geo_longitude | default(value='') }}"
                                            data-accuracy="{{ addr.geo_accuracy | default(value='') }}">
                                    </label>
                                    {% endfor %}
                                </div>
                            </div>
                            {% else %}
                            <input type="hidden" name="address_mode" value="new">
                            {% endif %}

                            <div id="new-address-section"
                                class="{% if addresses and addresses | length > 0 %}hidden{% endif %}">
                                <div class="form-group">
                                    <label class="form-label" for="address-field">Street Address</label>
                                    <textarea id="address-field" name="address" rows="2"
                                        placeholder="123 Main St, Apt 4B"></textarea>
                                </div>
                                <div class="address-form-row">
                                    <div class="form-group">
                                        <label class="form-label" for="city-field">City</label>
                                        <input type="text" id="city-field" name="city">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="state-field">State</label>
                                        <input type="text" id="state-field" name="state">
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="postal-field">Postal Code</label>
                                        <input type="text" id="postal-field" name="postal_code">
                                    </div>
                                </div>

                                <input type="hidden" name="geo_latitude" id="geo_latitude">
                                <input type="hidden" name="geo_longitude" id="geo_longitude">
                                <input type="hidden" name="geo_accuracy" id="geo_accuracy">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3. Delivery Section -->
                {% if delivery_slots_configured %}
                <div class="checkout-step-card">
                    <div class="step-header">
                        <h3>🚚 Delivery Options</h3>
                    </div>

                    <div class="form-group">
                        <p class="form-label" id="checkout-slots-label">Select Date &amp; Time</p>
                        <div id="slots-container" class="slots-grid flat-slots" role="group" aria-labelledby="checkout-slots-label">
                            <!-- Slots will be injected here -->
                        </div>
                        <input type="hidden" name="delivery_slot_id" id="delivery_slot_id" required>
                        <input type="hidden" name="delivery_date" id="delivery_date_hidden" required>
                    </div>

                    <div class="form-group mt-24">
                        <label class="form-label" for="delivery_instructions_select">Delivery Instructions</label>
                        <select id="delivery_instructions_select" name="delivery_instructions">
                            <option value="">None</option>
                            <option value="Dont ring bell">Don't ring bell</option>
                            <option value="Leave at door">Leave at door</option>
                            <option value="Deliver to neighbour">Deliver to neighbour</option>
                            <option value="Call before delivery">Call before delivery</option>
                            <option value="Other">Other</option>
                        </select>
                        <input type="text" id="delivery_instructions_other" aria-label="Other delivery instructions" placeholder="Please specify..."
                            class="hidden mt-2">
                    </div>
                </div>
                {% endif %}

                <!-- 4. Tip Section (Moved to plugin) -->
                {% if tip_enabled %}
                {% include "tip/tip-section.html" %}
                {% endif %}

                <!-- 5. Payment Section -->
                <div class="checkout-step-card checkout-payment-card-main">
                    <div class="step-header">
                        <h3>💳 Payment</h3>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="payment_method">Payment Method</label>
                        <select name="payment_method" id="payment_method">
                            {% if online_payment_enabled %}
                            <option value="online" selected>Online Payment (UPI, Cards, Netbanking)</option>
                            {% endif %}
                            {% if cod_enabled %}
                            <option value="cod" {% if not online_payment_enabled %}selected{% endif %}>Cash on Delivery</option>
                            {% endif %}
                        </select>
                    </div>
                    <div class="form-group checkout-notes-group" id="checkout-notes-group">
                        <label class="form-label checkout-notes-label-desktop" for="checkout-notes-field">Order Notes
                            (Optional)</label>
                        <button type="button" class="blocks-button blocks-button-secondary btn-checkout-add-notes" id="btn-checkout-add-notes">Add
                            notes</button>
                        <div class="checkout-notes-expandable" id="checkout-notes-expandable">
                            <textarea name="notes" id="checkout-notes-field" rows="2"
                                placeholder="Any special requests?"></textarea>
                        </div>
                    </div>

                    <div id="min-order-warning" class="order-threshold-cta hidden" role="button" tabindex="0" data-href="/plugins/checkout/cart" aria-label="Add more items to meet minimum order">
                        <span id="min-order-cta-text"></span>
                        <i class="fas fa-chevron-right" aria-hidden="true"></i>
                    </div>
                </div>

                <div class="checkout-actions">
                    <p class="security-note">
                        <i class="fas fa-shield-alt"></i> Your data is processed securely
                    </p>
                </div>

            </form>
        </div>

        <!-- Summary Column -->
        <div class="checkout-summary-column">
            <div class="checkout-summary-sticky">
                <div class="summary-card-modern">
                    <h3 class="summary-title">📜 Order Summary</h3>
                    <div id="checkout-cart-summary">
                        <div class="summary-totals">
                            {{ financials::financial_summary(order=summary, currency_symbol=currency_symbol,
                            id_prefix="checkout") }}

                            {{ savings::lifetime_block(id="checkout-lifetime-savings") }}
                            {{ savings::block(id="checkout-customer-savings") }}

                            <!-- Coupon Section -->
                            <div id="coupon-section" class="coupon-section hidden mt-24">
                                <div class="coupon-input-group" id="coupon-apply-group">
                                    <label class="sr-only" for="coupon_code">Coupon code</label>
                                    <input type="text" id="coupon_code" placeholder="Enter Coupon"
                                        class="coupon-input">
                                    <button type="button" id="btn-apply-coupon"
                                        class="blocks-button blocks-button-primary coupon-apply-btn">Apply</button>
                                </div>
                                <div id="coupon-applied-display" class="coupon-alert-success hidden">
                                    <div class="flex items-center justify-between gap-2">
                                        <span id="applied-coupon-text" class="coupon-code-success"></span>
                                        <button type="button" id="btn-remove-coupon"
                                            class="coupon-remove-btn">&times;</button>
                                    </div>
                                </div>
                                <div id="coupon-error" class="text-danger mt-2 small hidden"></div>
                            </div>

                            <!-- Wallet Section (declarative: owned by checkout, data from wallet contract) -->
                            <div id="wallet-section" class="wallet-option hidden mt-3">
                                <button type="button" id="btn-use-wallet"
                                    class="blocks-button blocks-button-secondary w-full justify-between">
                                    <span>Use Wallet Balance</span>
                                    <span>
                                        <strong id="wallet-balance-display"></strong>
                        <span id="wallet-balance-denom-display" class="ml-1 text-xs text-muted hidden"></span>
                                    </span>
                                </button>
                                <div id="wallet-applied-display" class="wallet-applied hidden mt-2">
                                    <div class="flex items-center justify-between gap-2">
                                        <span class="text-success">✓ Wallet Applied</span>
                                        <button type="button" id="btn-remove-wallet"
                                            class="coupon-remove-btn">&times;</button>
                                    </div>
                                </div>
                            </div>

                            <!-- Store Credit Section (declarative: owned by checkout, data from store-credit contract).
                                 Rendered server-side only when the contract is enabled; toggled client-side by available balance.
                                 The store-credit plugin must NOT inject its own checkout DOM. -->
                            {% if credit_enabled %}
                            <div id="credit-section" class="wallet-option wallet-option--credit hidden mt-3">
                                <button type="button" id="btn-use-credit"
                                    class="blocks-button blocks-button-secondary w-full justify-between">
                                    <span>💳 Buy on Store Credit</span>
                                <span><strong id="credit-balance-display">{% if credit_available %}{{ currency_symbol }}{{ credit_available | price }}{% endif %}</strong><span class="ml-1 text-xs text-muted">available</span></span>
                                </button>
                                <p class="credit-terms" id="credit-terms-display">{% if credit_limit %}Limit {{ currency_symbol }}{{ credit_limit | price }} · {% endif %}{{ credit_grace_days | default(value=21) }} days interest-free, then {{ credit_daily_rate_pct | default(value=0.118) }}%/day · <a href="/plugins/store-credit/index">Terms</a></p>
                                <div id="credit-applied-display" class="wallet-applied hidden mt-2">
                                    <div class="flex items-center justify-between gap-2">
                                        <span class="text-warning">✓ Credit Applied</span>
                                        <button type="button" id="btn-remove-credit"
                                            class="coupon-remove-btn">&times;</button>
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                        </div>
                    </div>

                    <!-- Moved Place Order Button here -->
                    <button type="button" id="btn-place-order-proxy" class="blocks-button blocks-button-primary place-order-btn">Place Order</button>
                </div>
                <div class="security-note">
                    <span>🔒 Secure SSL Checkout</span>
                </div>
            </div>
        </div>
    </div>

    {% set st = summary.total | default(value=0) %}
    {% set wu = summary.wallet_used | default(value=0) %}
    {% set cu = summary.credit_used | default(value=0) %}
    {% set balance_due = st - wu - cu %}
    <div class="checkout-mobile-sticky-bar" id="checkout-mobile-sticky-bar" aria-label="Checkout actions">
        {% if addresses and addresses | length > 0 %}
        <div class="checkout-mobile-sticky-deliver" id="checkout-mobile-sticky-deliver">
            <div class="checkout-deliver-to-row checkout-sticky-deliver-row">
                <span class="checkout-deliver-to-label">Deliver to:</span>
                <p class="checkout-deliver-to-text checkout-deliver-readonly checkout-deliver-to-text--collapsible"
                    id="checkout-deliver-to-text" role="button" tabindex="0" aria-expanded="false"
                    aria-label="Delivery address, show full text">
                    {% for addr in addresses %}
                    {% if loop.first %}
                    {{ addr.full_address }}{% if addr.city %}, {{ addr.city }}{% endif %}{% if addr.state %}, {{
                    addr.state }}{% endif %} {{ addr.postal_code }}
                    {% endif %}
                    {% endfor %}
                </p>
                <button type="button" class="blocks-button blocks-button-secondary btn-checkout-text-link" id="btn-checkout-change-address">Change</button>
            </div>
        </div>
        {% endif %}

        <div class="checkout-mobile-sticky-payment" id="checkout-mobile-sticky-payment">
            <div class="checkout-sticky-payment-row">
                <div class="checkout-sticky-payment-info">
                    <span class="checkout-sticky-payment-label">Pay via:</span>
                    <span class="checkout-sticky-payment-text" id="checkout-sticky-payment-text">Cash on Delivery</span>
                </div>
                <button type="button" class="blocks-button blocks-button-secondary btn-checkout-text-link" id="btn-checkout-change-payment">Change</button>
            </div>
        </div>
        <div class="checkout-sticky-pay-actions">
            <div class="checkout-sticky-payable">
                <span class="checkout-sticky-payable-label">Payable</span>
                <span class="checkout-sticky-payable-amount" id="checkout-sticky-payable-amount">{{ currency_symbol }}{{
                    balance_due | price }}</span>
            </div>
            <button type="button" id="btn-place-order-sticky" class="blocks-button blocks-button-primary place-order-btn place-order-btn-sticky">Place
                Order</button>
        </div>
    </div>
</main>

<!-- Payment method selection -->

<div id="processing-modal" class="checkout-flow-modal" role="dialog" aria-modal="true" aria-labelledby="processing-title" aria-describedby="processing-text" aria-hidden="true" hidden>
    <div class="checkout-flow-modal__content">
        <div class="checkout-flow-modal__spinner" aria-hidden="true"></div>
        <h3 id="processing-title">Processing Order</h3>
        <p class="checkout-flow-modal__copy" id="processing-text">Please wait...</p>
    </div>
</div>

<div id="payment-method-modal" class="checkout-flow-modal" aria-hidden="true" hidden>
    <div class="checkout-flow-modal__content">
        <div class="modal-header">
            <h3 class="m-0">Payment Method</h3>
            <button type="button" class="checkout-modal-close" id="btn-close-payment-modal" aria-label="Close payment method selection">&times;</button>
        </div>
        <div class="payment-options-list">
            {% if online_payment_enabled %}
            <div class="payment-option-card" data-value="online">
                <div class="payment-option-icon">💳</div>
                <div class="payment-option-details">
                    <strong>Online Payment</strong>
                    <span>UPI, Cards, Netbanking</span>
                </div>
                <div class="payment-option-check"></div>
            </div>
            {% endif %}
            {% if cod_enabled %}
            <div class="payment-option-card" data-value="cod">
                <div class="payment-option-icon">💵</div>
                <div class="payment-option-details">
                    <strong>Cash on Delivery</strong>
                    <span>Pay at your doorstep</span>
                </div>
                <div class="payment-option-check"></div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script src="/plugins/checkout/assets/checkout-logic.js?v={{ now_ts }}"></script>
{% if tip_enabled %}
<script src="/plugins/tip/assets/tip.js"></script>
{% endif %}
{% endblock %}