<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Dashboard') — {{ config('app.name', 'CRM') }}</title>
    <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=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    @if(app()->getLocale() === 'ar')
        <link rel="stylesheet" href="{{ asset('css/rtl.css') }}">
    @endif
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
@php($navUser = auth()->user())
<div class="app-shell" id="app-shell">
    <aside class="sidebar" aria-label="Main navigation">
        <div class="sidebar-brand">
            <span class="sidebar-brand-mark" aria-hidden="true"></span>
            <span class="sidebar-brand-text">{{ config('app.name', 'CRM') }}</span>
            <button type="button" class="sidebar-collapse-toggle" id="sidebar-toggle" aria-expanded="true" aria-controls="sidebar-nav" aria-label="Collapse sidebar">
                <svg class="sidebar-toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
        </div>
        <div class="sidebar-scroll">
            <ul class="sidebar-nav" id="sidebar-nav">
                <li class="sidebar-section-label">{{ __('clinic.overview') }}</li>
                <li>
                    <a href="{{ route('dashboard') }}" class="sidebar-link {{ request()->routeIs('dashboard') ? 'active' : '' }}" title="{{ __('clinic.dashboard') }}">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                        </span>
                        <span class="sidebar-link-label">{{ __('clinic.dashboard') }}</span>
                    </a>
                </li>
                
                <li class="sidebar-section-label">{{ __('clinic.patients') }}</li>
                <li>
                    <a href="{{ route('patients.index') }}" class="sidebar-link {{ request()->routeIs('patients.*') ? 'active' : '' }}" title="{{ __('clinic.patients') }}">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        </span>
                        <span class="sidebar-link-label">{{ __('clinic.patients') }}</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('visits.index') }}" class="sidebar-link {{ request()->routeIs('visits.*') ? 'active' : '' }}" title="{{ __('clinic.visits') }}">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
                        </span>
                        <span class="sidebar-link-label">{{ __('clinic.visits') }}</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('invoices.index') }}" class="sidebar-link {{ request()->routeIs('invoices.*') ? 'active' : '' }}" title="{{ __('clinic.invoices') }}">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                        </span>
                        <span class="sidebar-link-label">{{ __('clinic.invoices') }}</span>
                    </a>
                </li>

                <li class="sidebar-section-label">Sales (CRM)</li>
                <li>
                    <a href="{{ route('pipeline.index') }}" class="sidebar-link {{ request()->routeIs('pipeline.*') ? 'active' : '' }}" title="Pipeline">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>
                        </span>
                        <span class="sidebar-link-label">Pipeline</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('leads.index') }}" class="sidebar-link {{ request()->routeIs('leads.*') ? 'active' : '' }}" title="Leads">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        </span>
                        <span class="sidebar-link-label">Leads</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('customers.index') }}" class="sidebar-link {{ request()->routeIs('customers.*') ? 'active' : '' }}" title="Customers">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                        </span>
                        <span class="sidebar-link-label">Customers</span>
                    </a>
                </li>
                <li class="sidebar-section-label">Work</li>
                <li>
                    <a href="{{ route('tasks.index') }}" class="sidebar-link {{ request()->routeIs('tasks.*') ? 'active' : '' }}" title="Tasks">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                        </span>
                        <span class="sidebar-link-label">Tasks</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('notifications.index') }}" class="sidebar-link {{ request()->routeIs('notifications.*') ? 'active' : '' }}" title="Notifications">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                        </span>
                        <span class="sidebar-link-label">Notifications</span>
                        @if(($unreadNotifications ?? 0) > 0)
                            <span class="sidebar-badge">{{ $unreadNotifications }}</span>
                        @endif
                    </a>
                </li>
                <li class="sidebar-section-label">Insights</li>
                <li>
                    <a href="{{ route('reports.index') }}" class="sidebar-link {{ request()->routeIs('reports.*') ? 'active' : '' }}" title="Reports">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                        </span>
                        <span class="sidebar-link-label">Reports</span>
                    </a>
                </li>
                @can('update', $navUser->company)
                <li class="sidebar-section-label">{{ __('clinic.settings') }}</li>
                <li>
                    <a href="{{ route('settings.edit') }}" class="sidebar-link {{ request()->routeIs('settings.*') ? 'active' : '' }}" title="{{ __('clinic.settings') }}">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
                        </span>
                        <span class="sidebar-link-label">{{ __('clinic.settings') }}</span>
                    </a>
                </li>
                @endcan
                @can('viewAny', App\Models\User::class)
                <li>
                    <a href="{{ route('team.index') }}" class="sidebar-link {{ request()->routeIs('team.*') ? 'active' : '' }}" title="{{ __('clinic.team') }}">
                        <span class="sidebar-link-icon" aria-hidden="true">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        </span>
                        <span class="sidebar-link-label">{{ __('clinic.team') }}</span>
                    </a>
                </li>
                @endcan
            </ul>
        </div>
    </aside>
    <div class="main">
        <header class="topbar">
            <div class="topbar-leading">
                <h1 class="topbar-heading">@yield('heading', 'Overview')</h1>
                @hasSection('subheading')
                    <p class="topbar-sub">@yield('subheading')</p>
                @endif
            </div>
            <div class="topbar-actions">
                @if(app()->getLocale() === 'ar')
                    <a href="{{ route('locale.switch', 'en') }}" class="lang-switcher-btn">English</a>
                @else
                    <a href="{{ route('locale.switch', 'ar') }}" class="lang-switcher-btn">العربية</a>
                @endif
                <span class="pill pill-muted" title="{{ __('clinic.current_workspace') }}">{{ $navUser->company->name ?? '' }}</span>
                <div class="user-chip" title="{{ $navUser->email }}">
                    <span class="user-chip-avatar" aria-hidden="true">{{ strtoupper(\Illuminate\Support\Str::substr($navUser->name, 0, 1)) }}</span>
                    <span class="user-chip-meta">
                        <span class="user-chip-name">{{ $navUser->name }}</span>
                        @if($navUser->roles->isNotEmpty())
                            <span class="user-chip-role">{{ $navUser->roles->pluck('name')->join(' · ') }}</span>
                        @endif
                    </span>
                </div>
                <button type="button" class="btn btn-icon btn-ghost" id="theme-toggle" title="Theme" aria-label="Toggle dark mode">
                    <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
                    <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
                </button>
                <form method="POST" action="{{ route('logout') }}" class="mb-0">
                    @csrf
                    <button type="submit" class="btn btn-ghost btn-sm">{{ __('clinic.logout') }}</button>
                </form>
            </div>
        </header>
        <main class="content content-fade" id="main-content" tabindex="-1">
            @include('partials.flash')
            @yield('content')
        </main>
    </div>
</div>
<script>
(function () {
    var k = 'crm-theme';
    function applyIcon() {
        var dark = document.documentElement.classList.contains('dark');
        document.querySelectorAll('.icon-sun').forEach(function (el) { el.style.display = dark ? 'none' : 'block'; });
        document.querySelectorAll('.icon-moon').forEach(function (el) { el.style.display = dark ? 'block' : 'none'; });
    }
    if (localStorage.getItem(k) === 'dark') document.documentElement.classList.add('dark');
    applyIcon();
    document.getElementById('theme-toggle').addEventListener('click', function () {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem(k, document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        applyIcon();
        window.dispatchEvent(new Event('crm-theme-change'));
    });

    var sk = 'crm-sidebar-collapsed';
    var shell = document.getElementById('app-shell');
    var toggle = document.getElementById('sidebar-toggle');
    var mqSidebar = window.matchMedia('(max-width: 768px)');
    function syncSidebar() {
        if (!shell || !toggle) return;
        var collapsed = shell.classList.contains('sidebar-collapsed');
        toggle.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
        toggle.setAttribute('aria-label', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
        var icon = toggle.querySelector('.sidebar-toggle-icon');
        if (icon) icon.style.transform = collapsed ? 'rotate(180deg)' : '';
    }
    function applySidebarLayout() {
        if (!shell) return;
        if (mqSidebar.matches) {
            shell.classList.remove('sidebar-collapsed');
        } else if (localStorage.getItem(sk) === '1') {
            shell.classList.add('sidebar-collapsed');
        } else {
            shell.classList.remove('sidebar-collapsed');
        }
        syncSidebar();
    }
    applySidebarLayout();
    mqSidebar.addEventListener('change', applySidebarLayout);
    if (toggle) toggle.addEventListener('click', function () {
        if (mqSidebar.matches) return;
        shell.classList.toggle('sidebar-collapsed');
        localStorage.setItem(sk, shell.classList.contains('sidebar-collapsed') ? '1' : '0');
        syncSidebar();
    });
})();
</script>
@stack('scripts')
</body>
</html>
