@extends('layouts.buyer')

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

@push('styles')
<style>
    .product-detail-card {
        border-radius: 1.25rem;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
    }

    .detail-img-container {
        position: relative;
        background-color: #f8fafc;
        border-radius: 1rem;
        overflow: hidden;
        border: 1px solid #edf2f7;
        min-height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .detail-img-container img {
        width: 100%;
        max-height: 480px;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .detail-img-container:hover img {
        transform: scale(1.03);
    }

    .badge-category {
        background: rgba(37, 99, 235, 0.1);
        color: #2563eb;
        border: 1px solid rgba(37, 99, 235, 0.2);
        font-weight: 600;
        padding: 0.4rem 0.85rem;
        border-radius: 9999px;
    }

    .price-box {
        background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);
        border: 1px solid #bfdbfe;
        border-radius: 1rem;
        padding: 1.25rem 1.5rem;
    }

    .price-tag {
        color: #1d4ed8;
        font-size: 2.25rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .qty-btn {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        font-weight: bold;
    }

    .qty-input {
        width: 70px;
        text-align: center;
        font-weight: 700;
        border-radius: 0.5rem;
    }

    .benefit-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.875rem;
        color: #475569;
    }

    .benefit-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #eff6ff;
        color: #2563eb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .nav-tabs-custom .nav-link {
        font-weight: 600;
        color: #64748b;
        border: none;
        border-bottom: 2px solid transparent;
        padding: 0.75rem 1.25rem;
    }

    .nav-tabs-custom .nav-link.active {
        color: #2563eb;
        border-bottom: 2px solid #2563eb;
        background: transparent;
    }
</style>
@endpush

@section('content')
<!-- Breadcrumbs -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb py-2 px-3 bg-white rounded-3 border shadow-sm">
        <li class="breadcrumb-item">
            <a href="{{ route('buyer.dashboard') }}" class="text-decoration-none text-muted">
                <i class="bi bi-house-door me-1"></i>Beranda
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('buyer.dashboard') }}" class="text-decoration-none text-muted">Katalog Toko</a>
        </li>
        @if($product->category)
            <li class="breadcrumb-item">
                <a href="{{ route('buyer.dashboard', ['category' => $product->category->id]) }}" class="text-decoration-none text-primary">
                    {{ $product->category->name }}
                </a>
            </li>
        @endif
        <li class="breadcrumb-item active text-truncate fw-semibold text-dark" aria-current="page" style="max-width: 250px;">
            {{ $product->name }}
        </li>
    </ol>
</nav>

<!-- Main Detail Card -->
<div class="product-detail-card p-4 p-lg-5 mb-5">
    <div class="row g-4 g-lg-5 align-items-start">
        <!-- 1. Kolom Gambar Produk -->
        <div class="col-lg-5">
            <div class="detail-img-container shadow-sm position-relative">
                @if($product->image)
                    <img src="{{ asset('storage/' . $product->image) }}" 
                         alt="{{ $product->name }}" 
                         class="d-block"
                         onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'py-5 text-center text-muted\'><i class=\'bi bi-image fs-1\'></i><p class=\'small mt-2\'>Gambar tidak dapat dimuat</p></div>';">
                @else
                    <div class="py-5 text-center text-muted d-flex flex-column align-items-center justify-content-center" style="height: 380px;">
                        <i class="bi bi-image fs-1 text-secondary mb-2" style="font-size: 3.5rem !important;"></i>
                        <span class="text-muted fw-semibold">Tidak ada foto produk</span>
                        <small class="text-secondary">Foto belum diunggah untuk produk ini</small>
                    </div>
                @endif

                <!-- Tag Kategori di pojok atas foto -->
                @if($product->category)
                    <span class="position-absolute top-0 start-0 m-3 badge bg-dark bg-opacity-75 fs-7 px-3 py-2 rounded-pill shadow-sm">
                        <i class="bi bi-tag-fill me-1"></i> {{ $product->category->name }}
                    </span>
                @endif

                <!-- Badge Ketersediaan Stok -->
                <span class="position-absolute top-0 end-0 m-3 badge {{ $product->stock > 0 ? 'bg-success' : 'bg-danger' }} fs-7 px-3 py-2 rounded-pill shadow-sm">
                    {{ $product->stock > 0 ? 'Tersedia' : 'Habis' }}
                </span>
            </div>

            <!-- Manfaat & Jaminan Layanan Pembelian -->
            <div class="bg-light rounded-4 p-3 mt-4 border">
                <div class="row g-2">
                    <div class="col-12">
                        <div class="benefit-item">
                            <div class="benefit-icon"><i class="bi bi-shield-check"></i></div>
                            <div>
                                <span class="fw-semibold text-dark d-block">100% Produk Original</span>
                                <small class="text-muted">Jaminan mutu terbaik langsung dari seller</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 border-top pt-2">
                        <div class="benefit-item">
                            <div class="benefit-icon"><i class="bi bi-truck"></i></div>
                            <div>
                                <span class="fw-semibold text-dark d-block">Pengiriman Cepat</span>
                                <small class="text-muted">Siap dikirim ke seluruh wilayah Indonesia</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 border-top pt-2">
                        <div class="benefit-item">
                            <div class="benefit-icon"><i class="bi bi-arrow-repeat"></i></div>
                            <div>
                                <span class="fw-semibold text-dark d-block">Garansi Toko Resmi</span>
                                <small class="text-muted">Kemudahan klaim retur jika barang cacat</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. Kolom Informasi Lengkap Produk -->
        <div class="col-lg-7">
            <!-- Label Kategori & Status ID -->
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                @if($product->category)
                    <span class="badge-category">
                        <i class="bi bi-grid me-1"></i> {{ $product->category->name }}
                    </span>
                @endif

                <span class="badge bg-secondary-subtle text-secondary border rounded-pill px-3 py-1 fw-normal">
                    Kode: #PRD-{{ str_pad($product->id, 4, '0', STR_PAD_LEFT) }}
                </span>

                <span class="badge {{ $product->stock > 0 ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-danger-subtle text-danger border border-danger-subtle' }} rounded-pill px-3 py-1 fw-semibold">
                    <i class="bi {{ $product->stock > 0 ? 'bi-check-circle-fill' : 'bi-x-circle-fill' }} me-1"></i>
                    {{ $product->stock > 0 ? 'Stok Tersedia (' . $product->stock . ' unit)' : 'Stok Habis' }}
                </span>
            </div>

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

            <!-- Rating & Terjual (Simulasi) -->
            <div class="d-flex align-items-center gap-3 mb-4 pb-2 border-bottom">
                <div class="d-flex align-items-center text-warning small">
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-fill ms-1"></i>
                    <i class="bi bi-star-fill ms-1"></i>
                    <i class="bi bi-star-fill ms-1"></i>
                    <i class="bi bi-star-half ms-1"></i>
                    <span class="text-dark fw-bold ms-2">4.9</span>
                </div>
                <span class="text-muted small">•</span>
                <span class="text-muted small"><strong class="text-dark">128</strong> Ulasan</span>
                <span class="text-muted small">•</span>
                <span class="text-muted small"><strong class="text-dark">350+</strong> Terjual</span>
            </div>

            <!-- Kotak Harga Produk -->
            <div class="price-box mb-4">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <span class="text-primary fw-semibold small text-uppercase letter-spacing">Harga Spesial Toko</span>
                    <span class="badge bg-danger rounded-pill px-2 py-1 small">Promo Aktif</span>
                </div>
                <div class="price-tag">
                    Rp {{ number_format($product->price, 0, ',', '.') }}
                </div>
                <small class="text-muted d-block mt-1">
                    <i class="bi bi-info-circle me-1"></i> Harga sudah termasuk pajak & garansi toko
                </small>
            </div>

            <!-- Rincian Stok & Informasi Singkat -->
            <div class="row g-3 mb-4">
                <div class="col-sm-6">
                    <div class="border rounded-3 p-3 bg-light bg-opacity-50">
                        <small class="text-muted d-block fw-semibold">Kategori Produk</small>
                        <span class="fs-6 fw-bold text-dark d-flex align-items-center gap-1 mt-1">
                            <i class="bi bi-folder2-open text-primary"></i>
                            {{ $product->category->name ?? 'Tanpa Kategori' }}
                        </span>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="border rounded-3 p-3 bg-light bg-opacity-50">
                        <small class="text-muted d-block fw-semibold">Sisa Ketersediaan Stok</small>
                        <span class="fs-6 fw-bold {{ $product->stock > 0 ? 'text-success' : 'text-danger' }} d-flex align-items-center gap-1 mt-1">
                            <i class="bi bi-box-seam"></i>
                            {{ $product->stock }} <span class="text-muted fw-normal small">unit tersisa</span>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Rangkuman Deskripsi Singkat -->
            <div class="mb-4">
                <h6 class="fw-bold text-dark mb-2 d-flex align-items-center gap-2">
                    <i class="bi bi-file-text-fill text-primary"></i> Deskripsi Produk
                </h6>
                <div class="text-secondary bg-light p-3 rounded-3 border" style="line-height: 1.7; max-height: 200px; overflow-y: auto;">
                    {!! nl2br(e($product->description ?: 'Belum ada deskripsi lengkap untuk produk ini.')) !!}
                </div>
            </div>

            <!-- Area Interaksi Keranjang Belanja -->
            <div class="card border-primary border-opacity-25 bg-white rounded-4 shadow-sm mb-4">
                <div class="card-body p-3 p-md-4">
                    <label class="form-label fw-bold text-dark small mb-2">
                        Jumlah Pembelian
                    </label>

                    <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
                        <!-- Input Quantity Selector -->
                        <div class="d-flex align-items-center border rounded-3 bg-light p-1">
                            <button type="button" class="btn btn-sm btn-white qty-btn border-0 shadow-none text-dark" id="btnMinus" {{ $product->stock <= 0 ? 'disabled' : '' }}>
                                <i class="bi bi-dash-lg"></i>
                            </button>
                            <input type="number" 
                                   id="productQuantity" 
                                   class="form-control form-control-sm border-0 bg-transparent qty-input text-center" 
                                   value="1" 
                                   min="1" 
                                   max="{{ max(1, $product->stock) }}" 
                                   {{ $product->stock <= 0 ? 'disabled' : '' }}>
                            <button type="button" class="btn btn-sm btn-white qty-btn border-0 shadow-none text-dark" id="btnPlus" {{ $product->stock <= 0 ? 'disabled' : '' }}>
                                <i class="bi bi-plus-lg"></i>
                            </button>
                        </div>

                        <!-- Estimasi Subtotal Harga -->
                        <div class="ms-auto text-end">
                            <small class="text-muted d-block" style="font-size: 0.75rem;">Estimasi Subtotal</small>
                            <div class="fs-5 fw-bold text-primary" id="subtotalDisplay">
                                Rp {{ number_format($product->price, 0, ',', '.') }}
                            </div>
                        </div>
                    </div>

                    <!-- Tombol Tambah ke Keranjang Sesuai Permintaan User -->
                    <div class="d-flex flex-column flex-sm-row gap-2">
                        @if($product->stock > 0)
                            <button type="button" 
                                    class="btn btn-primary btn-lg rounded-3 fw-bold flex-grow-1 d-flex align-items-center justify-content-center gap-2 py-3 shadow-sm" 
                                    id="btnAddToCart"
                                    onclick="handleAddToCart()">
                                <i class="bi bi-cart-plus-fill fs-5"></i>
                                <span>Tambah ke Keranjang</span>
                            </button>

                            <button type="button" 
                                    class="btn btn-outline-primary btn-lg rounded-3 fw-semibold px-4 py-3"
                                    id="btnBuyNow"
                                    onclick="handleBuyNow()">
                                <span>Beli Langsung</span>
                            </button>
                        @else
                            <button type="button" class="btn btn-secondary btn-lg rounded-3 fw-bold flex-grow-1 py-3" disabled>
                                <i class="bi bi-slash-circle me-1"></i> Stok Habis (Tidak Dapat Dipesan)
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Tombol Kembali ke Katalog Toko -->
            <div>
                <a href="{{ route('buyer.dashboard') }}" class="btn btn-outline-secondary rounded-3 px-4 py-2 fw-semibold d-inline-flex align-items-center gap-2">
                    <i class="bi bi-arrow-left"></i>
                    <span>Kembali ke Katalog Toko</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Tab Rincian Spesifikasi & Kebijakan -->
<div class="card border-0 shadow-sm rounded-4 mb-5">
    <div class="card-body p-4 p-lg-5">
        <ul class="nav nav-tabs nav-tabs-custom mb-4" id="productTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc-tab-pane" type="button" role="tab" aria-controls="desc-tab-pane" aria-selected="true">
                    <i class="bi bi-card-text me-1"></i> Deskripsi Lengkap
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="spec-tab" data-bs-toggle="tab" data-bs-target="#spec-tab-pane" type="button" role="tab" aria-controls="spec-tab-pane" aria-selected="false">
                    <i class="bi bi-list-check me-1"></i> Informasi Spesifikasi
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="warranty-tab" data-bs-toggle="tab" data-bs-target="#warranty-tab-pane" type="button" role="tab" aria-controls="warranty-tab-pane" aria-selected="false">
                    <i class="bi bi-truck me-1"></i> Kebijakan Pengiriman & Garansi
                </button>
            </li>
        </ul>

        <div class="tab-content" id="productTabContent">
            <!-- Tab 1: Deskripsi -->
            <div class="tab-pane fade show active" id="desc-tab-pane" role="tabpanel" aria-labelledby="desc-tab" tabindex="0">
                <h5 class="fw-bold text-dark mb-3">Tentang Produk Ini</h5>
                <div class="text-secondary" style="line-height: 1.8;">
                    {!! nl2br(e($product->description ?: 'Penjual belum melengkapi deskripsi detail untuk produk ini.')) !!}
                </div>
            </div>

            <!-- Tab 2: Spesifikasi -->
            <div class="tab-pane fade" id="spec-tab-pane" role="tabpanel" aria-labelledby="spec-tab" tabindex="0">
                <h5 class="fw-bold text-dark mb-3">Spesifikasi Detail</h5>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped align-middle">
                        <tbody>
                            <tr>
                                <th style="width: 30%;" class="bg-light text-secondary">ID Produk</th>
                                <td class="fw-bold text-dark">#{{ $product->id }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Nama Produk</th>
                                <td class="text-dark">{{ $product->name }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Kategori</th>
                                <td class="text-dark">{{ $product->category->name ?? 'Umum' }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Harga Satuan</th>
                                <td class="fw-bold text-primary">Rp {{ number_format($product->price, 0, ',', '.') }}</td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Jumlah Stok Tersedia</th>
                                <td class="text-dark">{{ $product->stock }} unit</td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Kondisi Barang</th>
                                <td><span class="badge bg-success-subtle text-success border border-success-subtle">Baru / Original</span></td>
                            </tr>
                            <tr>
                                <th class="bg-light text-secondary">Tanggal Diperbarui</th>
                                <td class="text-muted">{{ $product->updated_at ? $product->updated_at->format('d M Y, H:i') : '-' }} WIB</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Tab 3: Garansi -->
            <div class="tab-pane fade" id="warranty-tab-pane" role="tabpanel" aria-labelledby="warranty-tab" tabindex="0">
                <h5 class="fw-bold text-dark mb-3">Ketentuan Garansi & Pengiriman</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="p-3 border rounded-3 bg-light">
                            <h6 class="fw-bold text-dark"><i class="bi bi-box-seam text-primary me-2"></i>Pengemasan Aman</h6>
                            <p class="small text-muted mb-0">Setiap pesanan dikemas menggunakan bubble wrap dan kardus tebal untuk menjamin keselamatan barang hingga sampai ke alamat Anda.</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-3 border rounded-3 bg-light">
                            <h6 class="fw-bold text-dark"><i class="bi bi-arrow-counterclockwise text-primary me-2"></i>Jaminan Pengembalian</h6>
                            <p class="small text-muted mb-0">Layanan pengembalian barang tersedia maksimal 7 hari setelah pesanan diterima jika barang cacat atau tidak sesuai pesanan.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 3. Rekomendasi Produk Terkait (Eloquent Query) -->
@if(isset($relatedProducts) && $relatedProducts->count() > 0)
    <div class="mb-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold text-dark mb-1">
                    <i class="bi bi-grid-fill text-primary me-2"></i>Produk Terkait Lainnya
                </h4>
                <p class="text-muted small mb-0">Rekomendasi produk pilihan dari kategori {{ $product->category->name ?? 'sejenis' }}</p>
            </div>
            <a href="{{ route('buyer.dashboard') }}" class="btn btn-outline-primary btn-sm rounded-pill px-3 fw-semibold">
                Lihat Semua <i class="bi bi-chevron-right ms-1"></i>
            </a>
        </div>

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4">
            @foreach($relatedProducts as $relProduct)
                <div class="col">
                    <div class="card h-100 product-card shadow-sm">
                        <div class="product-img-wrapper" style="height: 180px;">
                            @if($relProduct->image)
                                @php
                                    $relImgUrl = \Illuminate\Support\Str::startsWith($relProduct->image, ['http://', 'https://'])
                                        ? $relProduct->image
                                        : asset('storage/' . $relProduct->image);
                                @endphp
                                <img src="{{ $relImgUrl }}" 
                                     alt="{{ $relProduct->name }}"
                                     loading="lazy"
                                     onerror="this.onerror=null; this.src='https://placehold.co/300x200?text=No+Image';">
                            @else
                                <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-muted">
                                    <i class="bi bi-image fs-2"></i>
                                    <span class="small mt-1">No Image</span>
                                </div>
                            @endif

                            @if($relProduct->category)
                                <span class="product-category-tag">
                                    {{ $relProduct->category->name }}
                                </span>
                            @endif

                            <span class="product-stock-badge {{ $relProduct->stock > 0 ? 'bg-success text-white' : 'bg-danger text-white' }}">
                                {{ $relProduct->stock > 0 ? 'Stok: ' . $relProduct->stock : 'Habis' }}
                            </span>
                        </div>

                        <div class="card-body p-3 d-flex flex-column">
                            <h6 class="fw-bold text-truncate text-dark mb-1" title="{{ $relProduct->name }}">
                                {{ $relProduct->name }}
                            </h6>
                            <div class="text-primary fw-bold mb-3">
                                Rp {{ number_format($relProduct->price, 0, ',', '.') }}
                            </div>
                            <div class="mt-auto">
                                <a href="{{ route('products.show', $relProduct->id) }}" class="btn btn-outline-primary btn-sm w-100 rounded-3 fw-semibold">
                                    <i class="bi bi-info-circle me-1"></i> Detail
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endif

<!-- Bootstrap Toast Notification Container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1100;">
    <div id="cartToast" class="toast align-items-center text-bg-dark border-0 shadow-lg rounded-4" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body d-flex align-items-center gap-3 py-3 px-3">
                <div class="bg-success text-white rounded-circle p-2 d-flex align-items-center justify-content-center" style="width: 38px; height: 38px;">
                    <i class="bi bi-check-lg fs-5"></i>
                </div>
                <div>
                    <h6 class="fw-bold mb-1 text-white" id="toastTitle">Berhasil Ditambahkan!</h6>
                    <p class="small mb-0 text-white-50" id="toastMessage">Produk telah masuk ke keranjang belanja.</p>
                </div>
            </div>
            <button type="button" class="btn-close btn-close-white me-3 m-auto shadow-none" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Konfigurasi produk untuk JavaScript
    const productPrice = {{ (float) $product->price }};
    const maxStock = {{ (int) $product->stock }};
    const productName = @json($product->name);

    const qtyInput = document.getElementById('productQuantity');
    const btnMinus = document.getElementById('btnMinus');
    const btnPlus = document.getElementById('btnPlus');
    const subtotalDisplay = document.getElementById('subtotalDisplay');

    // Format Rupiah Helper
    function formatRupiah(amount) {
        return 'Rp ' + Math.round(amount).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    // Update Subtotal ketika quantity berubah
    function updateSubtotal() {
        if (!qtyInput) return;
        let qty = parseInt(qtyInput.value) || 1;
        if (qty < 1) qty = 1;
        if (maxStock > 0 && qty > maxStock) qty = maxStock;
        qtyInput.value = qty;

        const subtotal = qty * productPrice;
        if (subtotalDisplay) {
            subtotalDisplay.innerText = formatRupiah(subtotal);
        }
    }

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

    if (btnPlus && qtyInput) {
        btnPlus.addEventListener('click', function() {
            let current = parseInt(qtyInput.value) || 1;
            if (maxStock > 0 && current < maxStock) {
                qtyInput.value = current + 1;
                updateSubtotal();
            } else if (maxStock <= 0) {
                alert('Stok produk telah habis.');
            } else {
                alert('Jumlah melebihi stok yang tersedia (' + maxStock + ' unit).');
            }
        });
    }

    if (qtyInput) {
        qtyInput.addEventListener('change', updateSubtotal);
        qtyInput.addEventListener('input', updateSubtotal);
    }

    // Handler Tombol "Tambah ke Keranjang"
    function handleAddToCart(callback) {
        if (maxStock <= 0) {
            alert('Maaf, produk ini sedang habis.');
            return;
        }

        const qty = parseInt(qtyInput ? qtyInput.value : 1) || 1;
        const btn = document.getElementById('btnAddToCart');
        const originalHtml = btn ? btn.innerHTML : '';

        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Menambahkan...';
        }

        fetch("{{ route('cart.add', $product->id) }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Accept": "application/json"
            },
            body: JSON.stringify({ quantity: qty })
        })
        .then(response => response.json().then(data => ({ status: response.status, body: data })))
        .then(res => {
            if (btn) {
                btn.disabled = false;
            }

            if (res.body.success) {
                // Update badge keranjang di navbar
                const cartBadge = document.getElementById('cartCountBadge');
                if (cartBadge) {
                    cartBadge.innerText = res.body.cartCount;
                    cartBadge.style.display = 'inline-block';
                    cartBadge.classList.add('animate__animated', 'animate__pulse');
                }

                // Tampilkan Bootstrap Toast pesan sukses
                const toastEl = document.getElementById('cartToast');
                const toastMsg = document.getElementById('toastMessage');
                if (toastMsg) {
                    toastMsg.innerHTML = '<strong>' + res.body.message + '</strong>';
                }
                if (toastEl) {
                    const toast = new bootstrap.Toast(toastEl, { delay: 3500 });
                    toast.show();
                }

                // Feedback visual pada tombol
                if (btn) {
                    btn.classList.remove('btn-primary');
                    btn.classList.add('btn-success');
                    btn.innerHTML = '<i class="bi bi-check2-circle fs-5"></i> <span>Tersimpan di Keranjang!</span>';
                    setTimeout(() => {
                        btn.classList.remove('btn-success');
                        btn.classList.add('btn-primary');
                        btn.innerHTML = originalHtml;
                    }, 1800);
                }

                if (typeof callback === 'function') {
                    callback();
                }
            } else {
                if (btn) {
                    btn.innerHTML = originalHtml;
                }
                alert(res.body.message || 'Gagal menambahkan produk ke keranjang.');
            }
        })
        .catch(err => {
            console.error('Error adding to cart:', err);
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = originalHtml;
            }
            alert('Terjadi kesalahan saat menambahkan ke keranjang. Silakan coba lagi.');
        });
    }

    // Handler Tombol "Beli Langsung"
    function handleBuyNow() {
        const btnBuy = document.getElementById('btnBuyNow');
        if (btnBuy) {
            btnBuy.disabled = true;
            btnBuy.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Memproses...';
        }

        handleAddToCart(function() {
            window.location.href = "{{ route('cart.index') }}";
        });
    }
</script>
@endpush