@extends('layouts.app')
@section('title', 'Profil')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        @include('account.partials.sidebar')
        <div class="flex-1 max-w-lg">
            <h1 class="text-2xl font-extrabold mb-6">Profil Saya</h1>

            @if (session('success'))
                <div class="mb-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl px-4 py-3 text-sm">{{ session('success') }}</div>
            @endif

            <form method="POST" action="{{ route('account.profile.update') }}" class="bg-white border border-slate-100 rounded-2xl p-6 space-y-4">
                @csrf @method('PATCH')
                <div>
                    <label class="text-sm font-medium text-slate-600">Nama lengkap</label>
                    <input name="name" value="{{ old('name', $user->name) }}" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">Email</label>
                    <input value="{{ $user->email }}" disabled class="mt-1 w-full rounded-lg border border-slate-100 bg-slate-50 px-3 py-2.5 text-sm text-slate-400">
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">No. HP</label>
                    <input name="phone" value="{{ old('phone', $user->phone) }}" class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                </div>
                <button class="bg-brand-600 hover:bg-brand-700 text-white font-bold px-6 py-2.5 rounded-xl">Simpan Perubahan</button>
            </form>

            <form method="POST" action="{{ route('account.password.update') }}" class="bg-white border border-slate-100 rounded-2xl p-6 space-y-4 mt-6">
                @csrf @method('PATCH')
                <h2 class="font-bold">Ubah Password</h2>
                <div>
                    <label class="text-sm font-medium text-slate-600">Password saat ini</label>
                    <input name="current_password" type="password" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                    @error('current_password')<p class="text-xs text-rose-500 mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">Password baru</label>
                    <input name="password" type="password" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                    @error('password')<p class="text-xs text-rose-500 mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="text-sm font-medium text-slate-600">Konfirmasi password baru</label>
                    <input name="password_confirmation" type="password" required class="mt-1 w-full rounded-lg border border-slate-200 px-3 py-2.5 text-sm">
                </div>
                <button class="bg-slate-800 hover:bg-slate-900 text-white font-bold px-6 py-2.5 rounded-xl">Ubah Password</button>
            </form>
        </div>
    </div>
</div>
@endsection