@extends('User.layout')

@section('header')
    @include('components.header-inner', [
        'title' => $product->product_name,
        'cartCount' => $cartCount,
        'backUrl' => route('view_products'),
    
        'rightButton' =>
            '
        <a href="' .
            route('add_to_cart_products') .
            '" 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" />
            </svg>
            <span class="cart-count-badge">' .
            $cartCount .
            '</span>
        </a>
        ',
    ])
@endsection


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

    .cart-count-badge {
        position: absolute;
        top: 10px;
        right: 30px;
        background: linear-gradient(180deg, rgba(51, 176, 44, 0.7) 0%, #33B02C 100%) !important;
        color: #fff;
        font-size: 8px;
        padding: 2px 6px;
        border-radius: 50%;
        font-weight: bold;
        width: 12.413330078125;
        height: 14;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    /* ----------------------------------
   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">
                            @foreach ($images as $img)
                                <img src="{{ $img }}">
                            @endforeach
                        </div>
                    </div>

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


                <!-- RIGHT SIDE: DETAILS -->
                <div>
                    <h2 class="product-title">{{ $product->product_name }}</h2>
                    <div class="d-flex justify-content-between">
                        <span class="product-code">Product Code : {{ $product->product_id }}</span>
                        <a href="#" class="link"><svg xmlns="http://www.w3.org/2000/svg" width="35px"
                                height="35px" viewBox="0 0 24 24" fill="none">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M13.803 5.33333C13.803 3.49238 15.3022 2 17.1515 2C19.0008 2 20.5 3.49238 20.5 5.33333C20.5 7.17428 19.0008 8.66667 17.1515 8.66667C16.2177 8.66667 15.3738 8.28596 14.7671 7.67347L10.1317 10.8295C10.1745 11.0425 10.197 11.2625 10.197 11.4872C10.197 11.9322 10.109 12.3576 9.94959 12.7464L15.0323 16.0858C15.6092 15.6161 16.3473 15.3333 17.1515 15.3333C19.0008 15.3333 20.5 16.8257 20.5 18.6667C20.5 20.5076 19.0008 22 17.1515 22C15.3022 22 13.803 20.5076 13.803 18.6667C13.803 18.1845 13.9062 17.7255 14.0917 17.3111L9.05007 13.9987C8.46196 14.5098 7.6916 14.8205 6.84848 14.8205C4.99917 14.8205 3.5 13.3281 3.5 11.4872C3.5 9.64623 4.99917 8.15385 6.84848 8.15385C7.9119 8.15385 8.85853 8.64725 9.47145 9.41518L13.9639 6.35642C13.8594 6.03359 13.803 5.6896 13.803 5.33333Z"
                                    fill="#000" />
                            </svg></a>
                    </div>

                    <p class="avail-qty">Available Qty: {{ $product->quantity }}</p>

                    <form method="POST" action="{{ route('add_product_to_cart') }}" id="addCartForm">
                        @csrf

                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="quantity" id="form-quantity" value="1">
                        <input type="hidden" name="selected_price_type" id="form-price-type" value="final_price">

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

                        <!-- Color Swatches -->
                        <div class="color-options">
                            <button type="button" data-price="{{ $product->mrp }}" data-price-type="mrp"
                                class="color-swatch selected-swatch green"></button>
                            <button type="button" data-price="{{ $product->second_price }}" data-price-type="second_price"
                                class="color-swatch yellow"></button>
                            <button type="button" data-price="{{ $product->final_price }}" data-price-type="final_price"
                                class="color-swatch red"></button>
                        </div>

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

                        <!-- Add to Cart -->
                        <button type="submit" class="add-cart-btn">Add To Cart</button>
                    </form>

                </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");

                // Update hidden input for price type
                document.getElementById("form-price-type").value = this.getAttribute("data-price-type");
            });
        });

        /* -----------------------------------
           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;

            // Update hidden input
            document.getElementById("form-quantity").value = qty;
        }

        document.getElementById("addCartForm").addEventListener("submit", function() {
            document.querySelector(".add-cart-btn").disabled = true;
        });
    </script>
@endsection