@extends('layouts.app')

@php($hideLayout = true)

@section('content')
<div class="flex min-h-screen flex-col items-center justify-center gap-4 bg-gray-50 px-4 md:p-4 ">
        <div class="flex w-full max-w-md flex-col items-center justify-center rounded-2xl bg-white px-6 py-8 md:p-8 shadow-xl border border-dashed border-slate-200">
            <!-- Logo -->
            <div class="mb-2">
                <a href="/">
                    <img alt="Shikkha Point Logo" class="w-[160px]" src="{{asset('assets/images/logo.svg')}}">
                </a>
            </div>
            
            <!-- Title -->
            <div class="text-center">
                <p class="text-dark font-medium"><span class="font-medium">{{__('auth.welcome',['name'=>'Shikkha Point'])}}</span></p>
                <p class="mt-2 text-xl font-bold text-gray-800">{{__('auth.reset_password')}}</p>
            </div>
            
            <!-- Illustration -->
            <div class="my-4 h-40 w-full">
                <img alt="Reset Password illustration" class="h-full w-full object-contain" src="{{asset('assets/images/forgot-password.png')}}">
            </div>
            
            <!-- Session Status -->
            @if (session('status'))
                <div class="mb-4 text-sm font-medium text-green-600">
                    {{ session('status') }}
                </div>
            @endif
            
            <!-- Reset Password Form -->
            <form method="POST" action="{{ route('password.store') }}" class="w-full space-y-4">
                @csrf
                
                <!-- Password Reset Token -->
                <input type="hidden" name="token" value="{{ $request->route('token') }}">
                
                <!-- Email Field -->
                <div>
                    <label for="email" class="mb-1 block text-md font-medium text-gray-700">
                        {{__('auth.email')}} <span class="text-red-500">*</span>
                    </label>
                    <input id="email" 
                           type="email" 
                           name="email" 
                           value="{{ old('email', $request->email) }}"
                           required
                           autofocus
                           autocomplete="email"
                           placeholder="{{__('auth.email_placeholder')}}"
                           class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary focus:ring-primary @error('email') border-red-500 @enderror">
                    @error('email')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Password Field -->
                <div>
                    <label for="password" class="mb-1 block text-md font-medium text-gray-700">
                        {{__('auth.password')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input id="password" 
                               type="password"
                               name="password"
                               required
                               autocomplete="new-password"
                               placeholder="{{__('auth.password_placeholder')}}"
                               class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary focus:ring-primary @error('password') border-red-500 @enderror">
                        <button type="button" 
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500  hover:text-primary-dark"
                                onclick="togglePasswordVisibility('password')">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="cursor-pointer">
                                <path d="M21.1303 9.8531C22.2899 11.0732 22.2899 12.9268 21.1303 14.1469C19.1745 16.2047 15.8155 19 12 19C8.18448 19 4.82549 16.2047 2.86971 14.1469C1.7101 12.9268 1.7101 11.0732 2.86971 9.8531C4.82549 7.79533 8.18448 5 12 5C15.8155 5 19.1745 7.79533 21.1303 9.8531Z" 
                                      stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" 
                                      stroke="currentColor" stroke-width="1.5"></path>
                            </svg>
                        </button>
                    </div>
                    @error('password')
                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                </div>
                
                <!-- Confirm Password Field -->
                <div>
                    <label for="password_confirmation" class="mb-1 block text-md font-medium text-gray-700">
                        {{__('auth.confirm_password')}} <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <input id="password_confirmation" 
                               type="password"
                               name="password_confirmation"
                               required
                               autocomplete="new-password"
                               placeholder="{{__('auth.confirm_password_placeholder')}}"
                               class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary focus:ring-primary">
                        <button type="button" 
                                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 hover:text-primary-dark"
                                onclick="togglePasswordVisibility('password_confirmation')">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="cursor-pointer">
                                <path d="M21.1303 9.8531C22.2899 11.0732 22.2899 12.9268 21.1303 14.1469C19.1745 16.2047 15.8155 19 12 19C8.18448 19 4.82549 16.2047 2.86971 14.1469C1.7101 12.9268 1.7101 11.0732 2.86971 9.8531C4.82549 7.79533 8.18448 5 12 5C15.8155 5 19.1745 7.79533 21.1303 9.8531Z" 
                                      stroke="currentColor" stroke-width="1.5"></path>
                                <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" 
                                      stroke="currentColor" stroke-width="1.5"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- Submit Button -->
                <button type="submit" class="btn-primary w-full !py-[12px]">
                    {{__('auth.reset_password_btn')}}
                </button>
            </form>
        </div>
    </div>

    <script>
        function togglePasswordVisibility(fieldId) {
            const passwordField = document.getElementById(fieldId);
            const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordField.setAttribute('type', type);
        }
    </script>
@endsection