@extends('layouts.influencer', [
    'title' => 'Meu perfil',
])

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

    <div class="space-y-6">
        <section class="overflow-hidden rounded-[2rem] bg-slate-950 p-6 text-white shadow-2xl shadow-slate-950/10 sm:p-8">
            <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex items-center gap-5">
                    <div class="grid h-24 w-24 shrink-0 place-items-center overflow-hidden rounded-[1.75rem] bg-white/10 text-3xl 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-black uppercase tracking-[0.2em] text-amber-200">Perfil do influencer</p>
                        <h1 class="mt-2 text-3xl font-black tracking-tight sm:text-4xl">{{ $user->name }}</h1>
                        <p class="mt-1 text-sm text-slate-300">Atualize sua presença digital e contatos.</p>
                    </div>
                </div>

                <div class="rounded-3xl bg-white/10 p-4 ring-1 ring-white/10">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Cupom ativo</p>
                    <p class="mt-1 text-2xl font-black text-amber-200">{{ $influencer->activeCoupon?->coupon_code_original ?? 'Sem cupom' }}</p>
                </div>
            </div>
        </section>

        <form method="POST" action="{{ route('influencer.profile.update') }}" enctype="multipart/form-data" class="grid gap-6 lg:grid-cols-[280px_1fr]">
            @csrf
            @method('PUT')

            <aside class="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-slate-200">
                <label class="block text-sm font-black text-slate-900">Foto de perfil</label>
                <p class="mt-1 text-sm text-slate-500">Essa foto será usada no seu painel.</p>

                <div class="mt-5 grid h-44 w-44 place-items-center overflow-hidden rounded-[2rem] bg-slate-100 text-5xl 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-5 block w-full text-sm text-slate-600 file:mr-3 file:rounded-2xl file:border-0 file:bg-slate-950 file:px-4 file:py-3 file:text-sm file:font-black 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 class="mt-6 rounded-3xl bg-amber-50 p-4 text-sm text-amber-900 ring-1 ring-amber-100">
                    <strong>Importante:</strong> dados financeiros, CPF/CNPJ, comissão e Pix continuam protegidos e só podem ser alterados pelo admin.
                </div>
            </aside>

            <section class="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">
                <div class="grid gap-5 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <h2 class="text-xl font-black text-slate-950">Dados públicos e contato</h2>
                        <p class="mt-1 text-sm text-slate-500">Essas informações ajudam o admin a manter sua comunicação e campanhas organizadas.</p>
                    </div>

                    <div class="sm:col-span-2">
                        <label for="name" class="block text-sm font-black 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-black 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="instagram" class="block text-sm font-black text-slate-800">Instagram</label>
                        <input id="instagram" name="instagram" value="{{ old('instagram', $influencer->instagram) }}" 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="@seuperfil">
                        @error('instagram') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="tiktok" class="block text-sm font-black text-slate-800">TikTok</label>
                        <input id="tiktok" name="tiktok" value="{{ old('tiktok', $influencer->tiktok) }}" 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="@seuperfil">
                        @error('tiktok') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="youtube" class="block text-sm font-black text-slate-800">YouTube</label>
                        <input id="youtube" name="youtube" value="{{ old('youtube', $influencer->youtube) }}" 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="Canal ou URL">
                        @error('youtube') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="website" class="block text-sm font-black text-slate-800">Site / link principal</label>
                        <input id="website" type="url" name="website" value="{{ old('website', $influencer->website) }}" 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="https://...">
                        @error('website') <p class="mt-2 text-sm text-red-600">{{ $message }}</p> @enderror
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-black text-slate-800">Telefone</label>
                        <input id="phone" name="phone" value="{{ old('phone', $influencer->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-black text-slate-800">WhatsApp</label>
                        <input id="whatsapp" name="whatsapp" value="{{ old('whatsapp', $influencer->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 flex-col gap-3 border-t border-slate-100 pt-6 sm:flex-row sm:justify-end">
                        <a href="{{ route('influencer.dashboard') }}" class="rounded-2xl border border-slate-200 px-5 py-3 text-center text-sm font-black 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>
            </section>
        </form>
    </div>
@endsection