<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', 'Ishaq Tailor - Order Tracking')</title>
    {{-- Compiled Tailwind --}}
    @vite('resources/css/app.css')
    {{-- Font Awesome --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    {{-- Google Fonts --}}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
    <link rel="icon" href="{{ asset('images/logo.webp') }}" type="image/png">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                        0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .input-focus { transition: all 0.3s ease; }
        .input-focus:focus {
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
        }
        .btn-primary {
            background-color: #ebc47c;
            color: black;
            transition: all 0.2s ease;
        }
        .btn-primary:hover {
            box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.3),
                        0 2px 4px -1px rgba(14, 165, 233, 0.1);
        }
        .bg-black { background-color: black; }
        @media (min-width: 1024px) {
            .custom-lg-justify-start {
                justify-content: flex-start !important;
            }
        }
        @media (max-width: 1023px) {
            .custom-lg-justify-start {
                justify-content: flex-start !important;
            }
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        .blink {
            animation: blink 1s linear infinite;
        }
        #notificationDot:not(.hidden) {
            animation: blink 1s linear infinite;
        }
        /* Mobile Navigation Styles */
        .mobile-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            z-index: 50;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 70px;
            padding-bottom: env(safe-area-inset-bottom, 10px);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }
        .mobile-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 100%;
            transition: all 0.3s ease;
            position: relative;
            border-radius: 12px;
            margin: 5px 0;
            color: #6b7280;
        }
        .mobile-nav-item.active {
            background-color: black;
            color: #ebc47c;
            border-radius: 12px;
        }
        .mobile-nav-item:hover:not(.active) {
            background-color: rgba(0, 0, 0, 0.05);
            color: #4b5563;
        }
        .mobile-nav-item i {
            font-size: 1.4rem;
            margin-bottom: 4px;
            transition: all 0.3s ease;
        }
        .mobile-nav-item span {
            font-size: 0.7rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .mobile-nav-item.active i {
            color: #ebc47c;
        }
        .mobile-nav-item.active span {
            color: #ebc47c;
        }
        /* Desktop Navigation Styles */
        .desktop-nav {
            display: none;
        }
        .desktop-nav-item {
            position: relative;
            padding: 0.5rem 1rem;
            margin: 0 0.25rem;
            font-weight: 500;
            color: #e5e7eb;
            transition: all 0.2s ease;
            border-radius: 0.375rem;
        }
        .desktop-nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
        .desktop-nav-item.active {
            color: #ebc47c;
        }
        .desktop-nav-item.active::after {
            content: '';
            position: absolute;
            bottom: -1rem;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #ebc47c;
            border-radius: 3px 3px 0 0;
        }
        /* Add padding to main content for mobile */
        @media (max-width: 767px) {
            main {
                padding-bottom: 90px !important;
            }
            .desktop-nav {
                display: none !important;
            }
            .mobile-nav {
                display: flex;
            }
        }
        @media (min-width: 768px) {
            .mobile-nav {
                display: none !important;
            }
            .desktop-nav {
                display: flex;
            }
        }
    </style>
</head>
<body class="antialiased">
    {{-- Header --}}
    <header class="sticky top-0 z-30 bg-white/80 backdrop-blur-lg border-b border-gray-200/70 shadow-sm bg-black">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center justify-center w-full custom-lg-justify-start">
                    <div class="flex items-center space-x-3">
                        <div class="flex items-center justify-center h-10 w-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 text-white">
                            <img src="{{ asset('images/logo.webp') }}" alt="Logo" class="bg-black p-1 rounded-md">
                        </div>
                        <span class="font-semibold text-white text-lg">ISHAQ THE TAILORS</span>
                    </div>
                </div>

                {{-- Desktop Navigation --}}
                <div class="desktop-nav items-center space-x-1">
                    <a href="{{ route('messages.index') }}" class="desktop-nav-item {{ request()->is('messages*') ? 'active' : '' }}">
                        <i class="fas fa-envelope mr-2"></i>Messages
                    </a>
                    <a href="{{ route('location.index') }}" class="desktop-nav-item {{ request()->is('location*') ? 'active' : '' }}">
                        <i class="fas fa-map-marker-alt mr-2"></i>Location
                    </a>
                    <a href="{{ route('track.index') }}" class="desktop-nav-item {{ request()->is('track*') ? 'active' : '' }}">
                        <i class="fas fa-search-location mr-2"></i>Track
                    </a>
                    <a href="{{ route('prices.index') }}" class="desktop-nav-item {{ request()->is('prices*') ? 'active' : '' }}">
                        <i class="fas fa-tag mr-2"></i>Prices
                    </a>
                    <a href="{{ route('timing.index') }}" class="desktop-nav-item {{ request()->is('timing*') ? 'active' : '' }}">
                        <i class="fas fa-clock mr-2"></i>Timing
                    </a>
                    <a href="{{ route('services.index') }}" class="desktop-nav-item {{ request()->is('services*') ? 'active' : '' }}">
                        <i class="fas fa-concierge-bell mr-2"></i>Services
                    </a>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="hidden md:flex items-center space-x-2 text-sm text-white">
                        <i class="fas fa-phone-alt"></i>
                        <span>Customer Support: 0321-4241864</span>
                    </div>
                    <div class="relative">
                        <a href="{{ route('messages.index') }}" class="btn-primary flex items-center justify-center w-10 h-10 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition-all relative">
                            <i class="fas fa-bell text-black"></i>
                            <span id="notificationDot" class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full hidden"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    {{-- Page Content --}}
    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Social Media Icons -->
        <div class="flex space-x-4 justify-center mt-6">
            <a href="https://www.tiktok.com/@i_am_ishaq864" target="_blank" aria-label="TikTok"
               class="text-[#010101] hover:opacity-80 text-xl transition">
                <i class="fab fa-tiktok"></i>
            </a>
            <a href="https://www.facebook.com/profile.php?id=100063831635145" target="_blank" aria-label="Facebook"
               class="text-[#1877F2] hover:opacity-80 text-xl transition">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="https://www.instagram.com/ishaq_tailors_and_fabrics" target="_blank" aria-label="Instagram"
               class="text-[#E1306C] hover:opacity-80 text-xl transition">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="https://www.youtube.com/@IshaqTheTailor" target="_blank" aria-label="YouTube"
               class="text-[#FF0000] hover:opacity-80 text-xl transition">
                <i class="fab fa-youtube"></i>
            </a>
        </div>

        @yield('content')
    </main>
    {{-- Footer --}}
    <footer class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
        <div class="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
            <p class="text-sm text-gray-500">© {{ date('Y') }} ISHAQ THE TAILORS. All rights reserved.</p>
        </div>
    </footer>

    {{-- Mobile Navigation --}}
    <div class="mobile-nav">
        <a href="{{ route('messages.index') }}" class="mobile-nav-item {{ request()->is('messages*') ? 'active' : '' }}" data-page="messages">
            <i class="{{ request()->is('messages*') ? 'fa-solid' : 'fa-regular' }} fa-envelope"></i>
            <span>Messages</span>
        </a>

        <a href="{{ route('location.index') }}" class="mobile-nav-item {{ request()->is('location*') ? 'active' : '' }}" data-page="location">
            <i class="{{ request()->is('location*') ? 'fa-solid' : 'fa-regular' }} fa-map-marker-alt"></i>
            <span>Location</span>
        </a>

        <a href="{{ route('track.index') }}" class="mobile-nav-item {{ request()->is('track*') ? 'active' : '' }}" data-page="track">
            <i class="{{ request()->is('track*') ? 'fa-solid fa-magnifying-glass-plus' : 'fa-solid fa-magnifying-glass' }}"></i>
            <span>Track</span>
        </a>

        <a href="{{ route('prices.index') }}" class="mobile-nav-item {{ request()->is('prices*') ? 'active' : '' }}" data-page="prices">
            <i class="{{ request()->is('prices*') ? 'fa-solid fa-tag' : 'fa-regular fa-tag' }}"></i>
            <span>Prices</span>
        </a>

        <a href="{{ route('timing.index') }}" class="mobile-nav-item {{ request()->is('timing*') ? 'active' : '' }}" data-page="timing">
            <i class="{{ request()->is('timing*') ? 'fa-solid fa-clock' : 'fa-regular fa-clock' }}"></i>
            <span>Timing</span>
        </a>

        <a href="{{ route('services.index') }}" class="mobile-nav-item {{ request()->is('services*') ? 'active' : '' }}" data-page="services">
            <i class="{{ request()->is('services*') ? 'fa-solid fa-concierge-bell' : 'fa-regular fa-concierge-bell' }}"></i>
            <span>Services</span>
        </a>
    </div>

    {{-- Message Script --}}
    <script>
    document.addEventListener('DOMContentLoaded', async () => {
        try {
            const seenMessages = JSON.parse(localStorage.getItem('seenMessages') || '[]');
            const res = await fetch('/api/broadcasts/active');
            if (!res.ok) throw new Error('Failed to fetch messages');
            const messages = await res.json();
            const unseen = messages.filter(msg => !seenMessages.includes(msg.id));
            const dot = document.getElementById('notificationDot');
            if (dot) {
                dot.classList.toggle('hidden', unseen.length === 0);
            }
        } catch (error) {
            // Silently fail in production
        }
    });
    </script>
    @stack('scripts')
</body>
</html>
