@php
    $user = auth()->user();
@endphp

<section>
    <header class="mb-5">
        <h2 class="text-base font-semibold text-white flex items-center gap-2">
            <svg class="h-4 w-4 text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M5.121 17.804A7.5 7.5 0 0112 14.5a7.5 7.5 0 016.879 3.304M15 8a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            {{ __('Profile Information') }}
        </h2>
        <p class="mt-1 text-xs text-slate-400">
            {{ __("Update your name, email and profile photo.") }}
        </p>
    </header>

    @if (session('status') === 'profile-updated')
        <div class="admin-alert admin-alert-success">
            {{ __('Profile updated successfully.') }}
        </div>
    @endif

    <form method="post" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data" class="space-y-5">
        @csrf
        @method('patch')

        {{-- ============ Profile Photo (Compact) ============ --}}
        <div class="admin-photo-block">
            <div class="admin-photo-preview">
                <img src="{{ $user->profilePhotoUrl() }}" alt="{{ $user->name }}"
                     class="h-16 w-16 rounded-2xl object-cover ring-2 ring-cyan-400/40">
                <div class="admin-photo-badge">
                    <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
            </div>

            <div class="flex-1 min-w-0">
                <p class="admin-photo-title">Profile Photo</p>
                <p class="admin-photo-hint">PNG or JPG, max 2MB</p>

                <div class="mt-2 flex items-center gap-2 flex-wrap">
                    <label for="profile_photo" class="admin-file-btn">
                        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14M14 8h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        Choose Image
                    </label>
                    <input id="profile_photo" name="profile_photo" type="file" accept="image/*" class="hidden"
                           onchange="document.getElementById('photoName').textContent = this.files[0]?.name || 'No file chosen'">
                    <span id="photoName" class="text-xs text-slate-400 truncate">No file chosen</span>

                    @if($user->profile_photo)
                        <label class="admin-remove-photo">
                            <input type="checkbox" name="remove_profile_photo" value="1">
                            Remove
                        </label>
                    @endif
                </div>

                <x-input-error :messages="$errors->get('profile_photo')" class="mt-1 text-xs"/>
            </div>
        </div>

        {{-- ============ Name ============ --}}
        <div class="admin-field">
            <label for="name">{{ __('Name') }}</label>
            <input id="name" name="name" type="text"
                   value="{{ old('name', $user->name) }}"
                   required autofocus autocomplete="name">
            <x-input-error :messages="$errors->get('name')" class="mt-1"/>
        </div>

        {{-- ============ Email ============ --}}
        <div class="admin-field">
            <label for="email">{{ __('Email') }}</label>
            <input id="email" name="email" type="email"
                   value="{{ old('email', $user->email) }}"
                   required autocomplete="username">
            <x-input-error :messages="$errors->get('email')" class="mt-1"/>

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                <p class="mt-2 text-xs text-amber-200">
                    {{ __('Your email address is unverified.') }}
                    <button form="send-verification" class="underline text-amber-100 hover:text-white">
                        {{ __('Click here to re-send the verification email.') }}
                    </button>
                </p>
                @if (session('status') === 'verification-link-sent')
                    <p class="mt-2 text-xs text-emerald-200">
                        {{ __('A new verification link has been sent to your email address.') }}
                    </p>
                @endif
            @endif
        </div>

        {{-- ============ Phone ============ --}}
        <div class="admin-field">
            <label for="phone">{{ __('Phone Number') }}</label>
            <input id="phone" name="phone" type="text"
                   value="{{ old('phone', $user->phone) }}"
                   placeholder="Optional" autocomplete="tel">
            <x-input-error :messages="$errors->get('phone')" class="mt-1"/>
        </div>

        {{-- ============ Submit ============ --}}
        <div class="flex items-center gap-3 pt-2">
            <button type="submit" class="admin-submit">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                Save Changes
            </button>

            @if (session('status') === 'profile-updated')
                <p x-data="{ show: true }"
                   x-show="show"
                   x-transition
                   x-init="setTimeout(() => show = false, 2000)"
                   class="text-sm text-emerald-200">
                    {{ __('Saved.') }}
                </p>
            @endif
        </div>
    </form>
</section>