@extends('layout')

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

@section('content')
<div class="p-6 bg-white rounded-lg shadow animate-fade-in">

    <h2 class="mb-4 text-xl font-semibold text-gray-800">Profil Saya</h2>

    @if(session('success'))
        <div class="p-3 mb-4 text-green-800 bg-green-100 border border-green-300 rounded">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="p-3 mb-4 text-red-800 bg-red-100 border border-red-300 rounded">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('profile.update') }}" method="POST" class="space-y-4">
        @csrf
        <div>
            <label class="block mb-1 text-sm font-medium">Nama</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full p-2 border-gray-300 rounded" required>
        </div>
        <div>
            <label class="block mb-1 text-sm font-medium">Email</label>
            <input type="email" name="email" value="{{ old('email', $user->email) }}" class="w-full p-2 border-gray-300 rounded" required>
        </div>
        <div class="text-right">
            <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700">
                Simpan
            </button>
        </div>
    </form>

    <form action="{{ route('profile.password.update') }}" method="POST" class="mt-6 space-y-4">
        @csrf
        <h3 class="font-semibold text-md">Ubah Password</h3>
        <div>
            <label class="block mb-1 text-sm font-medium">Password Lama</label>
            <input type="password" name="current_password" class="w-full p-2 border-gray-300 rounded" required>
        </div>
        <div>
            <label class="block mb-1 text-sm font-medium">Password Baru</label>
            <input type="password" name="password" class="w-full p-2 border-gray-300 rounded" required>
        </div>
        <div>
            <label class="block mb-1 text-sm font-medium">Konfirmasi Password Baru</label>
            <input type="password" name="password_confirmation" class="w-full p-2 border-gray-300 rounded" required>
        </div>
        <div class="text-right">
            <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded hover:bg-blue-700">
                Ubah Password
            </button>
        </div>
    </form>

</div>
@endsection