@extends('landingpage.layouts.main')

@section('content')
<style>
    .detail-wrapper{
        position:relative;
        min-height:100vh;
        padding:60px 0;
        background:
            linear-gradient(rgba(252,248,242,.94),rgba(252,248,242,.96)),
            url('/storage/image.png') center center/cover fixed no-repeat;
            margin-top:90px;
            padding:40px 0 60px;
    }
    .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>

                {{-- kanan --}}
                <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>

                    {{-- Level --}}
                    @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

                    {{-- Ukuran --}}
                    <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>
                    {{-- Catatan Aroma --}}
                    <div class="variant-row">
                        <div class="variant-label">
                            Aroma
                        </div>
                    
                        <div class="w-100" style="max-width: 500px;">
                           <textarea
                            id="catatanAroma"
                            class="form-control aroma-note"
                            rows="2"
                            placeholder="Contoh: Baccarat Rouge 540"
                            style="height: 60px; font-size: 13px;
                                font-weight: 400;color: #555;
                                resize: none;
                            "></textarea>
                    
                            <small class="text-warning" style="font-size: 12px;">
                                ⚠️ Khusus parfum refill: tuliskan nama aroma parfum yang ingin Anda isi ulang.
                            </small>
                        </div>
                    </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>

        {{-- Card Deskripsi --}}
        <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;
        const ctt_aroma = document.getElementById("catatanAroma").value.trim();

        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() }}"
            },

            body:JSON.stringify({

                varian_id: varianId,
                jumlah: qtyInput.value,
                ctt_aroma: ctt_aroma

            })

        })

        .then(res=>{

            if(!res.ok){
                throw new Error("Request gagal");
            }

            return res.json();

        })

        .then(data=>{

            Swal.fire({
                icon:"success",
                title:"Berhasil",
                text:"Produk masuk ke keranjang"
            });

            document.getElementById("catatanAroma").value = "";

        })

        .catch(err=>{

            console.error(err);

            Swal.fire({
                icon:"error",
                title:"Gagal",
                text:"Produk gagal masuk ke keranjang"
            });

        });

    }
    updateVarian();

</script>

@endsection