{{ header }}

<section>
    <div class="container">
        <!-- Breadcrumb -->
        <nav class="franklin-breadcrumb" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                {% for breadcrumb in breadcrumbs %}
                    <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
                        {% if loop.last %}
                            {{ breadcrumb.text }}
                        {% elseif loop.first %}
                            <a href="{{ breadcrumb.href }}">
                                <i class="bi bi-house-door-fill"></i> Home
                            </a>
                        {% else %}
                            <a href="{{ breadcrumb.href }}">
                                {{ breadcrumb.text }}
                            </a>
                        {% endif %}
                    </li>
                {% endfor %}
            </ol>
        </nav>
    </div>
</section>

<section class="common-pageheader">
    <div class="container">
        <div class="mb-3">
            <h1 class="fw-bold">{{ heading_title }}</h1>
            <p class="text-muted">
                Complete your order securely
            </p>
        </div>
    </div>
</section>

<section class="franklin-checkout py-5">
    <div class="container">
        <div class="franklin-checkout-header text-center mb-5">
            <h2 class="fw-bold">Secure Checkout</h2>
            <p class="text-muted">
                Complete your purchase in two easy steps
            </p>
            <div class="checkout-progress">
                <div class="checkout-progress-bar">
                    <div class="checkout-step active">
                        <span>1</span>
                        <small>Customer Details</small>
                    </div>
                    <div class="checkout-line"></div>
                    <div class="checkout-step">
                        <span>2</span>
                        <small>Delivery & Payment</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <!-- LEFT -->
            <div class="col-lg-8">

                <!-- STEP 1 : CUSTOMER INFORMATION -->
                <div id="checkout-step-1">
                    {% if register %}
                        <div class="card shadow-sm border-0 rounded-4 overflow-hidden mb-4">
                            <div class="card-header bg-light border-bottom py-3">
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-primary rounded-pill px-3 py-2 me-3">STEP 1</span>
                                    <div>
                                        <h5 class="mb-0 fw-bold">Customer Information</h5>
                                        <small class="text-muted">Enter your billing and shipping details.</small>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-4">
                                {{ register }}
                            </div>
                        </div>
                    {% else %}
                        <!-- Logged-In User Fallback View for Step 1 -->
                        <div class="card shadow-sm border-0 rounded-4 overflow-hidden mb-4">
                            <div class="card-header bg-light border-bottom py-3">
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-primary rounded-pill px-3 py-2 me-3">STEP 1</span>
                                    <div>
                                        <h5 class="mb-0 fw-bold">Account Verified</h5>
                                        <small class="text-muted">You are logged in and ready to proceed.</small>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body p-4 text-center py-5">
                                <i class="bi bi-check-circle-fill text-success display-4 mb-3"></i>
                                <h4 class="fw-bold">Welcome back!</h4>
                                <p class="text-muted mb-4">Your account details and default delivery address are loaded. Click continue to choose your shipping and payment methods.</p>
                                
                                <!-- Render native address controllers visibly so OpenCart's session binds the address properly -->
                                <div class="mb-3 text-start">
                                    {{ shipping_address }}
                                    {{ payment_address }}
                                </div>

                                <button type="button" id="button-franklin-continue" class="btn btn-primary btn-lg rounded-pill px-5 mt-3">
                                    <span class="button-text">Continue to Delivery & Payment</span>
                                    <span class="loading-spinner d-none"><i class="fa fa-spinner fa-spin"></i></span>
                                </button>
                            </div>
                        </div>
                    {% endif %}
                </div>

                <!-- STEP 2 : DELIVERY & PAYMENT -->
                <div id="checkout-step-2" class="d-none">
                    <div class="card shadow-sm border-0 rounded-4 overflow-hidden mb-4">
                        <div class="card-header bg-light border-bottom py-3">
                            <div class="d-flex align-items-center">
                                <span class="badge bg-success rounded-pill px-3 py-2 me-3">STEP 2</span>
                                <div>
                                    <h5 class="mb-0 fw-bold">Delivery & Payment</h5>
                                    <small class="text-muted">Choose your shipping and payment options.</small>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-4">
                            
                            <div id="shipping-method-section" class="mb-4">
                                {{ shipping_method }}
                            </div>

                            <div id="payment-method-section" class="mb-4">
                                {{ payment_method }}
                            </div>

                            <div class="mb-4">
                                <h6 class="fw-semibold mb-3">
                                    <i class="bi bi-chat-left-text me-2 text-warning"></i>
                                    Order Notes
                                </h6>
                                <textarea class="form-control" name="comment" rows="4" placeholder="Add any delivery instructions (optional)"></textarea>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <button type="button" id="btn-back-step-1" class="btn btn-outline-secondary rounded-pill px-4">
                                    <i class="bi bi-arrow-left me-2"></i> Back
                                </button>
                            </div>

                        </div>
                    </div>
                </div> <!-- checkout-step-2 -->

            </div> <!-- col-lg-8 -->

            <!-- RIGHT -->
            <div class="col-lg-4">
                <div class="position-sticky" style="top:100px;">
                    <div class="card shadow-sm border-0 rounded-4 overflow-hidden">
                        <div class="card-header bg-light border-bottom py-3">
                            <h5 class="mb-0 fw-bold">
                                <i class="bi bi-bag-check me-2 text-success"></i>
                                Order Summary
                            </h5>
                        </div>
                        <div class="card-body p-4" id="checkout-confirm">
                            {{ confirm }}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

{{ footer }}