@extends('Website.Includes.header', ['meta_Details' => $meta_details])
@section('content')
    <section class="about-sec1">
        <img src="{{ asset('WebsiteAssets/assets/img/counter-bg-1.jpg') }}" alt="Background Image" class="bg-image" />
        <div class="container">
            <div class="text-center">
                <h2>Shop</h2>

                <p> <p class="text-decoration-none"><span class="text-uppercase">Sydney Quality
                            Meats:</span></p></p>
                <p><p class="text-decoration-none text-uppercase"><span
                            class="text-uppercase ms-1">Products:</span></p></p>
                <p class="text-uppercase"> <p 
                        class="text-uppercase" style="text-decoration: none"> <span
                            class="text-uppercase">{{$product->category->title}}:</span></p>
                <p class="text-uppercase ms-1">{{$product->title}}</p>
                </p>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section class="container">
        <div class="Product_Detail">
            <div class="row">
                <!-- Product Images Column -->
                <div class="col-md-6">
                    <div class="Product_Detail__images">
                        <!-- Main Image -->
                        <div class="Product_Detail__mainImageWrapper">
                            <div class="zoom-container">
                                <img id="mainImage"
                                    src="{{ asset($product->featured_image ? $product->featured_image : 'WebsiteAssets/assets/img/pricing-product-1-2.png') }}"
                                    alt="{{ $product->title }}" class="Product_Detail__mainImage zoom-image" />
                            </div>
                            <!-- Search (Magnify) Button -->
                            <button class="Product_Detail__searchBtn" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="26" height="26" viewBox="0 0 256 256" xml:space="preserve">
                                <defs>
                                </defs>
                                <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
                                    <path d="M 90.061 87.939 L 59.696 57.576 c 5.887 -6.407 9.117 -14.664 9.117 -23.419 c 0 -9.257 -3.605 -17.96 -10.151 -24.505 C 52.115 3.105 43.413 -0.5 34.156 -0.5 S 16.196 3.105 9.651 9.651 C 3.105 16.197 -0.5 24.9 -0.5 34.156 c 0 9.257 3.605 17.96 10.151 24.505 c 6.545 6.546 15.249 10.151 24.505 10.151 c 8.755 0 17.011 -3.229 23.419 -9.117 L 87.94 90.06 C 88.233 90.353 88.616 90.5 89 90.5 s 0.768 -0.146 1.061 -0.439 C 90.647 89.474 90.647 88.525 90.061 87.939 z M 11.772 56.541 C 5.793 50.562 2.5 42.613 2.5 34.156 c 0 -8.456 3.293 -16.405 9.272 -22.384 S 25.7 2.5 34.156 2.5 s 16.405 3.293 22.384 9.272 s 9.272 13.929 9.272 22.384 c 0 8.456 -3.293 16.406 -9.272 22.384 c -5.979 5.979 -13.929 9.272 -22.384 9.272 S 17.751 62.52 11.772 56.541 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                    <path d="M 34.387 49.245 c -0.829 0 -1.5 -0.672 -1.5 -1.5 V 19.377 c 0 -0.829 0.671 -1.5 1.5 -1.5 s 1.5 0.671 1.5 1.5 v 28.368 C 35.887 48.573 35.216 49.245 34.387 49.245 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                    <path d="M 48.572 35.061 H 20.203 c -0.829 0 -1.5 -0.671 -1.5 -1.5 s 0.671 -1.5 1.5 -1.5 h 28.368 c 0.828 0 1.5 0.671 1.5 1.5 S 49.4 35.061 48.572 35.061 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                                </g>
                            </svg>
                            </button>
                        </div>
                        <!-- Thumbnails -->
                        <div class="Product_Detail__thumbnails" id="thumbnails">
                            <!-- Populated by JavaScript based on the images array -->
                        </div>
                    </div>
                </div>

                <!-- Product Info Column -->
                <div class="col-md-6">
                    <div class="Product_Detail__info">
                        <!-- Title, Rating, Price -->
                        <div class="TRP">
                            <div class="d-flex Order_History_Sec2_title22 Alin___Star">
                                <h1 class="Product_Detail__title">{{$product->title}}</h1>
                                @php
                                    $priceMeta = $product->productMeta->firstWhere('option', '_price');
                                    $price = $priceMeta ? $priceMeta->value : 'N/A';
                                    $stockMeta = $product->productMeta->firstWhere('option', '_stock_status');
                                    $stock = $stockMeta ? $stockMeta->value : '';

                                    $weightMeta = $product->productMeta->firstWhere('option', '_weight');
                                    $discountData = $product->discount_data ?? null;
                                    $weight = $weightMeta ? $weightMeta->value : 0;
                                  @endphp

                                @if ($discountData)
                                    <div class="Product_Detail__price pt-3 ps-sm-3">
                                        <span class="text-danger"><del>${{ $price }}</del></span>
                                        <span style="margin-left:15px !important" class="card-text">
                                            ${{ $discountData['discounted_price'] }}
                                        </span>
                                        <span style="color: black; margin-left: 12px;">
                                            ({{$weight}} KG)
                                        </span>
                                    </div>
                                @else
                                    <div class="Product_Detail__price pt-3 ps-sm-3">
                                        ${{ $price }} 
                                        <span style="color: black; margin-left: 12px;">
                                            ({{$weight}} KG)
                                        </span>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div style="border-bottom: 1px solid #7a737334">
                            <div class="P-D_sec3-paragraph mb-4">
                                @php
                                    print ($product->short_description);
                                  @endphp
                            </div>
                        </div>

                        <!-- Quantity + "Add to Cart" form -->
                        <form action="{{ route('cart.store') }}" method="POST" style="border-bottom: 1px solid #eee;">
                            @csrf
                            <!-- Hidden fields for product details -->
                            <input type="hidden" name="pId" value="{{ $product->id }}">
                            <input type="hidden" name="title" value="{{ $product->title }}">
                            <input type="hidden" name="amount" value="{{ $price }}">
                            <input type="hidden" name="featuredImage" value="{{ $product->featured_image }}">
                            <input type="hidden" name="productGst" value="0">
                            <input type="hidden" name="quantity" value="1">
                            <input type="hidden" name="weight" value="{{$weight}}">

                            @if($stock == 'in_stock')
                                <!-- "Add To Cart" Button -->
                                <div class="Product_Detail__buttonRow mb-4">
                                    <button type="submit" class="Product_Detail-btn-">
                                        <span>Add To Cart</span>
                                        <span class="divider"></span>
                                        <i class="icon-meat-3"></i>
                                    </button>
                                </div>
                            @else
                                <div class="Product_Detail__buttonRow mb-4">
                                    <button type="submit" class="Product_Detail-btn-1" disabled>
                                        <span>Out Of Stock</span>
                                        <span class="divider"></span>
                                        <i class="icon-meat-3"></i>
                                    </button>
                                </div>
                            @endif
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Section 2 End -->

    <!-- Section 3 -->
    <section class="P-D_sec3 container">
        <div class="P-D_sec3-maindiv">
            <div class="P-D_sec3-description">
                <h3>Description</h3>
            </div>
            <div class="P-D_sec3-paragraph">
                <p>
                    @php
                        print ($product->long_description);
                    @endphp
                </p>
            </div>
        </div>
    </section>
    <!-- Section 3 End -->

    <!-- Full-Screen Modal -->
    <div id="imageModal" class="modal">
        <span class="close" onclick="closeModal()">&times;</span>
        <img class="modal-content" id="modalImage">
    </div>

    <style>
        button[disabled],
        button:disabled {
            opacity: 1;
            cursor: not-allowed;
        }
    </style>
    <script>
        // Convert comma-separated gallery string to array
        @php
            $galleryImages = [];
            if ($product->gallery_media) {
                $galleryImages = array_map('trim', explode(',', $product->gallery_media));
            }
        @endphp

        const images = [
            "{{ asset($product->featured_image ? $product->featured_image : 'WebsiteAssets/assets/img/pricing-product-1-2.png') }}",
            @foreach($galleryImages as $image)
                "{{ asset($image) }}",
            @endforeach
                ];

        let selectedImageIndex = 0;
        const thumbnailsEl = document.getElementById("thumbnails");
        const mainImageEl = document.getElementById("mainImage");

        // Generate thumbnails from images array
        images.forEach((imgSrc, idx) => {
            const btn = document.createElement("button");
            btn.classList.add("Product_Detail__thumbnailBtn");
            if (idx === selectedImageIndex) {
                btn.classList.add("Product_Detail__thumbnailBtn--selected");
            }
            btn.addEventListener("click", () => {
                selectedImageIndex = idx;
                updateMainImage();
                updateThumbnails();
            });

            const thumbImg = document.createElement("img");
            thumbImg.src = imgSrc;
            thumbImg.alt = `${document.querySelector('.Product_Detail__title').textContent} ${idx + 1}`;
            thumbImg.classList.add("Product_Detail__thumbnailImg");

            btn.appendChild(thumbImg);
            thumbnailsEl.appendChild(btn);
        });

        function updateMainImage() {
            mainImageEl.src = images[selectedImageIndex];
        }

        function updateThumbnails() {
            const thumbBtns = thumbnailsEl.querySelectorAll(".Product_Detail__thumbnailBtn");
            thumbBtns.forEach((btn, idx) => {
                if (idx === selectedImageIndex) {
                    btn.classList.add("Product_Detail__thumbnailBtn--selected");
                } else {
                    btn.classList.remove("Product_Detail__thumbnailBtn--selected");
                }
            });
        }

        // Zoom functionality
        document.addEventListener("DOMContentLoaded", function () {
            const zoomContainer = document.querySelector(".zoom-container");
            const zoomImage = document.querySelector(".zoom-image");

            zoomContainer.addEventListener("mousemove", function (event) {
                const { left, top, width, height } = zoomContainer.getBoundingClientRect();
                const x = ((event.clientX - left) / width) * 100;
                const y = ((event.clientY - top) / height) * 100;

                zoomImage.style.transformOrigin = `${x}% ${y}%`;
                zoomImage.style.transform = "scale(2)";
            });

            zoomContainer.addEventListener("mouseleave", function () {
                zoomImage.style.transform = "scale(1)";
            });
        });

        // Full Screen functionality
        function openModal() {
            const modal = document.getElementById("imageModal");
            const modalImage = document.getElementById("modalImage");
            const mainImage = document.getElementById("mainImage");

            modal.style.display = "flex";
            modalImage.src = mainImage.src;
        }

        function closeModal() {
            document.getElementById("imageModal").style.display = "none";
        }

        // Attach the function to the search button
        document.querySelector(".Product_Detail__searchBtn").addEventListener("click", openModal);

        // Social share functionality
        function share(platform) {
            // Implement actual share logic or redirect
            console.log(`Sharing on ${platform}`);
        }
    </script>
@endsection