{% extends "base.html" %}

{% block title %}سبد خرید | {{ site_name }}{% endblock %}

{% block content %}

<!-- ===== HEADER سبد خرید ===== -->
<section style="
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2563eb 100%);
    padding: 30px 0 20px;
    color: white;
    margin-bottom: 32px;
    border-radius: 0 0 30px 30px;
">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 style="font-size: 28px; font-weight: 800;">
                    <i class="fas fa-shopping-cart"></i> سبد خرید
                </h1>
                <p style="opacity: 0.9; margin-top: 4px;">محصولات انتخاب شده خود را بررسی کنید</p>
            </div>
            <div class="col-lg-4 text-center d-none d-lg-block">
                <i class="fas fa-shopping-bag" style="font-size: 50px; opacity: 0.3;"></i>
            </div>
        </div>
    </div>
</section>

<!-- ===== سبد خرید ===== -->
<div class="container">
    {% if cart_items %}
    
        <!-- ===== جدول سبد خرید ===== -->
        <div style="
            background: white;
            border-radius: var(--radius-lg);
            border: 1px solid var(--gray-200);
            overflow: hidden;
            margin-bottom: 24px;
        ">
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; min-width: 600px;">
                    <thead style="background: var(--gray-50); border-bottom: 2px solid var(--gray-200);">
                        <tr>
                            <th style="padding: 16px 20px; text-align: right; font-weight: 700; font-size: 14px; color: var(--gray-600);">محصول</th>
                            <th style="padding: 16px 20px; text-align: center; font-weight: 700; font-size: 14px; color: var(--gray-600);">قیمت</th>
                            <th style="padding: 16px 20px; text-align: center; font-weight: 700; font-size: 14px; color: var(--gray-600);">تعداد</th>
                            <th style="padding: 16px 20px; text-align: center; font-weight: 700; font-size: 14px; color: var(--gray-600);">جمع</th>
                            <th style="padding: 16px 20px; text-align: center; font-weight: 700; font-size: 14px; color: var(--gray-600);">عملیات</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in cart_items %}
                            <tr style="border-bottom: 1px solid var(--gray-200);">
                                <!-- محصول -->
                                <td style="padding: 16px 20px;">
                                    <div style="display: flex; align-items: center; gap: 14px;">
                                        <div style="
                                            width: 70px;
                                            height: 70px;
                                            background: var(--gray-100);
                                            border-radius: var(--radius-md);
                                            overflow: hidden;
                                            flex-shrink: 0;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                        ">
                                            <img src="{{ item.product.images[0].image_url if item.product.images else url_for('static', filename='images/no-image.png') }}" 
                                                 alt="{{ item.product.title }}" 
                                                 style="max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px;">
                                        </div>
                                        <div>
                                            <a href="{{ url_for('product_detail', slug=item.product.slug) }}" 
                                               style="font-weight: 600; font-size: 14px; color: var(--dark);">
                                                {{ item.product.title }}
                                            </a>
                                            <div style="font-size: 12px; color: var(--gray-400); margin-top: 2px;">
                                                {% if item.product.brand %}
                                                    <span>{{ item.product.brand.name }}</span>
                                                {% endif %}
                                                {% if item.product.sku %}
                                                    <span style="margin-right: 8px;">کد: {{ item.product.sku }}</span>
                                                {% endif %}
                                            </div>
                                            <div style="font-size: 12px; margin-top: 4px;">
                                                {% if item.product.stock_quantity > 0 %}
                                                    <span style="color: var(--success);">
                                                        <i class="fas fa-check-circle"></i> موجود
                                                    </span>
                                                {% else %}
                                                    <span style="color: var(--danger);">
                                                        <i class="fas fa-times-circle"></i> ناموجود
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                
                                <!-- قیمت -->
                                <td style="padding: 16px 20px; text-align: center; font-weight: 700; font-size: 16px; color: var(--dark);">
                                    {{ item.price|persian_number }}
                                    <span style="font-size: 12px; font-weight: 400; color: var(--gray-400);">تومان</span>
                                </td>
                                
                                <!-- تعداد -->
                                <td style="padding: 16px 20px; text-align: center;">
                                    <div style="display: flex; align-items: center; justify-content: center; gap: 6px;">
                                        <button onclick="updateCart({{ item.cart_item.id }}, -1)" 
                                                style="
                                                    width: 32px;
                                                    height: 32px;
                                                    border: 1px solid var(--gray-300);
                                                    border-radius: 50%;
                                                    background: white;
                                                    cursor: pointer;
                                                    transition: var(--transition);
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    font-size: 14px;
                                                    color: var(--gray-600);
                                                "
                                                onmouseover="this.style.background='var(--primary-light)'; this.style.borderColor='var(--primary)'"
                                                onmouseout="this.style.background='white'; this.style.borderColor='var(--gray-300)'">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <span id="qty-{{ item.cart_item.id }}" style="font-weight: 700; font-size: 18px; min-width: 30px; text-align: center;">
                                            {{ item.cart_item.quantity|persian_number }}
                                        </span>
                                        <button onclick="updateCart({{ item.cart_item.id }}, 1)" 
                                                style="
                                                    width: 32px;
                                                    height: 32px;
                                                    border: 1px solid var(--gray-300);
                                                    border-radius: 50%;
                                                    background: white;
                                                    cursor: pointer;
                                                    transition: var(--transition);
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    font-size: 14px;
                                                    color: var(--gray-600);
                                                "
                                                onmouseover="this.style.background='var(--primary-light)'; this.style.borderColor='var(--primary)'"
                                                onmouseout="this.style.background='white'; this.style.borderColor='var(--gray-300)'">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </td>
                                
                                <!-- جمع -->
                                <td style="padding: 16px 20px; text-align: center; font-weight: 700; font-size: 16px; color: var(--primary);">
                                    {{ item.total|persian_number }}
                                    <span style="font-size: 12px; font-weight: 400; color: var(--gray-400);">تومان</span>
                                </td>
                                
                                <!-- عملیات -->
                                <td style="padding: 16px 20px; text-align: center;">
                                    <button onclick="removeFromCart({{ item.cart_item.id }})" 
                                            style="
                                                background: transparent;
                                                border: none;
                                                color: var(--gray-400);
                                                cursor: pointer;
                                                transition: var(--transition);
                                                font-size: 18px;
                                            "
                                            onmouseover="this.style.color='var(--danger)'"
                                            onmouseout="this.style.color='var(--gray-400)'">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- ===== خلاصه سبد خرید ===== -->
        <div class="row g-4">
            <!-- کد تخفیف -->
            <div class="col-lg-6">
                <div style="
                    background: white;
                    border-radius: var(--radius-lg);
                    border: 1px solid var(--gray-200);
                    padding: 24px;
                ">
                    <h5 style="font-weight: 700; margin-bottom: 12px;">
                        <i class="fas fa-ticket-alt" style="color: var(--primary);"></i> کد تخفیف
                    </h5>
                    <div style="display: flex; gap: 10px;">
                        <input type="text" id="coupon-code" class="form-control" placeholder="کد تخفیف خود را وارد کنید..." style="border-radius: var(--radius-md);">
                        <button onclick="applyCoupon()" class="btn btn-blue" style="border-radius: var(--radius-md); white-space: nowrap;">
                            <i class="fas fa-check"></i> اعمال
                        </button>
                    </div>
                    <div id="coupon-result" style="margin-top: 10px;"></div>
                </div>
            </div>
            
            <!-- جمع کل -->
            <div class="col-lg-6">
                <div style="
                    background: white;
                    border-radius: var(--radius-lg);
                    border: 1px solid var(--gray-200);
                    padding: 24px;
                ">
                    <h5 style="font-weight: 700; margin-bottom: 16px;">
                        <i class="fas fa-calculator" style="color: var(--primary);"></i> خلاصه سبد خرید
                    </h5>
                    
                    <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gray-200);">
                        <span style="color: var(--gray-600);">جمع کل</span>
                        <span style="font-weight: 700; font-size: 16px;">{{ total|persian_number }} تومان</span>
                    </div>
                    
                    {% if total_discount > 0 %}
                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gray-200);">
                            <span style="color: var(--success);">تخفیف</span>
                            <span style="color: var(--success); font-weight: 700;">-{{ total_discount|persian_number }} تومان</span>
                        </div>
                    {% endif %}
                    
                    <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gray-200);">
                        <span style="color: var(--gray-600);">هزینه ارسال</span>
                        {% if shipping_cost > 0 %}
                            <span style="font-weight: 700;">{{ shipping_cost|persian_number }} تومان</span>
                        {% else %}
                            <span style="color: var(--success); font-weight: 700;">رایگان</span>
                        {% endif %}
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; padding: 12px 0; margin-top: 8px; border-top: 2px solid var(--primary);">
                        <span style="font-weight: 700; font-size: 18px;">مبلغ قابل پرداخت</span>
                        <span style="font-weight: 800; font-size: 22px; color: var(--primary);">
                            {{ final_total|persian_number }} تومان
                        </span>
                    </div>
                    
                    <div style="display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap;">
                        <a href="{{ url_for('products') }}" class="btn btn-outline-secondary" style="border-radius: var(--radius-md); flex: 1;">
                            <i class="fas fa-arrow-right"></i> ادامه خرید
                        </a>
                        <a href="{{ url_for('checkout') }}" class="btn btn-success" style="border-radius: var(--radius-md); flex: 2;">
                            <i class="fas fa-credit-card"></i> تسویه حساب
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
    {% else %}
        <!-- ===== سبد خرید خالی ===== -->
        <div style="
            background: white;
            border-radius: var(--radius-lg);
            border: 1px solid var(--gray-200);
            padding: 60px 20px;
            text-align: center;
        ">
            <div style="font-size: 64px; color: var(--gray-300); margin-bottom: 16px;">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <h3 style="font-weight: 700; margin-bottom: 8px;">سبد خرید شما خالی است!</h3>
            <p style="color: var(--gray-500); margin-bottom: 24px;">برای خرید به صفحه محصولات بروید و محصولات مورد نظر خود را انتخاب کنید.</p>
            <a href="{{ url_for('products') }}" class="btn btn-primary" style="border-radius: var(--radius-xl); padding: 12px 40px;">
                <i class="fas fa-shopping-bag"></i> مشاهده محصولات
            </a>
        </div>
    {% endif %}
</div>

{% endblock %}

{% block extra_js %}
<script>
// ===== به‌روزرسانی تعداد =====
function updateCart(cartId, change) {
    const qtySpan = document.getElementById('qty-' + cartId);
    let currentQty = parseInt(qtySpan.textContent.replace(/,/g, ''));
    let newQty = currentQty + change;
    
    if (newQty < 1) {
        showToast('⚠️ تعداد نمی‌تواند کمتر از ۱ باشد', 'warning');
        return;
    }
    
    // نمایش لودینگ
    qtySpan.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    
    $.ajax({
        url: '{{ url_for("update_cart") }}',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            cart_id: cartId,
            quantity: newQty
        }),
        success: function(response) {
            if (response.status === 'success') {
                location.reload();
            } else {
                showToast('❌ ' + response.message, 'error');
                location.reload();
            }
        },
        error: function() {
            showToast('❌ خطا در بروزرسانی', 'error');
            location.reload();
        }
    });
}

// ===== حذف از سبد خرید =====
function removeFromCart(cartId) {
    if (!confirm('آیا از حذف این محصول از سبد خرید اطمینان دارید؟')) {
        return;
    }
    
    $.ajax({
        url: '{{ url_for("remove_from_cart", cart_id=999) }}'.replace('999', cartId),
        method: 'POST',
        success: function(response) {
            if (response.status === 'success') {
                showToast('✅ ' + response.message, 'success');
                location.reload();
            } else {
                showToast('❌ ' + response.message, 'error');
            }
        },
        error: function() {
            showToast('❌ خطا در حذف محصول', 'error');
        }
    });
}

// ===== اعمال کد تخفیف =====
function applyCoupon() {
    const code = $('#coupon-code').val().trim();
    const result = $('#coupon-result');
    
    if (!code) {
        result.html('<div class="alert alert-danger alert-sm">لطفاً کد تخفیف را وارد کنید</div>');
        return;
    }
    
    result.html('<div class="alert alert-info alert-sm"><i class="fas fa-spinner fa-spin"></i> در حال بررسی...</div>');
    
    $.ajax({
        url: '{{ url_for("apply_coupon") }}',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({code: code}),
        success: function(response) {
            if (response.status === 'success') {
                result.html('<div class="alert alert-success alert-sm">✅ ' + response.message + '</div>');
                setTimeout(function() {
                    location.reload();
                }, 1500);
            } else {
                result.html('<div class="alert alert-danger alert-sm">❌ ' + response.message + '</div>');
            }
        },
        error: function() {
            result.html('<div class="alert alert-danger alert-sm">❌ خطا در اعمال کد تخفیف</div>');
        }
    });
}

// ===== Enter برای اعمال کد تخفیف =====
$('#coupon-code').on('keypress', function(e) {
    if (e.which === 13) {
        applyCoupon();
    }
});
</script>
{% endblock %}