@extends('user.layout')
@section('content')
    <div class="container-fluid container-lg product-details my-5 pt-3">
        <div class="row rounded-3 px-2 py-3 mt-4 mt-md-5 g-4 bg-light box-shadow">
            <h1 class="mt-1 mb-0 secondary" style="font-size: 1.8rem;">{{ $product->name }}</h1>
            
            <div class="col-sm-12 col-md-6 col-lg-7 h-100">
                <img src="{{ optimizedImageUrl('product', $product->image, 960) }}" srcset="{{ optimizedImageSrcset('product', $product->image, 960) }}" sizes="(min-width: 992px) 700px, 100vw" fetchpriority="high" decoding="async" class="rounded image-fluid d-block mx-auto w-auto" id="main-image" data-zoom-src="{{ asset('storage/product/' . $product->image) }}" alt="{{ $product->name }}" title="{{ $product->name }}" style="max-height: 350px;">
                <div id="zoomWindow" class="zoom-window"></div>
            </div>
            
            <div class="col-sm-12 col-md-6 col-lg-5 h-100">
                <div class="input-group contact mb-3">
                    <input type="text" id="searchInput" class="form-control rounded-5" placeholder="Search products...">
                </div>

                <div class="list-group list-group-flush gap-1 overflow-y-scroll" id="productList" style="max-height: 19rem;">
                    @forelse($products ?? [] as $op_key => $other_product)
                        <a href="{{ route('product-details', $other_product->slug) }}" class="list-group-item list-group-item-action d-flex align-items-center bg-transparent">
                            <img class="img-fluid" src="{{ optimizedImageUrl('product', $other_product->image, 480) }}" srcset="{{ optimizedImageSrcset('product', $other_product->image, 480) }}" sizes="60px" loading="lazy" decoding="async" alt="{{ $other_product->name }}" title="{{ $other_product->name }}" style="max-height: 30px; width: auto;" />
                            <h2 class="text-black ms-2 text-truncate" style="font-size: 1rem;">{{ $other_product->name }}</h2>
                        </a>
                    @empty
                        <div class="list-group-item text-center">No products found.</div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="mt-4 mb-5">
            <ul class="nav nav-pills nav-justified mb-0" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active border-0 rounded-0 text-white" id="pills-description-tab" data-bs-toggle="pill" data-bs-target="#pills-description" type="button" role="tab" aria-controls="pills-description" aria-selected="true">Description</button>
                </li>
                
                <li class="nav-item" role="presentation">
                    <button class="nav-link border-0 rounded-0 text-white" id="pills-specification-tab" data-bs-toggle="pill" data-bs-target="#pills-specification" type="button" role="tab" aria-controls="pills-specification" aria-selected="false">Specification</button>
                </li>
                
                <li class="nav-item" role="presentation">
                    <button class="nav-link border-0 rounded-0 text-white" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-features" type="button" role="tab" aria-controls="pills-features" aria-selected="false">Features</button>
                </li>
            </ul>

            <div class="tab-content bg-light rounded-bottom-3 p-3" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-description" role="tabpanel" aria-labelledby="pills-description-tab" tabindex="0">{!! $product->description !!}</div>
                <div class="tab-pane fade" id="pills-specification" role="tabpanel" aria-labelledby="pills-specification-tab" tabindex="0">{!! $product->specification !!}</div>
                <div class="tab-pane fade" id="pills-features" role="tabpanel" aria-labelledby="pills-features-tab" tabindex="0">{!! $product->feature !!}</div>
                <div class="tab-pane fade" id="pills-catalogue" role="tabpanel" aria-labelledby="pills-catalogue-tab" tabindex="0">
            </div>
        </div>

        <div class="home-product mb-5">
            <h3 class="mt-3 mb-4 secondary">More Products</h3>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                @foreach($products ?? [] as $sp_key => $product)
                    <div class="col">
                        <div class="card border-0 h-100 overflow-hidden scroll-reveal">
                            <div class="overflow-hidden">
                                <img class="card-img-top img-fluid w-100" src="{{ optimizedImageUrl('product', $product->image, 960) }}" srcset="{{ optimizedImageSrcset('product', $product->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $product->title }}" title="{{ $product->title }}" style="height: 230px;" />
                            </div>
    
                            <div class="card-body py-2 d-flex flex-column justify-content-between">
                                <div>
                                    <h6 class="card-title text-justify secondary mt-2">{{ $product->name }}</h6>
                                    <div class="text-justify">{!! excerpt($product->description, 300) !!}</div>
                                </div>
                                <a class="btn button-effect stretched-link secondary" href="{{ route('product-details', $product->slug) }}" role="button"><span>View Product</span></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        header .navbar, header .offcanvas { background-color: white; }
        header .nav-link { color: rgb(58, 57, 57); }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            $('#searchInput').on('input', function () {
                let query = $(this).val();

                $.ajax({
                    url: '{{ route('product-search') }}',
                    type: 'GET',
                    data: { query: query },
                    dataType: 'json',
                    success: function (data) {
                        let productList = $('#productList');
                        productList.empty();

                        if (data.length > 0) {
                            data.forEach(product => {
                                let productItem = `
                                    <a href="${product.details_url}" class="list-group-item list-group-item-action d-flex align-items-center py-1 px-0" style="background-color: transparent;">
                                        <img class="img-fluid" src="${product.image_url}" alt="${product.name}" title="${product.name}" style="height: 50px; width: auto;" />
                                        <h6 class="text-black ms-2">${product.name}</h6>
                                    </a>
                                `;
                                productList.append(productItem);
                            });
                        } else {
                            productList.html('<div class="list-group-item text-center">No products found.</div>');
                        }
                    },
                    error: function () {
                        $('#productList').html('<div class="list-group-item text-center text-danger">An error occurred. Please try again later.</div>');
                    }
                });
            });
        });
    </script>

    <script>
        const zoomWindow = document.getElementById('zoomWindow');
        const mainImage = document.getElementById('main-image');
    
        mainImage.addEventListener('mousemove', function (e) {
            const zoomLevel = 2;
            const rect = mainImage.getBoundingClientRect();
            const xPos = e.clientX - rect.left;
            const yPos = e.clientY - rect.top;
    
            zoomWindow.style.display = 'block';
            zoomWindow.style.backgroundImage = `url(${mainImage.dataset.zoomSrc || mainImage.src})`;
    
            const bgX = -(xPos * zoomLevel - zoomWindow.offsetWidth / 2);
            const bgY = -(yPos * zoomLevel - zoomWindow.offsetHeight / 2);
            zoomWindow.style.backgroundPosition = `${bgX}px ${bgY}px`;
            zoomWindow.style.backgroundSize = `${mainImage.width * zoomLevel}px ${mainImage.height * zoomLevel}px`;
    
            zoomWindow.style.left = `${e.clientX + 20}px`;
            zoomWindow.style.top = `${e.clientY + 20}px`;
        });
    
        mainImage.addEventListener('mouseleave', function () {
            zoomWindow.style.display = 'none';
        });
    </script>
@endpush