@extends('layouts.app')

@section('title', 'Edit Profil')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-slate-800 mb-2">Edit Profil</h1>
        <p class="text-slate-500">Perbarui data akun Anda</p>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
        @if($errors->any())
            <div class="mb-6 rounded-xl p-4 border border-red-200 bg-red-50">
                <ul class="list-disc list-inside text-sm text-red-600 space-y-1">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('profile.edit') }}" method="POST">
            @csrf
            <div class="space-y-6">
                <div>
                    <label for="nama" class="block text-sm font-semibold text-slate-700 mb-2">Nama Lengkap <span class="text-red-500">*</span></label>
                    <input type="text" name="nama" id="nama" required value="{{ old('nama', $user->nama) }}"
                           class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all">
                </div>

                <div>
                    <label for="email" class="block text-sm font-semibold text-slate-700 mb-2">Email <span class="text-red-500">*</span></label>
                    <input type="email" name="email" id="email" required value="{{ old('email', $user->email) }}"
                           class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all">
                </div>

                <div class="pt-6 border-t border-slate-100">
                    <h2 class="text-sm font-bold text-slate-700 mb-1">Ganti Password</h2>
                    <p class="text-xs text-slate-400 mb-4">Kosongkan jika tidak ingin mengganti password.</p>

                    <div class="space-y-4">
                        <div>
                            <label for="password_lama" class="block text-sm font-semibold text-slate-700 mb-2">Password Lama</label>
                            <input type="password" name="password_lama" id="password_lama" placeholder="••••••••"
                                   class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all">
                        </div>
                        <div>
                            <label for="password" class="block text-sm font-semibold text-slate-700 mb-2">Password Baru</label>
                            <input type="password" name="password" id="password" placeholder="Minimal 8 karakter"
                                   class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all">
                        </div>
                        <div>
                            <label for="password_confirmation" class="block text-sm font-semibold text-slate-700 mb-2">Konfirmasi Password Baru</label>
                            <input type="password" name="password_confirmation" id="password_confirmation" placeholder="Ulangi password baru"
                                   class="block w-full rounded-xl border border-slate-200 shadow-sm px-4 py-3 focus:border-red-400 focus:ring-2 focus:ring-red-100 text-sm transition-all">
                        </div>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row justify-end gap-3 pt-4 border-t border-slate-100">
                    <a href="{{ route('profile') }}" class="px-6 py-3 rounded-xl border border-slate-200 shadow-sm text-sm font-semibold text-slate-600 bg-white hover:bg-slate-50 text-center transition-all order-2 sm:order-1">
                        Batal
                    </a>
                    <button type="submit" class="px-8 py-3 rounded-xl text-sm font-semibold text-white shadow-lg shadow-red-500/20 hover:bg-red-700 bg-red-600 transition-all order-1 sm:order-2">
                        Simpan Perubahan
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection