@extends('siswa.layout')

@section('content')

<div class="max-w-xl mx-auto bg-white rounded-2xl shadow p-8 space-y-6">

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="key" class="w-6 h-6"></i>
        Ubah Password
    </h1>

    @if(session('status'))
        <div class="bg-green-50 border border-green-200 text-green-700 p-4 rounded-lg">
            {{ session('status') }}
        </div>
    @endif

    <form method="POST" action="{{ route('siswa.password.update') }}" class="space-y-5">
        @csrf

        <!-- PASSWORD LAMA -->
        <div>
            <label class="block text-sm font-semibold mb-1">
                Password Lama
            </label>
            <input
                type="password"
                name="current_password"
                class="w-full border rounded-xl px-4 py-3 focus:ring focus:ring-blue-200"
                required
            >
            @error('current_password')
                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- PASSWORD BARU -->
        <div>
            <label class="block text-sm font-semibold mb-1">
                Password Baru
            </label>
            <input
                type="password"
                name="password"
                class="w-full border rounded-xl px-4 py-3 focus:ring focus:ring-blue-200"
                required
            >
            @error('password')
                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- KONFIRMASI -->
        <div>
            <label class="block text-sm font-semibold mb-1">
                Konfirmasi Password Baru
            </label>
            <input
                type="password"
                name="password_confirmation"
                class="w-full border rounded-xl px-4 py-3 focus:ring focus:ring-blue-200"
                required
            >
        </div>

        <div class="pt-4 flex justify-end">
            <button
                type="submit"
                class="bg-slate-900 text-white px-6 py-3 rounded-xl
                       hover:bg-slate-700 transition font-semibold inline-flex items-center gap-2">
                <i data-lucide="save" class="w-4 h-4"></i>
                Simpan Password
            </button>
        </div>
    </form>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    lucide.createIcons();
});
</script>

@endsection