{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% trans "Checkout" %} | Jimma Market{% endblock %}

{% block content %}
<section class="py-5 bg-light min-vh-100">
  <div class="container">
    <div class="row g-5">
      <!-- Checkout Form -->
      <div class="col-lg-8">
        <div class="card border-0 shadow-sm p-4 p-md-5 rounded-4">
          <h2 class="fw-bold mb-4">{% trans "Delivery Information" %} 📍</h2>
          <p class="text-secondary mb-5">{% trans "Complete your order by providing your delivery details. No registration required!" %}</p>

          <form action="{% url 'checkout' %}" method="post">
            {% csrf_token %}
            
            <div class="row g-4 mb-5">
              <div class="col-md-6">
                <label class="form-label small fw-bold">{% trans "Full Name" %}</label>
                <input type="text" name="full_name" required class="form-control rounded-pill border-0 shadow-sm bg-white px-4 py-2" placeholder="{% trans "e.g. Abebe Kebede" %}">
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-bold">{% trans "Phone Number" %} ({% trans "Required for delivery" %})</label>
                <input type="tel" name="phone" required class="form-control rounded-pill border-0 shadow-sm bg-white px-4 py-2" placeholder="{% trans "e.g. 0911223344" %}">
              </div>
              <div class="col-md-12">
                <label class="form-label small fw-bold">{% trans "Email Address" %} ({% trans "Optional" %})</label>
                <input type="email" name="email" class="form-control rounded-pill border-0 shadow-sm bg-white px-4 py-2" placeholder="{% trans "For order updates via email" %}">
              </div>
            </div>

            <h4 class="fw-bold mb-4">{% trans "Where should we deliver?" %}</h4>
            <div class="row g-4 mb-5">
              <div class="col-md-6">
                <label class="form-label small fw-bold">{% trans "Select Kebele" %}</label>
                <select name="kebele" required class="form-select rounded-pill border-0 shadow-sm bg-white px-4 py-2">
                  <option value="" disabled selected>{% trans "Choose your location..." %}</option>
                  {% for code, name in kebeles %}
                    <option value="{{ code }}">{{ name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label small fw-bold">{% trans "Delivery Time Slot" %}</label>
                <select name="delivery_time_slot" required class="form-select rounded-pill border-0 shadow-sm bg-white px-4 py-2">
                  {% for code, name in time_slots %}
                    <option value="{{ code }}">{{ name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-12">
                <label class="form-label small fw-bold">{% trans "Detailed Address" %}</label>
                <textarea name="address" required class="form-control rounded-4 border-0 shadow-sm bg-white px-4 py-3" rows="3" placeholder="{% trans "e.g. Near Kochi Post Office, House No. 123" %}"></textarea>
              </div>
            </div>

            <h4 class="fw-bold mb-4">{% trans "Payment Method" %}</h4>
            <div class="row g-3 mb-5">
              <div class="col-md-6">
                <div class="form-check card p-3 border-0 shadow-sm hover-lift">
                  <input class="form-check-input ms-0 me-3" type="radio" name="payment_method" id="pay1" value="Cash on Delivery" checked>
                  <label class="form-check-label fw-bold" for="pay1">
                    {% trans "Cash on Delivery" %} 💵
                  </label>
                  <p class="small text-secondary mb-0 mt-2 ms-4">{% trans "Pay when you receive your items." %}</p>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-check card p-3 border-0 shadow-sm hover-lift opacity-50">
                  <input class="form-check-input ms-0 me-3" type="radio" name="payment_method" id="pay2" value="Telebirr" disabled>
                  <label class="form-check-label fw-bold" for="pay2">
                    {% trans "Telebirr / CBE Birr" %} 📱
                  </label>
                  <p class="small text-secondary mb-0 mt-2 ms-4">{% trans "Coming soon!" %}</p>
                </div>
              </div>
            </div>

            {% if not user.is_authenticated %}
            <div class="bg-primary-subtle p-4 rounded-4 mb-5 border-start border-primary border-4">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="create_account" id="saveDetails">
                <label class="form-check-label fw-bold text-dark" for="saveDetails">
                  {% trans "Save my details for next time" %}
                </label>
                <p class="small text-secondary mb-0">{% trans "This will create a free account for you to track your order." %}</p>
              </div>
            </div>
            {% endif %}

            <button type="submit" class="btn btn-primary btn-lg w-100 rounded-pill py-3">
              {% trans "Place Order Now" %} 🚀
            </button>
          </form>
        </div>
      </div>

      <!-- Order Summary -->
      <div class="col-lg-4">
        <div class="card border-0 shadow-sm p-4 rounded-4 sticky-top" style="top: 100px;">
          <h5 class="fw-bold mb-4">{% trans "Order Summary" %}</h5>
          
          <div class="mb-4">
             <div class="d-flex justify-content-between mb-2">
               <span class="text-secondary">{% trans "Subtotal" %}</span>
               <span class="fw-bold">{{ total }} ETB</span>
             </div>
             <div class="d-flex justify-content-between mb-2">
               <span class="text-secondary">{% trans "Delivery Fee" %}</span>
               <span class="text-success fw-bold">{% trans "FREE" %}</span>
             </div>
             <hr class="my-3 border-light">
             <div class="d-flex justify-content-between">
               <span class="h5 fw-bold mb-0">{% trans "Total" %}</span>
               <span class="h5 fw-bold mb-0 text-primary">{{ total }} ETB</span>
             </div>
          </div>

          <div class="alert alert-light border-0 small mb-0 rounded-3">
            <i class="bi bi-info-circle me-2 text-primary"></i>
            {% trans "By placing this order, you agree to Jimma Market's terms of service and delivery policies." %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}