@extends('layouts.base')

@php
    $user = auth()->user();
    $clinic = $user?->clinic;
    $plan = $clinic?->currentPlan();
    $nav = [
        ['route' => 'portal.dashboard', 'label' => __('nav.dashboard'), 'icon' => 'M2.25 12l8.954-8.955a1.5 1.5 0 012.122 0L22.28 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75'],
        ['route' => 'portal.reviewers.index', 'label' => __('nav.patients'), 'icon' => 'M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z'],
        ['route' => 'portal.attachments.index', 'label' => __('attachments.title'), 'icon' => 'M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13'],
        // ['route' => 'portal.menus.index', 'label' => __('nav.menus'), 'icon' => 'M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z'],
    ];

    if ($user?->isConsultant()) {
        $nav[] = ['route' => 'portal.appointments.index', 'label' => __('nav.appointments'), 'icon' => 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-13.5-6h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm3-3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm3-3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z'];
        $nav[] = ['route' => 'portal.time-slots.index', 'label' => __('nav.time_slots'), 'icon' => 'M12 6v6h4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'];
        // $nav[] = ['route' => 'portal.onsite-consultations.index', 'label' => __('nav.onsite_consultations'), 'icon' => 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'];
    }

    // Subscription/plans nav entry is hidden for now while billing is on hold.
    // $nav[] = ['route' => 'portal.plans.index', 'label' => __('nav.plans'), 'icon' => 'M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z'];

    if ($user?->canManageBilling()) {
        $nav[] = ['route' => 'portal.admin.dashboard', 'label' => __('nav.admin_dashboard'), 'icon' => 'M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z'];
        $nav[] = ['route' => 'portal.admin.consultants.index', 'label' => __('nav.admin_consultants'), 'icon' => 'M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z'];
        $nav[] = ['route' => 'portal.admin.attachments.index', 'label' => __('nav.admin_attachments'), 'icon' => 'M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z'];
        $nav[] = ['route' => 'portal.admin.payments.index', 'label' => __('nav.admin_payments'), 'icon' => 'M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z'];
        $nav[] = ['route' => 'portal.admin.components.index', 'label' => __('nav.admin_components'), 'icon' => 'M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z'];
    }
@endphp

@section('body')
<div class="min-h-screen bg-ink-50">

    {{-- Top bar --}}
    <header class="sticky top-0 z-40 border-b border-ink-100 bg-white">
        <div class="mx-auto flex max-w-[1600px] items-center justify-between gap-4 px-4 py-3">
            <div class="flex items-center gap-4">
                <button class="rounded-xl p-2 text-ink-500 lg:hidden" type="button"
                        data-bs-toggle="offcanvas" data-bs-target="#portalSidebar" aria-label="Menu">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
                    </svg>
                </button>
                <a href="{{ route('portal.dashboard') }}"><x-logo class="h-9 w-auto"/></a>
                @if ($clinic)
                    <span class="hidden border-s border-ink-200 ps-4 text-sm font-semibold text-ink-500 md:inline">
                        {{ $clinic->name }}
                    </span>
                @endif
            </div>

            <div class="flex items-center gap-3">
                <x-language-switcher/>

                <div class="dropdown">
                    <button class="flex items-center gap-2 rounded-full border border-ink-200 py-1 pe-3 ps-1 transition hover:border-brand-500"
                            type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-gradient text-sm font-bold text-white">
                            {{ $user?->initials() }}
                        </span>
                        <span class="hidden text-sm font-semibold text-ink-700 sm:inline">{{ $user?->name }}</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end mt-2 rounded-2xl border-ink-100 p-2 shadow">
                        <li><a class="dropdown-item rounded-xl py-2" href="{{ route('portal.profile.edit') }}">{{ __('nav.profile') }}</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="dropdown-item rounded-xl py-2 text-red-600">{{ __('auth.logout') }}</button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <div class="mx-auto flex max-w-[1600px] gap-6 px-4 py-6">

        {{-- Sidebar (desktop) --}}
        <aside class="hidden w-64 shrink-0 lg:block">
            <nav class="sticky top-24 space-y-1 rounded-3xl border border-ink-100 bg-white p-3 shadow-card">
                @foreach ($nav as $item)
                    <a href="{{ route($item['route']) }}"
                       class="nav-link-sc no-underline {{ request()->routeIs(str_replace('.index', '.*', $item['route'])) || request()->routeIs($item['route']) ? 'is-active' : '' }}">
                        <svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $item['icon'] }}"/>
                        </svg>
                        {{ $item['label'] }}
                    </a>
                @endforeach

                {{-- @if ($plan)
                    <div class="mt-4 rounded-2xl bg-ink-50 p-4">
                        <p class="text-xs font-bold uppercase tracking-wide text-ink-400">{{ __('dashboard.plan_usage') }}</p>
                        @php
                            $used = $clinic->patients()->count();
                            $limit = $plan->max_patients;
                            $pct = $limit ? min(100, (int) round($used / $limit * 100)) : 0;
                        @endphp
                        <p class="numeric mt-2 text-sm font-bold text-ink-800">
                            {{ $used }} / {{ $limit ?? __('common.unlimited') }}
                        </p>
                        <div class="mt-2 h-2 overflow-hidden rounded-full bg-ink-200">
                            <div class="h-full rounded-full bg-brand-500" style="width: {{ $limit ? $pct : 12 }}%"></div>
                        </div>
                        <p class="mt-2 text-xs text-ink-500">{{ __('billing.quota_patients_label') }}</p>
                    </div>
                @endif --}}
            </nav>
        </aside>

        {{-- Sidebar (mobile offcanvas) --}}
        <div class="offcanvas offcanvas-start" tabindex="-1" id="portalSidebar">
            <div class="offcanvas-header">
                <x-logo class="h-9 w-auto"/>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <nav class="space-y-1">
                    @foreach ($nav as $item)
                        <a href="{{ route($item['route']) }}" class="nav-link-sc no-underline">{{ $item['label'] }}</a>
                    @endforeach
                </nav>
            </div>
        </div>

        {{-- Main --}}
        <main class="min-w-0 flex-1">
            <div class="mb-5 flex flex-wrap items-end justify-between gap-4">
                <div>
                    <h1 class="text-2xl md:text-3xl">@yield('page_title')</h1>
                    @hasSection('page_subtitle')
                        <p class="mt-1 text-ink-500">@yield('page_subtitle')</p>
                    @endif
                </div>
                <div class="flex flex-wrap gap-2">@yield('page_actions')</div>
            </div>

            <x-alerts/>

            @yield('content')
        </main>
    </div>
</div>
@endsection