{% extends 'base.html' %}
{% block title %}Checkout | Nura Store{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-md-8">
            <h4 class="mb-4">Shipping Details</h4>
            <form id="checkout-form">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Full Name</label>
                        <input type="text" class="form-control" id="full_name" required>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Phone Number</label>
                        <input type="tel" class="form-control" id="phone" placeholder="080..." required>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Address</label>
                        <textarea class="form-control" id="address" rows="3" required></textarea>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">City</label>
                        <input type="text" class="form-control" id="city" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">State / Region</label>
                        <select class="form-select" id="state" required onchange="App.calculateTotal()">
                            <option value="">Select State...</option>
                            </select>
                        <div id="delivery-info" class="form-text text-primary small"></div>
                    </div>
                </div>

                <hr class="my-4">

                <h4 class="mb-3">Payment Method</h4>

                <div class="my-3">
                    <div class="form-check">
                        <input id="paystack" name="paymentMethod" type="radio" class="form-check-input" value="paystack" checked>
                        <label class="form-check-label" for="paystack">
                            Pay with Card / Transfer (Paystack)
                            <img src="https://upload.wikimedia.org/wikipedia/commons/c/db/Paystack_Logo.png" alt="Paystack" height="20" class="ms-2">
                        </label>
                    </div>
                    <div class="form-check">
                        <input id="pod" name="paymentMethod" type="radio" class="form-check-input" value="pod">
                        <label class="form-check-label" for="pod">
                            Payment on Delivery (Cash/POS)
                        </label>
                    </div>
                    <div class="form-check">
                        <input id="transfer" name="paymentMethod" type="radio" class="form-check-input" value="transfer">
                        <label class="form-check-label" for="transfer">
                            Direct Bank Transfer
                        </label>
                    </div>
                </div>

                <div id="transfer-details" class="alert alert-info d-none">
                    <strong>Bank Details:</strong><br>
                    GTBank - 0123456789<br>
                    Account Name: Adashe Project<br>
                    <small>Please use your Order ID as reference.</small>
                </div>

                <button class="btn btn-primary btn-lg w-100" type="submit">Place Order</button>
            </form>
        </div>

        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body">
                    <h4 class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-primary">Your Cart</span>
                        <span class="badge bg-primary rounded-pill" id="summary-count">0</span>
                    </h4>
                    
                    <ul class="list-group mb-3" id="summary-list">
                        </ul>

                    <li class="list-group-item d-flex justify-content-between bg-light">
                        <span class="text-muted">Delivery Fee</span>
                        <span id="summary-delivery">₦0.00</span>
                    </li>

                    <li class="list-group-item d-flex justify-content-between bg-light">
                        <span class="fw-bold">Total (NGN)</span>
                        <strong id="summary-total">₦0.00</strong>
                    </li>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Reuse the Fetch Cart Logic to fill the summary
        App.loadCheckoutSummary();
        App.loadDeliveryZones();

        // Handle Form Submit
        document.getElementById('checkout-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const btn = e.target.querySelector('button');
            const originalText = btn.innerText;
            btn.innerText = 'Processing...';
            btn.disabled = true;

            const formData = {
                full_name: document.getElementById('full_name').value,
                phone: document.getElementById('phone').value,
                address: document.getElementById('address').value,
                city: document.getElementById('city').value,
                state: document.getElementById('state').value,
            };

            await App.placeOrder(formData, btn, originalText);
        });
    });
</script>
{% endblock %}