@extends('layouts.buyer')

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

@section('content')
<!-- Navigasi Breadcrumb -->
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 py-2 px-3 bg-white rounded-3" style="border: 1px solid #bbf7d0;">
            <li class="breadcrumb-item">
                <a href="{{ route('buyer.toko') }}" class="text-decoration-none fw-medium" style="color:#16a34a;">
                    <i class="bi bi-shop me-1"></i>Katalog Toko
                </a>
            </li>
            @if ($product->category)
                <li class="breadcrumb-item">
                    <a href="{{ route('buyer.toko', ['category_id' => $product->category->id]) }}" class="text-decoration-none text-secondary">
                        {{ $product->category->name }}
                    </a>
                </li>
            @endif
            <li class="breadcrumb-item active text-truncate fw-semibold" aria-current="page" style="max-width: 300px;">
                {{ $product->name }}
            </li>
        </ol>
    </nav>
</div>

<!-- Card Utama Detail Produk -->
<div class="card card-custom border-0 shadow-sm overflow-hidden mb-5">
    <div class="card-body p-4 p-lg-5">
        <div class="row g-4 g-lg-5">
            <!-- Kolom 1: Gambar Produk -->
            <div class="col-lg-5">
                <div class="position-relative bg-light rounded-4 overflow-hidden border d-flex align-items-center justify-content-center p-3" style="min-height: 380px; max-height: 440px;">
                    @if ($product->image_url)
                        <img src="{{ $product->image_url }}" 
                             alt="{{ $product->name }}" 
                             class="img-fluid object-fit-contain rounded-3 w-100 h-100" 
                             style="max-height: 400px;"
                             onerror="this.onerror=null;this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\' fill=\'%23cbd5e1\' viewBox=\'0 0 16 16\'><rect width=\'16\' height=\'16\' fill=\'%23f1f5f9\'/><path d=\'M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\'/><path d=\'M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z\'/></svg>';">
                    @else
                        <div class="d-flex flex-column align-items-center justify-content-center text-muted py-5">
                            <i class="bi bi-image" style="font-size: 5rem; color: #94a3b8;"></i>
                            <span class="small mt-2 text-secondary">Tidak ada gambar produk</span>
                        </div>
                    @endif

                    @if ($product->category)
                        <span class="badge position-absolute top-0 start-0 m-3 px-3 py-2 rounded-pill fs-7 shadow-sm" style="background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d;border:1px solid #86efac;">
                            <i class="bi bi-tag-fill me-1"></i>{{ $product->category->name }}
                        </span>
                    @endif
                </div>
            </div>

            <!-- Kolom 2: Informasi Produk & Tombol Aksi -->
            <div class="col-lg-7 d-flex flex-column justify-content-between">
                <div>
                    <!-- Kategori & Judul Nama Produk -->
                    <div class="mb-2">
                        <span class="text-uppercase fw-bold small tracking-wider" style="color:#16a34a;">
                            <i class="bi bi-collection me-1"></i>{{ $product->category ? $product->category->name : 'Kategori Umum' }}
                        </span>
                    </div>

                    <h1 class="h2 fw-bold text-dark mb-3">Detail Produk: {{ $product->name }}</h1>

                    <!-- Harga Produk -->
                    <div class="p-3 bg-light rounded-4 border mb-4 d-inline-block w-100" style="max-width: 480px;">
                        <span class="text-muted small d-block mb-1">Harga Produk:</span>
                        <div class="d-flex align-items-baseline gap-2">
                            <span class="fw-bold display-6 mb-0" style="color:#16a34a;">{{ $product->formatted_price }}</span>
                            <span class="text-muted small">/ pcs</span>
                        </div>
                    </div>

                    <!-- Ketersediaan Stok -->
                    <div class="mb-4">
                        <span class="text-muted small d-block mb-2 fw-medium">Status Ketersediaan Stok:</span>
                        @if ($product->stock > 5)
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-2 fs-6">
                                <i class="bi bi-check-circle-fill me-1"></i>Tersedia: {{ $product->stock }} Unit
                            </span>
                        @elseif ($product->stock > 0)
                            <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-2 fs-6">
                                <i class="bi bi-exclamation-triangle-fill me-1"></i>Tersedia: {{ $product->stock }} Unit (Stok Menipis)
                            </span>
                        @else
                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-2 fs-6">
                                <i class="bi bi-x-circle-fill me-1"></i>Stok Habis (0 Unit)
                            </span>
                        @endif
                    </div>

                    <!-- Deskripsi Produk -->
                    <div class="mb-4">
                        <h6 class="fw-bold text-dark mb-2 d-flex align-items-center gap-2">
                            <i class="bi bi-text-paragraph" style="color:#16a34a;"></i>
                            <span>Deskripsi Produk</span>
                        </h6>
                        <div class="p-3 bg-white rounded-3 border text-secondary leading-relaxed" style="font-size: 0.95rem; line-height: 1.6;">
                            {{ $product->description ?: 'Belum ada deskripsi lengkap untuk produk ini.' }}
                        </div>
                    </div>

                    <!-- Form Tambah ke Keranjang (Laravel Session) -->
                    @if ($product->stock > 0)
                        <form action="{{ route('buyer.cart.add', $product) }}" method="POST">
                            @csrf
                            <div class="mb-4" style="max-width: 220px;">
                                <label for="quantityInput" class="form-label small text-muted fw-medium mb-1">Jumlah Pembelian:</label>
                                <div class="input-group">
                                    <button class="btn btn-outline-secondary" type="button" id="btnMinus" onclick="updateQty(-1)">
                                        <i class="bi bi-dash"></i>
                                    </button>
                                    <input type="number" name="quantity" id="quantityInput" class="form-control text-center fw-bold" value="1" min="1" max="{{ $product->stock }}" required>
                                    <button class="btn btn-outline-secondary" type="button" id="btnPlus" onclick="updateQty(1)">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- Tombol Tambah ke Keranjang & Kembali ke Toko -->
                            <div class="pt-3 border-top mt-4">
                                <div class="d-flex flex-wrap align-items-center gap-3">
                                    <button type="submit" 
                                            class="btn btn-primary btn-lg d-inline-flex align-items-center justify-content-center gap-2 px-4 shadow-sm"
                                            id="btnAddToCart">
                                        <i class="bi bi-cart-plus-fill fs-5"></i>
                                        <span>Tambah ke Keranjang</span>
                                    </button>

                                    <a href="{{ route('buyer.toko') }}" class="btn btn-outline-secondary btn-lg d-inline-flex align-items-center justify-content-center gap-2 px-4 shadow-sm">
                                        <i class="bi bi-arrow-left"></i>
                                        <span>Kembali ke Toko</span>
                                    </a>
                                </div>
                            </div>
                        </form>
                    @else
                        <!-- Tampilan Jika Stok Habis -->
                        <div class="pt-3 border-top mt-4">
                            <div class="d-flex flex-wrap align-items-center gap-3">
                                <button type="button" 
                                        class="btn btn-secondary btn-lg d-inline-flex align-items-center justify-content-center gap-2 px-4" 
                                        disabled>
                                    <i class="bi bi-cart-x-fill fs-5"></i>
                                    <span>Tambah ke Keranjang (Stok Habis)</span>
                                </button>

                                <a href="{{ route('buyer.toko') }}" class="btn btn-outline-secondary btn-lg d-inline-flex align-items-center justify-content-center gap-2 px-4 shadow-sm">
                                    <i class="bi bi-arrow-left"></i>
                                    <span>Kembali ke Toko</span>
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function updateQty(change) {
        const input = document.getElementById('quantityInput');
        if (!input) return;

        let current = parseInt(input.value) || 1;
        const max = parseInt(input.getAttribute('max')) || 1;
        const min = parseInt(input.getAttribute('min')) || 1;

        current += change;
        if (current < min) current = min;
        if (current > max) current = max;

        input.value = current;
    }
</script>
@endpush