@extends('layouts.customer')

@section('title', $title)
@section('meta_description', $metaDescription)

@section('content')

<section class="pt-3 pb-5">
    <div class="container-fluid container-wide">
        <div class="row g-5">
            <div class="col-lg-5">
                @if ($produkGambar->isNotEmpty())
                    <div id="produkGambarCarousel" class="carousel slide produk-detail-carousel" data-bs-ride="false">
                        <div class="carousel-inner rounded-4 overflow-hidden">
                            @foreach ($produkGambar as $i => $g)
                                <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                                    <div class="produk-detail-image-box">
                                        <img src="{{ img_src($g->gambar) }}" alt="{{ $produk->nama }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if ($produkGambar->count() > 1)
                            <button class="carousel-control-prev" type="button" data-bs-target="#produkGambarCarousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#produkGambarCarousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon"></span>
                            </button>
                            <div class="carousel-indicators produk-detail-indicators">
                                @foreach ($produkGambar as $i => $g)
                                    <button type="button" data-bs-target="#produkGambarCarousel" data-bs-slide-to="{{ $i }}"
                                        class="{{ $i === 0 ? 'active' : '' }}"></button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                @endif
            </div>

            <div class="col-lg-7">
                <h1 class="fw-bold mb-2" style="color:#1e293b;">{{ $produk->nama }}</h1>
                {{-- Harga & Buy Now disembunyikan sementara
                <p class="fw-bold fs-4 mb-4" style="color:#1e3a5f;">
                    {{ $produk->harga ? 'Rp' . number_format($produk->harga, 0, ',', '.') : '-' }}
                </p>
                --}}

                @if ($fitur->isNotEmpty())
                    <ul class="mb-4 ps-3" style="color:#1e3a5f;">
                        @foreach ($fitur as $f)
                            <li class="mb-2">{{ $f }}</li>
                        @endforeach
                    </ul>
                @endif
                {{-- Harga & Buy Now disembunyikan sementara,
                @if ($produk->link_beli)
                    <a href="{{ $produk->link_beli }}" target="_blank" rel="noopener"
                        class="btn btn-primary rounded-pill px-5 py-2 fw-bold">
                        Buy Now
                    </a>
                @endif
                --}}
                @if ($varian->isNotEmpty() || $produk->unit)
                <div class="produk-detail-unit mb-4">
                    <div class="produk-detail-unit-label">Varian</div>
                    <div class="d-flex flex-wrap gap-2">
                        @if ($varian->isNotEmpty())
                            @foreach ($varian as $v)
                                <span class="produk-detail-unit-badge">{{ $v }}</span>
                            @endforeach
                        @else
                            <span class="produk-detail-unit-badge">{{ $produk->unit }}</span>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>

        @if ($produk->deskripsi)
            <div class="row mt-5 pt-3 border-top">
                <div class="col-12">
                    <h4 class="fw-bold mb-3" style="color:#1e3a5f;">Deskripsi Produk</h4>
                    <div style="color:#475569; line-height:1.7;">
                        {!! $produk->deskripsi !!}
                    </div>
                </div>
            </div>
        @endif
    </div>
</section>

@if ($rekomendasi->isNotEmpty())
<section class="pt-3 pb-5">
    <div class="container-fluid container-wide">
        <h4 class="fw-bold mb-4" style="color:#1e3a5f;">Produk Lainnya</h4>

        <div class="row g-4">
            @foreach ($rekomendasi as $item)
                <div class="col-6 col-md-4 col-lg-3">
                    <x-customer.produk-card :produk="$item" />
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection

@push ('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    function syncProdukImageHeight() {
        const leftCol = document.querySelector('.produk-detail-carousel')?.closest('.col-lg-5');
        const rightCol = document.querySelector('.col-lg-7');
        const imageBoxes = document.querySelectorAll('.produk-detail-image-box');

        if (!leftCol || !rightCol || !imageBoxes.length) return;

        // Cuma terapkan height pixel kalau kolom berdampingan (viewport >= lg breakpoint Bootstrap, 992px)
        if (window.innerWidth >= 992) {
            const targetHeight = rightCol.offsetHeight;
            const clamped = Math.min(Math.max(targetHeight, 320), 560); // sesuai min/max-height kamu
            imageBoxes.forEach(function (box) {
                box.style.height = clamped + 'px';
            });
        } else {
            // Di mobile (stack vertikal), lepas height manual, biar balik ke CSS default (aspect natural)
            imageBoxes.forEach(function (box) {
                box.style.height = '';
            });
        }
    }

    syncProdukImageHeight();
    window.addEventListener('resize', syncProdukImageHeight);

    // Kalau gambar di-load belakangan (lazy load dll), ukur ulang juga
    document.querySelectorAll('.produk-detail-image-box img').forEach(function (img) {
        img.addEventListener('load', syncProdukImageHeight);
    });
});
</script>