@extends('layouts.guest.app')

@section('content')
<section class="signup-section">
<div class="container mt-5">
    <div class="row justify-content-center mt-5">
        <div class="col-md-8 mt-5">
            <div class="card mt-5">
                <div class="card-header">{{ __('Reset Password') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('password.update') }}" id="emailResetConForm">
                        @csrf
                        <input type="hidden" name="token" value="{{ $token }}">
                        <div class="row justify-content-center">
                            <div class="col-md-11">
                                <div class="form-group m-2 input-box">
                                    <label class="signup-label">{{ __('Email Address') }}</label>
                                    <input type="email" name="email" class="form-control input-border signup-label" placeholder="Enter Email" value="{{ $email ?? old('email') }}" required>
                                </div>
                                @error('email')
                                    <label class="label m-2">
                                        <strong class="text-danger">
                                            {{ $message }}</strong>
                                    </label>
                                @enderror

                                <div class="form-group input-box position-relative m-2">
                                    <label class="signup-label">{{ __('Password') }}</label>
                                    <input type="password" id="password" name="password"
                                        class="form-control input-border padding-right"
                                        autocomplete="current-password" placeholder="Enter Password">
                                    <div class="d-flex eyes-box align-items-center">
                                        <img src="{{ asset('assets/img/eyes-hide.svg') }}" class="eyes-hide cursor-pointer" alt="">
                                    </div>
                                </div>
                                @error('password')
                                    <label class="label m-2">
                                        <strong class="text-danger">
                                            {{ $message }}</strong>
                                    </label>
                                @enderror

                                <div class="form-group input-box position-relative m-2">
                                    <label class="signup-label">{{ __('Confirm Password') }}</label>
                                    <input type="password" name="password_confirmation"
                                        class="form-control input-border padding-right"
                                        autocomplete="current-password" placeholder="Re-Enter Password">
                                    <div class="d-flex eyes-box align-items-center">
                                        <img src="{{ asset('assets/img/eyes-hide.svg') }}" class="eyes-hide cursor-pointer" alt="">
                                    </div>
                                </div>
                                @error('password_confirmation')
                                    <label class="label">
                                        <strong class="text-danger">
                                            {{ $message }}</strong>
                                    </label>
                                @enderror


                                <div class="row mb-0">
                                    <div class="col-md-6 offset-md-4">
                                        <button type="submit" class="btn work-spacebtn">
                                            {{ __('Reset Password') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    {{-- <form method="POST" action="{{ route('password.update') }}">
                        @csrf

                        <input type="hidden" name="token" value="{{ $token }}">

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn work-spacebtn">
                                    {{ __('Reset Password') }}
                                </button>
                            </div>
                        </div>
                    </form> --}}
                </div>
            </div>
        </div>
    </div>
</div>
</section>
@endsection
@section('scripts')
    <script type="text/javascript">
        
        /*Password show and hide*/
        $(document).on('click','.eyes-hide', (e) => {
            let passwordInput = $(e.target).closest('.input-box').find('input');
            const isPasswordVisible = passwordInput.attr('type') === 'text';
            if (isPasswordVisible) {
                passwordInput.attr('type', 'password');
                $(e.target).attr('src', '{{ asset("assets/img/eyes-hide.svg") }}');
            } else {
                passwordInput.attr('type', 'text');
                $(e.target).attr('src', '{{ asset("assets/img/eyes-show.svg") }}');
            }
        });

        /*disabled link on mobile device*/
        document.addEventListener('DOMContentLoaded', function() {
            if (window.innerWidth <= 768) {
                var links = document.querySelectorAll('a');
                links.forEach(function(link) {
                    link.addEventListener('click', function(event) {
                        event.preventDefault();
                        alert('This link is disabled on mobile devices.');
                    });
                    link.style.pointerEvents = 'none';
                    link.style.color = '#999';
                });
            }
        });
    </script>
@endsection