@extends('layouts.account')
@section('title', __('Profile'))
@section('account')
@php
    $u = auth()->user();
    $avatar = $u->avatar_url ?? null;
    $initial = mb_strtoupper(mb_substr((string) $u->name, 0, 1));
@endphp
<h1 class="mb-6 text-2xl font-extrabold text-primary">{{ __('Profile') }}</h1>

<form method="POST" action="{{ route('account.profile.update') }}" enctype="multipart/form-data"
      class="relative max-w-2xl space-y-6 rounded-[32px] border border-surface-variant bg-white p-6">
    @csrf @method('PATCH')

    <div class="absolute right-4 top-4">
        {{-- ... : more options (only when there is a photo), top-right of the card --}}
        <button type="button" id="avatar-more" aria-haspopup="menu" aria-expanded="false" aria-controls="avatar-menu" title="{{ __('More options') }}" aria-label="{{ __('More options') }}"
                class="grid h-10 w-10 place-items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary {{ $avatar ? '' : 'hidden' }}">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
        </button>
        <div id="avatar-menu" role="menu" hidden class="absolute right-0 top-full z-20 mt-2 w-48 overflow-hidden rounded-2xl border border-surface-variant bg-white py-1 shadow-soft">
            <button type="button" role="menuitem" data-avatar-view class="flex min-h-[44px] w-full items-center gap-3 px-4 text-left text-sm font-bold text-primary hover:bg-surface-mid">
                <svg class="h-4 w-4 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                {{ __('View photo') }}
            </button>
            <button type="button" role="menuitem" data-avatar-remove class="flex min-h-[44px] w-full items-center gap-3 px-4 text-left text-sm font-bold text-error hover:bg-surface-mid">
                <svg class="h-4 w-4 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                {{ __('Remove photo') }}
            </button>
        </div>
    </div>

    {{-- Profile photo: camera = choose a new photo, ... = more options (view / remove) --}}
    <div class="flex flex-wrap items-center gap-5">
        <div class="relative h-24 w-24 flex-none">
            <img id="avatar-preview" @if ($avatar) src="{{ $avatar }}" @endif alt="" class="h-24 w-24 rounded-full object-cover ring-2 ring-surface-variant {{ $avatar ? '' : 'hidden' }}">
            <span id="avatar-initial" class="grid h-24 w-24 place-items-center rounded-full bg-primary text-3xl font-extrabold text-on-primary {{ $avatar ? 'hidden' : '' }}" aria-hidden="true">{{ $initial }}</span>

            {{-- Camera: opens the file chooser --}}
            <button type="button" id="avatar-camera" title="{{ __('Change photo') }}" aria-label="{{ __('Change photo') }}"
                    class="absolute -bottom-0.5 -right-0.5 grid h-8 w-8 place-items-center rounded-full bg-primary text-on-primary shadow-soft ring-2 ring-white hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
            </button>

            <input type="hidden" name="remove_avatar" id="remove-avatar" value="0">
            <input id="avatar" type="file" name="avatar" accept="image/jpeg,image/png,image/webp" class="sr-only" tabindex="-1" aria-label="{{ __('Profile photo') }}">
        </div>
        <div class="min-w-0 flex-1">
            <p class="text-sm font-semibold text-on-surface-variant">{{ __('Profile photo') }}</p>
            <p class="mt-1 text-xs text-on-surface-variant">{{ __('JPG, PNG or WebP, up to 2 MB. Press Save changes to apply.') }}</p>
            @error('avatar')<p class="mt-1 text-sm font-semibold text-error" role="alert">{{ $message }}</p>@enderror
        </div>
    </div>

    <div class="grid gap-4 sm:grid-cols-2">
        <x-field name="first_name" :label="__('First name')" :value="old('first_name', $u->first_name ?? '')" required/>
        <x-field name="last_name" :label="__('Last name')" :value="old('last_name', $u->last_name ?? '')"/>
    </div>
    <x-field name="phone" type="tel" :label="__('Phone')" :value="old('phone', $u->phone ?? '')"/>

    <x-btn type="submit">{{ __('Save changes') }}</x-btn>
</form>

{{-- Bigger view of the photo --}}
<dialog id="avatar-dialog" aria-label="{{ __('View photo') }}" class="w-[min(92vw,520px)] overflow-hidden rounded-[32px] border-0 bg-white p-0 shadow-soft backdrop:bg-black/60">
    <form method="dialog" class="absolute right-3 top-3 z-10"><button class="grid h-11 w-11 place-items-center rounded-full bg-white/90 text-xl font-bold text-primary shadow-soft" aria-label="{{ __('Close') }}">×</button></form>
    <img id="avatar-large" alt="" class="block aspect-square w-full object-cover">
</dialog>

@push('scripts')
<script>
(() => {
  const $ = (id) => document.getElementById(id);
  const input = $('avatar'), img = $('avatar-preview'), initial = $('avatar-initial'), remove = $('remove-avatar');
  const camera = $('avatar-camera'), more = $('avatar-more'), menu = $('avatar-menu'), dlg = $('avatar-dialog');
  const hadPhoto = @json((bool) $avatar); // a saved photo exists, so "remove" must be sent to the server

  const show = (on) => { img.classList.toggle('hidden', !on); more.classList.toggle('hidden', !on); initial.classList.toggle('hidden', on); if (!on) closeMenu(); };
  const openMenu = () => { menu.hidden = false; more.setAttribute('aria-expanded', 'true'); };
  const closeMenu = () => { menu.hidden = true; more.setAttribute('aria-expanded', 'false'); };

  // Camera: pick a new photo; it shows right away and is saved with the form.
  camera.addEventListener('click', () => input.click());
  input.addEventListener('change', () => {
    const f = input.files && input.files[0]; if (!f) return;
    img.src = URL.createObjectURL(f); remove.value = '0'; show(true);
  });

  // "..." menu
  more.addEventListener('click', (e) => { e.stopPropagation(); menu.hidden ? openMenu() : closeMenu(); });
  document.addEventListener('click', (e) => { if (!menu.hidden && !menu.contains(e.target)) closeMenu(); });
  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !menu.hidden) { closeMenu(); more.focus(); } });

  // View photo
  menu.querySelector('[data-avatar-view]').addEventListener('click', () => {
    closeMenu(); $('avatar-large').src = img.src; if (dlg.showModal) dlg.showModal();
  });
  // Remove photo: takes effect when the form is saved.
  menu.querySelector('[data-avatar-remove]').addEventListener('click', () => {
    input.value = ''; remove.value = hadPhoto ? '1' : '0'; show(false);
  });
})();
</script>
@endpush
@endsection