<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php echo $__env->yieldContent('title', 'Ishaq Tailor - Order Tracking'); ?></title>
    
    <?php echo app('Illuminate\Foundation\Vite')('resources/css/app.css'); ?>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <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="<?php echo e(asset('images/logo.webp')); ?>" type="image/png">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: black;
            min-height: 100vh;
            color: white;
        }
        .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;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
        }
        .input-focus:focus {
            box-shadow: 0 0 0 4px rgba(99, 229, 255, 0.3);
            background-color: rgba(255, 255, 255, 0.15);
        }
        .btn-primary {
            background-color: #63e5ff;
            color: black;
            transition: all 0.2s ease;
        }
        .btn-primary:hover {
            box-shadow: 0 4px 6px -1px rgba(99, 229, 255, 0.3),
                        0 2px 4px -1px rgba(99, 229, 255, 0.1);
        }
        .bg-black {
            background-color: black;
        }
        .feature-card {
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }
        .text-feature { background-color: rgba(255, 235, 59, 0.2); border: 1px solid rgba(255, 235, 59, 0.5); }
        .dictionary-feature { background-color: rgba(233, 30, 99, 0.2); border: 1px solid rgba(233, 30, 99, 0.5); }
        .transcribe-feature { background-color: rgba(156, 39, 176, 0.2); border: 1px solid rgba(156, 39, 176, 0.5); }
        .camera-feature { background-color: rgba(76, 175, 80, 0.2); border: 1px solid rgba(76, 175, 80, 0.5); }

        @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: white;
            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: #000000; /* Black color for icons and text */
        }
        .mobile-nav-item.active {
            background-color: rgba(99, 229, 255, 0.2);
            color: #63e5ff;
        }
        .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: #63e5ff;
        }
        .mobile-nav-item.active span {
            color: #63e5ff;
        }

        /* Special styling for Home button - centered and elevated */
        .mobile-nav-item.home-item {
            border-radius: 50%;
            width: 60px;
            height: 60px;
            margin-top: -20px; /* Elevate above the menu bar */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            background-color: white;
            border: 3px solid #63e5ff;
            z-index: 10;
        }
        .mobile-nav-item.home-item.active {
            background-color: #63e5ff;
            color: #000000; /* Black icon when active */
        }
        .mobile-nav-item.home-item.active i {
            color: #000000; /* Black icon when active */
        }
        .mobile-nav-item.home-item span {
            display: none; /* Hide text label for home button */
        }

        /* 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: #63e5ff;
        }
        .desktop-nav-item.active::after {
            content: '';
            position: absolute;
            bottom: -1rem;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #63e5ff;
            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;
        }
        .pro-badge {
            background-color: #63e5ff;
            color: black;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 12px;
            text-transform: uppercase;
        }
        .lang-selector {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 8px;
            padding: 8px 12px;
        }
        .action-button {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 8px;
            padding: 12px;
            transition: all 0.2s ease;
        }
        .action-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="antialiased">
    
<header class="sticky top-0 z-30 bg-black border-b border-gray-800 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 text-white">
                    <img src="<?php echo e(asset('images/logo.webp')); ?>" alt="Logo" class="bg-black p-1 rounded-md">
                </div>
                <span class="font-semibold text-white text-lg">ISHAQ TAILORS & FABRICS</span>
            </div>
            <!-- Desktop Navigation -->
            <div class="hidden md:flex flex-1 justify-center items-center space-x-4">
                <a href="<?php echo e(route('home')); ?>" class="desktop-nav-item <?php echo e(request()->is('/') ? 'active' : ''); ?>">
                    Home
                </a>
                <a href="<?php echo e(route('messages.index')); ?>" class="desktop-nav-item relative <?php echo e(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="<?php echo e(route('info.locations')); ?>" class="desktop-nav-item <?php echo e(request()->is('info/locations*') ? 'active' : ''); ?>">
                    Location
                </a>
                <a href="<?php echo e(route('search.index')); ?>" class="desktop-nav-item <?php echo e(request()->is('search*') ? 'active' : ''); ?>">
                    Track
                </a>
                <a href="<?php echo e(route('info.pricing')); ?>" class="desktop-nav-item <?php echo e(request()->is('info/pricing*') ? 'active' : ''); ?>">
                    Prices
                </a>
                <a href="<?php echo e(route('info.timings')); ?>" class="desktop-nav-item <?php echo e(request()->is('info/timings*') ? 'active' : ''); ?>">
                    Timing
                </a>
                <a href="<?php echo e(route('info.services')); ?>" class="desktop-nav-item <?php echo e(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>
    
    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <?php echo $__env->yieldContent('content'); ?>
    </main>
    
    <footer class="hidden md:block max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
        <p class="text-sm text-white">© <?php echo e(date('Y')); ?> ISHAQ TAILORS & FABRICS. All rights reserved.</p>

</footer>

    
    <div class="mobile-nav">
        <a href="<?php echo e(route('messages.index')); ?>" class="mobile-nav-item relative <?php echo e(request()->is('messages*') ? 'active' : ''); ?>" data-page="messages">
            <i class="<?php echo e(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="<?php echo e(route('info.locations')); ?>"
           class="mobile-nav-item <?php echo e(request()->is('info/locations*') ? 'active' : ''); ?>"
           data-page="location">
            <i class="fa-solid fa-map-marker-alt"></i>
            <span>Location</span>
        </a>
        <a href="<?php echo e(route('search.index')); ?>"
           class="mobile-nav-item <?php echo e(request()->is('search*') ? 'active' : ''); ?>"
           data-page="track">
            <i class="<?php echo e(request()->is('search*') ? 'fa-solid fa-magnifying-glass-plus' : 'fa-solid fa-magnifying-glass'); ?>"></i>
            <span>Track</span>
        </a>
        <a href="<?php echo e(route('home')); ?>"
           class="mobile-nav-item home-item <?php echo e(request()->is('/') ? 'active' : ''); ?>"
           data-page="home">
            <i class="fa-solid fa-home"></i>
            <span>Home</span>
        </a>
        <a href="<?php echo e(route('info.pricing')); ?>"
           class="mobile-nav-item <?php echo e(request()->is('info/pricing*') ? 'active' : ''); ?>"
           data-page="prices">
            <i class="fa-solid fa-tag"></i>
            <span>Prices</span>
        </a>
        <a href="<?php echo e(route('info.timings')); ?>"
           class="mobile-nav-item <?php echo e(request()->is('info/timings*') ? 'active' : ''); ?>"
           data-page="timing">
            <i class="<?php echo e(request()->is('info/timings*') ? 'fa-solid fa-clock' : 'fa-regular fa-clock'); ?>"></i>
            <span>Timing</span>
        </a>
        <a href="<?php echo e(route('info.services')); ?>"
           class="mobile-nav-item <?php echo e(request()->is('info/services*') ? 'active' : ''); ?>"
           data-page="services">
            <i class="fa-solid fa-bell-concierge"></i>
            <span>Services</span>
        </a>
    </div>
    
<script>
document.addEventListener('DOMContentLoaded', async () => {
    const isOnMessagesPage = window.location.pathname.startsWith('/messages');
    const desktopDot = document.getElementById('notificationDot');
    const mobileDot = document.getElementById('mobileNotificationDot');

    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 messageIds = messages.map(msg => msg.id);

        if (isOnMessagesPage) {
            // Mark all messages as seen
            localStorage.setItem('seenMessages', JSON.stringify(messageIds));
            if (desktopDot) desktopDot.classList.add('hidden');
            if (mobileDot) mobileDot.classList.add('hidden');
        } else {
            // Show dot only if there are unseen messages
            const unseen = messages.filter(msg => !seenMessages.includes(msg.id));
            const shouldShow = unseen.length > 0;
            if (desktopDot) desktopDot.classList.toggle('hidden', !shouldShow);
            if (mobileDot) mobileDot.classList.toggle('hidden', !shouldShow);
        }
    } catch (error) {
        // Silent fail
        console.error('Notification error:', error);
    }
});
</script>


    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH C:\laragonlatest\www\tailortrack\resources\views/layouts/app.blade.php ENDPATH**/ ?>