@extends('layouts.buyer')

@section('title', $product->name . ' - Detail Produk')

@push('styles')
<style>
    /* ── Product Detail ── */
    .product-detail-img-wrapper {
        position: relative;
        background: var(--color-bg-alt);
        border-radius: 1.25rem;
        overflow: hidden;
        border: 1px solid var(--color-border);
        min-height: 400px;
        max-height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-detail-img-wrapper img {
        width: 100%; height: 100%;
        object-fit: cover;
        max-height: 500px;
        transition: transform 0.4s ease;
    }
    .product-detail-img-wrapper:hover img { transform: scale(1.03); }

    .category-badge-top {
        position: absolute; top: 14px; left: 14px; z-index: 3;
        font-size: 0.78rem; padding: 0.35rem 0.9rem; font-weight: 700;
        border-radius: 9999px;
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
        color: var(--color-gold-light);
        box-shadow: 0 4px 10px rgba(74, 48, 40, 0.3);
        letter-spacing: 0.03em;
    }

    .no-image-placeholder {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; padding: 4rem 2rem;
        color: var(--color-text-muted); min-height: 400px;
    }

    /* ── Price Box ── */
    .price-box {
        background: linear-gradient(135deg, rgba(198,161,91,0.1) 0%, rgba(198,161,91,0.05) 100%);
        border: 1px solid rgba(198, 161, 91, 0.35);
        border-radius: 1rem;
        padding: 1.25rem 1.5rem;
    }
    .price-label {
        font-size: 0.75rem;
        color: var(--color-gold-dark);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.3rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    .price-value {
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--color-gold-dark);
        letter-spacing: -0.03em;
        line-height: 1.1;
    }

    /* ── Stock Indicator ── */
    .stock-indicator {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.88rem;
        font-weight: 600;
    }
    .stock-indicator.in-stock    { background: #edf7ef; border: 1px solid #b7dfbf; color: #3D7A4F; }
    .stock-indicator.low-stock   { background: #fef9ec; border: 1px solid #f5dfa0; color: #D4880E; }
    .stock-indicator.out-of-stock{ background: #fdecea; border: 1px solid #f5c6c1; color: #C0392B; }

    .stock-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .in-stock    .stock-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
    .low-stock   .stock-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); }
    .out-of-stock .stock-dot{ background: #f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,0.2); }

    /* ── Description Box ── */
    .desc-box {
        background: var(--color-bg);
        border: 1px solid var(--color-border-light);
        border-radius: 0.875rem;
        padding: 1.25rem 1.4rem;
        line-height: 1.75;
        color: var(--color-text);
        font-size: 0.95rem;
        white-space: pre-line;
    }

    /* ── Action Buttons ── */
    .btn-cart {
        background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
        color: var(--color-primary-dark);
        border: none;
        border-radius: 0.75rem;
        font-weight: 700;
        font-size: 1rem;
        padding: 0.85rem 1.5rem;
        transition: all 0.25s ease;
        box-shadow: 0 4px 14px rgba(198, 161, 91, 0.35);
        display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    }
    .btn-cart:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
        color: var(--color-primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(198, 161, 91, 0.45);
    }
    .btn-cart:disabled {
        background: linear-gradient(135deg, var(--color-border), var(--color-border-light));
        color: var(--color-text-muted);
        cursor: not-allowed;
        box-shadow: none;
        opacity: 0.8;
    }

    .btn-back-catalog {
        background: transparent;
        color: var(--color-text-light);
        border: 1.5px solid var(--color-border);
        border-radius: 0.75rem;
        font-weight: 600;
        padding: 0.85rem 1.5rem;
        transition: all 0.2s ease;
        display: flex; align-items: center; justify-content: center; gap: 0.5rem;
        text-decoration: none;
    }
    .btn-back-catalog:hover {
        background: var(--color-bg-alt);
        border-color: var(--color-brown-light);
        color: var(--color-primary);
    }

    /* ── Meta items ── */
    .meta-item {
        display: flex; align-items: center; gap: 0.5rem;
        font-size: 0.82rem; color: var(--color-text-muted);
    }

    /* ── Related cards ── */
    .related-card {
        border: 1px solid var(--color-border);
        border-radius: 1rem;
        background: var(--color-white);
        transition: all 0.25s ease;
        overflow: hidden;
    }
    .related-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px -4px rgba(74, 48, 40, 0.1);
        border-color: var(--color-gold);
    }
    .related-img { height: 180px; object-fit: cover; width: 100%; transition: transform 0.3s ease; }
    .related-card:hover .related-img { transform: scale(1.04); }
    .related-img-placeholder {
        height: 180px;
        background: var(--color-bg-alt);
        display: flex; align-items: center; justify-content: center; flex-direction: column;
        color: var(--color-text-muted);
    }

    /* ── Breadcrumb ── */
    .breadcrumb-custom {
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 0.75rem;
        padding: 0.65rem 1rem;
        font-size: 0.83rem;
        box-shadow: 0 1px 3px rgba(74, 48, 40, 0.04);
    }
    .breadcrumb-custom .breadcrumb-item a {
        color: var(--color-text-light);
        text-decoration: none;
        transition: color 0.2s;
    }
    .breadcrumb-custom .breadcrumb-item a:hover { color: var(--color-gold-dark); }
    .breadcrumb-custom .breadcrumb-item.active { color: var(--color-primary); font-weight: 600; }
    .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before { color: var(--color-border); }

    /* ── Qty Selector ── */
    .qty-selector {
        display: flex; align-items: center; gap: 0;
        border: 1.5px solid var(--color-border);
        border-radius: 0.6rem;
        overflow: hidden; width: fit-content;
    }
    .qty-btn-detail {
        background: var(--color-bg);
        border: none;
        width: 38px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 1.1rem;
        color: var(--color-text);
        transition: background 0.15s;
        flex-shrink: 0;
    }
    .qty-btn-detail:hover { background: var(--color-bg-alt); color: var(--color-primary); }
    .qty-input-detail {
        width: 56px; text-align: center;
        border: none;
        border-left: 1.5px solid var(--color-border);
        border-right: 1.5px solid var(--color-border);
        height: 40px; font-weight: 700; font-size: 0.95rem;
        color: var(--color-primary); background: var(--color-white);
    }
    .qty-input-detail:focus { outline: none; }

    /* ── Section label ── */
    .section-label {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--color-gold-dark);
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
    }
</style>
@endpush

@section('content')

    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb breadcrumb-custom mb-0">
            <li class="breadcrumb-item">
                <a href="{{ auth()->check() ? route('buyer.dashboard') : url('/') }}">
                    <i class="bi bi-house-door me-1"></i>Katalog
                </a>
            </li>
            @if($product->category)
                <li class="breadcrumb-item">
                    <a href="{{ auth()->check() ? route('buyer.dashboard', ['category' => $product->category->id]) : url('/') }}">
                        {{ $product->category->name }}
                    </a>
                </li>
            @endif
            <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($product->name, 45) }}</li>
        </ol>
    </nav>

    {{-- Main Detail Card --}}
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-5">
        <div class="card-body p-4 p-lg-5">
            <div class="row g-4 g-xl-5 align-items-start">

                {{-- KIRI: Gambar --}}
                <div class="col-12 col-lg-5">
                    <div class="product-detail-img-wrapper">
                        @if($product->category)
                            <div class="category-badge-top">
                                <i class="bi bi-tag-fill me-1"></i>{{ $product->category->name }}
                            </div>
                        @endif
                        @if($product->stock <= 0)
                            <div class="position-absolute top-0 end-0 m-3" style="z-index:3;">
                                <span class="badge rounded-pill px-3 py-2 fw-bold shadow-sm" style="background: var(--color-danger); color: #fff;">
                                    <i class="bi bi-x-circle me-1"></i>Stok Habis
                                </span>
                            </div>
                        @elseif($product->stock <= 5)
                            <div class="position-absolute top-0 end-0 m-3" style="z-index:3;">
                                <span class="badge rounded-pill px-3 py-2 fw-bold shadow-sm" style="background: var(--color-warning); color: var(--color-primary-dark);">
                                    <i class="bi bi-exclamation-triangle me-1"></i>Stok Terbatas
                                </span>
                            </div>
                        @endif
                        @if($product->image_url)
                            <img src="{{ $product->image_url }}" alt="{{ $product->name }}">
                        @else
                            <div class="no-image-placeholder">
                                <i class="bi bi-box-seam display-3 mb-3" style="color: var(--color-brown-light); opacity: 0.5;"></i>
                                <span class="fw-semibold" style="color: var(--color-text-muted);">Foto Produk Belum Tersedia</span>
                            </div>
                        @endif
                    </div>
                    <div class="d-flex align-items-center justify-content-between mt-3 px-1">
                        <div class="meta-item">
                            <i class="bi bi-hash"></i>
                            <span>ID: <strong style="color: var(--color-text);">#{{ str_pad($product->id, 5, '0', STR_PAD_LEFT) }}</strong></span>
                        </div>
                        <div class="meta-item">
                            <i class="bi bi-calendar3"></i>
                            <span>{{ $product->created_at->translatedFormat('d M Y') }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="bi bi-shield-check" style="color: var(--color-success);"></i>
                            <span style="color: var(--color-success); font-weight: 600;">Aktif</span>
                        </div>
                    </div>
                </div>

                {{-- KANAN: Info --}}
                <div class="col-12 col-lg-7 d-flex flex-column">
                    @if($product->category)
                        <div class="mb-2">
                            <a href="{{ route('buyer.dashboard', ['category' => $product->category->id]) }}"
                                class="text-decoration-none d-inline-flex align-items-center gap-1 fw-bold"
                                style="font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gold-dark);">
                                <i class="bi bi-grid-3x3-gap-fill"></i>{{ $product->category->name }}
                            </a>
                        </div>
                    @endif

                    <h1 class="fw-bold mb-3" style="font-size: 1.85rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-primary);">
                        {{ $product->name }}
                    </h1>

                    {{-- Harga --}}
                    <div class="price-box mb-4">
                        <div class="price-label">
                            <i class="bi bi-tag"></i>Harga Satuan
                        </div>
                        <div class="price-value">{{ $product->formatted_price }}</div>
                    </div>

                    {{-- Stok --}}
                    <div class="mb-4">
                        <div class="section-label">
                            <i class="bi bi-boxes"></i>Ketersediaan Stok
                        </div>
                        @if($product->stock > 5)
                            <div class="stock-indicator in-stock">
                                <span class="stock-dot"></span>
                                <span>Tersedia ({{ $product->stock }} unit) &mdash; siap dikirim</span>
                            </div>
                        @elseif($product->stock > 0)
                            <div class="stock-indicator low-stock">
                                <span class="stock-dot"></span>
                                <span>Stok Terbatas &mdash; hanya <strong>{{ $product->stock }} unit</strong> tersisa!</span>
                            </div>
                        @else
                            <div class="stock-indicator out-of-stock">
                                <span class="stock-dot"></span>
                                <span>Stok Habis &mdash; produk sedang tidak tersedia</span>
                            </div>
                        @endif
                    </div>

                    {{-- Deskripsi --}}
                    <div class="mb-4">
                        <div class="section-label">
                            <i class="bi bi-file-text"></i>Deskripsi Produk
                        </div>
                        <div class="desc-box">
                            {{ $product->description ?: 'Belum ada deskripsi detail untuk produk ini.' }}
                        </div>
                    </div>

                    <hr style="border-color: var(--color-border-light); margin: 0.75rem 0 1rem;">

                    {{-- TOMBOL AKSI --}}
                    @if($product->stock > 0)
                        <form action="{{ route('buyer.cart.add') }}" method="POST">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">

                            {{-- Qty Selector --}}
                            <div class="mb-3">
                                <div class="section-label">
                                    <i class="bi bi-123"></i>Jumlah
                                </div>
                                <div class="qty-selector">
                                    <button type="button" class="qty-btn-detail" id="btn-minus">
                                        <i class="bi bi-dash"></i>
                                    </button>
                                    <input type="number" name="quantity" id="qty-detail"
                                        class="qty-input-detail" value="1" min="1" max="{{ $product->stock }}">
                                    <button type="button" class="qty-btn-detail" id="btn-plus"
                                        data-max="{{ $product->stock }}">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                                <div class="mt-1" style="font-size: 0.77rem; color: var(--color-text-muted);">
                                    Maks. {{ $product->stock }} unit
                                </div>
                            </div>

                            {{-- Tombol: Tambah ke Keranjang --}}
                            <div class="d-flex flex-column flex-sm-row gap-3">
                                <button type="submit" class="btn btn-cart flex-fill" id="btn-add-to-cart">
                                    <i class="bi bi-cart-plus fs-5"></i>
                                    <span>Tambah ke Keranjang</span>
                                </button>
                                <a href="{{ auth()->check() ? route('buyer.dashboard') : url('/') }}" class="btn btn-back-catalog">
                                    <i class="bi bi-arrow-left"></i><span>Kembali ke Katalog</span>
                                </a>
                            </div>
                        </form>
                    @else
                        <div class="d-flex gap-3">
                            <button type="button" class="btn btn-cart flex-fill" disabled>
                                <i class="bi bi-cart-x fs-5"></i><span>Stok Habis</span>
                            </button>
                            <a href="{{ auth()->check() ? route('buyer.dashboard') : url('/') }}" class="btn btn-back-catalog">
                                <i class="bi bi-arrow-left"></i><span>Kembali ke Katalog</span>
                            </a>
                        </div>
                    @endif

                    {{-- Link ke cart --}}
                    @php $cartCount = \App\Http\Controllers\Buyer\CartController::cartCount(); @endphp
                    @if($cartCount > 0)
                        <div class="mt-3">
                            <a href="{{ route('buyer.cart.index') }}"
                                class="fw-semibold small text-decoration-none d-inline-flex align-items-center gap-1"
                                style="color: var(--color-gold-dark);">
                                <i class="bi bi-cart3"></i>
                                Lihat Keranjang ({{ $cartCount }} item)
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Produk Terkait --}}
    @if($relatedProducts->count() > 0)
        <div class="mb-5">
            <div class="d-flex align-items-center justify-content-between mb-4">
                <div>
                    <h2 class="h5 fw-bold mb-0" style="color: var(--color-primary);">Produk Serupa Lainnya</h2>
                    <p class="small mb-0" style="color: var(--color-text-light);">Dari kategori {{ $product->category->name ?? 'yang sama' }}</p>
                </div>
                @if($product->category)
                    <a href="{{ route('buyer.dashboard', ['category' => $product->category_id]) }}"
                        class="text-decoration-none small fw-semibold d-flex align-items-center gap-1"
                        style="color: var(--color-gold-dark);">
                        Lihat Semua <i class="bi bi-chevron-right"></i>
                    </a>
                @endif
            </div>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4">
                @foreach($relatedProducts as $rel)
                    <div class="col">
                        <div class="card h-100 related-card shadow-sm border-0 d-flex flex-column">
                            <div class="overflow-hidden" style="border-radius: 1rem 1rem 0 0;">
                                @if($rel->image_url)
                                    <img src="{{ $rel->image_url }}" alt="{{ $rel->name }}" class="related-img" loading="lazy">
                                @else
                                    <div class="related-img-placeholder">
                                        <i class="bi bi-box-seam fs-1 mb-1" style="color: var(--color-brown-light); opacity: 0.5;"></i>
                                        <span class="small" style="color: var(--color-text-muted);">Foto Produk</span>
                                    </div>
                                @endif
                            </div>
                            <div class="card-body p-3 d-flex flex-column">
                                <span class="badge rounded-pill px-2 py-1 small fw-semibold mb-2 align-self-start"
                                    style="background: rgba(198,161,91,0.12); color: var(--color-gold-dark); border: 1px solid rgba(198,161,91,0.3);">
                                    {{ $rel->category->name ?? 'Kategori' }}
                                </span>
                                <h3 class="card-title h6 fw-bold mb-2 text-truncate"
                                    title="{{ $rel->name }}"
                                    style="color: var(--color-primary);">
                                    {{ $rel->name }}
                                </h3>
                                <div class="d-flex align-items-center justify-content-between mb-3 mt-auto">
                                    <span class="fw-bold" style="color: var(--color-gold-dark); font-size: 0.95rem;">{{ $rel->formatted_price }}</span>
                                    @if($rel->stock > 0)
                                        <span class="badge rounded-pill" style="background: #edf7ef; color: #3D7A4F; border: 1px solid #b7dfbf; font-size: 0.7rem;">
                                            Stok: {{ $rel->stock }}
                                        </span>
                                    @else
                                        <span class="badge rounded-pill" style="background: #fdecea; color: #C0392B; border: 1px solid #f5c6c1; font-size: 0.7rem;">
                                            Habis
                                        </span>
                                    @endif
                                </div>
                                <a href="{{ route('buyer.products.show', $rel->slug) }}"
                                    class="btn w-100 rounded-3 fw-semibold d-flex align-items-center justify-content-center gap-1"
                                    style="border: 1.5px solid var(--color-gold); color: var(--color-gold-dark); background: transparent; font-size: 0.85rem; padding: 0.45rem 1rem; transition: all 0.2s;"
                                    onmouseover="this.style.background='linear-gradient(135deg,#C6A15B,#A8863E)';this.style.color='#3A2118';"
                                    onmouseout="this.style.background='transparent';this.style.color='#A8863E';">
                                    <i class="bi bi-eye"></i><span>Lihat Detail</span>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Toast Notification --}}
    <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1100;">
        <div id="cartToast" class="toast align-items-center border-0 shadow-lg rounded-3" role="alert" aria-live="assertive" aria-atomic="true"
            style="background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));">
            <div class="d-flex">
                <div class="toast-body d-flex align-items-center gap-2 py-3 px-3">
                    <i class="bi bi-check-circle-fill fs-4" style="color: var(--color-gold);"></i>
                    <div>
                        <div class="fw-bold" style="color: var(--color-bg);">Berhasil Ditambahkan!</div>
                        <div class="small" style="color: var(--color-brown-subtle);">
                            <span id="toastProductQty">1</span> unit <strong style="color: var(--color-gold-light);">{{ $product->name }}</strong> dimasukkan ke keranjang.
                        </div>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    const qtyInput = document.getElementById('qty-detail');
    const btnMinus = document.getElementById('btn-minus');
    const btnPlus  = document.getElementById('btn-plus');
    const btnAddToCart = document.getElementById('btn-add-to-cart');

    if (qtyInput && btnMinus && btnPlus) {
        const maxQty = parseInt(qtyInput.max);

        btnMinus.addEventListener('click', function () {
            let val = parseInt(qtyInput.value);
            if (val > 1) qtyInput.value = --val;
        });

        btnPlus.addEventListener('click', function () {
            let val = parseInt(qtyInput.value);
            if (val < maxQty) qtyInput.value = ++val;
        });

        qtyInput.addEventListener('input', function () {
            let val = parseInt(this.value) || 1;
            if (val < 1)      val = 1;
            if (val > maxQty) val = maxQty;
            this.value = val;
        });
    }

    if (btnAddToCart) {
        btnAddToCart.addEventListener('click', function () {
            const toastEl = document.getElementById('cartToast');
            if (toastEl) {
                const qtyVal = qtyInput ? qtyInput.value : 1;
                const toastQtyEl = document.getElementById('toastProductQty');
                if (toastQtyEl) toastQtyEl.innerText = qtyVal;

                const toast = new bootstrap.Toast(toastEl, { delay: 4000 });
                toast.show();
            }
        });
    }
</script>
@endpush