@extends('frontend.layouts.layouts')

@section('content')
    <div>
        <div class="relative z-0">
            <img src="{{ asset('img/shop/img-banner-header.png') }}" class="absolute object-cover w-full h-full "
                alt="Flowbite Logo">
            <div class="relative inset-0 z-50 flex items-center justify-center py-32">
                <style>
                    .marcellus-font {
                        font-family: 'Marcellus', serif;
                    }

                    .cursive-font {
                        font-family: 'Brush Script MT', 'Comic Sans MS', 'Segoe Script', 'Lucida Handwriting', cursive;
                    }
                </style>
                <div>
                    <h1
                        class="p-4 text-xl text-center text-white sm:text-3xl md:text-5xl lg:text-6xl xl:text-7xl marcellus-font">
                        Shop
                    </h1>
                </div>

            </div>
        </div>
    </div>
    <div class="container mx-auto " style="font-family: 'Poppins', sans-serif;" id="results">

        <div class="flex flex-col justify-between px-4 mt-10 mb-5 md:flex-row">
            <div>
                <p class="text-4xl">Filter</p>
            </div>
            <div class="flex flex-col items-center justify-between gap-20 lg:flex-row">
                <div class="flex items-center">
                    <p>Showing {{ $products->count() }} of {{ $totalProductsCount }} products</p>
                </div>
                <div class="flex flex-col justify-center md:flex-row">
                    <form action="{{ route('shop.filter') }}" method="GET"
                        class="flex flex-col justify-center p-2 space-x-2 bg-gray-200 border border-gray-300 rounded-lg md:flex-row">

                        <label for="product" class="sr-only">Search Products</label>
                        <span class="p-2 text-sm">Search Products</span>
                        <div class="flex justify-center ">
                            <input type="text" name="search" id="product" value="" placeholder="Search..."
                                class="p-2 text-blue-600 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300">
                            <button type="submit" class="flex items-center p-3 text-white bg-blue-500 rounded-xl">
                                <img src="{{ asset('img/shop/icon-search.png') }}" class="w-5 h-5" alt="Search Icon">
                            </button>
                        </div>

                    </form>
                </div>

                <form method="GET" action="{{ route('shop.filter') }}">
                    <div>
                        <label
                            class="flex flex-col justify-center p-2 space-x-2 text-sm bg-gray-200 border border-gray-300 md:flex-row">
                            <span class="p-2">Sort by:</span>
                            <select name="sort"
                                class="p-2 text-blue-600 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
                                id="sortDropdown">
                                <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Name: A to Z
                                </option>
                                <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>Name: Z to
                                    A</option>
                            </select>
                        </label>
                    </div>
                </form>

                <script>
                    // Automatically submit the form when the sort option is changed
                    document.getElementById('sortDropdown').addEventListener('change', function() {
                        this.form.submit();
                    });
                </script>

            </div>
        </div>
        <div class="grid grid-cols lg:grid-cols-4 ">
            <form id="filter-form" class="w-full " method="GET" action="{{ route('shop.filter') }}">
                <div class="">
                    <div class="mb-6">
                        <details class="px-4 w-80" open>
                            <summary class="flex justify-between mb-2 text-sm font-bold text-gray-700 cursor-pointer">
                                <span>CATEGORIES</span>
                                <span class="p-1 text-white bg-blue-600">&#9662;</span>
                            </summary>
                            <div class="w-full space-y-2">
                                <label class="flex justify-between p-2 text-sm bg-gray-200 border border-gray-300">
                                    <span>All Products</span>
                                    <input type="checkbox" name="category[]" value="all_products"
                                        class="text-blue-600 form-checkbox"
                                        {{ in_array('all_products', old('category', [])) ? 'checked' : '' }}>
                                </label>
                                @foreach ($category as $category)
                                    <label
                                        class="flex justify-between p-2 space-x-2 text-sm bg-gray-100 border border-gray-300">
                                        <span>{{ $category }}</span>
                                        <input type="checkbox" name="category[]" value="{{ $category }}"
                                            class="text-blue-600 form-checkbox"
                                            {{ in_array($category, $selectedCategories) ? 'checked' : '' }}>
                                    </label>
                                @endforeach

                            </div>

                        </details>
                    </div>
                    <div class="mb-6">
                        <details class="px-4 w-80">
                            <summary class="flex justify-between mb-2 text-sm font-bold text-gray-700 cursor-pointer">
                                <span>BRANDS</span>
                                <span class="p-1 text-white bg-blue-600">&#9662;</span>
                                <!-- Downward arrow icon -->
                            </summary>
                            <div class="space-y-2">
                                @foreach ($brands as $brand)
                                    <label
                                        class="flex justify-between p-2 space-x-2 text-sm bg-gray-100 border border-gray-300">
                                        <span>{{ $brand }}</span>
                                        <input type="checkbox" name="brands[]" value="{{ $brand }}"
                                            class="text-blue-600 form-checkbox"
                                            {{ in_array($brand, $selectedBrands) ? 'checked' : '' }}>
                                    </label>
                                @endforeach
                            </div>
                        </details>
                    </div>
                    <div class="mb-6">
                        <details class="px-4 w-80">
                            <summary class="flex justify-between mb-2 text-sm font-bold text-gray-700 cursor-pointer">
                                <span>PRICE</span>
                                <span class="p-1 text-white bg-blue-600">&#9662;</span>
                                <!-- Add a downward arrow icon or any icon you prefer -->
                            </summary>
                            <div class="space-y-2">
                                @foreach ($priceRanges as $range => $label)
                                    <label
                                        class="flex justify-between p-2 space-x-2 text-sm bg-gray-100 border border-gray-300">
                                        <span>{{ $label }}</span>
                                        <input type="checkbox" name="price[]" value="{{ $range }}"
                                            class="text-blue-600 form-checkbox"
                                            {{ in_array($range, $selectedPrice) ? 'checked' : '' }}>
                                    </label>
                                @endforeach

                            </div>
                        </details>
                    </div>
                    <div class="flex items-center justify-center "><a href="{{ url('shop') }}"
                            class="px-20 text-center text-white bg-red-600 rounded-full hover:text-gray-300 w">clear</a>
                    </div>
                </div>
            </form>
            <div class="grid grid-cols-1 col-span-3 px-4 py-4 md:grid-cols-2 lg:grid-cols-3 gap-7">
                @foreach ($products as $product)
                    <div class="relative z-10 p-3 bg-gray-100 cursor-pointer h-96"
                        onclick="document.getElementById('addItemModal_{{ $product->id }}').style.display='flex'">
                        <!-- Hidden overlay and buttons -->
                        <div
                            class="absolute inset-0 z-10 flex flex-col justify-between p-4 transition-opacity duration-300 bg-gray-700 bg-opacity-50 rounded-lg opacity-0 hover:opacity-90">
                            <div class="flex items-end justify-end">
                                <!-- Button inside the overlay -->
                                <button type="button" class="w-10 h-10 m-2 text-white bg-blue-700 rounded-full">
                                    <img src="{{ asset('img/shop/icon-eyeglasses.png') }}" class="w-auto h-auto px-2"
                                        alt="Product Image">
                                </button>
                            </div>
                            <div class="z-50 flex justify-center">
                                <form action="{{ route('cart.store') }}" method="POST">
                                    @csrf
                                    @php
                                        $firstChannelProduct = $product->channelProducts->first();
                                    @endphp
                                    <input type="hidden" name="product_id"
                                        value="{{ $firstChannelProduct ? $firstChannelProduct->id : '' }}">
                                    <input type="hidden" name="price"
                                        value="{{ $firstChannelProduct ? $firstChannelProduct->price1 : '' }}">
                                    <input type="hidden" name="name" value="{{ $product->name }}">
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit"
                                        class="flex items-center px-10 py-2 space-x-2 text-white bg-blue-700 rounded-full">
                                        <span class="text-sm">ADD TO CART</span>
                                        <img src="{{ asset('img/icon-add-to-cart.png') }}" alt="Add to Cart"
                                            class="w-5 h-5">
                                    </button>
                                </form>
                            </div>

                        </div>

                        <!-- Content inside the clickable div -->
                        <button type="button"
                            class="flex flex-col items-center justify-center w-full h-full p-4 bg-gray-100 rounded-lg">
                            @if ($product->channelProducts->isNotEmpty())
                                @php
                                    $first = $product->channelProducts->first();
                                    $first2 = $first->quantity;
                                @endphp
                                <p class="mb-2">Remaining Quantity:
                                    {{ $first2 ? number_format((float) $first2, 2) : 'N/A' }}
                                </p>
                            @endif



                            <div class="flex items-center justify-center flex-grow mb-2">
                                @if ($product->channelProducts->isNotEmpty())
                                    @php
                                        $firstChannelProduct = $product->channelProducts->first();
                                    @endphp
                                    @if ($firstChannelProduct)
                                        <img src="{{ asset($firstChannelProduct->picture_channel) }}"
                                            alt="Channel Product Image" class="object-contain max-w-full max-h-40">
                                    @else
                                        <p>No image available.</p>
                                    @endif
                                @else
                                    <p>No channel products available for this product.</p>
                                @endif
                            </div>
                            <p class="mb-2 text-center">{{ $product->name }}</p>
                            @if ($product->channelProducts->isNotEmpty())
                                @php
                                    $first = $product->channelProducts->first();
                                    $first1 = $first->price1;
                                @endphp
                                <p class="text-center text-red-700">
                                    ₱ {{ $first1 ? number_format((float) $first1, 2) : 'N/A' }}
                                </p>
                            @endif
                        </button>
                    </div>




                    <!-- Modal Structure -->
                    <div id="addItemModal_{{ $product->id }}"
                        class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50 modal">

                        <div class="w-3/4 max-h-full p-4 overflow-auto bg-white rounded-lg shadow-md md:p-10">
                            <div class="flex flex-col items-center justify-between md:flex-row">



                                <div class="flex flex-col justify-center mb-5">
                                    @foreach ($product->channelProducts as $channelProduct)
                                        @if ($channelProduct->picture_channel)
                                            <div class="m-2 border-2 h-36 w-36">
                                                <img src="{{ asset($channelProduct->picture_channel) }}"
                                                    class="object-contain cursor-pointer w-36 h-36 thumbnail"
                                                    data-image="{{ asset($channelProduct->picture_channel) }}"
                                                    alt="Product Image">
                                            </div>
                                        @endif
                                    @endforeach
                                </div>

                                <div
                                    class="relative flex items-center justify-center w-full h-full mx-4 bg-gray-100 image-gallery">
                                    <div class="image-container">
                                        @if ($product->channelProducts->isNotEmpty())
                                            @php
                                                $firstImage = $product->channelProducts->first();
                                                $imageUrl = asset($firstImage->picture_channel);
                                            @endphp
                                          <img id="mainImage-{{ $product->id }}" 
     src="{{ $imageUrl }}" 
     alt="{{ $product->name }}" 
     class="w-full h-auto md:h-auto max-h-[50rem] p-5 zoomable-image">


                                            <div class="magnifier"></div>
                                        @endif
                                    </div>
                                </div>


                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        const modals = document.querySelectorAll('.modal');

                                        modals.forEach(modal => {
                                            const thumbnails = modal.querySelectorAll('.thumbnail');
                                            const mainImage = modal.querySelector('[id^="mainImage-"]');

                                            thumbnails.forEach(thumbnail => {
                                                thumbnail.addEventListener('click', function() {
                                                    const imageUrl = this.dataset.image;
                                                    mainImage.src = imageUrl;
                                                });
                                            });
                                        });
                                    });
                                </script>


                                <style>
                                    .image-gallery {
                                        display: flex;
                                        flex-wrap: wrap;
                                    }

                                    .image-container {
                                        position: relative;
                                        margin: 10px;
                                        overflow: hidden;
                                        /* Ensure magnifier does not overflow container */
                                    }

                                    .image-container img {
                                        display: block;
                                        width: 100%;
                                        height: auto;
                                        /* Maintain aspect ratio */
                                    }

                                    .magnifier {
                                        position: absolute;
                                        border: 2px solid #333;
                                        border-radius: 50%;
                                        cursor: none;
                                        width: 250px;
                                        /* Size of the magnifying glass */
                                        height: 250px;
                                        background-repeat: no-repeat;
                                        background-size: cover;
                                        /* Ensure zoomed image covers the magnifier */
                                        display: none;
                                        pointer-events: none;
                                        transform: translate(-50%, -50%);
                                        transition: background-size 0.3s ease, background-position 0.3s ease;
                                        /* Smooth transition */
                                        z-index: 1000;
                                        /* Ensure magnifier appears above other elements */
                                    }

                                    .image-container.active .magnifier {
                                        display: block;
                                    }
                                </style>
                                <div class="p-4">
                                    <p class="text-3xl font-bold">{{ $product->name }}</p>
                                    @if ($product->channelProducts->isNotEmpty())
                                        @php
                                            $first = $product->channelProducts->first();
                                            $first1 = $first->price1;
                                            $first2 = $first->quantity;
                                            $firstId = $first->id;
                                        @endphp
                                        <p class="mt-10 text-3xl text-red-700" id="product-price-{{ $product->id }}">
                                            ₱ {{ $first1 ? number_format((float) $first1, 2) : 'N/A' }}
                                        </p>
                                        <p class="p-3">Remaining Quantity: <span
                                                id="remaining_quantity_{{ $product->id }}">{{ $first2 ? number_format((float) $first2, 2) : 'N/A' }}</span>
                                        </p>
                                    @endif



                                    <p>{!! $product->description !!}</p>
                                    <div class="my-5">
                                        <ul class="space-y-2">

                                            @foreach ($product->channelProducts as $channelProduct)
                                                @if (!empty($channelProduct->particulars))
                                                    <li class="flex items-center">
                                                        <input type="checkbox" id="item2_{{ $channelProduct->id }}"
                                                            name="items[]" value="{{ $channelProduct->id }}"
                                                            class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                                                            checked disabled>
                                                        <label for="item2_{{ $channelProduct->id }}"
                                                            class="ml-2 text-gray-700">{{ $channelProduct->particulars }}</label>
                                                    </li>
                                                @endif
                                            @endforeach



                                        </ul>




                                    </div>
                                    <hr class="my-4 border-t border-gray-300">
                                    <p class="py-1 font-bold">Variant</p>
                                    <div class="grid grid-cols-2 gap-4 pb-2">
                                        @foreach ($product->channelProducts as $channelProduct)
                                            @if ($channelProduct->variant && $channelProduct->price1 && $channelProduct->quantity && $channelProduct->id)
                                                <label class="flex items-center mb-2 text-xs">
                                                    <input type="radio" name="variant_{{ $product->id }}"
                                                        value="{{ $channelProduct->price1 }}"
                                                        data-price-id="product-price-{{ $product->id }}"
                                                        data-quantity-id="remaining_quantity_{{ $product->id }}"
                                                        data-id-id="channelid_{{ $product->id }}"
                                                        data-quantity="{{ $channelProduct->quantity }}"
                                                        data-id="{{ $channelProduct->id }}" onchange="updatePrice(this)"
                                                        class="mr-2">
                                                    <span>{{ $channelProduct->variant }}</span>
                                                </label>
                                            @endif
                                        @endforeach
                                    </div>

                                    <script>
                                        function updatePrice(element) {
                                            // Get the selected price and quantity from the radio button
                                            const selectedPrice = element.value;
                                            const selectedQuantity = element.getAttribute('data-quantity');
                                            const selectedId = element.getAttribute('data-id');
                                            console.log('Selected price:', selectedPrice); // Debugging log
                                            console.log('Selected quantity:', selectedQuantity); // Debugging log

                                            // Get the associated price and quantity element IDs from the radio button's data attributes
                                            const priceElementId = element.getAttribute('data-price-id');
                                            const quantityElementId = element.getAttribute('data-quantity-id');
                                            const idElementId = element.getAttribute('data-id-id');
                                            console.log('Price element ID:', priceElementId); // Debugging log
                                            console.log('Quantity element ID:', quantityElementId); // Debugging log

                                            // Update the price and quantity elements with the selected values
                                            if (priceElementId) {
                                                const priceElement = document.getElementById(priceElementId);
                                                if (priceElement) {
                                                    priceElement.textContent = '₱ ' + parseFloat(selectedPrice).toFixed(2);
                                                }
                                            }

                                            if (quantityElementId) {
                                                const quantityElement = document.getElementById(quantityElementId);
                                                if (quantityElement) {
                                                    quantityElement.textContent = selectedQuantity ? number_format(parseFloat(selectedQuantity), 2) : 'N/A';
                                                }
                                            }

                                            if (idElementId) {
                                                const idElement = document.getElementById(idElementId);
                                                if (idElement) {
                                                    idElement.value = selectedId; // Set the hidden input's value
                                                }
                                            }
                                        }

                                        function number_format(number, decimals) {
                                            const fixed = number.toFixed(decimals);
                                            return fixed.replace(/\d(?=(?:\d{3})+\.\d{2}$)/g, '$&,');
                                        }
                                    </script>

                                    <div class="flex flex-col items-center md:flex-row">
                                        <p class="mr-4 font-bold">Quantity</p>
                                        <div class="flex items-center w-40 space-x-4 border-2 rounded-sm h-14">
                                            <button type="button" onclick="decrementQuantity('{{ $product->id }}')"
                                                class="flex items-center justify-center w-8 h-8 text-gray-700">-</button>
                                            <input type="text" id="quantity_{{ $product->id }}" name="quantity"
                                                value="1" readonly class="w-12 h-8 text-center rounded-lg">
                                            <button type="button" onclick="incrementQuantity('{{ $product->id }}')"
                                                class="flex items-center justify-center w-8 h-8 text-gray-700">+</button>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-center justify-center my-10 md:flex-row">
                                        <form action="{{ route('cart.store') }}" method="POST">
                                            @csrf

                                            <!-- Product ID -->
                                            <input type="hidden" id="channelid_{{ $product->id }}" name="product_id"
                                                value="{{ $firstId }}">

                                            <!-- Quantity -->
                                            <input type="hidden" name="quantity"
                                                id="modal_quantity_{{ $product->id }}" value="1">

                                            <div class="flex flex-col items-center justify-center my-10 md:flex-row">
                                                <!-- Add to Cart Button -->
                                                <button type="submit" name="action" value="add_to_cart"
                                                    class="flex items-center justify-center w-40 h-10 mr-5 text-white bg-blue-600 rounded-full">
                                                    ADD TO CART
                                                </button>

                                                <!-- Buy Now Button -->
                                                <button type="submit" name="action" value="buy_now"
                                                    class="flex items-center justify-center w-40 h-10 text-blue-700 bg-gray-100 rounded-full">
                                                    BUY NOW
                                                </button>
                                            </div>
                                        </form>
                                    </div>


                                    <hr class="my-4 border-t border-gray-300">
                                    <div>
                                        <p class="mr-4">Category: <span class="text-gray-200">Home Care</span></p>
                                    </div>
                                    <div class="flex items-center justify-end m-5">
                                        <button
                                            onclick="document.getElementById('addItemModal_{{ $product->id }}').style.display='none'"
                                            class="w-20 h-10 text-white bg-red-500">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" id="modal_quantity_{{ $product->id }}" name="quantity" value="1">
                @endforeach




                <script>
                    document.querySelectorAll('.image-container').forEach(container => {
                        const magnifier = container.querySelector('.magnifier');
                        const img = container.querySelector('img');

                        container.addEventListener('mousemove', (e) => {
                            const {
                                top,
                                left,
                                width,
                                height
                            } = container.getBoundingClientRect();
                            const x = e.pageX - left - window.scrollX;
                            const y = e.pageY - top - window.scrollY;

                            // Center the magnifier
                            magnifier.style.left = `${x}px`;
                            magnifier.style.top = `${y}px`;

                            // Update magnifier background and position
                            magnifier.style.backgroundImage = `url(${img.src})`;
                            magnifier.style.backgroundSize = `${width * 1.5}px ${height * 1.5}px`; // Adjust zoom level
                            magnifier.style.backgroundPosition =
                                `-${x * 1.5 - magnifier.offsetWidth / 2}px -${y * 1.5 - magnifier.offsetHeight / 2}px`; // Center the zoomed image
                        });

                        container.addEventListener('mouseenter', () => {
                            container.classList.add('active');
                        });

                        container.addEventListener('mouseleave', () => {
                            container.classList.remove('active');
                        });
                    });
                </script>




                <script>
                    function incrementQuantity(productId) {
                        var quantityInput = document.getElementById('quantity_' + productId);
                        var remainingQuantity = parseInt(document.getElementById('remaining_quantity_' + productId).textContent);
                        var newValue = parseInt(quantityInput.value) + 1;

                        // Ensure the new value does not exceed the remaining quantity
                        if (newValue <= remainingQuantity) {
                            quantityInput.value = newValue;
                            document.getElementById('modal_quantity_' + productId).value = newValue;
                        }
                    }

                    function decrementQuantity(productId) {
                        var quantityInput = document.getElementById('quantity_' + productId);
                        var newValue = Math.max(1, parseInt(quantityInput.value) - 1);

                        // Update the quantity input and hidden input
                        quantityInput.value = newValue;
                        document.getElementById('modal_quantity_' + productId).value = newValue;
                    }
                </script>

            </div>

        </div>

        <div class="flex justify-center my-10 md:ml-80">
            <nav aria-label="Pagination">
                <ul class="inline-flex items-center space-x-1">
                    <!-- Previous Page Button -->
                    @if ($products->onFirstPage())
                        <li>
                            <span class="px-4 py-4 text-gray-400 bg-white rounded-full shadow-xl">
                                &lt;-
                            </span>
                        </li>
                    @else
                        <li>
                            <a href="{{ $products->previousPageUrl() }}"
                                class="px-4 py-4 text-blue-700 bg-white rounded-full shadow-xl hover:bg-gray-300">
                                &lt;-
                            </a>
                        </li>
                    @endif

                    <!-- Page Number Buttons -->
                    @foreach ($products->getUrlRange(1, $products->lastPage()) as $page => $url)
                        <li>
                            <a href="{{ $url }}"
                                class="px-4 py-2 rounded-full {{ $products->currentPage() == $page ? 'text-white bg-blue-600' : 'hover:bg-blue-100' }}">
                                {{ $page }}
                            </a>
                        </li>
                    @endforeach

                    <!-- Next Page Button -->
                    @if ($products->hasMorePages())
                        <li>
                            <a href="{{ $products->nextPageUrl() }}"
                                class="px-4 py-4 text-blue-700 bg-white rounded-full shadow-xl hover:bg-gray-300">
                                -&gt;
                            </a>
                        </li>
                    @else
                        <li>
                            <span class="px-4 py-4 text-gray-400 bg-white rounded-full shadow-xl">
                                -&gt;
                            </span>
                        </li>
                    @endif
                </ul>
            </nav>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('filter-form');

            // Scroll to results section if the page URL contains a query string
            if (window.location.search) {
                setTimeout(function() {
                    const resultsSection = document.getElementById('results');
                    if (resultsSection) {
                        window.scrollTo({
                            top: resultsSection.offsetTop,
                            behavior: 'smooth'
                        });
                    }
                }, 100); // Delay to ensure page content is fully loaded
            }

            // Automatically submit the form on checkbox change
            form.addEventListener('change', function() {
                form.submit(); // Submit the form on checkbox change
            });
        });
    </script>
@endsection