@extends('layouts.app')
@section('content')
    <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-10 px-4">
        <div class="max-w-6xl mx-auto">
            <!-- Header Section -->
            <div class="text-center mb-12">
                <h1 class="text-5xl font-bold text-gray-800 mb-4">Daftar Menu</h1>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Pilihlah menu makanan sesuai yang anda inginkan, kami
                    menyajikan menu catering mulai dari harian, event, hingga pernikahan.</p>
            </div>

            <!-- Subkategori Tabs -->
            <div class="mb-8">
                <div class="flex justify-center">
                    <nav class="flex space-x-1 bg-white rounded-xl p-2 shadow-lg" aria-label="Tabs" role="tablist">
                        @foreach ($kategori->subkategoris as $index => $subkategori)
                            <button type="button"
                                class="tab-button {{ $index === 0 ? 'bg-blue-600 text-white' : 'text-gray-600 hover:text-blue-600' }} px-6 py-3 rounded-lg font-medium transition-all duration-300 ease-in-out transform hover:scale-105"
                                data-tab="{{ $subkategori->slug }}">
                                {{ $subkategori->name }}
                            </button>
                        @endforeach
                    </nav>
                </div>
            </div>

            <!-- Tab Panels -->
            <div>
                @foreach ($kategori->subkategoris as $index => $subkategori)
                    <div id="tab-panel-{{ $subkategori->slug }}" class="tab-panel {{ $index === 0 ? '' : 'hidden' }}"
                        role="tabpanel">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach ($subkategori->menus as $menu)
                                <div
                                    class="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
                                    <!-- Menu Image -->
                                    <div class="relative h-48 bg-gradient-to-r from-orange-400 to-pink-400">
                                        @if (isset($menu->images) && !empty($menu->images))
                                            @php
                                                // Handle jika images adalah JSON string
                                                $images = is_string($menu->images)
                                                    ? json_decode($menu->images, true)
                                                    : $menu->images;
                                                $firstImage = is_array($images)
                                                    ? (isset($images[0])
                                                        ? $images[0]
                                                        : null)
                                                    : $images;
                                            @endphp

                                            @if ($firstImage)
                                                <img src="{{ asset('storage/' . $firstImage) }}" alt="{{ $menu->name }}"
                                                    class="w-full h-full object-cover"
                                                    onerror="this.src='https://via.placeholder.com/400x300/FF6B6B/FFFFFF?text={{ urlencode($menu->name) }}'">
                                            @else
                                                <img src="https://via.placeholder.com/400x300/FF6B6B/FFFFFF?text={{ urlencode($menu->name) }}"
                                                    alt="{{ $menu->name }}" class="w-full h-full object-cover">
                                            @endif

                                            <!-- Multiple images indicator -->
                                            @if (is_array($images) && count($images) > 1)
                                                <div class="absolute top-4 left-4">
                                                    <span
                                                        class="bg-black bg-opacity-70 text-white px-2 py-1 rounded-full text-xs font-medium">
                                                        +{{ count($images) - 1 }} foto
                                                    </span>
                                                </div>
                                            @endif
                                        @else
                                            <img src="https://via.placeholder.com/400x300/FF6B6B/FFFFFF?text={{ urlencode($menu->name) }}"
                                                alt="{{ $menu->name }}" class="w-full h-full object-cover">
                                        @endif

                                        <div class="absolute top-4 right-4">
                                            <span
                                                class="bg-white bg-opacity-90 text-gray-800 px-3 py-1 rounded-full text-sm font-semibold">
                                                {{ $subkategori->name }}
                                            </span>
                                        </div>
                                    </div>

                                    <!-- Menu Content -->
                                    <div class="p-6">
                                        <h3 class="font-bold text-xl text-gray-800 mb-3">{{ $menu->name }}</h3>
                                        <p class="text-gray-600 mb-4 leading-relaxed">{{ $menu->description }}</p>

                                        <!-- Price -->
                                        <div class="flex items-center justify-between mb-4">
                                            <div class="flex items-center">
                                                <span class="text-2xl font-bold text-blue-600">Rp{{ number_format($menu->price, 2) }}</span>
                                            </div>
                                        </div>


                                        <!-- Action Buttons -->
                                        <div class="flex space-x-2">
                                            <a href="{{ route('checkout', $menu->slug) }}"
                                                class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center space-x-2 transform hover:scale-105">
                                                <span>Pesan Sekarang</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <!-- Empty State -->
                        @if ($subkategori->menus->isEmpty())
                            <div class="text-center py-16">
                                <div class="mx-auto h-24 w-24 text-gray-400 mb-4">
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
                                        </path>
                                    </svg>
                                </div>
                                <h3 class="text-lg font-medium text-gray-900 mb-2">Belum ada menu tersedia</h3>
                                <p class="text-gray-500">Menu untuk kategori ini sedang dalam persiapan.</p>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

        </div>

        <style>
            /* Custom animations */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .tab-panel {
                animation: fadeInUp 0.5s ease-out;
            }

            /* Hover effects */
            .tab-button:hover {
                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
            }

            /* Custom scrollbar for better aesthetics */
            ::-webkit-scrollbar {
                width: 8px;
            }

            ::-webkit-scrollbar-track {
                background: #f1f5f9;
                border-radius: 4px;
            }

            ::-webkit-scrollbar-thumb {
                background: #cbd5e1;
                border-radius: 4px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #94a3b8;
            }
        </style>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const tabButtons = document.querySelectorAll('.tab-button');
                const tabPanels = document.querySelectorAll('.tab-panel');

                // Initialize first tab as active
                if (tabButtons.length > 0) {
                    tabButtons[0].classList.add('active');
                }

                tabButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const targetTab = this.getAttribute('data-tab');

                        // Reset all buttons
                        tabButtons.forEach(btn => {
                            btn.classList.remove('bg-blue-600', 'text-white', 'active');
                            btn.classList.add('text-gray-600');
                        });

                        // Activate clicked button
                        this.classList.add('bg-blue-600', 'text-white', 'active');
                        this.classList.remove('text-gray-600');

                        // Hide all panels with fade effect
                        tabPanels.forEach(panel => {
                            panel.classList.add('hidden');
                        });

                        // Show the corresponding panel
                        const targetPanel = document.getElementById('tab-panel-' + targetTab);
                        if (targetPanel) {
                            setTimeout(() => {
                                targetPanel.classList.remove('hidden');
                            }, 100);
                        }
                    });
                });

                // Handle order button clicks
                document.addEventListener('click', function(e) {
                    if (e.target.closest('button') && e.target.closest('button').textContent.includes(
                            'Pesan Sekarang')) {
                        const menuCard = e.target.closest('.bg-white.rounded-2xl');
                        const menuName = menuCard.querySelector('h3').textContent;

                        // Add your order logic here
                        alert(`Memproses pesanan untuk: ${menuName}`);

                        // Example: You can redirect to order page or open modal
                        // window.location.href = `/order?menu=${encodeURIComponent(menuName)}`;
                    }

                    // Handle wishlist button clicks
                    if (e.target.closest('button') && e.target.closest('button').querySelector(
                            'svg path[d*="M4.318 6.318"]')) {
                        const button = e.target.closest('button');
                        const isLiked = button.classList.contains('text-red-500');

                        if (isLiked) {
                            button.classList.remove('text-red-500', 'bg-red-50');
                            button.classList.add('text-gray-700', 'bg-gray-100');
                        } else {
                            button.classList.remove('text-gray-700', 'bg-gray-100');
                            button.classList.add('text-red-500', 'bg-red-50');
                        }
                    }
                });

                // Add loading animation for images
                const images = document.querySelectorAll('img');
                images.forEach(img => {
                    img.addEventListener('load', function() {
                        this.classList.add('loaded');
                    });
                });
            });
        </script>
    @endsection