@extends('layouts.admin', [
    'title' => 'Meu perfil',
    'subtitle' => 'Atualize sua foto e seus dados de contato.',
])

@section('content')
    @php
        $avatarUrl = $user->avatar_path
            ? \Illuminate\Support\Facades\Storage::disk('public')->url($user->avatar_path)
            : null;
    @endphp

    <div class="mx-auto max-w-4xl space-y-6">
        <div class="overflow-hidden rounded-3xl bg-slate-950 p-6 text-white shadow-xl shadow-slate-950/10">
            <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-4">
                    <div class="grid h-20 w-20 place-items-center overflow-hidden rounded-3xl bg-white/10 text-2xl font-black ring-4 ring-white/10">
                        @if ($avatarUrl)
                            <img src="{{ $avatarUrl }}" alt="Foto de {{ $user->name }}" class="h-full w-full object-cover">
                        @else
                            {{ str($user->name)->substr(0, 1)->upper() }}
                        @endif
                    </div>

                    <div>
                        <p class="text-sm font-semibold text-amber-200">Perfil administrativo</p>
                        <h2 class="mt-1 text-2xl font-black tracking-tight">{{ $user->name }}</h2>
                        <p class="text-sm text-slate-300">{{ $user->email }}</p>
                    </div>
                </div>

                <span class="rounded-full bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.18em] text-slate-300">
                    {{ $user->role?->label() ?? 'Admin' }}
                </span>
            </div>
        </div>

        <form method="POST" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data" class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
            @csrf
            @method('PUT')

            <div class="grid gap-6 lg:grid-cols-[220px_1fr]">
                <div>
                    <label class="block text-sm font-bold text-slate-800">Foto de perfil</label>
                    <p class="mt-1 text-sm text-slate-500">Use JPG, PNG ou WebP até 2MB.</p>

                    <div class="mt-4 grid h-36 w-36 place-items-center overflow-hidden rounded-3xl bg-slate-100 text-4xl font-black text-slate-400 ring-1 ring-slate-200">
                        @if ($avatarUrl)
                            <img src="{{ $avatarUrl }}" alt="Foto atual" class="h-full w-full object-cover">
                        @else
                            {{ str($user->name)->substr(0, 1)->upper() }}
                        @endif
                    </div>

                    <input type="file" name="avatar" accept="image/png,image/jpeg,image/webp" class="mt-4 block w-full text-sm text-slate-600 file:mr-3 file:rounded-xl file:border-0 file:bg-slate-950 file:px-4 file:py-2 file:text-sm file:font-bold file:text-white hover:file:bg-slate-800">
                    @error('avatar') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror

                    @if ($avatarUrl)
                        <label class="mt-4 flex items-center gap-2 text-sm text-slate-600">
                            <input type="checkbox" name="remove_avatar" value="1" class="rounded border-slate-300 text-slate-950 focus:ring-slate-950">
                            Remover foto atual
                        </label>
                    @endif
                </div>

                <div class="grid gap-5 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label for="name" class="block text-sm font-bold text-slate-800">Nome</label>
                        <input id="name" name="name" value="{{ old('name', $user->name) }}" class="mt-2 w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-slate-950 focus:ring-4 focus:ring-slate-950/10" required>
                        @error('name') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div class="sm:col-span-2">
                        <label for="email" class="block text-sm font-bold text-slate-800">E-mail</label>
                        <input id="email" type="email" name="email" value="{{ old('email', $user->email) }}" class="mt-2 w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-slate-950 focus:ring-4 focus:ring-slate-950/10" required>
                        @error('email') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-bold text-slate-800">Telefone</label>
                        <input id="phone" name="phone" value="{{ old('phone', $user->phone) }}" class="mt-2 w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-slate-950 focus:ring-4 focus:ring-slate-950/10" placeholder="(00) 00000-0000">
                        @error('phone') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="whatsapp" class="block text-sm font-bold text-slate-800">WhatsApp</label>
                        <input id="whatsapp" name="whatsapp" value="{{ old('whatsapp', $user->whatsapp) }}" class="mt-2 w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none transition focus:border-slate-950 focus:ring-4 focus:ring-slate-950/10" placeholder="(00) 00000-0000">
                        @error('whatsapp') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div class="sm:col-span-2 flex justify-end gap-3 border-t border-slate-100 pt-5">
                        <a href="{{ route('admin.dashboard') }}" class="rounded-2xl border border-slate-200 px-5 py-3 text-sm font-bold text-slate-700 transition hover:bg-slate-50">Cancelar</a>
                        <button class="rounded-2xl bg-slate-950 px-5 py-3 text-sm font-black text-white shadow-lg shadow-slate-950/10 transition hover:-translate-y-0.5 hover:bg-slate-800">Salvar perfil</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection