@extends('layout')

@section('header')
    @include('components.header-inner', [
        'title' => 'Single Seater Sofa',
        'rightButton' =>
            '
                            <a href="' .
            route('cart') .
            '" class="link position-relative">
                
                                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_1795_14299)">
                    <rect x="10" y="6" width="44" height="44" rx="10" fill="#FDFDFD"/>
                    </g>
                    <path d="M22 18H23.74C24.82 18 25.67 18.93 25.58 20L24.75 29.96C24.61 31.59 25.9 32.99 27.54 32.99H38.19C39.63 32.99 40.89 31.81 41 30.38L41.54 22.88C41.66 21.22 40.4 19.87 38.73 19.87H25.82" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M36.25 38C36.9404 38 37.5 37.4404 37.5 36.75C37.5 36.0596 36.9404 35.5 36.25 35.5C35.5596 35.5 35 36.0596 35 36.75C35 37.4404 35.5596 38 36.25 38Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M28.25 38C28.9404 38 29.5 37.4404 29.5 36.75C29.5 36.0596 28.9404 35.5 28.25 35.5C27.5596 35.5 27 36.0596 27 36.75C27 37.4404 27.5596 38 28.25 38Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M29 24H41" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <defs>
                    <filter id="filter0_d_1795_14299" x="0" y="0" width="64" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                    <feMorphology radius="2" operator="erode" in="SourceAlpha" result="effect1_dropShadow_1795_14299"/>
                    <feOffset dy="4"/>
                    <feGaussianBlur stdDeviation="6"/>
                    <feComposite in2="hardAlpha" operator="out"/>
                    <feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.690196 0 0 0 0 0.176471 0 0 0 0.1 0"/>
                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1795_14299"/>
                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1795_14299" result="shape"/>
                    </filter>
                    </defs>
                    </svg>
                
                                <!-- Cart Count Badge --><span class="cart-count-badge">
                                    5
                                </span>
                
                            </a>',
    ])
@endsection

<style>
    /* ----------------------------------
   GLOBAL CONTAINER
---------------------------------- */
    .product-wrapper {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
    }

    /* ----------------------------------
   GRID LAYOUT (TWO COLUMN DESKTOP)
---------------------------------- */
    .product-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    /* MOBILE → SINGLE COLUMN */
    @media(max-width: 600px) {
        .product-grid {
            grid-template-columns: 1fr;
        }
    }


    /* ----------------------------------
   IMAGE SLIDER
---------------------------------- */
    .slider-container {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: #fff;
        padding: 10px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }

    .slider-track {
        display: flex;
        transition: transform 0.4s ease-in-out;
    }

    .slider-track img {
        width: 100%;
        border-radius: 12px;
    }

    /* Dots */
    .slider-dots {
        text-align: center;
        top: -20px;
        position: relative;
    }

    .dot {
        display: inline-block;
        width: 9px;
        height: 9px;
        background: #ccc;
        border-radius: 50%;
        margin: 0 4px;
        cursor: pointer;
    }

    .dot.active {
        background: #33B02C;
    }

    /* ----------------------------------
   PRODUCT DETAILS
---------------------------------- */
    .product-title {
        font-size: 20px;
        font-weight: bold;
    }

    .product-code {
        color: gray;
        margin-bottom: 10px;
    }

    /* Quantity selector */
    .quantity-selector {
        display: flex;
        align-items: center;
        margin: 15px 0;
    }

    .qty-btn {
        width: 36px;
        height: 36px;
        border: none;
        font-size: 20px;
        border-radius: 6px;
        cursor: pointer;
        color: white;
        background: #33B02C;
    }

    .qty-btn.plus {
        background: #33B02C;
        color: white;
    }

    .qty-value {
        margin: 0 12px;
        font-size: 20px;
        font-weight: bold;
    }

    /* Color Swatches */
    .color-options {
        display: flex;
        gap: 12px;
        margin: 10px 0;
    }

    .color-swatch {
        width: 80px;
        height: 40px;
        border-radius: 8px;
        border: 3px solid transparent;
        cursor: pointer;
    }

    .selected-swatch {
        border-color: #5447FF !important;
    }

    .green {
        background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%) !important;
    }

    .yellow {
        background: linear-gradient(135deg, #ffee58, #fbc02d);
    }

    .red {
        background: linear-gradient(135deg, #ef5350, #d32f2f);
    }

    /* Price */
    .price-text {
        font-size: 24px;
        font-weight: bold;
    }

    /* Add to cart */
    .add-cart-btn {
        width: 100%;
        padding: 15px;
        margin-top: 20px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%) !important;
        color: white;
        font-size: 18px;
        font-weight: bold;
    }
</style>

@section('content')
    <div class="container mt-4 mb-5 **px-3**">
        <div class="product-wrapper">

            <div class="product-grid">

                <!-- LEFT SIDE: IMAGE SLIDER -->
                <div>
                    <div class="slider-container" id="slider">
                        <div class="slider-track" id="sliderTrack">
                            <img src="{{ asset('/assets') }}/web/img/product.png">
                            <img src="{{ asset('/assets') }}/web/img/product.png">
                            <img src="{{ asset('/assets') }}/web/img/product.png">
                            <img src="{{ asset('/assets') }}/web/img/product.png">
                            <img src="{{ asset('/assets') }}/web/img/product.png">
                        </div>
                    </div>

                    <!-- DOT INDICATORS -->
                    <div class="slider-dots" id="sliderDots"></div>
                </div>


                <!-- RIGHT SIDE: DETAILS -->
                <div>
                    <h2 class="product-title">Single Seater Sofa Chair</h2>
                    <p class="product-code">Product Code : #1234567</p>

                    <!-- Quantity -->
                    <div class="quantity-selector">
                        <span>Quantity:</span>
                        <button class="qty-btn minus" onclick="updateQuantity(-1)">−</button>
                        <span id="quantity-value" class="qty-value">1</span>
                        <button class="qty-btn plus" onclick="updateQuantity(1)">+</button>
                    </div>

                    <!-- Color -->
                    <p class="color-price-heading">Price</p>

                    <div class="color-options">
                        <button data-price="30000" class="color-swatch selected-swatch green"></button>
                        <button data-price="35000" class="color-swatch yellow"></button>
                        <button data-price="28000" class="color-swatch red"></button>
                    </div>

                    <!-- Price Display -->
                    <p class="price-text">₹ <span id="selected-price">30000</span></p>

                    <!-- Add to Cart -->
                    <button href="#" class="add-cart-btn">Add To Cart</button>
                </div>

            </div>
        </div>

    </div>


    <script>
        /* -----------------------------------
       IMAGE SLIDER (5 IMAGES)
    ----------------------------------- */
        const sliderTrack = document.getElementById("sliderTrack");
        const sliderDotsContainer = document.getElementById("sliderDots");

        const totalSlides = sliderTrack.children.length;
        let index = 0;

        /* Create dots */
        for (let i = 0; i < totalSlides; i++) {
            const dot = document.createElement("span");
            dot.classList.add("dot");
            if (i === 0) dot.classList.add("active");
            dot.setAttribute("data-slide", i);

            dot.addEventListener("click", () => goToSlide(i));
            sliderDotsContainer.appendChild(dot);
        }

        function updateDots() {
            document.querySelectorAll(".dot").forEach(dot => dot.classList.remove("active"));
            document.querySelector(`.dot[data-slide='${index}']`).classList.add("active");
        }

        function goToSlide(i) {
            index = i;
            sliderTrack.style.transform = `translateX(-${index * 100}%)`;
            updateDots();
        }

        /* Auto swipe every 4 sec */
        setInterval(() => {
            index = (index + 1) % totalSlides;
            goToSlide(index);
        }, 4000);


        /* -----------------------------------
           TOUCH SWIPE (MOBILE)
        ----------------------------------- */
        let startX = 0;

        sliderTrack.addEventListener("touchstart", (e) => {
            startX = e.touches[0].clientX;
        });

        sliderTrack.addEventListener("touchend", (e) => {
            let endX = e.changedTouches[0].clientX;

            if (startX - endX > 50) {
                index = (index + 1) % totalSlides;
            } else if (endX - startX > 50) {
                index = (index - 1 + totalSlides) % totalSlides;
            }

            goToSlide(index);
        });


        /* -----------------------------------
           COLOR + PRICE UPDATE
        ----------------------------------- */
        const swatches = document.querySelectorAll(".color-swatch");
        const priceDisplay = document.getElementById("selected-price");

        swatches.forEach(swatch => {
            swatch.addEventListener("click", function() {

                swatches.forEach(s => s.classList.remove("selected-swatch"));
                this.classList.add("selected-swatch");

                priceDisplay.textContent = this.getAttribute("data-price");
            });
        });


        /* -----------------------------------
           QUANTITY UPDATE
        ----------------------------------- */
        function updateQuantity(change) {
            const qtyEl = document.getElementById("quantity-value");
            let qty = parseInt(qtyEl.textContent);

            qty += change;
            if (qty < 1) qty = 1;

            qtyEl.textContent = qty;
        }
    </script>
@endsection