@extends('layouts.school')

@section('title', 'Change Password')
@section('header', 'Change Password')

@section('content')
    @if(session('success'))
        <div class="mb-6 rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">{{ session('success') }}</div>
    @endif

    <div class="max-w-lg">
        <form method="POST" action="{{ route('school.settings.update-password', request()->route('schoolId')) }}">
            @csrf
            @method('PATCH')
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700">Current Password *</label>
                    <input type="password" name="current_password" required autocomplete="current-password"
                           class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    @error('current_password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">New Password *</label>
                    <input type="password" name="password" required autocomplete="new-password"
                           class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    <p class="mt-1 text-xs text-gray-500">Minimum 8 characters</p>
                    @error('password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700">Confirm New Password *</label>
                    <input type="password" name="password_confirmation" required autocomplete="new-password"
                           class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                </div>
                <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Change Password</button>
            </div>
        </form>
    </div>
@endsection