{% extends 'base.html' %}
{% load static %}

{% block title %}{{ product.name }} — Деталі товару{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{% url 'core:index' %}" class="text-decoration-none text-muted small d-flex align-items-center mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left me-1" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
        </svg>
        Назад до списку
    </a>
    <div class="d-flex align-items-center justify-content-between">
        <h1 class="h3 fw-bold m-0">{{ product.name }}</h1>
        <div class="text-muted small">WordPress ID: {{ product.wp_id }}</div>
    </div>
</div>

<div class="row g-4">
    <!-- Left Column: Product Info -->
    <div class="col-lg-4">
        <div class="card mb-4 border-0">
            {% if product.image %}
            <img src="{{ product.image }}" alt="{{ product.name }}" class="card-img-top img-fluid" style="border-radius: 12px 12px 0 0;">
            {% else %}
            <div class="d-flex align-items-center justify-content-center bg-light text-muted py-5" style="border-radius: 12px 12px 0 0;">N/A</div>
            {% endif %}
            <div class="p-4">
                <div class="mb-3">
                    <div class="text-muted small mb-1">Ціна</div>
                    <div class="h4 fw-bold mb-0 text-primary">{{ product.price }} ₴</div>
                </div>
                <div class="mb-3">
                    <div class="text-muted small mb-1">Артикул (SKU)</div>
                    <div class="fw-medium">{{ product.sku|default:"-" }}</div>
                </div>
                <div class="mb-3">
                    <div class="text-muted small mb-1">Статус</div>
                    <span class="status-{{ product.stock_status }} fw-bold">
                        {% if product.stock_status == 'instock' %}
                        В наявності
                        {% else %}
                        Немає в наявності
                        {% endif %}
                    </span>
                </div>
                <div class="mb-0">
                    <div class="text-muted small mb-1">Усього продано</div>
                    <div class="badge bg-light text-dark px-3 py-2 border fw-medium">{{ product.total_sales }}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Column: Variations Table -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-white p-4 border-0 pb-0">
                <h2 class="h5 fw-bold m-0">Варіації (Розміри)</h2>
            </div>
            <div class="p-4">
                <div class="table-responsive">
                    <table class="table border rounded">
                        <thead>
                            <tr class="bg-light">
                                <th class="py-3 px-4 text-uppercase small text-muted">Розмір</th>
                                <th class="py-3 px-4 text-uppercase small text-muted text-end">Ціна варіації</th>
                                <th class="py-3 px-4 text-uppercase small text-muted text-end">Залишок на складі</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for v in variations %}
                            <tr>
                                <td class="py-3 px-4 fw-medium">{{ v.size }}</td>
                                <td class="py-3 px-4 text-end fw-bold text-primary">{{ v.price }} ₴</td>
                                <td class="py-3 px-4 text-end">
                                    <span class="badge rounded-pill {% if v.stock_quantity > 0 %}bg-success-subtle text-success{% else %}bg-danger-subtle text-danger{% endif %} px-3">
                                        {{ v.stock_quantity }}
                                    </span>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center py-4 text-muted small">Варіацій для цього товару не знайдено.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}