@extends('layouts.app')
@section('page-title', 'My Profile')

@section('content')

<x-admin-hero-header title="My Profile" subtitle="Manage your personal information and avatar">
    <x-slot:icon><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 12a4 4 0 100-8 4 4 0 000 8zm7 9a7 7 0 00-14 0"/></svg></x-slot:icon>
</x-admin-hero-header>

<form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="enhanced-form">
    @csrf
    @method('PUT')

    <x-form-shell title="Personal information" description="Keep your profile details and account photo up to date.">
        <div class="mb-5" x-data="imagePreview(@js($user->avatar_url ?? ''))">
            <input type="hidden" name="remove_avatar" :value="removed ? '1' : '0'" />
            <div class="flex flex-col gap-3 rounded-xl border border-surface-200 bg-surface-50/60 p-3 sm:flex-row sm:items-center">
                <label class="group mx-auto h-16 w-16 shrink-0 cursor-pointer sm:mx-0">
                    <div class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl border-2 border-dashed border-surface-300 bg-white shadow-sm transition-all group-hover:border-primary-400">
                        <img x-show="preview" :src="preview" class="h-full w-full object-cover" alt="Profile picture preview" />
                        <div x-show="!preview" class="flex flex-col items-center gap-1 text-surface-400 group-hover:text-primary-500">
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.9a2 2 0 001.7-.9l.8-1.2A2 2 0 0110.1 4h3.8a2 2 0 011.7.9l.8 1.2a2 2 0 001.7.9h.9a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9zm12 4a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            <span class="text-[10px] font-semibold">Photo</span>
                        </div>
                    </div>
                    <input id="profile_avatar" x-ref="fileInput" type="file" name="avatar" accept="image/jpeg,image/png,.jpg,.jpeg,.png" class="sr-only" @change="handleFile($event)" />
                </label>
                <div class="min-w-0 flex-1 text-center sm:text-left">
                    <p class="text-sm font-bold text-surface-900">Profile picture <span class="font-normal text-surface-400">(optional)</span></p>
                    <p class="mt-0.5 text-xs text-surface-600">Add a clear photo so teammates can identify you.</p>
                    <p class="mt-1 text-[11px] text-surface-400">JPG or PNG · Maximum 2MB</p>
                    @error('avatar')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div class="flex shrink-0 items-center gap-2 self-center">
                    <button x-show="preview" type="button" @click="remove()" class="btn-danger px-3 py-2">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M6 7h12m-9 0V5h6v2m-8 0l1 13h8l1-13M10 11v5m4-5v5"/></svg>
                        Remove
                    </button>
                    <label for="profile_avatar" class="btn-secondary cursor-pointer px-3 py-2">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 16V4m0 0L7 9m5-5l5 5M5 20h14"/></svg>
                        <span x-text="preview ? 'Change photo' : 'Choose photo'"></span>
                    </label>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-x-5 gap-y-4 sm:grid-cols-2">
            <div>
                <label for="full_name" class="form-label">Full Name <span class="text-[11px] text-red-500/80">*</span></label>
                <input type="text" id="full_name" name="full_name" autocomplete="name" value="{{ old('full_name', $user->full_name) }}" required class="form-input {{ $errors->has('full_name') ? 'form-input-error' : '' }}" />
                @error('full_name')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="email" class="form-label">Email Address <span class="text-[11px] text-red-500/80">*</span></label>
                <input type="email" id="email" name="email" autocomplete="email" value="{{ old('email', $user->email) }}" required class="form-input {{ $errors->has('email') ? 'form-input-error' : '' }}" />
                @error('email')<p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
            @unless($user->hasRole('Super Admin'))
            <div class="sm:col-span-2">
                <x-searchable-select name="country_id" id="country_id" label="Country" :options="$countries" :selected="old('country_id', $user->country_id)" placeholder="Select country" search-placeholder="Search country..." :required="true" icon="country" :enhanced="true" :show-code="true" />
            </div>
            @endunless
        </div>

        <div class="mt-5 grid grid-cols-1 gap-3 rounded-xl border border-surface-200 bg-surface-50/60 p-4 sm:grid-cols-3">
            <div><p class="text-[11px] font-bold uppercase tracking-wider text-surface-400">Role</p><p class="mt-1 text-sm font-semibold text-surface-800">{{ $user->roles->first()?->name ?? 'No role' }}</p></div>
            <div><p class="text-[11px] font-bold uppercase tracking-wider text-surface-400">Status</p><p class="mt-1 text-sm font-semibold {{ $user->status ? 'text-emerald-600' : 'text-red-600' }}">{{ $user->status ? 'Active' : 'Inactive' }}</p></div>
            <div><p class="text-[11px] font-bold uppercase tracking-wider text-surface-400">Member since</p><p class="mt-1 text-sm font-semibold text-surface-800">{{ $user->created_at->format('M Y') }}</p></div>
        </div>

        <x-slot:actions>
            <a href="{{ route('dashboard') }}" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-primary"><svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>Save Changes</button>
        </x-slot:actions>
    </x-form-shell>
</form>

@endsection