@extends('layouts.app')
@section('content')
@php
$nav = [ ['account.profile', __('Profile')],['account.orders', __('Orders')], ['account.notifications', __('Notifications')], ['account.wishlist', __('Wishlist')], ['account.addresses', __('Addresses')]];
@endphp
<div class="grid grid-cols-1 gap-6 lg:grid-cols-[260px_1fr] lg:gap-8">
        <aside class="min-w-0 self-start lg:sticky lg:top-24 lg:max-h-[calc(100vh-7rem)] lg:overflow-y-auto">
        <div class="flex items-center gap-4 rounded-[32px] bg-surface-mid p-5">
            @php $avatar = auth()->user()->avatar_url ?? null; @endphp
            @if ($avatar)
                <img src="{{ $avatar }}" alt="" class="h-16 w-16 flex-none rounded-full object-cover ring-2 ring-white">
            @else
                <span class="grid h-16 w-16 flex-none place-items-center rounded-full bg-primary text-2xl font-extrabold text-on-primary" aria-hidden="true">{{ mb_strtoupper(mb_substr((string) auth()->user()->name, 0, 1)) }}</span>
            @endif
            <div class="min-w-0 flex-1">
                <p class="text-sm text-on-surface-variant">{{ __('Signed in as') }}</p>
                <p class="truncate text-lg font-extrabold text-primary">{{ auth()->user()->name }}</p>
                <button type="button" data-signout-open class="mt-1 min-h-[44px] text-sm font-bold text-on-surface-variant underline hover:text-error">{{ __('Sign out') }}</button>
            </div>
        </div>
        <nav class="-mx-4 mt-4 flex gap-2 overflow-x-auto px-4 pb-1 lg:mx-0 lg:flex-col lg:overflow-visible lg:px-0 lg:pb-0" aria-label="{{ __('Account') }}">
            @foreach ($nav as [$route, $label])
                <a href="{{ route($route) }}" @if (request()->routeIs($route.'*')) aria-current="page" @endif
                   class="whitespace-nowrap rounded-full px-5 py-3 text-sm font-bold {{ request()->routeIs($route.'*') ? 'bg-primary text-on-primary' : 'text-primary hover:bg-surface-mid' }}">{{ $label }}</a>
            @endforeach
        </nav>
    </aside>
    <section class="min-w-0">@yield('account')</section>
</div>

{{-- Asks before signing out. Cancel (or Esc) closes it and nothing happens. --}}
<dialog id="signout-dialog" aria-labelledby="signout-title" class="w-[min(92vw,420px)] rounded-[32px] border-0 bg-white p-6 shadow-soft backdrop:bg-black/50">
    <h2 id="signout-title" class="text-xl font-extrabold text-primary">{{ __('Sign out?') }}</h2>
    <p class="mt-2 text-sm text-on-surface-variant">{{ __('Are you sure you want to sign out?') }}</p>
    <div class="mt-6 flex justify-end gap-3">
        <form method="dialog"><x-btn type="submit" variant="ghost">{{ __('Cancel') }}</x-btn></form>
        <form method="POST" action="{{ route('logout') }}">@csrf<x-btn type="submit">{{ __('Sign out') }}</x-btn></form>
    </div>
</dialog>

@push('scripts')
<script>
document.querySelector('[data-signout-open]')?.addEventListener('click', () => document.getElementById('signout-dialog').showModal());
</script>
@endpush
@endsection