@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.patients.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.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'];
    }

    $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'];
@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">
                @if ($plan)
                    <a href="{{ route('portal.plans.index') }}" class="badge-sc bg-brand-100 text-brand-800 no-underline">
                        {{ $plan->name }}
                    </a>
                @endif

                <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><a class="dropdown-item rounded-xl py-2" href="{{ route('portal.plans.index') }}">{{ __('nav.plans') }}</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