@extends('layouts.app')

@section('content')
    <!-- Hero Banner -->
    @php
        $banners = \App\Models\Banner::where('active', true)->orderBy('order')->get();
    @endphp

    @if($banners->count() > 0)
        <!-- Simple Carousel for Banners -->
        <div class="relative bg-gray-800 rounded-2xl mb-4 overflow-hidden shadow-xl group h-48">
             @foreach($banners as $index => $banner)
                <div class="absolute inset-0 transition-opacity duration-700 ease-in-out {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}" data-carousel-item>
                    <img src="{{ asset($banner->image) }}" 
                         alt="Banner" 
                         class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
                </div>
             @endforeach
        </div>
        
        <!-- Simple JS for Carousel (if multiple banners) -->
        @if($banners->count() > 1)
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const items = document.querySelectorAll('[data-carousel-item]');
                let current = 0;
                setInterval(() => {
                    items[current].classList.remove('opacity-100');
                    items[current].classList.add('opacity-0');
                    current = (current + 1) % items.length;
                    items[current].classList.remove('opacity-0');
                    items[current].classList.add('opacity-100');
                }, 5000);
            });
        </script>
        @endif
    @else
        <!-- Fallback Static Banner -->
        <div class="relative bg-gray-800 rounded-2xl p-8 mb-4 text-white overflow-hidden shadow-xl text-center h-48 flex flex-col justify-center items-center group">
            <div class="absolute inset-0">
                <img src="https://images.unsplash.com/photo-1610375461246-342a34c30d71?q=80&w=2070&auto=format&fit=crop" 
                     alt="Gold Collection" 
                     class="w-full h-full object-cover opacity-40 group-hover:scale-105 transition duration-700">
                <div class="absolute inset-0 bg-black/30"></div>
            </div>
            <div class="relative z-10">
                <h2 class="text-3xl font-bold mb-2 tracking-wide">{{ __('Koleksi Emas Terbaru') }}</h2>
                <p class="text-gray-100 text-sm font-light">{{ __('Temukan emas impian Anda dengan harga terbaik.') }}</p>
            </div>
        </div>
    @endif

    <!-- Categories Horizontal Scroll -->
    <div class="mb-4">
        <div class="mb-2 text-center">
            <h3 class="w-full px-4 py-2 rounded-xl bg-black/40 backdrop-blur-md border border-white/20 text-white text-sm md:text-base font-bold shadow-lg">
                {{ __('Kategori Game') }}
            </h3>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            @foreach($categories as $cat)
                <a href="{{ route('home', ['category' => $cat->slug]) }}" 
                   id="category-link-{{ $cat->id }}"
                   onclick="loadCategory(event, '{{ route('home', ['category' => $cat->slug]) }}', {{ $cat->id }})"
                   class="group relative w-full h-32 rounded-2xl overflow-hidden shadow-lg transition-transform hover:scale-105">
                    <!-- Image Background -->
                    <div class="absolute inset-0 bg-gray-200">
                        @if($cat->image)
                            <img src="{{ asset($cat->image) }}" alt="{{ $cat->name }}" class="category-image w-full h-full object-cover transition-all duration-500 {{ (isset($selectedCategory) && $selectedCategory->id == $cat->id) ? 'grayscale-0' : 'grayscale group-hover:grayscale-0' }}">
                        @else
                            <div class="w-full h-full bg-gray-300 flex items-center justify-center">
                                <i class="fas {{ $cat->icon ?? 'fa-gamepad' }} text-4xl text-gray-500"></i>
                            </div>
                        @endif
                    </div>
                    
                    <!-- Bottom Yellow Bar with Curve Effect -->
                    <div class="absolute bottom-0 left-0 right-0 h-12 bg-yellow-400 flex items-center justify-between px-4 z-10">
                         <!-- Curved Top Edge Simulation (Optional, simplified for now) -->
                         <div class="absolute -top-3 left-0 right-0 h-4 bg-yellow-400 rounded-t-[50%] transform scale-x-110 hidden"></div> 
                         
                        <span class="font-bold text-sm truncate z-20" style="color: var(--primary-text-color);">{{ $cat->name }}</span>
                        <span class="text-xs font-medium z-20 opacity-80" style="color: var(--primary-text-color);">Official</span>
                    </div>

                    <!-- Active State Border -->
                    @if(isset($selectedCategory) && $selectedCategory->id == $cat->id)
                        <div class="absolute inset-0 border-4 border-yellow-500 rounded-2xl pointer-events-none z-30 category-active-border"></div>
                    @endif
                </a>
            @endforeach
        </div>
    </div>

    <!-- Selected Category Content -->
    <div id="category-content-wrapper">
        @include('auctions.partials.category-content')
    </div>

    <style>
        .product-radio:checked + .product-card {
            border-color: #facc15; /* yellow-500 */
            background-color: rgba(250, 204, 21, 0.2); /* yellow-500 with opacity */
            transform: scale(1.02);
        }
        .product-radio:checked ~ .selection-check {
            opacity: 1;
        }
    </style>

    <script>
        function selectProduct(id) {
            document.getElementById('selected_product_id').value = id;
        }

        function submitOrder(method) {
            const form = document.getElementById('orderForm');
            if (!form) return;
            
            const productId = document.getElementById('selected_product_id').value;
            
            // Reset previous errors
            const errorMessages = form.querySelectorAll('.error-message');
            errorMessages.forEach(el => el.remove());
            const invalidInputs = form.querySelectorAll('.border-red-500');
            invalidInputs.forEach(el => el.classList.remove('border-red-500'));

            if (!productId) {
                alert('Silakan pilih produk terlebih dahulu.');
                return;
            }

            if (!form.checkValidity()) {
                // Custom Validation UI
                const invalidElements = form.querySelectorAll(':invalid');
                
                invalidElements.forEach(input => {
                    // Add red border
                    input.classList.add('border-red-500');
                    
                    // Create error message
                    const msg = document.createElement('p');
                    msg.className = 'text-red-500 text-[10px] md:text-xs mt-1 error-message font-bold italic';
                    msg.innerText = input.validationMessage || 'Harap isi bidang ini.';
                    
                    // Insert after input
                    input.parentNode.insertBefore(msg, input.nextSibling);
                    
                    // Add shake animation class
                    input.classList.add('animate-pulse');
                    setTimeout(() => input.classList.remove('animate-pulse'), 500);
                });

                // Focus first invalid input
                if (invalidElements.length > 0) {
                    invalidElements[0].focus();
                    invalidElements[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                
                return;
            }

            // Ensure payment_method input exists
            let methodInput = form.querySelector('input[name="payment_method"]');
            if (!methodInput) {
                methodInput = document.createElement('input');
                methodInput.type = 'hidden';
                methodInput.name = 'payment_method';
                form.appendChild(methodInput);
            }

            if (method === 'website') {
                methodInput.value = 'website';
                form.submit();
            } else {
                methodInput.value = 'whatsapp';
                form.submit();
            }
        }

        function initInputListeners() {
            const form = document.getElementById('orderForm');
            if(form) {
                const inputs = form.querySelectorAll('input');
                inputs.forEach(input => {
                    input.addEventListener('input', function() {
                        this.classList.remove('border-red-500');
                        const errorMsg = this.nextElementSibling;
                        if (errorMsg && errorMsg.classList.contains('error-message')) {
                            errorMsg.remove();
                        }
                    });
                });
            }
        }

        function loadCategory(event, url, categoryId) {
            if (event) event.preventDefault();
            
            // Visual Updates for Active State
            document.querySelectorAll('.category-active-border').forEach(el => el.remove());
            document.querySelectorAll('.category-image').forEach(img => {
                // Check if it has grayscale class logic
                if (img.classList.contains('grayscale-0')) {
                    img.classList.remove('grayscale-0');
                    img.classList.add('grayscale');
                    img.classList.add('group-hover:grayscale-0');
                }
            });

            const clickedLink = document.getElementById('category-link-' + categoryId);
            if(clickedLink) {
                // Add Border
                const borderDiv = document.createElement('div');
                borderDiv.className = 'absolute inset-0 border-4 border-yellow-500 rounded-2xl pointer-events-none z-30 category-active-border';
                clickedLink.appendChild(borderDiv);

                // Update Image
                const img = clickedLink.querySelector('.category-image');
                if(img) {
                    img.classList.remove('grayscale');
                    img.classList.remove('group-hover:grayscale-0');
                    img.classList.add('grayscale-0');
                }
            }

            // AJAX Fetch
            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                document.getElementById('category-content-wrapper').innerHTML = html;
                
                // Re-init listeners
                initInputListeners();
                
                // Scroll Smoothly to Content
                const wrapper = document.getElementById('category-content-wrapper');
                if (wrapper) {
                     wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
                
                // Update URL (Optional, but good for UX)
                // window.history.pushState({path: url}, '', url);
            })
            .catch(error => console.error('Error loading category:', error));
        }

        // Init on first load
        document.addEventListener('DOMContentLoaded', function() {
            initInputListeners();
            
            // Check if URL has category params to scroll automatically (optional logic)
            // But since we render server-side first, we might want to scroll if it's not the default
            // For now, keep it simple.
            
            // Old auto-scroll logic removed to prevent jump on reload, 
            // unless we want to keep it for direct link access.
            const form = document.getElementById('orderForm');
            if(form && window.location.search.includes('category=')) {
                 // Only scroll if specific category requested
                 setTimeout(() => {
                     form.scrollIntoView({ behavior: 'smooth', block: 'start' });
                 }, 500);
            }
        });

        function loadPagination(url) {
            if (!url) return;
            
            // Visual feedback (optional)
            const wrapper = document.getElementById('category-content-wrapper');
            wrapper.style.opacity = '0.5';

            fetch(url, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.text())
            .then(html => {
                wrapper.innerHTML = html;
                wrapper.style.opacity = '1';
                
                // Re-init listeners
                initInputListeners();
                
                // Scroll to reviews section
                const reviewsSection = document.getElementById('reviews-section');
                if (reviewsSection) {
                     reviewsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            })
            .catch(error => {
                console.error('Error loading page:', error);
                wrapper.style.opacity = '1';
            });
        }
    </script>

    <!-- Script to Auto-Play Video when in Viewport -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const videos = document.querySelectorAll('video.lazy-video');
            
            if ('IntersectionObserver' in window) {
                const videoObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            // Video is in view, try to play
                            const video = entry.target;
                            const playPromise = video.play();
                            
                            if (playPromise !== undefined) {
                                playPromise.catch(error => {
                                    // Auto-play was prevented
                                    console.log('Auto-play prevented:', error);
                                });
                            }
                        } else {
                            // Video is out of view, pause it
                            const video = entry.target;
                            video.pause();
                        }
                    });
                }, {
                    root: null,
                    rootMargin: '0px',
                    threshold: 0.5 // Play when 50% of the video is visible
                });

                videos.forEach(video => {
                    videoObserver.observe(video);
                });
            } else {
                // Fallback for older browsers: just play all or none
                // Or maybe simple scroll event listener
            }
        });
    </script>

    <!-- Member Only Modal -->
    <div id="memberModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- Background overlay -->
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeMemberModal()"></div>

            <!-- Modal panel -->
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                Pemberitahuan
                            </h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">
                                    Maaf, Anda belum bisa mengirimkan testimoni karena belum terdaftar menjadi member <strong>{{ \App\Models\Setting::get('store_name', 'Sultan Lelong Emas') }}</strong>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" onclick="closeMemberModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Mengerti
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Modal -->
    <div id="videoModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-black bg-opacity-90 transition-opacity" aria-hidden="true" onclick="closeVideoModal()"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-black rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full relative">
                <button onclick="closeVideoModal()" class="absolute top-2 right-2 text-white hover:text-gray-300 z-10 focus:outline-none">
                    <i class="fas fa-times text-2xl"></i>
                </button>
                <div class="aspect-w-16 aspect-h-9 w-full">
                    <iframe id="videoFrame" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full h-[500px]"></iframe>
                </div>
            </div>
        </div>
    </div>

    <!-- Image Modal -->
    <div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-black bg-opacity-90 transition-opacity" aria-hidden="true" onclick="closeImageModal()"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-transparent rounded-lg text-center overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full relative">
                <button onclick="closeImageModal()" class="absolute top-2 right-2 text-white hover:text-gray-300 z-10 focus:outline-none bg-black bg-opacity-50 rounded-full w-8 h-8 flex items-center justify-center">
                    <i class="fas fa-times text-xl"></i>
                </button>
                <img id="modalImage" src="" alt="Full Size Image" class="max-w-full max-h-[85vh] mx-auto rounded-lg shadow-2xl">
            </div>
        </div>
    </div>

    <script>
        function showMemberModal() {
            document.getElementById('memberModal').classList.remove('hidden');
        }

        function closeMemberModal() {
            document.getElementById('memberModal').classList.add('hidden');
        }

        function openVideoModal(videoId) {
            document.getElementById('videoFrame').src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";
            document.getElementById('videoModal').classList.remove('hidden');
        }

        function openVideoUrlModal(videoUrl) {
            document.getElementById('videoFrame').src = videoUrl;
            document.getElementById('videoModal').classList.remove('hidden');
        }

        function closeVideoModal() {
            document.getElementById('videoModal').classList.add('hidden');
            document.getElementById('videoFrame').src = "";
        }

        function openImageModal(imageUrl) {
            document.getElementById('modalImage').src = imageUrl;
            document.getElementById('imageModal').classList.remove('hidden');
        }

        function closeImageModal() {
            document.getElementById('imageModal').classList.add('hidden');
            setTimeout(() => {
                document.getElementById('modalImage').src = "";
            }, 300);
        }
    </script>
@endsection