@extends('Front.PatientLayout.app')
@section('title', 'ForgotPassword')
@section('css')
    <link rel="stylesheet" href="{{ asset('patientAssets') }}/css/forgotpass.css">

@endsection
@section('content')
    <div class="container-fluid px-0 vh-100 bg-white">
        <div class=" d-flex justify-content-center mb-5">
            <img src="{{ s3Url('uploads') }}/logo.png" style="width: 15rem;" class=" mt-5 object-fit-cover img-fluid"
                alt="...">
        </div>
        <div class="container d-flex justify-content-center align-items-center">
            <div class="row">
                <div class="col-12 rounded-4 bg-white mt-5 pt-2">
                    @if ($errors->any())
                        <div class="row">
                            <div class="col-sm-12 col-sm-offset-3">
                                {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
                            </div>
                        </div>
                    @endif
                    @if (session('message'))
                        <div class="alert alert-success">
                            {{ session('message') }}
                        </div>
                    @endif

                    <div class="d-flex justify-content-center mt-5 mb-3">
                        <img src="{{ asset(IMG) }}/logo/lock.webp" class="lock-logo">
                    </div>
                    <div class="d-flex justify-content-center">
                        <p class="text-center text-dark fw-bold">{{ __('register.lbl_for_pwd_label') }}</p>
                    </div>
                    <p class="text-center">{{ __('register.lbl_for_pwd_hint') }}</p>
                    <form method="POST" class="p-2 mb-3 m-3 mt-0" id="forgotPassword"
                        action="{{ route('front.patient.forgotPassword.otp') }}">
                        {{ csrf_field() }}
                        <div class=" mb-3">
                            <input class="form-control" placeholder="{{ __('register.lbl_for_pwd_email') }}" id="user_email"
                                type="text" name="email">

                            <input type="hidden" id="email" value="">
                            <span id="showError" class="text-danger"></span>
                        </div>

                        <div align="center" class="d-grid col-10 mx-auto mt-5 mb-2 ">
                            <button class="btn-color btn btn-primary rounded-pill text-white border-0 p-2 submit" type="submit">

                                {{ __('register.lbl_for_pwd_send') }}
                            </button>
                        </div>
                        <div align="center" class="d-grid col-10 mx-auto mt-3 ">
                            <a href="{{ route('front.patient.login.view') }}"
                                class="btn-color btn btn-primary rounded-pill text-white border-0 p-2 btn-color">
                                {{ __('dashboard.Back') }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



@section('js')
    <script nonce="{{ $cspNonce }}">
        let email = "{{ __('register.lbl_for_pwd_email') }}";
        let enterEmailOrNumber = "{{ __('register.email') }}";
        $(document).on('click', ".submit", function() {
            return checkForm();
        })
    </script>
    <script nonce="{{ $cspNonce }}" type="text/javascript" src="{{ asset('patientAssets') }}/js/forgotpass.js">
    </script>

@endsection
@endsection