<?php

use Illuminate\View\ComponentAttributeBag;

?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? site_title() }} - ফ্রেশ ফিশ অনলাইন বাংলাদেশ</title>
    @if(!empty($description))
        <meta name="description" content="{{ $description }}">
    @endif
    @if(!empty($keywords))
        <meta name="keywords" content="{{ $keywords }}">
    @endif
    @if(!empty($canonical))
        <link rel="canonical" href="{{ $canonical }}">
    @endif
    <link rel="icon" type="image/x-icon" href="{{ site_favicon() }}">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap" rel="stylesheet" />

    <!-- TailwindCSS CDN for development -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Noto Sans Bengali', 'Figtree', 'ui-sans-serif', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* Custom utilities */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* Hide scrollbar for navigation */
        nav.overflow-x-auto {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        nav.overflow-x-auto::-webkit-scrollbar {
            display: none;
        }
        
        /* Banner slider styles */
        .banner-slider {
            position: relative;
        }
        .banner-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
        }
        .banner-slide.active {
            position: relative;
            opacity: 1;
            visibility: visible;
        }
        
        /* Dropdown arrow rotation */
        .rotate-180 {
            transform: rotate(180deg);
        }
    </style>
</head>
<body class="font-sans antialiased bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Top bar -->
            <div class="border-b border-gray-200 py-1.5 sm:py-2 text-xs sm:text-sm">
                <div class="flex justify-between items-center">
                    <div class="text-gray-600 truncate">
                        📞 <span class="hidden xs:inline">কল: </span>+880 {{ contact_phone_formatted() }}
                        <span class="hidden sm:inline"> | 
                        @if(free_delivery_enabled())
                            🚚 ৳{{ number_format(free_delivery_minimum()) }}-এর বেশি অর্ডারে বিনামূল্যে ডেলিভারি
                        @else
                            🚚 দ্রুত ডেলিভারি
                        @endif
                        </span>
                    </div>
                    <div class="flex items-center space-x-2 sm:space-x-4 text-xs sm:text-sm">
                        @auth
                            <a href="{{ route('dashboard') }}" class="text-blue-600 hover:text-blue-800 whitespace-nowrap">আমার অ্যাকাউন্ট</a>
                            <form method="POST" action="{{ route('logout') }}" class="inline">
                                @csrf
                                <button type="submit" class="text-gray-600 hover:text-gray-800 whitespace-nowrap">লগআউট</button>
                            </form>
                        @else
                            <button onclick="openLoginModal()" class="text-blue-600 hover:text-blue-800 cursor-pointer whitespace-nowrap">লগইন</button>
                            <button onclick="openRegisterModal()" class="text-blue-600 hover:text-blue-800 cursor-pointer whitespace-nowrap hidden sm:inline">নিবন্ধন</button>
                        @endauth
                    </div>
                </div>
            </div>

            <!-- Main header -->
            <div class="py-2 sm:py-3">
                <div class="flex items-center justify-between gap-2 sm:gap-4">
                    <!-- Logo -->
                    <div class="flex items-center flex-shrink-0">
                        <a href="{{ route('shop.index') }}" class="flex items-center">
                            @if(site_logo())
                                <img src="{{ site_logo() }}" alt="{{ site_title() }}" class="h-8 sm:h-10 w-auto">
                            @else
                                <span class="text-lg sm:text-2xl font-bold text-blue-600">🐟 {{ site_title() }}</span>
                            @endif
                        </a>
                    </div>

                    <!-- Search - Desktop -->
                    <div class="hidden md:flex flex-1 max-w-lg mx-8">
                        <form action="{{ route('shop.search') }}" method="GET" class="relative w-full">
                            <input type="text" name="q" value="{{ request('q') }}" 
                               placeholder="মাছ খুঁজুন..." 
                                   class="w-full pl-4 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
                            <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </button>
                        </form>
                    </div>

                    <!-- Cart -->
                    <div class="flex items-center">
                        <a href="{{ route('cart.index') }}" class="relative p-2 text-gray-600 hover:text-blue-600">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17M17 13v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-6m8 0V9a2 2 0 00-2-2H9a2 2 0 00-2 2v4"></path>
                            </svg>
                            <span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                        </a>
                    </div>
                </div>

                <!-- Search - Mobile -->
                <div class="mt-2 md:hidden">
                    <form action="{{ route('shop.search') }}" method="GET" class="relative w-full">
                        <input type="text" name="q" value="{{ request('q') }}" 
                               placeholder="মাছ খুঁজুন..."
                               class="w-full pl-3 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm">
                        <button type="submit" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </button>
                    </form>
                </div>
            </div>

            <!-- Navigation -->
            <nav class="border-t border-gray-200 py-2 sm:py-3 overflow-x-auto">
                <div class="flex items-center space-x-4 sm:space-x-6 lg:space-x-8 px-2 sm:px-2">
                    @php
                        $headerCategories = App\Models\Category::active()->where('show_on_menu', true)->orderBy('sort_order')->get();
                    @endphp
                    @foreach($headerCategories as $category)
                        <a href="{{ route('shop.products', ['category' => $category->slug]) }}" class="text-sm sm:text-base text-gray-700 hover:text-blue-600 font-medium whitespace-nowrap">{{ $category->name }}</a>
                    @endforeach

                    <div class="ml-auto flex items-center space-x-4 sm:space-x-6 lg:space-x-8">
                        <a href="{{ route('order.tracking') }}" class="text-sm sm:text-base text-gray-700 hover:text-blue-600 font-medium whitespace-nowrap">অর্ডার ট্র্যাক</a>
                        <a href="{{ route('blogs.index') }}" class="text-sm sm:text-base text-gray-700 hover:text-blue-600 font-medium whitespace-nowrap">ব্লগ</a>
                        <a href="{{ route('contact.index') }}" class="text-sm sm:text-base text-gray-700 hover:text-blue-600 font-medium whitespace-nowrap">যোগাযোগ</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <main>
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 text-center">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 text-center">
                {{ session('error') }}
            </div>
        @endif

        {{ $slot }}
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Company Info -->
                <div>
                    @if(site_logo())
                        <img src="{{ site_logo() }}" alt="{{ site_title() }}" class="h-12 mb-4">
                    @else
                        <h3 class="text-lg font-semibold mb-4">🐟 {{ site_title() }}</h3>
                    @endif
                    <p class="text-gray-300 mb-4">{{ footer_description() }}</p>
                    <div class="flex space-x-4">
                        @php
                            $socialLinks = social_links();
                        @endphp
                        @if(!empty($socialLinks['facebook']))
                            <a href="{{ $socialLinks['facebook'] }}" target="_blank" rel="noopener" class="text-gray-400 hover:text-white" title="Facebook">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                        @endif
                        @if(!empty($socialLinks['instagram']))
                            <a href="{{ $socialLinks['instagram'] }}" target="_blank" rel="noopener" class="text-gray-400 hover:text-white" title="Instagram">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                                </svg>
                            </a>
                        @endif
                        @if(!empty($socialLinks['youtube']))
                            <a href="{{ $socialLinks['youtube'] }}" target="_blank" rel="noopener" class="text-gray-400 hover:text-white" title="YouTube">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                                </svg>
                            </a>
                        @endif
                    </div>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">দ্রুত লিঙ্ক</h3>
                    <ul class="space-y-2 text-gray-300">
                        <li><a href="{{ route('shop.products') }}" class="hover:text-white">সব পণ্য</a></li>
                        <li><a href="{{ route('order.tracking') }}" class="hover:text-white">অর্ডার ট্র্যাক</a></li>
                        <li><a href="#" class="hover:text-white">সচরাচর জিজ্ঞাসা</a></li>
                        <li><a href="#" class="hover:text-white">আমাদের সম্পর্কে</a></li>
                    </ul>
                </div>

                <!-- Categories -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">মাছের ক্যাটাগরি</h3>
                    <ul class="space-y-2 text-gray-300">
                        @foreach($headerCategories as $category)
                            <li><a href="{{ route('shop.products', ['category' => $category->slug]) }}" class="hover:text-white">{{ $category->name }}</a></li>
                        @endforeach
                    </ul>
                </div>

                <!-- Contact -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">যোগাযোগের তথ্য</h3>
                    <ul class="space-y-2 text-gray-300">
                        <li>📞 +880 {{ contact_phone_formatted() }}</li>
                        <li>📧 {{ contact_email() }}</li>
                        <li>📍 {{ footer_location() }}</li>
                        <li>🕒 প্রতিদিন: সকাল ৬টা - রাত ১০টা</li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-300">
                <p>{{ footer_copyright() }}</p>
            </div>
        </div>
    </footer>

    <!-- Floating Chat Buttons -->
    <div class="fixed bottom-4 right-4 flex flex-col space-y-2 z-50">
        <!-- WhatsApp -->
        <a href="{{ whatsapp_link() }}" target="_blank" class="bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition-colors">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
            </svg>
        </a>

        <!-- Messenger -->
        <a href="{{ messenger_link() }}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-colors">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0C5.374 0 0 4.975 0 11.111c0 3.497 1.745 6.616 4.472 8.652V24l4.086-2.242c1.09.301 2.246.464 3.442.464 6.626 0 12-4.974 12-11.111C24 4.975 18.626 0 12 0zm1.193 14.963l-3.056-3.259-5.963 3.259L10.732 8.2l3.133 3.259L19.828 8.2l-6.635 6.763z"/>
            </svg>
        </a>
    </div>

    <!-- Authentication Modals -->
    @include('components.auth.login-modal')
    @include('components.auth.register-modal')
    @include('components.auth.otp-modal')
    @include('components.auth.otp-choice-modal')

    <!-- Modern Modal Component -->
    <x-modern-modal />

    <!-- Cart Count Update Script -->
    <script>
        // Update cart count on page load
        fetch('{{ route("cart.count") }}')
            .then(response => response.json())
            .then(data => {
                const count = data.count || 0;
                const countEl = document.getElementById('cart-count');
                if (countEl) countEl.textContent = count;

                // Keep the sticky cart bar visible if the cart already has items
                if (count > 0) {
                    const bar = document.getElementById('sticky-cart-bar');
                    const txt = document.getElementById('sticky-cart-text');
                    if (bar && txt) {
                        txt.textContent = count + ' আইটেম | মোট: ৳' + Number(data.total || 0).toLocaleString();
                        bar.classList.remove('translate-y-full');
                    }
                }
            });
    </script>

    <!-- Categories Dropdown Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dropdown = document.getElementById('categories-dropdown');
            const button = document.getElementById('categories-button');
            const menu = document.getElementById('categories-menu');
            const arrow = document.getElementById('categories-arrow');

            // Toggle dropdown on click
            button.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (menu.classList.contains('hidden')) {
                    // Calculate position
                    const rect = button.getBoundingClientRect();
                    menu.style.left = rect.left + 'px';
                    menu.style.top = (rect.bottom + 8) + 'px';
                    
                    // Show dropdown
                    menu.classList.remove('hidden');
                    arrow.classList.add('rotate-180');
                } else {
                    // Hide dropdown
                    menu.classList.add('hidden');
                    arrow.classList.remove('rotate-180');
                }
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', function(e) {
                if (!dropdown.contains(e.target) && !menu.contains(e.target)) {
                    menu.classList.add('hidden');
                    arrow.classList.remove('rotate-180');
                }
            });

            // Close dropdown on escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    menu.classList.add('hidden');
                    arrow.classList.remove('rotate-180');
                }
            });
            
            // Reposition on scroll and resize
            window.addEventListener('scroll', function() {
                if (!menu.classList.contains('hidden')) {
                    const rect = button.getBoundingClientRect();
                    menu.style.left = rect.left + 'px';
                    menu.style.top = (rect.bottom + 8) + 'px';
                }
            });
            
            window.addEventListener('resize', function() {
                if (!menu.classList.contains('hidden')) {
                    const rect = button.getBoundingClientRect();
                    menu.style.left = rect.left + 'px';
                    menu.style.top = (rect.bottom + 8) + 'px';
                }
            });
        });
    </script>

    <!-- Toast Notification Component -->
    @include('components.toast-notification')

    <!-- Sticky Bottom Cart Bar (hidden by default, slides up after add) -->
    <div id="sticky-cart-bar" class="fixed bottom-0 inset-x-0 z-40 translate-y-full transition-transform duration-300 ease-out">
        <div class="bg-gray-900 text-white shadow-[0_-4px_20px_rgba(0,0,0,0.25)]">
            <div class="max-w-7xl mx-auto px-4 py-3 flex items-center gap-3">
                <button type="button" id="sticky-cart-close" class="text-gray-400 hover:text-white shrink-0" aria-label="বন্ধ করুন">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
                <div class="flex-1 min-w-0">
                    <div id="sticky-cart-text" class="text-sm font-medium truncate">কার্টে পণ্য যোগ করা হয়েছে</div>
                    <div id="sticky-cart-sub" class="text-[11px] text-gray-400">দ্রুত চেকআউটে যান</div>
                </div>
                <a href="{{ route('checkout.express') }}" class="bg-red-600 hover:bg-red-700 text-white font-extrabold px-5 sm:px-8 py-3 rounded-xl text-center whitespace-nowrap shadow-lg active:scale-95 transition-transform">
                    চেকআউট করুন ➔
                </a>
            </div>
        </div>
    </div>

    <script>
        // --- Sticky Cart Bar (global) ---
        const stickyBar = document.getElementById('sticky-cart-bar');
        const stickyText = document.getElementById('sticky-cart-text');

        function showStickyCartBar() {
            if (!stickyBar) return;
            fetch('{{ route("cart.count") }}', {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(data => {
                const count = data.count || 0;
                const total = Number(data.total || 0);
                const countEl = document.getElementById('cart-count');
                if (countEl) countEl.textContent = count;
                if (stickyText) stickyText.textContent = count + ' আইটেম | মোট: ৳' + total.toLocaleString();
                stickyBar.classList.remove('translate-y-full');
            })
            .catch(() => {
                stickyBar.classList.remove('translate-y-full');
            });
        }

        function hideStickyCartBar() {
            if (stickyBar) stickyBar.classList.add('translate-y-full');
        }

        const stickyClose = document.getElementById('sticky-cart-close');
        if (stickyClose) stickyClose.addEventListener('click', hideStickyCartBar);
    </script>

    <!-- Authentication Modal Script -->
    <script src="{{ asset('js/auth-modals.js') }}"></script>
</body>
</html>