<!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>{{ isset($title) ? $title . ' | ' . config('app.name', 'Real Estate CRM') : config('app.name', 'Real Estate CRM') }}</title>

        <!-- 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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
        
        <style>
            body { font-family: 'Inter', sans-serif; }
            [x-cloak] { display: none !important; }
        </style>

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            primary: {
                                50: '#f0fdf4',
                                100: '#dcfce7',
                                500: '#22c55e',
                                600: '#16a34a',
                                700: '#15803d',
                                900: '#14532d',
                            },
                            secondary: '#1e293b'
                        }
                    }
                }
            }
        </script>
        
        <!-- Alpine.js -->
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

        <!-- Chart.js -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

        <!-- TomSelect for searchable dropdowns -->
        <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.default.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>

        <!-- Custom Styling -->
        <style>
            .ts-control { border-color: #d1d5db !important; border-radius: 0.375rem !important; padding: 0.5rem 0.75rem !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
            .ts-control > input { font-size: 0.875rem !important; }

            @keyframes ring {
                0% { transform: rotate(0); }
                10% { transform: rotate(15deg); }
                20% { transform: rotate(-10deg); }
                30% { transform: rotate(5deg); }
                40% { transform: rotate(-5deg); }
                50% { transform: rotate(0); }
                100% { transform: rotate(0); }
            }
        </style>
    </head>
    <body class="font-sans text-gray-800 antialiased bg-gray-50 flex h-screen overflow-hidden" x-data="{ sidebarOpen: false }">
        
        @if(Auth::check())
        <!-- Mobile Sidebar Overlay -->
        <div x-show="sidebarOpen" x-transition.opacity class="fixed inset-0 z-20 bg-gray-900/50 lg:hidden" @click="sidebarOpen = false" x-cloak></div>

        <!-- Sidebar -->
        <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="fixed inset-y-0 left-0 z-30 w-64 bg-secondary text-gray-300 transition-transform duration-300 lg:static lg:translate-x-0 flex flex-col h-full border-r border-gray-800 shadow-xl">
            <!-- Sidebar Header -->
            <div class="flex items-center justify-between h-16 px-6 bg-gray-900 border-b border-gray-800">
                <a href="{{ route('dashboard') }}" class="flex items-center gap-2 text-white font-bold text-xl tracking-tight">
                    <div class="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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" />
                        </svg>
                    </div>
                    <span>CRM Pro</span>
                </a>
                <button @click="sidebarOpen = false" class="lg:hidden text-gray-400 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>

            <!-- Sidebar Navigation -->
            <nav class="flex-1 overflow-y-auto py-4 px-3 space-y-1 custom-scrollbar">
                @if(Auth::user()->hasRole('Customer'))
                    <!-- Customer Portal Menu -->
                    <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">My Portal</p>
                    <a href="{{ url('/portal/dashboard') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->is('portal/dashboard') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->is('portal/dashboard') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                        Dashboard
                    </a>
                    <a href="{{ url('/portal/installments') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->is('portal/installments') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->is('portal/installments') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        My Installments
                    </a>
                    <a href="{{ url('/portal/documents') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->is('portal/documents') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->is('portal/documents') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                        My Documents
                    </a>
                    <a href="{{ url('/portal/quotations') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->is('portal/quotations') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->is('portal/quotations') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                        My Quotations
                    </a>
                    <a href="{{ url('/portal/invoices') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->is('portal/invoices') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->is('portal/invoices') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        Invoices & Receipts
                    </a>
                    <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-6">Settings</p>
                    <a href="{{ url('/portal/profile') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->is('portal/profile') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                        <svg class="w-5 h-5 mr-3 {{ request()->is('portal/profile') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                @else
                @can('view_dashboard')
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main Menu</p>
                <a href="{{ route('dashboard') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('dashboard') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('dashboard') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                    Dashboard
                </a>
                @endcan
                
                @if(Auth::user()->can('view_leads') || Auth::user()->can('view_customers'))
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-6">CRM</p>
                @can('view_leads')
                <a href="{{ route('leads.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('leads.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('leads.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                    Leads
                </a>
                @endcan
                @can('view_customers')
                <a href="{{ route('customers.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('customers.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('customers.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                    Customers
                </a>
                @endcan
                @endif
                
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-6">Team & Partners</p>
                @can('view_agents')
                <a href="{{ route('agents.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('agents.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('agents.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                    Sales Agents
                </a>
                @endcan
                <a href="{{ route('attendance.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('attendance.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('attendance.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Attendance
                </a>
                @can('view_dealers')
                <a href="{{ route('dealers.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('dealers.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('dealers.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                    Channel Partners
                </a>
                @endcan
                @can('view_vendors')
                <a href="{{ route('vendors.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('vendors.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('vendors.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                    Vendors & Contractors
                </a>
                @endcan
                @can('view_site_surveys')
                <a href="{{ route('site-surveys.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('site-surveys.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('site-surveys.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path></svg>
                    Site Surveys
                </a>
                @endcan
                @can('view_follow_ups')
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-6">Activity</p>
                <a href="{{ route('follow-ups.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('follow-ups.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('follow-ups.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    Follow-ups
                </a>
                @endcan

                @if(Auth::user()->hasAnyPermission(['view_properties', 'view_projects']))
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-6">Inventory</p>
                @can('view_properties')
                <a href="{{ route('properties.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('properties.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('properties.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                    Properties
                </a>
                @endcan
                @can('view_projects')
                <a href="{{ route('projects.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('projects.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('projects.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                    Projects & Blocks
                </a>
                @endcan
                @endif

                @if(Auth::user()->hasAnyPermission(['view_quotations', 'view_bookings', 'view_agreements', 'view_rentals', 'view_installment_plans', 'view_invoices', 'view_transactions']))
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-6">Sales & Finance</p>
                @can('view_quotations')
                @can('view_expenses')
                <a href="{{ route('expenses.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('expenses.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('expenses.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Expenses
                </a>
                @endcan
                <a href="{{ route('quotations.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('quotations.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('quotations.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    Quotations
                </a>
                @endcan
                @can('view_bookings')
                <a href="{{ route('bookings.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('bookings.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('bookings.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    Bookings / Sales
                </a>
                <a href="{{ route('property-transfers.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('property-transfers.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('property-transfers.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                    Plot Transfers
                </a>
                @endcan
                @can('view_agreements')
                <a href="{{ route('agreements.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('agreements.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('agreements.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    Agreements
                </a>
                @endcan
                @can('view_rentals')
                <a href="{{ route('rentals.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('rentals.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('rentals.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                    Property Rentals
                </a>
                @endcan
                @can('view_installment_plans')
                <a href="{{ route('installment-plans.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('installment-plans.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('installment-plans.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Installment Plans
                </a>
                @endcan
                @can('view_invoices')
                <a href="{{ route('invoices.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('invoices.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('invoices.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    Invoices & Receipts
                </a>
                @endcan
                @can('view_transactions')
                <a href="{{ route('transactions.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('transactions.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('transactions.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                    Transaction Logs
                </a>
                @endcan
                @endif

                @if(Auth::user()->hasAnyPermission(['view_reports', 'view_users', 'view_settings', 'view_activity_logs', 'view_master_data']))
                <p class="px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 mt-6">Analytics & System</p>
                @can('view_reports')
                <a href="{{ route('reports.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('reports.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('reports.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    Report Builder
                </a>
                <a href="{{ route('notifications.create') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('notifications.create') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('notifications.create') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path></svg>
                    Send Notifications
                </a>
                @endcan
                @can('view_users')
                <a href="{{ route('users.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('users.*') || request()->routeIs('roles.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('users.*') || request()->routeIs('roles.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                    Users & Roles
                </a>
                <a href="{{ route('admin.otp.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('admin.otp.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('admin.otp.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path></svg>
                    OTP Requests
                </a>
                @endcan
                @can('view_settings')
                <a href="{{ route('settings.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('settings.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="w-5 h-5 mr-3 {{ request()->routeIs('settings.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                    Settings
                </a>
                @endcan
                @can('view_activity_logs')
                <a href="{{ route('activity-logs.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('activity-logs.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="h-5 w-5 mr-3 {{ request()->routeIs('activity-logs.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                    System Logs
                </a>
                @endcan
                @can('view_master_data')
                <a href="{{ route('master-data.index') }}" class="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg {{ request()->routeIs('master-data.*') ? 'bg-primary-600 text-white shadow-md shadow-primary-900/20' : 'text-gray-300 hover:bg-gray-800 hover:text-white transition-colors' }}">
                    <svg class="h-5 w-5 mr-3 {{ request()->routeIs('master-data.*') ? 'text-white' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
                    Master Data
                </a>
                @endcan
                @endif
                @endif
            </nav>

            <!-- Sidebar User Profile -->
            <div class="p-4 border-t border-gray-800">
                <div class="flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors cursor-pointer" x-data="{ userMenuOpen: false }" @click.outside="userMenuOpen = false">
                    <div class="flex items-center" @click="userMenuOpen = !userMenuOpen">
                        <img class="h-8 w-8 rounded-full bg-gray-700 object-cover" src="https://ui-avatars.com/api/?name={{ urlencode(Auth::user()->name) }}&background=22c55e&color=fff" alt="">
                        <div class="ml-3 truncate">
                            <p class="text-sm font-medium text-white">{{ Auth::user()->name }}</p>
                            <p class="text-xs text-gray-500">{{ Auth::user()->roles->pluck('name')->first() ?? 'User' }}</p>
                        </div>
                    </div>
                    
                    <!-- Logout Dropdown in Sidebar -->
                    <div x-show="userMenuOpen" x-transition x-cloak class="absolute bottom-16 left-4 w-56 bg-white rounded-lg shadow-lg py-1 border border-gray-200 text-gray-800">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                Sign out
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </aside>
        @endif
        <!-- Main Content -->
        <div class="flex-1 flex flex-col h-screen overflow-hidden">
            <!-- Top Navigation -->
            <header class="bg-white shadow-sm h-16 flex items-center justify-between px-6 z-10 sticky top-0">
                <div class="flex items-center flex-1">
                    <button @click="sidebarOpen = true" class="text-gray-500 focus:outline-none lg:hidden mr-4">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                    </button>
                    <!-- Search Bar -->
                    <div class="hidden sm:block max-w-md w-full relative ml-4" x-data="{ query: '', results: [], show: false, search() {
                        if(this.query.length < 2) { this.results = []; this.show = false; return; }
                        fetch('{{ route('search.global') }}?q=' + this.query)
                            .then(res => res.json())
                            .then(data => { this.results = data; this.show = true; });
                    }}">
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                            </div>
                            <input type="text" x-model="query" @input.debounce.300ms="search" @click.away="show = false" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:bg-white sm:text-sm transition duration-150 ease-in-out" placeholder="Search leads, customers, properties...">
                        </div>

                        <!-- Search Dropdown -->
                        <div x-show="show" style="display: none;" class="absolute z-50 mt-1 w-full bg-white shadow-lg rounded-md border border-gray-200 max-h-96 overflow-y-auto">
                            <ul class="divide-y divide-gray-100">
                                <template x-for="result in results" :key="result.url">
                                    <li>
                                        <a :href="result.url" class="block hover:bg-gray-50 p-3 transition-colors">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-8 w-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center">
                                                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="result.icon"></path></svg>
                                                </div>
                                                <div class="ml-3">
                                                    <p class="text-sm font-medium text-gray-900 flex items-center">
                                                        <span x-text="result.title"></span>
                                                        <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800" x-text="result.type"></span>
                                                    </p>
                                                    <p class="text-xs text-gray-500" x-text="result.subtitle"></p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </template>
                                <li x-show="results.length === 0" class="p-4 text-sm text-gray-500 text-center">No results found for "<span x-text="query"></span>"</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="flex items-center gap-4">
                    <!-- Self-Service Attendance -->
                    @php
                        $userAgent = \App\Models\AgentProfile::where('user_id', Auth::id())->first();
                        $todayAttendance = null;
                        if ($userAgent) {
                            $todayAttendance = \App\Models\Attendance::where('agent_profile_id', $userAgent->id)
                                ->where('date', date('Y-m-d'))
                                ->first();
                        }
                    @endphp
                    @if($userAgent && !Auth::user()->hasRole('Customer'))
                        <form action="{{ route('attendance.self-log') }}" method="POST" class="mr-2 hidden sm:block">
                            @csrf
                            @if(!$todayAttendance)
                                <button type="submit" class="bg-green-100 text-green-700 hover:bg-green-200 px-3 py-1.5 rounded-md text-sm font-semibold transition-colors flex items-center shadow-sm">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
                                    Check In
                                </button>
                            @elseif(!$todayAttendance->check_out)
                                <button type="submit" class="bg-yellow-100 text-yellow-700 hover:bg-yellow-200 px-3 py-1.5 rounded-md text-sm font-semibold transition-colors flex items-center shadow-sm">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                                    Check Out
                                </button>
                            @else
                                <span class="bg-gray-100 text-gray-500 px-3 py-1.5 rounded-md text-sm font-semibold flex items-center">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                    Checked Out
                                </span>
                            @endif
                        </form>
                    @endif

                    <!-- Guide Link -->
                    <a href="{{ route('guide') }}" class="text-gray-500 hover:text-primary-600 font-medium text-sm flex items-center transition-colors mr-2">
                        <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                        <span class="hidden sm:inline">Guide</span>
                    </a>

                    <!-- Notifications Dropdown -->
                    <div class="relative" x-data="{ 
                        open: false, 
                        notifications: [],
                        lastCount: 0,
                        init() {
                            this.fetchNotifications();
                            setInterval(() => this.fetchNotifications(), 60000);
                        },
                        playSound() {
                            let audio = new Audio('https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3');
                            audio.volume = 0.5;
                            audio.play().catch(e => console.log('Audio autoplay prevented by browser'));
                        },
                        fetchNotifications() {
                            fetch('{{ route('notifications.index') }}')
                                .then(res => res.json())
                                .then(data => { 
                                    this.notifications = data.notifications; 
                                    if (this.notifications.length > 0) {
                                        // Play sound if we have unread notifications (every minute or on new)
                                        this.playSound();
                                    }
                                    this.lastCount = this.notifications.length;
                                });
                        },
                        markAsRead(id) {
                            fetch(`{{ url('/notifications') }}/${id}/read`, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                                    'Content-Type': 'application/json'
                                }
                            }).then(() => this.fetchNotifications());
                        }
                    }">
                        <button @click="open = !open" @click.away="open = false" class="relative p-2 text-gray-400 hover:text-gray-500 focus:outline-none rounded-full hover:bg-gray-100 transition-colors">
                            <span x-show="notifications.length > 0" class="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500 border-2 border-white" x-cloak></span>
                            <svg :class="notifications.length > 0 ? 'animate-[ring_2s_ease-in-out_infinite]' : ''" class="h-6 w-6 origin-top" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                        </button>
                        <div x-show="open" style="display: none;" class="absolute right-0 mt-2 w-80 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
                            <div class="py-2 px-4 border-b border-gray-100 flex justify-between items-center">
                                <h3 class="text-sm font-semibold text-gray-900">Notifications</h3>
                                <span class="text-xs text-primary-600 font-medium" x-text="notifications.length + ' new'"></span>
                            </div>
                            <div class="max-h-64 overflow-y-auto">
                                <template x-for="notif in notifications" :key="notif.id">
                                    <div @click="markAsRead(notif.id)" class="px-4 py-3 text-sm text-gray-500 border-b border-gray-100 bg-blue-50/50 hover:bg-blue-100/50 cursor-pointer transition-colors">
                                        <p class="font-medium text-gray-900" x-text="notif.data.title"></p>
                                        <p x-text="notif.data.message"></p>
                                        <p class="text-xs text-gray-400 mt-1">Click to mark as read</p>
                                    </div>
                                </template>
                                <div x-show="notifications.length === 0" class="px-4 py-6 text-center text-sm text-gray-500">
                                    No new notifications.
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Add Dropdown -->
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" @click.away="open = false" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none transition-colors">
                            <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                            <span class="hidden sm:inline">Quick Add</span>
                        </button>
                        <div x-show="open" style="display: none;" class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
                            <div class="py-1" role="menu">
                                @if(Auth::user()->hasRole('Customer'))
                                    <a href="{{ url('/portal/installments') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Make Payment</a>
                                @else
                                    <a href="{{ route('leads.create') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Add Lead</a>
                                    <a href="{{ route('customers.create') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Add Customer</a>
                                    <a href="{{ route('properties.create') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Add Property</a>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Profile Dropdown -->
                    <div class="relative ml-2" x-data="{ open: false }">
                        <button @click="open = !open" @click.away="open = false" class="flex items-center max-w-xs text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            <div class="h-8 w-8 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-bold">
                                {{ Auth::check() ? substr(Auth::user()->name, 0, 1) : 'A' }}
                            </div>
                        </button>
                        <div x-show="open" style="display: none;" class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
                            <div class="px-4 py-3 border-b border-gray-100">
                                <p class="text-sm text-gray-900 font-medium">{{ Auth::check() ? Auth::user()->name : 'Admin' }}</p>
                                <p class="text-xs text-gray-500 truncate">{{ Auth::check() ? Auth::user()->email : 'admin@example.com' }}</p>
                            </div>
                            <div class="py-1" role="menu">
                                <a href="{{ route('settings.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50" role="menuitem">Sign out</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Main Page Content -->
            <main class="flex-1 overflow-y-auto bg-gray-50/50 p-4 sm:p-6 lg:p-8">
                @if (isset($header))
                    <div class="mb-6">
                        {{ $header }}
                    </div>
                @endif
                {{ $slot }}
            </main>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('select:not(.no-search)').forEach((el) => {
                    new TomSelect(el, {
                        create: false,
                        sortField: {
                            field: "text",
                            direction: "asc"
                        }
                    });
                });
            });
        </script>
        @stack('scripts')
    </body>
</html>
