{% extends "base.html" %}

{% block title %}تسویه حساب | {{ site_name }}{% endblock %}

{% block content %}
<div class="container py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">خانه</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('cart') }}">سبد خرید</a></li>
            <li class="breadcrumb-item active">تسویه حساب</li>
        </ol>
    </nav>

    <h1 class="h3 mb-4">تکمیل اطلاعات و پرداخت</h1>

    <div class="row g-4">
        <!-- فرم اطلاعات -->
        <div class="col-lg-8">
            <form method="POST" action="{{ url_for('complete_order') }}" id="checkout-form">
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-user text-primary me-2"></i> اطلاعات شخصی</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">نام کامل <span class="text-danger">*</span></label>
                                <input type="text" name="full_name" class="form-control" value="{{ user.full_name or '' }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">تلفن <span class="text-danger">*</span></label>
                                <input type="text" name="phone" class="form-control" value="{{ user.phone or '' }}" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label">آدرس <span class="text-danger">*</span></label>
                                <textarea name="address" class="form-control" rows="3" required>{{ user.address or '' }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">شهر</label>
                                <input type="text" name="city" class="form-control" value="">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">کد پستی</label>
                                <input type="text" name="postal_code" class="form-control" value="">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- روش ارسال -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-truck text-primary me-2"></i> روش ارسال</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            {% if shipping_methods %}
                                {% for method in shipping_methods %}
                                    <div class="col-md-6">
                                        <div class="form-check border p-3 rounded">
                                            <input class="form-check-input" type="radio" name="shipping_method" id="shipping_{{ method.id }}" value="{{ method.name }}" {% if loop.first %}checked{% endif %}>
                                            <label class="form-check-label w-100" for="shipping_{{ method.id }}">
                                                <strong>{{ method.name }}</strong>
                                                <p class="text-muted small mb-0">{{ method.description }}</p>
                                                <span class="text-primary fw-bold">{{ method.base_cost|persian_price }} تومان</span>
                                            </label>
                                        </div>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div class="col-12">
                                    <div class="alert alert-info">هیچ روش ارسالی تعریف نشده است</div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- روش پرداخت -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-credit-card text-primary me-2"></i> روش پرداخت</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-check border p-3 rounded">
                                    <input class="form-check-input" type="radio" name="payment_method" id="payment_online" value="online" checked>
                                    <label class="form-check-label w-100" for="payment_online">
                                        <i class="fas fa-credit-card text-primary me-2"></i>
                                        <strong>پرداخت آنلاین</strong>
                                        <p class="text-muted small mb-0">پرداخت از طریق درگاه زرین‌پال</p>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check border p-3 rounded">
                                    <input class="form-check-input" type="radio" name="payment_method" id="payment_cod" value="cod">
                                    <label class="form-check-label w-100" for="payment_cod">
                                        <i class="fas fa-money-bill-wave text-success me-2"></i>
                                        <strong>پرداخت در محل</strong>
                                        <p class="text-muted small mb-0">پرداخت هنگام تحویل سفارش</p>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- توضیحات -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white py-3">
                        <h5 class="mb-0"><i class="fas fa-pen text-primary me-2"></i> توضیحات (اختیاری)</h5>
                    </div>
                    <div class="card-body">
                        <textarea name="note" class="form-control" rows="3" placeholder="توضیحات خود را وارد کنید..."></textarea>
                    </div>
                </div>

                <button type="submit" class="btn btn-success btn-lg w-100">
                    <i class="fas fa-check me-2"></i> ثبت سفارش و پرداخت
                </button>
            </form>
        </div>

        <!-- خلاصه سبد خرید -->
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 sticky-top" style="top: 100px;">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0"><i class="fas fa-shopping-bag text-primary me-2"></i> خلاصه سفارش</h5>
                </div>
                <div class="card-body">
                    {% for item in cart_items %}
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            <div class="flex-shrink-0">
                                {% if item.product.images %}
                                    <img src="{{ item.product.images[0].image_url }}" alt="{{ item.product.title }}" style="width: 50px; height: 50px; object-fit: contain;">
                                {% endif %}
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <p class="mb-0 small">{{ item.product.title|truncate(30) }}</p>
                                <p class="mb-0 small text-muted">{{ item.quantity }} × {{ item.product.get_final_price()|persian_price }} تومان</p>
                            </div>
                            <span class="fw-bold text-primary">{{ (item.product.get_final_price() * item.quantity)|persian_price }}</span>
                        </div>
                    {% endfor %}

                    <hr>
                    <div class="d-flex justify-content-between mb-2">
                        <span>جمع کل</span>
                        <span>{{ total|persian_price }} تومان</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span>هزینه ارسال</span>
                        <span>{{ shipping_cost|persian_price }} تومان</span>
                    </div>
                    {% if total_discount > 0 %}
                        <div class="d-flex justify-content-between mb-2 text-success">
                            <span>تخفیف</span>
                            <span>-{{ total_discount|persian_price }} تومان</span>
                        </div>
                    {% endif %}
                    <hr>
                    <div class="d-flex justify-content-between">
                        <strong>مبلغ قابل پرداخت</strong>
                        <strong class="text-primary h5">{{ final_total|persian_price }} تومان</strong>
                    </div>

                    <!-- کد تخفیف -->
                    <div class="mt-3">
                        <div class="input-group">
                            <input type="text" id="coupon-input" class="form-control" placeholder="کد تخفیف">
                            <button class="btn btn-outline-primary" id="apply-coupon">
                                <i class="fas fa-check"></i> اعمال
                            </button>
                        </div>
                        <div id="coupon-result" class="mt-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('apply-coupon')?.addEventListener('click', function() {
        const code = document.getElementById('coupon-input').value;
        const result = document.getElementById('coupon-result');
        
        if (!code) {
            result.innerHTML = '<div class="alert alert-warning alert-sm">لطفاً کد تخفیف را وارد کنید</div>';
            return;
        }
        
        fetch('{{ url_for("apply_coupon") }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({code: code})
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                result.innerHTML = '<div class="alert alert-success alert-sm">✅ ' + data.message + '</div>';
                location.reload();
            } else {
                result.innerHTML = '<div class="alert alert-danger alert-sm">❌ ' + data.message + '</div>';
            }
        })
        .catch(() => {
            result.innerHTML = '<div class="alert alert-danger alert-sm">❌ خطا در ارتباط با سرور</div>';
        });
    });
});
</script>
{% endblock %}