{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
    <div class="row g-5">
        <div class="col-md-7">
            <h4 class="fw-bold mb-4">Shipping Information</h4>
            <div class="card border-0 shadow-sm p-4 rounded-4">
                <form action="{{ url_for('web.checkout') }}" method="POST">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label small fw-bold text-muted">Full Name</label>
                            <input type="text" name="name" class="form-control bg-light border-0 py-2"
                                value="{{ current_user.username if current_user else '' }}"
                                placeholder="Enter your name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-muted">Email Address</label>
                            <input type="email" name="email" class="form-control bg-light border-0 py-2"
                                value="{{ current_user.email if current_user else '' }}" placeholder="email@example.com"
                                required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-muted">Phone Number</label>
                            <input type="text" name="phone" class="form-control bg-light border-0 py-2"
                                value="{{ current_user.phone if current_user else '' }}" placeholder="03XXXXXXXXX"
                                required>
                        </div>
                        <div class="col-12">
                            <label class="form-label small fw-bold text-muted">Delivery Address</label>
                            <textarea name="address" class="form-control bg-light border-0 py-2" rows="3"
                                placeholder="House #, Street, City..."
                                required>{{ current_user.address if current_user else '' }}</textarea>
                        </div>
                    </div>
                    <hr class="my-4">
                    <button type="submit" class="btn btn-primary btn-lg w-100 rounded-pill fw-bold shadow-sm">
                        Place Order (Cash on Delivery)
                    </button>
                </form>
            </div>
        </div>

        <div class="col-md-5">
            <h4 class="fw-bold mb-4">Order Summary</h4>
            <div class="card border-0 shadow-sm p-4 rounded-4 bg-white sticky-top" style="top: 100px;">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Subtotal</span>
                    <span class="fw-bold">{{ currency }} {{ "{:,.0f}".format(total) }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Shipping</span>
                    <span class="text-success fw-bold">FREE</span>
                </div>
                
                {% if coupon %}
                <div class="d-flex justify-content-between mb-2 text-danger">
                    <span>Discount ({{ coupon.code }}) 
                        <a href="{{ url_for('web.remove_coupon') }}" class="text-danger ms-1 text-decoration-none" title="Remove"><i class="bi bi-x-circle-fill"></i></a>
                    </span>
                    <span class="fw-bold">- {{ currency }} {{ "{:,.0f}".format(coupon.discount) }}</span>
                </div>
                {% endif %}

                <hr>
                <div class="d-flex justify-content-between mb-4">
                    <span class="fs-5 fw-bold">Total</span>
                    <span class="fs-5 fw-bold text-primary">{{ currency }} {{ "{:,.0f}".format(final_total) }}</span>
                </div>

                <!-- Promo Code Form -->
                {% if not coupon %}
                <div class="p-3 bg-light rounded-3 mb-4">
                    <form action="{{ url_for('web.apply_coupon') }}" method="POST" class="d-flex gap-2">
                        <input type="text" name="code" class="form-control border-0" placeholder="Enter Promo Code" required>
                        <button type="submit" class="btn btn-dark fw-bold px-4">Apply</button>
                    </form>
                </div>
                {% endif %}

                <div class="alert alert-info border-0 rounded-3 small mb-0">
                    <i class="bi bi-info-circle-fill me-2"></i> Only Cash on Delivery is available for now.
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}