@extends('layouts.content')

@section('content')
    <main class="product-detail-main container-xl my-3 my-md-5 pt-2">
        <nav class="product-detail-breadcrumb mb-3 mb-md-4" aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 align-items-center">
                <li class="breadcrumb-item">
                    <a href="#" class="text-on-surface-variant text-decoration-none hover-primary">Beranda</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" class="text-on-surface-variant text-decoration-none hover-primary">Produk</a>
                </li>
                <li class="breadcrumb-item active text-primary-custom fw-semibold" aria-current="page">
                    {{ $product->product_name }}
                </li>
            </ol>
        </nav>

        <div class="product-detail-hero row g-3 g-md-4 align-items-start">
            <!-- AREA GALERI MEDIA (KIRI) -->
            <div class="product-detail-gallery col-12 col-lg-6">
                @php
                    // 1. Definisikan ekstensi file untuk foto dan video
                    $photoExtensions = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'heic'];
                    $videoExtensions = ['mp4', 'webm', 'mkv', 'mov'];

                    // 2. Petakan tipe media (foto atau video)
                    $productMedia = $product->media
                        ->map(function ($mediaItem) use ($photoExtensions, $videoExtensions) {
                            $ext = strtolower(pathinfo($mediaItem->file_url, PATHINFO_EXTENSION));

                            if (in_array($ext, $photoExtensions)) {
                                $mediaItem->media_type = 'photo';
                            } elseif (in_array($ext, $videoExtensions)) {
                                $mediaItem->media_type = 'video';
                            } else {
                                $mediaItem->media_type = 'unknown';
                            }
                            return $mediaItem;
                        })
                        ->filter(fn($item) => $item->media_type !== 'unknown');

                    // 3. Ambil media utama (is_main = true) atau media paling pertama
                    $displayMedia = $productMedia->firstWhere('is_main', true) ?? $productMedia->first();
                @endphp

                <!-- PRATINJAU MEDIA UTAMA -->
                <div id="media-preview-container"
                    class="product-detail-main-img-wrapper bg-surface-container product-detail-ambient-shadow mb-2 mb-md-3 position-relative">
                    @if ($displayMedia)
                        @if ($displayMedia->media_type === 'video')
                            <video id="main-video" src="{{ $displayMedia->file_url }}"
                                class="w-100 h-100 object-fit-cover" controls preload="metadata"></video>
                        @else
                            <img id="main-image" src="{{ $displayMedia->file_url }}"
                                class="w-100 h-100 object-fit-cover" alt="{{ $product->product_name }}" />
                        @endif
                    @else
                        <img id="main-image" src="{{ asset('assets/img/selada.png') }}" class="w-100 h-100 object-fit-cover"
                            alt="Placeholder" />
                    @endif
                </div>

                <!-- SLIDER THUMBNAIL (BISA DIGESER HORIZONTAL JIKA > 4) -->
                <div class="product-detail-thumbnails d-flex flex-nowrap gap-2 overflow-x-auto pb-2"
                    style="scroll-behavior: smooth; -webkit-overflow-scrolling: touch;">
                    @foreach ($productMedia as $media)
                        <div class="flex-shrink-0" style="width: calc(25% - 6px); min-width: 70px;">
                            <button
                                class="product-detail-thumbnail-btn {{ $loop->first ? 'active' : '' }} w-100 rounded-3 overflow-hidden ratio ratio-1x1 position-relative p-0 border-0 bg-transparent"
                                onclick="changeMedia(this, '{{ $media->file_url }}', '{{ $media->media_type }}')">

                                @if ($media->media_type === 'video')
                                    <video src="{{ $media->file_url }}"
                                        class="w-100 h-100 object-fit-cover" muted preload="metadata"></video>
                                    <div class="position-absolute top-50 start-50 translate-middle d-flex align-items-center justify-content-center bg-dark bg-opacity-60 rounded-circle"
                                        style="width: 32px; height: 32px; z-index: 2;">
                                        <span class="material-symbols-outlined text-white fs-5"
                                            style="font-variation-settings: 'FILL' 1">play_arrow</span>
                                    </div>
                                @else
                                    <img src="{{ $media->file_url }}"
                                        class="w-100 h-100 object-fit-cover" alt="Thumb {{ $loop->iteration }}" />
                                @endif
                            </button>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- DETAIL INFO PRODUK & AKSI BELI (KANAN) -->
            <div class="product-detail-info col-12 col-lg-6 d-flex flex-column h-100">
                <div class="product-detail-card bg-surface-lowest p-4 rounded-3 product-detail-ambient-shadow h-100">
                    <div class="product-detail-header mb-3">
                        <h1 class="h2 text-dark mb-2 fw-bold">
                            {{ $product->product_name }}
                        </h1>

                        <div
                            class="product-detail-meta-top d-flex align-items-center flex-wrap gap-2 mb-2 small text-on-surface-variant fw-medium">
                            <span>
                                Terjual {{ $product->total_sold > 0 ? $product->total_sold : '0' }}
                            </span>
                            <span class="text-muted">|</span>
                            <span>
                                Kategori: {{ $product->category ? $product->category->category_name : '-' }}
                            </span>
                        </div>

                        <div class="product-detail-meta-rating mb-3">
                            @php
                                $avgRating = $product->reviews_avg_rating ?? 0;
                                $totalReviews = $product->reviews_count ?? 0;
                            @endphp

                            <div class="product-detail-rating d-flex align-items-center text-warning">
                                @if ($totalReviews > 0)
                                    @for ($i = 1; $i <= 5; $i++)
                                        <span class="material-symbols-outlined fs-5"
                                            style="font-variation-settings: 'FILL' {{ $i <= round($avgRating) ? '1' : '0' }}">star</span>
                                    @endfor
                                    <span class="ms-2 text-on-surface-variant small fw-medium">
                                        {{ number_format($avgRating, 1) }} ({{ $totalReviews }} Ulasan)
                                    </span>
                                @else
                                    @for ($i = 1; $i <= 5; $i++)
                                        <span class="material-symbols-outlined fs-5"
                                            style="font-variation-settings: 'FILL' 0">star</span>
                                    @endfor
                                    <span class="ms-2 text-muted small fw-medium">Belum ada ulasan</span>
                                @endif
                            </div>
                        </div>

                        <div id="dynamic-product-price" class="product-detail-price display-6 text-primary-custom fw-bold">
                            @if ($product->packages->isNotEmpty())
                                @php
                                    $firstAvailablePrice = $product->packages->where('stock', '>', 0)->first() ?? $product->packages->first();
                                @endphp
                                Rp{{ number_format($firstAvailablePrice->price, 0, ',', '.') }}
                            @else
                                Rp-
                            @endif
                        </div>
                    </div>

                    <div class="product-detail-body border-top border-bottom border-light-subtle py-3 mb-4">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                            <span class="text-on-surface-variant">Stok:
                                <span class="text-primary-custom fw-bold">
                                    {{ $product->packages->sum('stock') > 0 ? 'Tersedia (' . $product->packages->sum('stock') . ' unit)' : 'Habis' }}
                                </span>
                            </span>
                            <div
                                class="product-detail-tag d-flex align-items-center gap-1 px-3 py-1 bg-secondary-container text-on-secondary-container rounded-3 small fw-bold">
                                <span class="material-symbols-outlined fs-6">eco</span>
                                100% Organik
                            </div>
                        </div>
                        <p class="text-on-surface-variant mb-0 text-break">
                            {{ $product->description ?? 'Tidak ada deskripsi.' }}
                        </p>
                    </div>

                    <form id="add-to-cart-form" action="{{ route('cart.store') }}" method="POST" class="product-detail-actions mt-auto">
                        @csrf

                        <div class="product-detail-unit-selection d-flex align-items-center gap-3 mb-3">
                            <span class="text-dark fw-medium" style="min-width: 60px">Pilihan:</span>
                            <div class="d-flex gap-2 flex-wrap">
                                @php
                                    $firstAvailable = $product->packages->where('stock', '>', 0)->first();
                                    $firstAvailableId = $firstAvailable ? $firstAvailable->package_id : ($product->packages->first()->package_id ?? null);
                                @endphp
                                @forelse($product->packages as $package)
                                    <div class="flex-grow-1 flex-sm-grow-0">
                                        <input type="radio" class="btn-check product-detail-unit-check" name="package_id"
                                            id="package-{{ $package->package_id }}" value="{{ $package->package_id }}"
                                            data-price="{{ $package->price }}" data-stock="{{ $package->stock }}"
                                            {{ $package->package_id == $firstAvailableId ? 'checked' : '' }} onchange="updateDynamicPrice(this)"
                                            {{ $package->stock <= 0 ? 'disabled' : '' }} />

                                        <label class="btn product-detail-unit-btn rounded-3 px-3 py-1-5 small {{ $package->stock <= 0 ? 'disabled' : '' }}"
                                            for="package-{{ $package->package_id }}" {!! $package->stock <= 0 ? 'style="opacity: 0.6; pointer-events: none;"' : '' !!}>
                                            {{ $package->weight_in_kg }} Kg {!! $package->stock <= 0 ? '(Habis)' : '' !!}
                                        </label>
                                    </div>
                                @empty
                                    <span class="text-muted small">Tidak ada varian paket tersedia.</span>
                                @endforelse
                            </div>
                        </div>

                        <div class="d-flex align-items-center gap-3 mb-4">
                            <span class="text-dark fw-medium" style="min-width: 60px">Jumlah:</span>
                            <div
                                class="product-detail-qty border border-light-subtle rounded-3 d-flex align-items-center overflow-hidden bg-white">
                                <button type="button"
                                    class="btn border-0 rounded-0 px-3 py-2 text-primary-custom d-flex align-items-center"
                                    onclick="updateQty(-1)">
                                    <span class="material-symbols-outlined fs-5">remove</span>
                                </button>
                                <input class="product-detail-qty-input form-control border-0 text-center fw-bold p-0"
                                    id="qty-input" name="quantity" min="1" type="number" value="1"
                                    style="width: 50px; box-shadow: none" />
                                <button type="button"
                                    class="btn border-0 rounded-0 px-3 py-2 text-primary-custom d-flex align-items-center"
                                    onclick="updateQty(1)">
                                    <span class="material-symbols-outlined fs-5">add</span>
                                </button>
                            </div>
                        </div>

                        <div class="row g-2 g-sm-3">
                            <div class="col-12 col-sm-6">
                                <button type="submit"
                                    class="btn bg-primary-custom text-on-primary w-100 py-3 rounded-3 fw-semibold d-flex align-items-center justify-content-center gap-2 shadow-sm border-0">
                                    <span class="material-symbols-outlined">shopping_cart</span>
                                    Masukkan Keranjang
                                </button>
                            </div>
                            <div class="col-12 col-sm-6">
                                <button type="button"
                                    class="btn btn-outline-success border-2 border-success text-success w-100 py-3 rounded-3 fw-semibold bg-transparent" onclick="goToCheckoutNow()">
                                    Beli Sekarang
                                </button>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- REVIEWS / ULASAN SEKSI -->
        <section class="product-detail-reviews mt-4 mt-md-5 bg-surface-lowest p-4 rounded-3 product-detail-ambient-shadow">
            <h2 class="h4 text-dark mb-3 mb-md-4 d-flex align-items-center gap-2 fw-bold">
                Ulasan Produk
                <span class="text-on-surface-variant fw-normal fs-6">({{ $product->reviews_count ?? 0 }})</span>
            </h2>

            <div class="product-detail-chips d-flex flex-wrap gap-2 mb-3 mb-md-4">
                <button type="button" class="btn-filter-review badge px-3 py-2 rounded-pill border-0 active"
                    data-filter="all">
                    Semua
                </button>
                <button type="button" class="btn-filter-review badge px-3 py-2 rounded-pill border-0 unactive"
                    data-filter="photo">
                    Dengan Foto ({{ $product->reviews->filter(fn($r) => $r->media->isNotEmpty())->count() }})
                </button>
                <button type="button" class="btn-filter-review badge px-3 py-2 rounded-pill border-0 unactive"
                    data-filter="rating-5">
                    Rating 5 ({{ $product->reviews->where('rating', 5)->count() }})
                </button>
            </div>

            <div class="product-detail-reviews-list">
                @forelse($product->reviews as $review)
                    @php
                        $hasPhoto = $review->media && $review->media->isNotEmpty() ? 'has-photo' : '';
                        $isRating5 = $review->rating == 5 ? 'is-rating-5' : '';
                    @endphp
                    <div
                        class="product-detail-review-item review-card py-3 py-md-4 border-bottom border-light-subtle {{ $hasPhoto }} {{ $isRating5 }}">
                        <div class="d-flex align-items-start gap-2 gap-md-3">
                            <div class="rounded-circle border border-2 border-light-subtle d-flex align-items-center justify-content-center bg-primary-container text-on-primary fw-bold"
                                style="width: 44px; height: 44px">
                                {{ substr($review->user->username ?? 'U', 0, 1) }}
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-1 mb-1">
                                    <h4 class="h6 text-dark mb-0 fw-semibold">
                                        {{ $review->user->username ?? 'User' }}
                                    </h4>
                                    <span class="text-on-surface-variant small">
                                        {{ $review->created_at->diffForHumans() }}
                                    </span>
                                </div>
                                <div class="product-detail-user-stars text-warning mb-2 d-flex">
                                    @for ($i = 1; $i <= 5; $i++)
                                        <span class="material-symbols-outlined fs-6"
                                            style="font-variation-settings: 'FILL' {{ $i <= $review->rating ? '1' : '0' }}">star</span>
                                    @endfor
                                </div>
                                <p class="text-on-surface-variant mb-3">
                                    {{ $review->comment }}
                                </p>
                                @if ($review->media && $review->media->isNotEmpty())
                                    <div class="product-detail-review-photos d-flex gap-2 flex-wrap">
                                        @foreach ($review->media as $rm)
                                            @if ($rm->media_type === 'video')
                                                <div class="position-relative" style="width: 75px; height: 75px;">
                                                    <video src="{{ $rm->file_url }}"
                                                        class="rounded-3 object-fit-cover w-100 h-100" muted preload="metadata"></video>
                                                    <span class="position-absolute top-50 start-50 translate-middle text-white bg-dark bg-opacity-50 rounded-circle d-flex align-items-center justify-content-center" style="width: 24px; height: 24px; font-size:12px;">
                                                        <i class="bi bi-play-fill"></i>
                                                    </span>
                                                </div>
                                            @else
                                                <img src="{{ $rm->file_url }}"
                                                    class="rounded-3 object-fit-cover img-thumbnail cursor-pointer"
                                                    alt="Review Photo" style="width: 75px; height: 75px" />
                                            @endif
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="py-4 text-center text-muted">Belum ada ulasan untuk produk ini.</div>
                @endforelse
            </div>

            @if (($product->reviews_count ?? 0) > 0)
                <button
                    class="btn btn-link text-primary-custom w-100 py-3 fw-semibold text-decoration-none shadow-none mt-2">
                    Lihat Semua Ulasan
                </button>
            @endif
        </section>
    </main>

    <!-- STYLE KHUSUS UNTUK MENYEMBUNYIKAN SCROLLBAR DAN THUMBNAIL BORDER -->
    <style>
        /* Menyembunyikan scrollbar bawaan browser agar tetap rapi */
        .product-detail-thumbnails::-webkit-scrollbar {
            display: none;
            /* Google Chrome, Safari, Opera */
        }

        .product-detail-thumbnails {
            -ms-overflow-style: none;
            /* IE dan Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        /* Border indikator aktif untuk thumbnail gambar/video */
        .product-detail-thumbnail-btn {
            border: 2px solid transparent !important;
            opacity: 0.6;
            transition: all 0.2s ease;
        }

        .product-detail-thumbnail-btn.active,
        .product-detail-thumbnail-btn:hover {
            border-color: var(--bs-primary, #20603d) !important;
            /* Sesuaikan warna hijau brand anda */
            opacity: 1;
        }
    </style>

    <!-- INTERACTIVE JAVASCRIPT HANDLER -->
    <script>
        // 1. Fungsi mengubah nominal harga di bawah rating sesuai pilihan berat paket
        function updateDynamicPrice(element) {
            const price = parseInt(element.getAttribute('data-price'));
            if (!isNaN(price)) {
                const formattedPrice = new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }).format(price);

                document.getElementById('dynamic-product-price').textContent = formattedPrice.replace(/\s/g, '');
            }

            const stock = parseInt(element.getAttribute('data-stock')) || 0;
            const input = document.getElementById("qty-input");
            if (parseInt(input.value) > stock && stock > 0) {
                input.value = stock;
            } else if (stock === 0) {
                input.value = 1;
            }
        }

        // 2. Fungsi kontrol interaktif pilihan filter kategori ulasan produk
        document.querySelectorAll('.btn-filter-review').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.btn-filter-review').forEach(btn => {
                    btn.classList.remove('active');
                    btn.classList.add('unactive');
                });
                this.classList.remove('unactive');
                this.classList.add('active');

                const filterValue = this.getAttribute('data-filter');
                const reviewItems = document.querySelectorAll('.review-card');

                reviewItems.forEach(item => {
                    if (filterValue === 'all') {
                        item.style.setProperty('display', 'block', 'important');
                    } else if (filterValue === 'photo') {
                        if (item.classList.contains('has-photo')) {
                            item.style.setProperty('display', 'block', 'important');
                        } else {
                            item.style.setProperty('display', 'none', 'important');
                        }
                    } else if (filterValue === 'rating-5') {
                        if (item.classList.contains('is-rating-5')) {
                            item.style.setProperty('display', 'block', 'important');
                        } else {
                            item.style.setProperty('display', 'none', 'important');
                        }
                    }
                });
            });
        });

        // 3. Fungsi mengubah media utama (Gambar / Video) via thumbnail klik
        function changeMedia(element, src, type) {
            const container = document.getElementById("media-preview-container");
            if (!container) return;

            if (type === 'video') {
                container.innerHTML =
                    `<video id="main-video" src="${src}" class="w-100 h-100 object-fit-cover" controls autoplay></video>`;
            } else {
                container.innerHTML =
                    `<img id="main-image" src="${src}" class="w-100 h-100 object-fit-cover" alt="Product Image" />`;
            }

            document.querySelectorAll(".product-detail-thumbnail-btn").forEach((thumb) => {
                thumb.classList.remove("active");
            });
            element.classList.add("active");
        }

        // 4. Fungsi tombol tambah/kurang kuantitas jumlah beli
        function updateQty(delta) {
            const input = document.getElementById("qty-input");
            const selectedPackage = document.querySelector('input[name="package_id"]:checked');
            const maxStock = selectedPackage ? parseInt(selectedPackage.getAttribute('data-stock')) : 1;

            let val = parseInt(input.value) + delta;
            if (val < 1) val = 1;
            if (val > maxStock) val = maxStock;
            input.value = val;
        }

        // 5. Redirect ke halaman checkout detail dengan package_id & quantity
        function goToCheckoutNow(){
            @if(!auth()->check())
                window.location.href = '{{ route('login', ['token' => \App\Services\RouteTokenService::getToken()]) }}';
                return;
            @endif
            const selectedPackage = document.querySelector('input[name="package_id"]:checked');

            if(!selectedPackage){
                alert('Pilih varian paket terlebih dahulu.');
                return;
            }
            const packageId = selectedPackage.value;
            const qty = document.getElementById('qty-input').value || 1;

            const url = new URL('{{ route('checkout.show') }}', window.location.origin);
            url.searchParams.set('package_id', packageId);
            url.searchParams.set('quantity', qty);
            window.location.href = url.toString();
        }

        // 6. Handle form submit untuk tambah ke keranjang dengan cek login
        document.getElementById('add-to-cart-form').addEventListener('submit', function(e) {
            @if(!auth()->check())
                e.preventDefault();
                window.location.href = '{{ route('login', ['token' => \App\Services\RouteTokenService::getToken()]) }}';
                return;
            @endif
        });

    </script>
@endsection