@php
    try {
        $businessName = \App\Models\Setting::where('key', 'business_name')->value('value') ?? 'RentTrack Pro';
        $businessLogo = \App\Models\Setting::where('key', 'business_logo')->value('value');
        $businessFavicon = \App\Models\Setting::where('key', 'business_favicon')->value('value');
    } catch (\Exception $e) {
        $businessName = 'RentTrack Pro';
        $businessLogo = null;
        $businessFavicon = null;
    }

    // Helper function to handle cPanel public_html document root path differences
    $resolveFilePath = function ($relativePath) {
        if (empty($relativePath)) return null;
        if (file_exists(public_path($relativePath))) {
            return public_path($relativePath);
        }
        if (file_exists(base_path('public_html/' . $relativePath))) {
            return base_path('public_html/' . $relativePath);
        }
        return null;
    };

    $fallbackLogo = null;
    foreach (['logo.png', 'logo.jpg', 'logo.jpeg', 'logo.svg', 'logo.webp'] as $file) {
        $resolvedPath = $resolveFilePath($file);
        if ($resolvedPath) {
            $fallbackLogo = $file;
            break;
        }
    }

    // Smart logo URL resolution
    $logoUrl = null;
    if ($businessLogo) {
        $resolvedLogo = $resolveFilePath($businessLogo);
        if ($resolvedLogo) {
            try { $v = filemtime($resolvedLogo); $logoUrl = asset($businessLogo) . '?v=' . $v; } catch (\Exception $e) { $logoUrl = asset($businessLogo); }
        } else {
            $resolvedStorageLogo = $resolveFilePath('storage/' . $businessLogo);
            if ($resolvedStorageLogo) {
                try { $v = filemtime($resolvedStorageLogo); $logoUrl = asset('storage/' . $businessLogo) . '?v=' . $v; } catch (\Exception $e) { $logoUrl = asset('storage/' . $businessLogo); }
            } else {
                $logoUrl = asset('storage/' . $businessLogo);
            }
        }
    } elseif ($fallbackLogo) {
        $resolvedFallback = $resolveFilePath($fallbackLogo);
        try { $v = filemtime($resolvedFallback); $logoUrl = asset($fallbackLogo) . '?v=' . $v; } catch (\Exception $e) { $logoUrl = asset($fallbackLogo); }
    }

    // Smart favicon URL resolution
    $faviconUrl = asset('favicon.ico');
    if ($businessFavicon) {
        $resolvedFavicon = $resolveFilePath($businessFavicon);
        if ($resolvedFavicon) {
            try { $v = filemtime($resolvedFavicon); $faviconUrl = asset($businessFavicon) . '?v=' . $v; } catch (\Exception $e) { $faviconUrl = asset($businessFavicon); }
        }
    } else {
        $resolvedFaviconIco = $resolveFilePath('favicon.ico');
        if ($resolvedFaviconIco) {
            try { $v = filemtime($resolvedFaviconIco); $faviconUrl = asset('favicon.ico') . '?v=' . $v; } catch (\Exception $e) { $faviconUrl = asset('favicon.ico'); }
        }
    }
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $businessName }}</title>

    <!-- Favicon -->
    <link rel="icon" href="{{ $faviconUrl }}">
    <link rel="shortcut icon" href="{{ $faviconUrl }}">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- PWA Settings -->
    <link rel="manifest" href="{{ asset('manifest.json') }}">
    <meta name="theme-color" content="#059669">
    <link class="apple-touch-icon" rel="apple-touch-icon" href="{{ asset('icon-192.png') }}">

    <style>
        html, body {
            font-family: 'Outfit', sans-serif;
            max-width: 100%;
            overflow-x: hidden;
            position: relative;
        }
        [x-cloak] { display: none !important; }
        
        .ios-icon-container {
            border-radius: 22.5%;
            aspect-ratio: 1 / 1;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }
        .ios-icon-container:hover {
            transform: scale(1.07) translateY(-4px);
            box-shadow: 0 16px 24px -8px rgba(0, 0, 0, 0.15);
        }
        .header-icon-size {
            width: 50px;
            height: 50px;
            flex-shrink: 0;
        }
        @media (min-width: 768px) {
            .header-icon-size {
                width: 60px;
                height: 60px;
            }
        }
        @media (min-width: 1024px) {
            .header-icon-size {
                width: 69px;
                height: 69px;
            }
        }

        /* Page transition animations */
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in { animation: fadeIn 0.3s ease-out; }
        .animate-slide-up { animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

        /* Global calendar picker styling */
        input[type="date"],
        input[type="date"]:focus,
        input[type="date"]:active {
            color-scheme: light !important;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat !important;
            cursor: pointer !important;
            opacity: 1 !important;
        }

    </style>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-white text-slate-800 min-h-screen flex flex-col antialiased overflow-x-hidden">
    <!-- PWA Service Worker Registration -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js').catch(err => {
                    console.log('SW registration failed: ', err);
                });
            });
        }
    </script>

    <!-- Top Navigation Bar -->
    <nav class="sticky top-0 z-50 bg-white border-b border-slate-200 px-4 py-3 md:px-6">
        <div class="max-w-7xl mx-auto flex items-center justify-between relative">

            @php
                $isDashboard = request()->routeIs('dashboard');
                $logoLink = route('dashboard');
            @endphp

            <!-- LEFT: Logo + Business Name (dashboard) or Back to Dashboard (other pages) -->
            @if($isDashboard)
                <!-- Dashboard: logo + business name, always visible -->
                <a href="{{ route('dashboard') }}" class="flex items-center space-x-2 hover:opacity-90 transition">
                    @if($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $businessName }} Logo" class="h-8 w-auto object-contain rounded-md">
                    @else
                        <div class="flex items-center justify-center w-8 h-8 bg-brand-500 rounded-lg shadow-sm">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                        </div>
                    @endif
                    <span class="font-bold text-lg tracking-tight text-slate-800 hidden sm:inline">{{ $businessName }}</span>
                </a>
            @else
                <!-- Back to Dashboard button on the left (visible on both mobile and desktop) -->
                <div class="flex items-center space-x-2">
                    @if($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $businessName }} Logo" class="h-8 w-auto object-contain rounded-md hidden sm:block">
                    @else
                        <div class="flex items-center justify-center w-8 h-8 bg-brand-500 rounded-lg shadow-sm hidden sm:flex">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                            </svg>
                        </div>
                    @endif
                    <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-brand-500 hover:bg-brand-600 text-white font-semibold rounded-xl text-xs sm:text-sm transition duration-150 shadow-sm">
                        <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
                        </svg>
                        Back to Dashboard
                    </a>
                </div>
            @endif

            <!-- Right Side: User Dropdown -->
            <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                <button @click="open = !open" 
                        class="flex items-center space-x-2 py-1.5 px-3 bg-brand-500 hover:bg-brand-600 text-white rounded-xl transition duration-150 text-sm shadow-sm">
                    <span class="w-6 h-6 rounded-full bg-white/20 text-white flex items-center justify-center font-bold text-xs uppercase">
                        {{ substr(auth()->user()->name ?? 'U', 0, 1) }}
                    </span>
                    <span class="font-medium hidden md:inline">{{ auth()->user()->name }}</span>
                    <svg class="w-4 h-4 text-white/70 transition-transform duration-150" :class="{'rotate-180': open}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>

                <!-- Dropdown items -->
                <div x-show="open" 
                     x-transition:enter="transition ease-out duration-100"
                     x-transition:enter-start="transform opacity-0 scale-95"
                     x-transition:enter-end="transform opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-75"
                     x-transition:leave-start="transform opacity-100 scale-100"
                     x-transition:leave-end="transform opacity-0 scale-95"
                     x-cloak
                     class="absolute right-0 mt-2 w-48 bg-white border border-slate-200 rounded-2xl shadow-lg py-1 z-50">
                    
                    <a href="{{ route('profile.edit') }}" class="flex items-center px-4 py-2 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition duration-150">
                        <svg class="w-4 h-4 mr-2.5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                        My Profile
                    </a>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="flex items-center w-full text-left px-4 py-2 text-sm text-rose-600 hover:bg-rose-50 hover:text-rose-700 transition duration-150">
                            <svg class="w-4 h-4 mr-2.5 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                            </svg>
                            Logout
                        </button>
                    </form>
                </div>
            </div>

        </div>
    </nav>

    <!-- Main Content Grid -->
    <main class="flex-1 max-w-7xl w-full mx-auto p-4 md:p-6 relative overflow-x-hidden">
        <!-- Session Banners -->
        @if(session('success'))
            <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm rounded-xl flex items-center">
                <svg class="w-5 h-5 mr-2.5 text-emerald-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 p-4 bg-rose-50 border border-rose-200 text-rose-800 text-sm rounded-xl flex items-center">
                <svg class="w-5 h-5 mr-2.5 text-rose-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
                {{ session('error') }}
            </div>
        @endif

        {{ $slot }}
    </main>

    <!-- Footer -->
    <footer class="bg-brand-600 border-t border-brand-500 px-4 py-4 text-center text-xs text-white font-semibold">
        &copy; {{ date('Y') }} Que Property Group Ltd. All rights reserved. developed by (Arslan Studio)
    </footer>
</body>
</html>
