{% extends 'layouts/base.html' %}
{% load price_tags %}

{% block title %}نهایی سازی سفارش{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-7">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <h3 class="mb-4">اطلاعات سفارش</h3>

                <form method="post">
                    {% csrf_token %}

                    <div class="mb-3">
                        <label class="form-label">نام و نام خانوادگی</label>
                        {{ form.full_name }}
                        {% if form.full_name.errors %}
                            <div class="text-danger small mt-1">{{ form.full_name.errors }}</div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label">شماره تماس</label>
                        {{ form.phone }}
                        {% if form.phone.errors %}
                            <div class="text-danger small mt-1">{{ form.phone.errors }}</div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label">آدرس</label>
                        {{ form.address }}
                        {% if form.address.errors %}
                            <div class="text-danger small mt-1">{{ form.address.errors }}</div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label class="form-label">توضیحات</label>
                        {{ form.note }}
                        {% if form.note.errors %}
                            <div class="text-danger small mt-1">{{ form.note.errors }}</div>
                        {% endif %}
                    </div>

                    <button type="submit" class="btn btn-success w-100">
                        ثبت نهایی سفارش
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <h4 class="mb-3">خلاصه سبد خرید</h4>

                {% for item in cart_items %}
                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                        <div>
                            <div class="fw-bold">{{ item.food.name }}</div>
                            <small class="text-muted">تعداد: {{ item.quantity }}</small>
                        </div>
                        <div>
                            {% widthratio item.food.price 1 item.quantity as item_total %}
                            {{ item_total|price_format }}
                        </div>
                    </div>
                {% endfor %}

                <div class="d-flex justify-content-between align-items-center mt-3 pt-2">
                    <strong>مبلغ کل:</strong>
                    <strong class="text-success">{{ total_price|price_format }}</strong>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}