@extends('landingpage.layouts.main')

@section('content')
<style>
    .detail-wrapper{
        position:relative;
        min-height:100vh;
        margin-top:90px;
        padding:40px 0 60px;
        background:transparent;
    }
    .product-detail-box{
        max-width:1100px;
        margin:auto;
        background:#ffffff;
        border:1px solid #E9DDC8;
        border-radius:20px;
        padding:24px;
        overflow:hidden;
        box-shadow:0 12px 35px rgba(95,78,57,.08);
    }
    .main-image{
        width:100%;
        height:420px;
        border-radius:18px;
        overflow:hidden;
        background:#F8F4EE;
        border:1px solid #E9DDC8;
    }
    .main-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:.45s;
    }
    .main-image:hover img{
        transform:scale(1.04);
    }
    .thumb-list{
        display:flex;
        gap:10px;
        margin-top:14px;
        overflow-x:auto;
        padding-bottom:4px;
    }
    .thumb-item{
        width:70px;
        height:70px;
        border-radius:12px;
        overflow:hidden;
        cursor:pointer;
        flex-shrink:0;
        background:#fff;
        border:1px solid #E9DDC8;
        transition:.25s;
    }
    .thumb-item img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .thumb-item:hover{
        transform:translateY(-2px);
        border-color:#D4AF37;
    }
    .thumb-item.active{
        border:2px solid #C89A4B;
    }
    .product-title{
        font-size:32px;
        font-weight:700;
        color:#4B3A25;
        line-height:1.2;
        margin:12px 0 16px;
    }
    .product-description{
        white-space: pre-wrap;
        line-height: 1.9;
        color: #5f4b32; /* Coklat elegan */
        font-size: 15px;
    }
    .price-wrapper{
        margin-bottom:20px;
    }
    .price-label{
        color:#8A7150;
        font-size:12px;
        margin-bottom:6px;
    }
    .product-price{
        font-size:30px;
        color:#B8863B;
        font-weight:700;
    }
    .product-meta{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        margin-bottom:18px;
        padding-bottom:16px;
        border-bottom:1px solid #E9DDC8;
    }
    .meta-item span{
        display:block;
        color:#A38C6B;
        font-size:11px;
        letter-spacing:1px;
        text-transform:uppercase;
        margin-bottom:6px;
    }
    .meta-item strong{
        color:#4B3A25;
        font-size:15px;
    }
    .desc-box{
        background:#FDFBF7;
        border:1px solid #E9DDC8;
        border-radius:14px;
        padding:16px 18px;
        margin-bottom:18px;
    }
    .desc-header{
        color:#4B3A25;
        font-size:16px;
        font-weight:700;
        margin-bottom:10px;
    }
    .desc-box p{
        color:#6D5A43;
        font-size:13px;
        line-height:1.6;
        margin:0;
    }
    .product-meta{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        margin-bottom:14px;
        padding-bottom:12px;
        border-bottom:1px solid #E9DDC8;
    }
    .meta-item span{
        display:block;
        color:#A38C6B;
        font-size:10px;
        letter-spacing:1px;
        text-transform:uppercase;
        margin-bottom:4px;
    }
    .meta-item strong{
        color:#4B3A25;
        font-size:14px;
        font-weight:600;
    }
    .variant-section{
        margin-bottom:20px;
    }
    .section-title{
        color:#8A7150;
        font-size:12px;
        letter-spacing:1px;
        text-transform:uppercase;
        font-weight:700;
        margin-bottom:10px;
    }
    .option-group{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }
    .option-btn{
        background:#fff;
        border:1px solid #E9DDC8;
        color:#5F4E39;
        border-radius:10px;
        padding:8px 18px;
        font-size:14px;
        transition:.25s;
    }
    .option-btn:hover{
        border-color:#D4AF37;
        background:#F7F2EA;
    }
    .option-btn.active{
        background:linear-gradient(135deg,#C89A4B,#D9B36A);
        color:#fff;
        border-color:#C89A4B;
    }
    .option-btn.disabled{
        opacity:.45;
    }
    .qty-wrapper{
        display:flex;
        align-items:center;
        gap:16px;
    }
    .qty-box{
        display:flex;
        align-items:center;
        border:1px solid #ddd;
        background:#fff;
        height:40px;
    }
    .qty-box button{
        width:40px;
        height:40px;
        border:none;
        background:#fff;
        color:#888;
        font-size:20px;
        cursor:pointer;
        transition:.2s;
    }
    .qty-box button:hover{
        background:#f8f8f8;
    }
    #qtyDisplay{
        width:45px;
        text-align:center;
        font-weight:600;
        color:#D35400;
        border-left:1px solid #eee;
        border-right:1px solid #eee;
    }
    .stock-text{
        font-size:15px;
        color:#666;
    }
    .stock-text strong{
        color:#444;
        font-weight:600;
    }
    .action-wrapper{
        display:flex;
        gap:12px;
        margin-top:24px;
    }
    .btn-cart,
    .btn-buy{
        flex:1;
        height:46px;
        border-radius:10px;
        font-size:14px;
        font-weight:600;
        transition:.25s;
    }
    .btn-cart{
        background:#fff;
        border:1px solid #C89A4B;
        color:#B8863B;
    }
    .btn-cart:hover{
        background:#F7F2EA;
    }
    ::-webkit-scrollbar{
        width:8px;
        height:8px;
    }
    ::-webkit-scrollbar-thumb{
        background:#D4AF37;
        border-radius:999px;
    }
    .variant-row{
        display:flex;
        align-items:flex-start;
        gap:22px;
        margin-bottom:18px;
    }
    .variant-label{
        width:90px;
        min-width:90px;
        font-size:14px;
        color:#6f6f6f;
        font-weight:500;
        padding-top:8px;
    }
    .option-group{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        flex:1;
    }
    .option-btn{
        padding:9px 18px;
        border:1px solid #ddd;
        background:#fff;
        border-radius:0;
        font-size:14px;
        transition:.25s;
        white-space:nowrap;
    }
    .option-btn:hover{
        border-color:#b88b45;
    }
    .option-btn.active{
        background:#b88b45;
        color:#fff;
        border-color:#b88b45;
    }
    .desc-box{
        max-width:1100px;
        width:100%;
        margin:30px auto 0;
        background:#fff;
        border:1px solid #E9DDC8;
        border-radius:20px;
        padding:24px;
        box-shadow:0 12px 35px rgba(95,78,57,.08);
    }
    .desc-box p{
        color:#6D5A43;
        font-size:14px;
        line-height:1.7;
        margin:0;

        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    .option-btn{
        position:relative;
        background:#fff;
        border:1px solid #ddd;
        padding:10px 18px;
        min-width:90px;
        transition:.25s;
    }
    .option-btn.active{
        border:1px solid #ff5a36;
        color:#ff5a36;
        background:#fff;
    }
    .option-btn.active::before{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        width:18px;
        height:18px;
        background:#ff5a36;
        clip-path:polygon(100% 0,0 100%,100% 100%);
    }
    .option-btn.active::after{
        content:"✓";
        position:absolute;
        right:2px;
        bottom:-1px;
        font-size:10px;
        color:#fff;
    }
    @media(max-width:768px){
        .detail-wrapper{
            padding:30px 0;
        }
        .product-detail-box{
            padding:16px;
            border-radius:16px;
        }
        .main-image{
            height:260px;
        }
        .thumb-item{
            width:60px;
            height:60px;
        }
        .product-title{
            font-size:22px;
        }
        .product-price{
            font-size:22px;
        }
        .product-meta{
            grid-template-columns:1fr;
        }
        .qty-box{
            width:120px;
            height:42px;
        }
        .qty-box button{
            width:38px;
            height:42px;
        }
        .action-wrapper{
            flex-direction:column;
        }
        .btn-cart,
        .btn-buy{
            width:100%;
        }
    }
    .aroma-note{
        border:1px solid #d8d8d8;
        border-radius:12px;
        padding:12px 15px;
        font-size:14px;
        resize:vertical;
        transition:.25s;
    }
    .aroma-note:focus{
        border-color:#c9a96e;
        box-shadow:0 0 0 .2rem rgba(201,169,110,.15);
        outline:none;
    }
</style>

<div class="detail-wrapper">
    <div class="container">
        <div class="product-detail-box">
            <div class="row g-5">
                <div class="col-lg-4">
                    <div class="main-image">
                        <img id="mainProductImage"
                             src="{{ asset('storage/' . ($produk->gambarProduk->first()->gambar ?? 'default.jpg')) }}">
                    </div>
                    <div class="thumb-list">
                        @foreach($produk->gambarProduk as $gambar)
                            <div class="thumb-item"
                                 onclick="changeImage(this, '{{ asset('storage/' . $gambar->gambar) }}')">
                                <img src="{{ asset('storage/' . $gambar->gambar) }}">
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-8">
                    <h1 class="product-title">
                        {{ $produk->nama_produk }}
                    </h1>
                    <div class="price-wrapper">
                        <div class="price-label">
                            Harga Mulai
                        </div>
                        <div class="product-price" id="productPrice">
                            Rp {{ number_format($produk->varians->first()->harga ?? 0,0,',','.') }}
                        </div>
                    </div>
                    @if($produk->varians->pluck('level')->filter()->unique()->count())
                    <div class="variant-row">
                        <div class="variant-label">Level</div>
                        <div class="option-group" id="levelGroup">
                            @foreach($produk->varians->pluck('level')->filter()->unique() as $level)
                                <button
                                    type="button"
                                    class="option-btn level-option"
                                    data-level="{{ $level }}">
                                    {{ $level }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                    @endif
                    <div class="variant-row">
                        <div class="variant-label">Ukuran</div>
                        <div class="option-group" id="ukuranGroup">
                            @foreach($produk->varians->pluck('ukuran')->filter()->unique() as $ukuran)
                                <button
                                    type="button"
                                    class="option-btn ukuran-option"
                                    data-ukuran="{{ $ukuran }}">
                                    {{ $ukuran }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                    <div class="variant-row">
                        <div class="variant-label">
                            Kuantitas
                        </div>
                        <div class="qty-wrapper">
                            <div class="qty-box">
                                <button type="button" id="qtyMinus">−</button>
                                <span id="qtyDisplay">1</span>
                                <button type="button" id="qtyPlus">+</button>
                            </div>
                            <span class="stock-text">
                                Tersedia
                                <strong id="productStock"></strong>
                            </span>
                        </div>
                        <input
                            type="hidden"
                            id="qtyInput"
                            value="1">
                    </div>
                    <input type="hidden" id="selectedVarianId">
                    <div class="action-wrapper">
                        <button
                            class="btn-cart"
                            onclick="addToCart()">
                            <i class="bi bi-cart-plus"></i>
                            Keranjang
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="desc-box mt-4">
            <div class="desc-header">
                Deskripsi Produk
            </div>
            <div class="product-meta">
                <div class="meta-item">
                    <span>Category</span>
                    <strong>{{ $produk->gender }}</strong>
                </div>
            </div>
            <div class="product-description">
                {{ $produk->deskripsi }}
            </div>
        </div>
    </div>
</div>

<script>

    const varians = @json($produk->varians);

    let selectedLevel = null;
    let selectedUkuran = null;
    let qty = 1;

    const levelButtons = document.querySelectorAll('.level-option');
    const ukuranButtons = document.querySelectorAll('.ukuran-option');

    const priceEl = document.getElementById('productPrice');
    const stockEl = document.getElementById('productStock');

    const qtyDisplay = document.getElementById('qtyDisplay');
    const qtyInput = document.getElementById('qtyInput');

    function updateButtonStatus(){
        ukuranButtons.forEach(btn=>{
            const available = varians.some(v =>
                (!selectedLevel || v.level == selectedLevel) &&
                v.ukuran == btn.dataset.ukuran
            );
            btn.disabled = !available;
            btn.classList.toggle('disabled', !available);
            if(!available){
                btn.classList.remove('active');
                if(selectedUkuran == btn.dataset.ukuran){
                    selectedUkuran = null;
                }
            }
        });

        // Disable level
        levelButtons.forEach(btn=>{
            const available = varians.some(v =>
                (!selectedUkuran || v.ukuran == selectedUkuran) &&
                v.level == btn.dataset.level
            );
            btn.disabled = !available;
            btn.classList.toggle('disabled', !available);
            if(!available){
                btn.classList.remove('active');
                if(selectedLevel == btn.dataset.level){
                    selectedLevel = null;
                }
            }
        });

    }

    function updateVarian(){
        const matched = varians.find(v => {
            const levelMatch =
                selectedLevel
                ? v.level == selectedLevel
                : true;

            const ukuranMatch =
                selectedUkuran
                ? v.ukuran == selectedUkuran
                : true;

            return levelMatch && ukuranMatch;
        });

        if(matched){
            priceEl.innerHTML =
                "Rp " +
                Number(matched.harga).toLocaleString("id-ID");
            stockEl.innerText = matched.stok;
            document.getElementById("selectedVarianId").value = matched.id;

            // reset qty saat ganti varian
            qty = 1;
            qtyDisplay.innerText = qty;
            qtyInput.value = qty;
        }else{
            document.getElementById("selectedVarianId").value = "";
            stockEl.innerText = "";
        }
        updateButtonStatus();
    }

    levelButtons.forEach(btn=>{
        btn.addEventListener("click",function(){
            if(this.disabled) return;
            levelButtons.forEach(b=>b.classList.remove("active"));
            this.classList.add("active");
            selectedLevel = this.dataset.level;
            updateVarian();
        });
    });;

    ukuranButtons.forEach(btn=>{
        btn.addEventListener("click",function(){
            if(this.disabled) return;
            ukuranButtons.forEach(b=>b.classList.remove("active"));
            this.classList.add("active");
            selectedUkuran = this.dataset.ukuran;
            updateVarian();

        });
    });;

    function changeImage(el,src){
        document.getElementById("mainProductImage").src = src;
        document.querySelectorAll(".thumb-item")
            .forEach(item=>item.classList.remove("active"));
        el.classList.add("active");
    }

    document.getElementById("qtyPlus").addEventListener("click",()=>{
        if(!document.getElementById("selectedVarianId").value){
            return;
        }
        let stock = parseInt(stockEl.innerText) || 0;
        if(qty < stock){
            qty++;
            qtyDisplay.innerText = qty;
            qtyInput.value = qty;
        }
    });

    document.getElementById("qtyMinus").addEventListener("click",()=>{
        if(qty > 1){
            qty--;
            qtyDisplay.innerText = qty;
            qtyInput.value = qty;

        }
    });

    function addToCart(){
        const varianId = document.getElementById("selectedVarianId").value;
        if(!varianId){
            Swal.fire({
                icon: "warning",
                title: "Pilih Varian",
                text: "Silakan pilih level dan ukuran terlebih dahulu"
            });
            return;
        }
        fetch("/keranjangs", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                varian_id: varianId,
                jumlah: qtyInput.value
            })
        })
        .then(async response => {
            const data = await response.json();
            console.log("Status:", response.status);
            console.log("Response:", data);
            if(!response.ok){
                throw new Error(data.message || "Request gagal");
            }
            return data;
        })
        .then(data => {
            Swal.fire({
                icon: "success",
                title: "Berhasil",
                text: data.message || "Produk masuk ke keranjang",
                confirmButtonText: "OK"
            });
        })
        .catch(error => {
            console.error("Error:", error);
            Swal.fire({
                icon: "error",
                title: "Gagal",
                text: error.message || "Produk gagal masuk ke keranjang"
            });
        });
    }

    updateVarian();

</script>

@endsection