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

{% block title %}{{ product.name }} - Pasar UMKM Pemagarsari{% endblock %}

{% block content %}
<section class="py-3 py-md-5">
    <div class="container">
        <!-- Breadcrumb - Hidden on small mobile to save space -->
        <nav aria-label="breadcrumb" class="mb-4 d-none d-sm-block">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none">Beranda</a></li>
                <li class="breadcrumb-item"><a href="{% url 'product_list' %}" class="text-decoration-none">Produk</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ product.name }}</li>
            </ol>
        </nav>

        <div class="row g-4 g-lg-5">
            <!-- Product Image -->
            <div class="col-lg-6">
                <div class="card shadow-sm border-0 p-1 p-md-2 h-100 bg-white overflow-hidden">
                    {% if product.image %}
                        <img src="{{ product.image.url }}" class="img-fluid rounded w-100" alt="{{ product.name }}" style="object-fit: cover; max-height: 500px;">
                    {% else %}
                        <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="min-height: 300px; height: 100%;">
                            <i class="fas fa-image fa-5x text-muted opacity-50"></i>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Product Info -->
            <div class="col-lg-6">
                <div class="ps-lg-3 mt-3 mt-lg-0">
                    <span class="badge bg-secondary mb-3 px-3 py-2 fs-7">{{ product.category.name }}</span>
                    <h1 class="h2 mb-2">{{ product.name }}</h1>
                    
                    <div class="mb-4 d-flex align-items-center justify-content-between justify-content-lg-start">
                        <span class="h2 text-primary fw-bold mb-0">Rp {{ product.price|floatformat:0 }}</span>
                        {% if product.stock > 0 %}
                            <span class="badge bg-success ms-lg-3"><i class="fas fa-check-circle me-1"></i> Stok Tersedia</span>
                        {% else %}
                            <span class="badge bg-danger ms-lg-3"><i class="fas fa-times-circle me-1"></i> Stok Habis</span>
                        {% endif %}
                    </div>

                    <div class="card bg-light border-0 mb-4 shadow-sm">
                        <div class="card-body p-3 p-md-4">
                            <h5 class="mb-3 h6 fw-bold text-uppercase">Informasi Produk</h5>
                            <p class="mb-0 text-muted lh-base">{{ product.description }}</p>
                        </div>
                    </div>

                    <div class="card border-0 mb-4 shadow-sm" style="border-left: 5px solid var(--primary) !important;">
                        <div class="card-body p-3 d-flex align-items-center">
                            <div class="flex-shrink-0">
                                {% if product.vendor.logo %}
                                    <img src="{{ product.vendor.logo.url }}" class="rounded-circle shadow-sm" style="width: 50px; height: 50px; object-fit: cover;">
                                {% else %}
                                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm" style="width: 50px; height: 50px;">
                                        <i class="fas fa-store"></i>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-0 small text-muted">Dijual oleh:</h6>
                                <h5 class="mb-0 h6 fw-bold"><a href="{% url 'vendor_detail' product.vendor.slug %}" class="text-decoration-none text-dark">{{ product.vendor.name }}</a></h5>
                            </div>
                            <div class="flex-shrink-0 ms-2">
                                <a href="{% url 'vendor_detail' product.vendor.slug %}" class="btn btn-outline-primary btn-sm px-3 rounded-pill">Lihat Toko</a>
                            </div>
                        </div>
                    </div>

                    <!-- CTA Section -->
                    <div class="d-grid gap-3 sticky-bottom bg-white p-3 p-lg-0 shadow-sm shadow-lg-none mt-5 mt-lg-0 rounded-top" style="z-index: 1000; bottom: 0; left: 0; right: 0;">
                        <a href="{{ product.get_whatsapp_url }}" target="_blank" class="btn btn-lg wa-btn shadow py-3">
                            <i class="fab fa-whatsapp me-2 fa-lg"></i> BELI VIA WHATSAPP
                        </a>
                        <p class="text-center small text-muted mb-0 d-none d-lg-block"><i class="fas fa-shield-alt me-1"></i> Transaksi aman langsung ke penjual.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Related Products -->
        <div class="mt-5 pt-5 border-top">
            <h3 class="mb-4 h4 fw-bold">Produk Serupa</h3>
            <div class="row g-3 g-md-4">
                {% for rel_prod in related_products %}
                <div class="col-6 col-md-3">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="position-relative">
                            {% if rel_prod.image %}
                                <img src="{{ rel_prod.image.url }}" class="card-img-top" alt="{{ rel_prod.name }}" style="height: 120px; @media(min-width: 768px){height: 180px}; object-fit: cover;">
                            {% else %}
                                <div class="bg-secondary-subtle d-flex align-items-center justify-content-center" style="height: 120px; @media(min-width: 768px){height: 180px};">
                                    <i class="fas fa-image fa-lg text-muted opacity-50"></i>
                                </div>
                            {% endif %}
                        </div>
                        <div class="card-body p-3">
                            <h6 class="card-title mb-1 small fw-bold">
                                <a href="{% url 'product_detail' rel_prod.slug %}" class="text-decoration-none text-dark">{{ rel_prod.name }}</a>
                            </h6>
                            <p class="product-price mb-0 small">Rp {{ rel_prod.price|floatformat:0 }}</p>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12 text-muted">Belum ada produk serupa yang tersedia.</div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endblock %}