@extends('frontend.layouts.app')

@section('title', app_name() . ' | ' . __('labels.frontend.passwords.reset_password_box_title'))

@section('content')
@php
    use App\Helpers\General\AMP;
@endphp
@push('after-styles')
    <style>
        .font-awesome-eye{
            margin-left: -30px;
            cursor: pointer;
            margin-top: 10px;
            font-size: 16px;
        }
    </style>
@endpush
    <div class="customer_login mt-32">
        <div class="container">
            <div class="row">
                <!--login area start-->
                <div class="col-lg-6 col-md-6 @if(!AMP::check()) offset-3 @endif ">
                    <div class="account_form">

                        <h2>Reset Password</h2>

                        {{ html()->form('POST', route('frontend.auth.password.reset'))->class('form-horizontal')->id('frm_reset')->open() }}
                        {{ html()->hidden('token', $token) }}

                        @if(session('status'))
                            <div class="alert alert-success">
                                {{ session('status') }}
                            </div>
                        @endif

                        @include('includes.partials.messages')


                        <p>
                            {{ html()->label(__('validation.attributes.frontend.email'))->for('email') }}
                            <input type="text" value="{{@$data['email']}}" disabled>
                            <input type="hidden" class="form-control" name="email" value="{{@$data['email']}}" >
                            {{-- {{ html()->email('email')
                                ->class('form-control')
                                ->placeholder(__('validation.attributes.frontend.email'))
                                ->attribute('maxlength', 191)
                                ->required() }} --}}
                        </p>
                        <p>
                            {{ html()->label(__('validation.attributes.frontend.password'))->for('password') }}
                            <div class="d-flex">
                                {{ html()->password('password')
                                    ->class('form-control')->value('')->id('password')
                                    ->placeholder(__('validation.attributes.frontend.password'))
                                    ->required() }}
                                    <i class="bi bi-eye-slash font-awesome-eye" id="togglePassword1"></i>
                            </div>
                        </p>
                        <p>
                            {{ html()->label(__('validation.attributes.frontend.password_confirmation'))->for('password_confirmation') }}
                            <div class="d-flex">
                                {{ html()->password('password_confirmation')->id('password_confirmation')
                                    ->class('form-control')->value('')
                                    ->placeholder(__('validation.attributes.frontend.password_confirmation'))
                                    ->required() }}
                                    <i class="bi bi-eye-slash font-awesome-eye" id="togglePassword2"></i>
                            </div>
                        </p>
                        <div class="login_submit">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    {{ form_submit(__('labels.frontend.passwords.reset_password_button'))->class('bg-dark button-reset rounded-1 text-white') }}
                                </div>
                            </div>
                        </div>

                        {{ html()->form()->close() }}
                    </div>
                </div>
                <!--login area start-->

            </div>
        </div>
    </div>
@push('after-scripts') 
    <script>
        const togglePassword1 = document.querySelector('#togglePassword1');
        const password1 = document.querySelector('#password');

        togglePassword1.addEventListener('click', () => {
            // Toggle the type attribute using
            // getAttribute() method
            const type = password1.getAttribute('type') === 'password' ? 'text' : 'password';
            password1.setAttribute('type', type);
            // Toggle the eye and bi-eye icon
            togglePassword1.classList.toggle('bi-eye');
        });

        const togglePassword2 = document.querySelector('#togglePassword2');
        const password2 = document.querySelector('#password_confirmation');

        togglePassword2.addEventListener('click', () => {
            // Toggle the type attribute using
            // getAttribute() method
            const type = password2.getAttribute('type') === 'password' ? 'text' : 'password';
            password2.setAttribute('type', type);
            // Toggle the eye and bi-eye icon
            togglePassword2.classList.toggle('bi-eye');
        });

    </script>
@endpush
@endsection