@extends('web_user.layouts.app')
@section('title', 'Pengaturan Akun')

@section('content')
<div class="min-h-screen bg-slate-50 p-3">

    {{-- Header Judul --}}
    <div class="mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
        <div class="flex items-center gap-3 px-4 py-3">
            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
                <i class="fas fa-user-gear text-xs"></i>
            </div>

            <div>
                <h2 class="text-base font-bold text-slate-800">Pengaturan Akun</h2>
                <p class="mt-0.5 text-xs text-slate-500">
                    Kelola informasi akun Anda dengan aman.
                </p>
            </div>
        </div>
    </div>

    {{-- Notifikasi Sukses --}}
    @if (session('status'))
        <div class="mb-4 overflow-hidden rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-xs text-emerald-700 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
                    <i class="fas fa-check text-xs"></i>
                </div>

                <p class="font-medium">
                    {{ session('status') }}
                </p>
            </div>
        </div>
    @endif

    {{-- Error --}}
    @if ($errors->any())
        <div class="mb-4 overflow-hidden rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700 shadow-sm">
            <div class="flex items-start gap-3">
                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-600">
                    <i class="fas fa-triangle-exclamation text-xs"></i>
                </div>

                <div>
                    <p class="font-bold">Terjadi kesalahan:</p>
                    <ul class="mt-1 list-inside list-disc space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 gap-4 lg:grid-cols-[320px_1fr]">

        {{-- Foto Profil --}}
        <div class="h-fit overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-100 bg-white px-4 py-3">
                <div class="flex items-center gap-3">
                    <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-50 text-blue-600">
                        <i class="fas fa-image text-xs"></i>
                    </div>

                    <div>
                        <h3 class="text-sm font-bold text-slate-800">Foto Profil</h3>
                        <p class="mt-0.5 text-xs text-slate-500">
                            Perbarui foto akun Anda.
                        </p>
                    </div>
                </div>
            </div>

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

                <div class="mb-4 flex flex-col items-center gap-3">

                    @if (auth()->user()->foto)
                        <div class="relative h-20 w-20 overflow-hidden rounded-full border border-slate-200 bg-slate-100 shadow-sm">
                            <img
                                src="{{ asset('uploads/foto/' . auth()->user()->foto) }}"
                                class="h-full w-full object-cover"
                                alt="Foto Profil"
                                onerror="this.classList.add('hidden'); this.nextElementSibling.classList.remove('hidden'); this.nextElementSibling.classList.add('flex');"
                            >

                            <div class="hidden h-full w-full items-center justify-center rounded-full bg-slate-100 text-lg font-bold text-slate-400">
                                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                            </div>
                        </div>
                    @else
                        <div class="flex h-20 w-20 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-lg font-bold text-slate-400 shadow-sm">
                            {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                        </div>
                    @endif

                    <div class="w-full rounded-xl border border-dashed border-slate-300 bg-slate-50 px-3 py-3 transition hover:border-blue-400 hover:bg-white">
                        <input type="file"
                            name="foto"
                            accept="image/*"
                            required
                            class="block w-full cursor-pointer text-xs text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-blue-600 file:px-3 file:py-2 file:text-xs file:font-medium file:text-white hover:file:bg-blue-700">

                        <p class="mt-1 text-[11px] text-slate-400">
                            Format gambar JPG, JPEG, atau PNG. Maksimal 2MB.
                        </p>
                    </div>
                </div>

                <div class="flex items-center justify-end">
                    <button type="submit"
                        class="inline-flex h-8 items-center justify-center gap-1.5 rounded-lg bg-blue-500 px-3 text-xs font-medium text-white transition hover:bg-blue-600">
                        <i class="fas fa-check text-[10px]"></i>
                        Update Foto
                    </button>
                </div>
            </form>
        </div>

        <div class="space-y-4">

            {{-- Edit Profil --}}
            <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-100 bg-white px-4 py-3">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600">
                            <i class="fas fa-user-pen text-xs"></i>
                        </div>

                        <div>
                            <h3 class="text-sm font-bold text-slate-800">Edit Profil</h3>
                            <p class="mt-0.5 text-xs text-slate-500">
                                Perbarui nama dan email akun.
                            </p>
                        </div>
                    </div>
                </div>

                <form action="{{ route('profile.update') }}" method="POST" class="p-4">
                    @csrf
                    @method('PATCH')

                    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-600">
                                Nama
                            </label>
                            <input type="text"
                                name="name"
                                value="{{ old('name', auth()->user()->name) }}"
                                required
                                class="h-9 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 text-xs text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
                        </div>

                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-600">
                                Email
                            </label>
                            <input type="email"
                                name="email"
                                value="{{ old('email', auth()->user()->email) }}"
                                required
                                class="h-9 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 text-xs text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
                        </div>
                    </div>

                    <div class="mt-4 flex items-center justify-end">
                        <button type="submit"
                            class="inline-flex h-8 items-center justify-center gap-1.5 rounded-lg bg-blue-500 px-3 text-xs font-medium text-white transition hover:bg-blue-600">
                            <i class="fas fa-check text-[10px]"></i>
                            Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>

            {{-- Ubah Password --}}
            <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-100 bg-white px-4 py-3">
                    <div class="flex items-center gap-3">
                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-green-50 text-green-600">
                            <i class="fas fa-lock text-xs"></i>
                        </div>

                        <div>
                            <h3 class="text-sm font-bold text-slate-800">Ubah Password</h3>
                            <p class="mt-0.5 text-xs text-slate-500">
                                Gunakan password baru untuk keamanan akun.
                            </p>
                        </div>
                    </div>
                </div>

                <form action="{{ route('profile.update.password') }}" method="POST" class="p-4">
                    @csrf
                    @method('PATCH')

                    <div class="grid grid-cols-1 gap-3 md:grid-cols-3">
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-600">
                                Password Lama
                            </label>
                            <input type="password"
                                name="password_lama"
                                required
                                class="h-9 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 text-xs text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
                        </div>

                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-600">
                                Password Baru
                            </label>
                            <input type="password"
                                name="password_baru"
                                required
                                class="h-9 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 text-xs text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
                        </div>

                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-600">
                                Konfirmasi Password
                            </label>
                            <input type="password"
                                name="password_baru_confirmation"
                                required
                                class="h-9 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 text-xs text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-100">
                        </div>
                    </div>

                    <div class="mt-4 flex items-center justify-end">
                        <button type="submit"
                            class="inline-flex h-8 items-center justify-center gap-1.5 rounded-lg bg-green-500 px-3 text-xs font-medium text-white transition hover:bg-green-600">
                            <i class="fas fa-key text-[10px]"></i>
                            Ubah Password
                        </button>
                    </div>
                </form>
            </div>

        </div>

    </div>
</div>
@endsection