@extends('school.layouts.app')
@section('content')
<div class="w-full px-4 sm:px-6 lg:px-8">
    <div class="mb-5">
        <h1 class="text-2xl font-bold text-slate-800">Security Settings</h1>
        <p class="text-xs text-slate-400 mt-0.5">Update your account password</p>
    </div>

    @if(session('success'))
        <div class="mb-4 p-2.5 bg-emerald-50 text-emerald-600 text-xs rounded-lg border border-emerald-100 flex items-center gap-2">
            <i class="fa-solid fa-circle-check text-[10px]"></i> {{ session('success') }}
        </div>
    @endif

    <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-6 max-w-lg">
        <form action="{{ route('school.password.update') }}" method="POST">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Current Password</label>
                    <input type="password" name="current_password" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                    @error('current_password') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">New Password</label>
                    <input type="password" name="new_password" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                    @error('new_password') <p class="text-red-500 text-[10px] mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-[11px] font-semibold text-slate-500 uppercase tracking-wider mb-1">Confirm New Password</label>
                    <input type="password" name="new_password_confirmation" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-slate-100 flex justify-end">
                <button type="submit" class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-semibold text-sm hover:bg-indigo-700 transition-colors shadow-sm">
                    Update Password <i class="fa-solid fa-lock ml-1.5"></i>
                </button>
            </div>
        </form>
    </div>
</div>
@endsection