<!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 href="https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap" rel="stylesheet">

    <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;
            margin: 5px 0;
            color: #6b7280;
        }
        .mobile-nav-item.active {
            background-color: black;
            color: #ebc47c;
        }
        .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;
            }
        }

    .urdu-text {
        font-family: 'Noto Nastaliq Urdu', serif;
    }
    </style>
</head>
<body class="antialiased">
    {{-- Header --}}
<header class="sticky top-0 z-30 bg-black border-b border-gray-200/70 shadow-sm">
    <div class="w-full px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">

            <!-- Logo + Name -->
            <div class="flex items-center space-x-3 w-full justify-center md:w-auto md:justify-start">
                <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>

            <!-- Desktop Navigation -->
            <div class="hidden md:flex flex-1 justify-center items-center space-x-4">
                <a href="{{ route('messages.index') }}" class="desktop-nav-item relative {{ request()->is('messages*') ? 'active' : '' }}">
                    Messages
                    <span id="notificationDot" class="absolute top-0 right-0 w-2.5 h-2.5 bg-red-500 rounded-full hidden blink"></span>
                </a>
                <a href="{{ route('info.locations') }}" class="desktop-nav-item {{ request()->is('info/locations*') ? 'active' : '' }}">
                    Location
                </a>
                <a href="{{ route('search.index') }}" class="desktop-nav-item {{ request()->is('search*') ? 'active' : '' }}">
                    Track
                </a>
                <a href="{{ route('info.pricing') }}" class="desktop-nav-item {{ request()->is('info/pricing*') ? 'active' : '' }}">
                    Prices
                </a>
                <a href="{{ route('info.timings') }}" class="desktop-nav-item {{ request()->is('info/timings*') ? 'active' : '' }}">
                    Timing
                </a>
                <a href="{{ route('info.services') }}" class="desktop-nav-item {{ request()->is('info/services*') ? 'active' : '' }}">
                    Services
                </a>
            </div>

            <!-- Phone Number -->
            <div class="hidden md:flex items-center space-x-2 text-sm text-white">
                <i class="fas fa-phone-alt"></i>
                <span>0321-4241864</span>
            </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 -->


        @yield('content')

        <h4 class="text-2xl sm:text-3xl font-semibold text-gray-900 mb-2 text-center">Follow us on</h4>
         <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>
            <a href="https://wa.me/+923214241864" target="_blank" aria-label="WhatsApp"
   class="text-[#25D366] hover:opacity-80 text-xl transition">
    <i class="fab fa-whatsapp"></i>
</a>

        </div>
       <div class="flex flex-col items-center text-sm text-center mt-3">
    <div class="flex items-center space-x-2">
        <i class="fas fa-phone-alt"></i>
        <span>0321-4241864</span>
    </div>
    <span>Dolat Khan Market on the G.T Road, Pabbi, KPK, Pakistan</span>
</div>



    </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 relative {{ request()->is('messages*') ? 'active' : '' }}" data-page="messages">
    <i class="{{ request()->is('messages*') ? 'fa-solid' : 'fa-regular' }} fa-envelope"></i>
    <span>Messages</span>
    <span id="mobileNotificationDot" class="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full hidden blink"></span>
</a>



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


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

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

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

<a href="{{ route('info.services') }}"
   class="mobile-nav-item {{ request()->is('info/services*') ? 'active' : '' }}"
   data-page="services">
    <i class="fa-solid fa-bell-concierge"></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 desktopDot = document.getElementById('notificationDot');
        const mobileDot = document.getElementById('mobileNotificationDot');

        if (desktopDot) {
            desktopDot.classList.toggle('hidden', unseen.length === 0);
        }
        if (mobileDot) {
            mobileDot.classList.toggle('hidden', unseen.length === 0);
        }
    } catch (error) {
        // Fail silently
    }
});
</script>


    @stack('scripts')
</body>
</html>
