@extends('frontEnd.layouts.master')
@section('title', $details->name)

@section('content')
    <script>
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: "view_item",
            ecommerce: {
                currency: "BDT",
                value: {{ $details->new_price }},
                items: [
                    {
                        item_id: "{{ $details->id }}",
                        item_name: "{{ $details->name }}",
                        affiliation: "{{ $generalsetting->name ?? 'Online Store' }}",
                        discount: {{ ($details->old_price ?? 0) - ($details->new_price ?? 0) }},
                        item_brand: "{{ $details->brand ? $details->brand->name : 'Premium Collection' }}",
                        item_category: "{{ $details->category->name ?? '' }}",
                        price: {{ $details->new_price }},
                        quantity: 1
                    }
                ]
            }
        });
    </script>
    <script>
        function add_to_cart_details(button, event) {
            // DataLayer Add to Cart Logic
            const selectedSize = $('input[name="product_size"]:checked').val() || '';
            const selectedColor = $('input[name="product_color"]:checked').val() || '';

            window.dataLayer.push({
                event: "add_to_cart",
                ecommerce: {
                    currency: "BDT",
                    value: {{ $details->new_price }},
                    items: [
                        {
                            item_id: "{{ $details->id }}",
                            item_name: "{{ $details->name }}",
                            item_variant: selectedSize + (selectedColor ? ' / ' + selectedColor : ''),
                            item_category: "{{ $details->category->name ?? '' }}",
                            item_brand: "{{ $details->brand ? $details->brand->name : '' }}",
                            price: {{ $details->new_price }},
                            quantity: 1
                        }
                    ]
                }
            });
        }
    </script>
    <script>
        window.dataLayer.push({
            event: "view_item_list",
            ecommerce: {
                item_list_id: "related_products",
                item_list_name: "Recommended For You",
                items: [
                    @foreach ($products as $product)
                        {
                            item_id: "{{ $product->id }}",
                            item_name: "{{ $product->name }}",
                            index: {{ $loop->index }},
                            item_category: "{{ $product->category->name ?? '' }}",
                            item_brand: "{{ $product->brand ? $product->brand->name : '' }}",
                            price: {{ $product->new_price }},
                            quantity: 1
                        },
                    @endforeach
                ]
            }
        });
    </script>
    <main class="bg-white text-neutral-900">
        <!-- Minimal Breadcrumb -->
        <section class="py-3 border-b border-neutral-100">
            <div class="container mx-auto px-4">
                <nav class="flex text-[10px] uppercase tracking-[1.5px] text-neutral-500">
                    <ol class="flex items-center space-x-2">
                        <li><a href="/" class="hover:text-black">Home</a></li>
                        <li><span>/</span></li>
                        <li class="text-black font-bold">{{ $details->category->name ?? 'Product' }}</li>
                    </ol>
                </nav>
            </div>
        </section>

        <section class="py-6 lg:py-10">
            <div class="container mx-auto px-4">
                <div class="flex flex-col lg:flex-row gap-8">

                    <!-- LEFT: Image Gallery -->
                    <div class="w-full lg:w-[55%]">
                        <div class="hidden sm:flex flex-col-reverse lg:flex-row gap-3">
                            <!-- Thumbnails -->
                            <div
                                class="flex lg:flex-col gap-2 overflow-x-auto lg:overflow-y-auto max-h-[500px] scrollbar-hide shrink-0">
                                @foreach ($details->images as $key => $image)
                                    <div class="thumb-trigger cursor-pointer border border-neutral-200 shrink-0 w-16 h-20 {{ $key == 0 ? 'border-black' : 'opacity-60 hover:opacity-100' }}"
                                        data-full-src="{{ asset($image->image) }}">
                                        <img src="{{ asset($image->image) }}" class="w-full h-full object-cover" alt="thumb">
                                    </div>
                                @endforeach
                            </div>

                            <!-- Main Image (Reduced height for compact look) -->
                            <div class="relative flex-1 bg-white border border-neutral-100 overflow-hidden group cursor-crosshair h-[400px] lg:h-auto lg:min-h-[500px]"
                                id="img-container">
                                <img id="mainImage" src="{{ asset($details->images[0]->image) }}"
                                    class="w-full h-auto transition-transform duration-300" alt="main-product">
                            </div>
                        </div>
                        {{-- slider --}}
                        <div class="single_category swiperProductDetails sm:hidden">
                            <div class="swiper-wrapper">
                                <!-- categories -->
                                @foreach ($details->images as $key => $image)
                                    <div class="swiper-slide" role="group" aria-label=""
                                        style="width: 369.2px; margin-right: 10px;">

                                        <img src="{{ asset($image->image) }}" class="w-full h-full object-cover" alt="thumb">

                                    </div>
                                @endforeach
                            </div>


                            <div class="swiper-button-prev">
                                <svg class="swiper-navigation-icon" width="11" height="20" viewBox="0 0 11 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z"
                                        fill="currentColor"></path>
                                </svg>
                            </div>
                            <div class="swiper-button-next">
                                <svg class="swiper-navigation-icon" width="11" height="20" viewBox="0 0 11 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z"
                                        fill="currentColor"></path>
                                </svg>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>

                    <!-- RIGHT: Product Info -->
                    <div class="w-full lg:w-[45%]">
                        <div class="flex flex-col">
                            <div class="mb-4">
                                <span class="text-[10px] uppercase tracking-[2px] text-neutral-400 font-bold block mb-1">
                                    {{ $details->brand ? $details->brand->name : 'Premium Collection' }}
                                </span>
                                <h1 class="text-2xl md:text-3xl font-medium text-black tracking-tight leading-tight">
                                    {{ $details->name }}
                                </h1>
                            </div>

                            <div class="flex items-baseline gap-3 mb-6">
                                <span class="text-2xl font-bold">৳{{ $details->new_price }}</span>
                                @if ($details->old_price)
                                    <del class="text-base text-neutral-400 font-light">৳{{ $details->old_price }}</del>
                                    <span class="text-red-600 text-[11px] font-bold uppercase">
                                        ({{ number_format((($details->old_price - $details->new_price) * 100) / $details->old_price, 0) }}%
                                        Off)
                                    </span>
                                @endif
                            </div>

                            <form id="addToCartForm" class="space-y-6">
                                @csrf
                                <input type="hidden" name="id" value="{{ $details->id }}">

                                <!-- Color Selection (Standard Height) -->
                                @if(count($productcolors) > 0)
                                    <div>
                                        <label
                                            class="text-[10px] uppercase tracking-[1.5px] font-bold mb-3 block text-neutral-600">Color</label>
                                        <div class="flex flex-wrap gap-2">
                                            @foreach ($productcolors as $procolor)
                                                <label class="cursor-pointer">
                                                    <input type="radio" name="product_color"
                                                        value="{{ $procolor->color->colorName ?? '' }}" class="peer hidden"
                                                        required>
                                                    <span
                                                        class="min-w-[70px] text-center px-3 py-2 border border-neutral-200 block text-[11px] uppercase tracking-wider transition-all peer-checked:border-black peer-checked:bg-black peer-checked:text-white hover:border-neutral-400">
                                                        {{ $procolor->color->colorName ?? '' }}
                                                    </span>
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                <!-- Size Selection (Square but Compact) -->
                                    @if(count($productsizes) > 0)
                                        <div>
                                            <div class="flex justify-between items-end mb-3">
                                                <label class="text-[10px] uppercase tracking-[1.5px] font-bold block text-neutral-600">
                                                    Size
                                                </label>
                                        
                                                @if ($details->category?->size_guide)
                                                    <button type="button" data-bs-toggle="modal" data-bs-target="#modalInfo"
                                                        class="text-[9px] uppercase tracking-[1px] underline">
                                                        Size Guide
                                                    </button>
                                                @endif
                                            </div>
                                        
                                            <div class="flex flex-wrap gap-2">
                                                @foreach ($productsizes->whereNotNull('size')->sortBy('size.sizeName') as $prosize)
                                                    <label class="cursor-pointer">
                                                        <input type="radio"
                                                            name="product_size"
                                                            value="{{ $prosize->size?->sizeName }}"
                                                            class="peer hidden"
                                                            required>
                                        
                                                        <span class="w-11 h-11 flex items-center justify-center border border-neutral-200 text-[12px] transition-all peer-checked:border-black peer-checked:bg-black peer-checked:text-white hover:border-neutral-400">
                                                            {{ $prosize->size?->sizeName }}
                                                        </span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif

                                <!-- Actions (Compact Height: py-3.5) -->
                                <div class="flex flex-col gap-2 pt-2">
                                    <input type="hidden" name="qty" value="1">
                                    <div class="flex gap-2">
                                        <button type="button" onclick="add_to_cart_details(this,event)"
                                            class="flex-[4] bg-black text-white py-3.5 text-[12px] font-bold uppercase tracking-[2px] hover:bg-neutral-800 transition-colors border border-black">
                                            Add To Bag
                                        </button>
                                        <button type="button"
                                            class="add_favourite flex-1 h-[50px] border border-neutral-200 flex items-center justify-center hover:border-black transition-colors"
                                            data-id="{{ $details->id }}">
                                            @if ($isFavourite)
                                                <i class="fa fa-heart text-red-500 text-lg"></i>
                                            @else
                                                <i class="fa-regular fa-heart text-lg"></i>
                                            @endif
                                        </button>
                                    </div>
                                    {{-- <button type="button"
                                        class="w-full bg-white text-black py-3 border border-black text-[11px] font-bold uppercase tracking-[1.5px] hover:bg-neutral-50 transition-all">
                                        Quick Checkout
                                    </button> --}}
                                </div>
                            </form>

                            <!-- Information -->
                            <div class="mt-8 border-t border-neutral-100">
                                <div class="py-4">
                                    <details class="group" open>
                                        <summary
                                            class="flex justify-between items-center cursor-pointer list-none text-[11px] font-bold uppercase tracking-[1.5px]">
                                            Details
                                            <span class="group-open:rotate-180 transition-transform"><i
                                                    class="fa-solid fa-chevron-down text-[9px]"></i></span>
                                        </summary>
                                        <div class="pt-3 text-neutral-600 text-[13px] leading-relaxed prose max-w-none">
                                            {!! $details->description !!}
                                        </div>
                                    </details>
                                </div>
                                <div
                                    class="py-3 border-t border-neutral-100 flex justify-between items-center text-[10px] uppercase tracking-[1px] font-medium text-neutral-400">
                                    <span>Fast Delivery</span>
                                    <span>7 Day Returns</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Suggested Section (Sharp Cards) -->
        <section class="py-16 bg-neutral-50">
            <div class="container mx-auto px-4">
                <h2 class="text-[16px] uppercase tracking-[4px] font-light text-center mb-12">Recommended For You</h2>
                <div class="customer-slider swiper overflow-hidden">
                    <div class="swiper-wrapper">
                        @foreach ($products as $product)
                            <div class="swiper-slide px-2">
                                <x-product-card :product="$product" :favouriteIds="$favouriteIds" />
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Modal (Sharp) -->
    <div class="modal fade" id="modalInfo" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-none shadow-2xl">
                <div class="flex justify-between items-center p-4 border-b">
                    <h5 class="text-[12px] font-bold uppercase tracking-[1px]">Size Guide</h5>
                    <button type="button" class="text-xl" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="p-4">
                    <img src="{{ asset($details->category->size_guide) }}" alt="Size Chart" class="w-full">

                    {{-- {!! $generalsetting->size !!} --}}
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            const $container = $('#img-container');
            const $img = $('#mainImage');

            $container.on('mousemove', function (e) {
                const offset = $(this).offset();
                const x = e.pageX - offset.left;
                const y = e.pageY - offset.top;
                const xPercent = (x / $(this).width()) * 100;
                const yPercent = (y / $(this).height()) * 100;
                $img.css({ 'transform-origin': `${xPercent}% ${yPercent}%`, 'transform': 'scale(2)' });
            });

            $container.on('mouseleave', function () {
                $img.css({ 'transform': 'scale(1)', 'transform-origin': 'center center' });
            });

            $('.thumb-trigger').on('click', function () {
                const src = $(this).data('full-src');
                $('.thumb-trigger').removeClass('border-black').addClass('opacity-60');
                $(this).addClass('border-black').removeClass('opacity-60');
                $img.attr('src', src);
            });
        });
    </script>

    <style>
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        details summary::-webkit-details-marker {
            display: none;
        }

        body {
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.01em;
        }
    </style>
@endsection