@extends('layouts.app')
@section('content')
<section class="mb-6 rounded-[2rem] bg-gradient-to-br from-slate-950 via-teal-950 to-emerald-800 p-8 text-white shadow-soft">
    <span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm font-bold"><i class="fa-solid fa-user"></i> Profil Saya</span>
    <h2 class="mt-5 text-4xl font-black">Halo, {{ $resident->name ?? $user->name }}</h2>
    <p class="mt-3 text-slate-300">Kelola profil, foto, tracking surat, dan tracking pengaduan dari satu halaman.</p>
</section>

<div class="grid gap-6 lg:grid-cols-3">
    <div class="card p-6 lg:col-span-1">
        <h3 class="text-xl font-black text-slate-950"><i class="fa-solid fa-id-card mr-2 text-teal-600"></i>Data Akun</h3>
        <div class="mt-5 flex items-center gap-4">
            <div class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-3xl bg-slate-100 text-3xl text-slate-500 ring-1 ring-slate-200">
                @if($user->avatarUrl())
                    <img src="{{ $user->avatarUrl() }}" alt="Foto profil" class="h-full w-full object-cover">
                @else
                    <i class="fa-solid fa-user"></i>
                @endif
            </div>
            <div>
                <p class="text-lg font-black text-slate-950">{{ $resident->name ?? $user->name }}</p>
                <p class="text-sm font-semibold text-slate-500">{{ $user->email }}</p>
                @if(!$user->hasRole('user'))<p class="mt-2"><span class="badge">{{ $user->role }}</span></p>@endif
            </div>
        </div>
        <form class="mt-5 grid gap-3" method="post" action="{{ route('profile.me.avatar') }}" enctype="multipart/form-data">
            @csrf
            <label class="label">Foto Profil</label>
            <input class="field" type="file" name="avatar" accept=".jpg,.jpeg,.png,.webp" required>
            <button class="btn-soft"><i class="fa-solid fa-camera"></i> Update Foto</button>
        </form>
        <div class="mt-5 space-y-2 text-sm text-slate-600">
            <p><b>Alamat:</b> {{ $resident->address ?? '-' }}</p>
            <p><b>No WA:</b> {{ $resident->phone ?? '-' }}</p>
        </div>
    </div>

    <div class="card p-6 lg:col-span-2">
        <h3 class="text-xl font-black text-slate-950"><i class="fa-solid fa-pen-to-square mr-2 text-teal-600"></i>Edit Profil</h3>
        <p class="mt-1 text-sm text-slate-500">Perubahan nama, email, alamat, dan nomor WA harus diverifikasi memakai kode 6 digit yang dikirim ke email akun Anda.</p>
        <form class="mt-5 grid gap-5" method="post" action="{{ route('profile.me.update.request') }}">
            @csrf
            <div class="grid gap-5 md:grid-cols-2">
                <div><label class="label">Nama</label><input class="field" name="name" value="{{ old('name', $resident->name ?? $user->name) }}" required></div>
                <div><label class="label">Email</label><input class="field" name="email" type="email" value="{{ old('email', $resident->email ?? $user->email) }}" required></div>
            </div>
            <div><label class="label">Alamat</label><textarea class="field" name="address" rows="3">{{ old('address', $resident->address ?? '') }}</textarea></div>
            <div><label class="label">No WA</label><input class="field" name="phone" value="{{ old('phone', $resident->phone ?? '') }}"></div>
            <button class="btn-primary"><i class="fa-solid fa-envelope-circle-check"></i> Kirim Kode Verifikasi Perubahan</button>
        </form>

        @if($hasPendingProfileUpdate)
            <form class="mt-5 rounded-3xl border border-teal-100 bg-teal-50 p-5" method="post" action="{{ route('profile.me.update.verify') }}">
                @csrf
                <label class="label">Kode Verifikasi Profil</label>
                <div class="grid gap-3 sm:grid-cols-[1fr_auto]"><input class="field bg-white" name="code" maxlength="6" placeholder="Masukkan 6 digit" required><button class="btn-primary"><i class="fa-solid fa-shield-halved"></i> Verifikasi dan Simpan</button></div>
            </form>
        @endif
    </div>

    <a href="{{ route('profile.letters') }}" class="card group p-6 transition hover:-translate-y-1 hover:shadow-soft"><div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-50 text-2xl text-blue-700"><i class="fa-solid fa-file-signature"></i></div><h3 class="mt-5 text-xl font-black text-slate-950">Tracking Surat</h3><p class="mt-2 text-slate-500">{{ $letters->count() }} permohonan surat.</p></a>
    <a href="{{ route('profile.complaints') }}" class="card group p-6 transition hover:-translate-y-1 hover:shadow-soft"><div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-rose-50 text-2xl text-rose-700"><i class="fa-solid fa-bullhorn"></i></div><h3 class="mt-5 text-xl font-black text-slate-950">Tracking Pengaduan</h3><p class="mt-2 text-slate-500">{{ $complaints->count() }} pengaduan.</p></a>
    @if($resident)
        <a href="{{ route('payments.show', $resident) }}" class="card group p-6 transition hover:-translate-y-1 hover:shadow-soft"><div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-50 text-2xl text-emerald-700"><i class="fa-solid fa-receipt"></i></div><h3 class="mt-5 text-xl font-black text-slate-950">Detail Iuran Saya</h3><p class="mt-2 text-slate-500">Lihat riwayat iuran, bukti transfer, dan kwitansi PDF.</p></a>
    @endif
</div>
@endsection