<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', 'Beautez Telehealth'); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-pink: #ec4899;
            --primary-pink-dark: #db2777;
            --gold: #fbbf24;
            --gold-dark: #f59e0b;
            --black: #000000;
            --white: #ffffff;
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body class="bg-white">
    <!-- Banner Carousel -->
    <?php
        $carouselImagesJson = \App\Models\Setting::get('carousel_images', '[]');
        $carouselImages = json_decode($carouselImagesJson, true);
        
        // If no images in settings, check for default banner files
        if (empty($carouselImages) || !is_array($carouselImages)) {
            $carouselImages = [];
            if (file_exists(public_path('banner 1.jpeg'))) {
                $carouselImages[] = 'banner 1.jpeg';
            }
            if (file_exists(public_path('banner 2.jpeg'))) {
                $carouselImages[] = 'banner 2.jpeg';
            }
        }
        $totalSlides = count($carouselImages);
    ?>
    
    <?php if($totalSlides > 0): ?>
    <div class="relative w-full h-32 sm:h-40 md:h-48 overflow-hidden bg-gradient-to-r from-[#ec4899] to-[#fbbf24]">
        <div id="banner-carousel" class="flex transition-transform duration-1000 ease-in-out h-full">
            <?php $__currentLoopData = $carouselImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="min-w-full h-full flex items-center justify-center">
                <?php
                    // Check if it's a storage path (carousel/filename.jpg)
                    if (strpos($imagePath, 'carousel/') !== false) {
                        $imageUrl = asset('storage/' . $imagePath);
                    } else {
                        // It's a public path (banner 1.jpeg, etc.)
                        $imageUrl = asset($imagePath);
                    }
                ?>
                <img src="<?php echo e($imageUrl); ?>" alt="Banner <?php echo e($index + 1); ?>" 
                     class="w-full h-full object-cover" 
                     onerror="this.onerror=null; this.style.display='none';">
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <!-- Carousel Indicators -->
        <?php if($totalSlides > 1): ?>
        <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
            <?php $__currentLoopData = $carouselImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $imagePath): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <button onclick="goToSlide(<?php echo e($index); ?>)" class="w-2 h-2 rounded-full bg-white opacity-50 hover:opacity-100 transition" id="indicator-<?php echo e($index); ?>"></button>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <nav class="bg-[#ec4899] text-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="/" class="text-lg sm:text-xl font-bold">Beautez Telehealth</a>
                </div>
                <div class="flex items-center space-x-2 sm:space-x-4">
                    <?php if(auth()->guard()->check()): ?>
                        <?php
                            $user = auth()->user();
                            $unreadCount = $user->unreadNotifications()->count();
                            $notificationRoute = '#';
                            if ($user->role === 'admin') {
                                $notificationRoute = route('admin.notifications');
                            } elseif ($user->role === 'doctor') {
                                $notificationRoute = route('doctor.notifications');
                            } elseif ($user->role === 'pharmacist') {
                                $notificationRoute = route('pharmacist.notifications');
                            }
                        ?>
                        
                        <a href="<?php echo e($notificationRoute); ?>" class="relative p-2 hover:bg-[#db2777] rounded transition">
                            <i class="fas fa-bell text-lg sm:text-xl"></i>
                            <?php if($unreadCount > 0): ?>
                                <span class="absolute top-0 right-0 bg-[#fbbf24] text-black text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">
                                    <?php echo e($unreadCount > 9 ? '9+' : $unreadCount); ?>

                                </span>
                            <?php endif; ?>
                        </a>
                        
                        <span class="text-xs sm:text-sm hidden sm:inline"><?php echo e($user->name); ?></span>
                        <form method="POST" action="<?php echo e(route('logout')); ?>">
                            <?php echo csrf_field(); ?>
                            <button type="submit" class="bg-[#db2777] hover:bg-[#be185d] px-2 sm:px-4 py-2 rounded text-sm sm:text-base">
                                <i class="fas fa-sign-out-alt"></i> <span class="hidden sm:inline">Logout</span>
                            </button>
                        </form>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </nav>

    <main class="py-6">
        <?php if(session('success')): ?>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-4">
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                    <?php echo e(session('success')); ?>

                </div>
            </div>
        <?php endif; ?>

        <?php if($errors->any()): ?>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-4">
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                    <ul>
                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li><?php echo e($error); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            </div>
        <?php endif; ?>

        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <script>
        let currentSlide = 0;
        const totalSlides = 2;
        const carousel = document.getElementById('banner-carousel');
        
        function goToSlide(slideIndex) {
            currentSlide = slideIndex;
            carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
            updateIndicators();
        }
        
        function updateIndicators() {
            for (let i = 0; i < totalSlides; i++) {
                const indicator = document.getElementById(`indicator-${i}`);
                if (indicator) {
                    indicator.style.opacity = i === currentSlide ? '1' : '0.5';
                }
            }
        }
        
        function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            goToSlide(currentSlide);
        }
        
        // Auto-rotate carousel every 5 seconds
        setInterval(nextSlide, 5000);
        
        // Initialize
        updateIndicators();
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>

<?php /**PATH C:\Users\BrainTech\Documents\BEAUTEZ SYSTEM\resources\views/layouts/app.blade.php ENDPATH**/ ?>