@extends('auth.layouts.app')

@section('meta_title', "تغيير كلمة المرور")

@section('content')

    <div class="mb-5 text-center">
        <h2 class="fw-bold">{{ __('app.Forgot password') }}</h2>

        @include('website.components.success-submit')
        @include('website.components.error-submit')
    </div>

    <form action="{{ route('password.store') }}" method="POST">
        @csrf

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

        <div class="mb-3">
            <div class="form-floating">
                <input type="text" name="email" value="{{ $request->email }}" id="email" class="form-control" readonly>
                <label for="email">{{ __('labels.Email') }}</label>
            </div>
        </div>

        <div class="mb-3">
            <div class="input-group">
                <div class="form-floating">
                    <input type="password" id="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" placeholder="" required />
                    <label for="password">{{ __('labels.Password') }}</label>
                </div>

                <span class="input-group-text" onclick="togglePasswordVisibility('password', this)">
                    <i class="show-password fa-solid fa-eye"></i>
                </span>
            </div>

            @include('website.components.invalid-input', ['name' => 'password'])
        </div>

        <div class="mb-4">
            <div class="input-group">
                <div class="form-floating">
                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" placeholder="" required />
                    <label for="password_confirmation">{{ __('labels.Confirm password') }}</label>
                </div>

                <span class="input-group-text" onclick="togglePasswordVisibility('password_confirmation', this)">
                    <i class="show-password fa-solid fa-eye"></i>
                </span>
            </div>

            @include('website.components.invalid-input', ['name' => 'password_confirmation'])
        </div>
        
        <div class="d-grid gap-3">
            <button type="submit" class="btn btn-primary fw-bold">{{ __('app.Reset password') }}</button>

            <div class="text-center fs-14">
                <a href="{{ route('login') }}" class="text-primary text-decoration-underline fw-bold">{{ __('app.messages.Back to login') }}</a>
            </div>
        </div>
    </form>

@endsection