@extends('layouts.guest')

@section('title', 'Reset Password - Academic Result Management')
@section('heading', 'Reset Your Password')
@section('description', 'Enter your new password below to regain access.')
@section('mobile-heading', 'Reset Password')
@section('mobile-description', 'Enter your new password to continue.')

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

        <!-- Password Reset Token -->
        <input type="hidden" name="token" value="{{ $request->route('token') }}">

        <!-- Email Address -->
        <x-input-group id="email" name="email" type="email" label="Email Address"
                       placeholder="you@example.com" value="{{ old('email', $request->email) }}" required autofocus autocomplete="username">
            <x-slot:left>
                <i class="fa-solid fa-envelope text-gray-400"></i>
            </x-slot:left>
        </x-input-group>

        <!-- New Password -->
        <x-input-group id="password" name="password" type="password" label="New Password" placeholder="••••••••" required autocomplete="new-password">
            <x-slot:left>
                <i class="fa-solid fa-lock text-gray-400"></i>
            </x-slot:left>
            <x-slot:right>
                <button type="button" data-toggle="password" data-target="#password">
                    <i class="fa-solid fa-eye text-gray-400 hover:text-primary"></i>
                </button>
            </x-slot:right>
        </x-input-group>

        <!-- Confirm Password -->
        <x-input-group id="password_confirmation" name="password_confirmation" type="password" label="Confirm Password" placeholder="••••••••" required autocomplete="new-password">
            <x-slot:left>
                <i class="fa-solid fa-lock text-gray-400"></i>
            </x-slot:left>
            <x-slot:right>
                <button type="button" data-toggle="password" data-target="#password_confirmation">
                    <i class="fa-solid fa-eye text-gray-400 hover:text-primary"></i>
                </button>
            </x-slot:right>
        </x-input-group>

        <div class="flex items-center justify-center mt-5">
            <x-primary-button class="w-full">
                {{ __('Reset Password') }}
            </x-primary-button>
        </div>

        <div class="flex items-center justify-center mt-3">
            <a href="{{ route('login') }}" class="text-sm text-primary hover:text-blue-900 font-medium">
                <i class="fa-solid fa-arrow-left mr-1"></i> Back to Login
            </a>
        </div>
    </form>
@endsection