@extends('Web.Layout.layout')
@section('title', __('setting.setting_reset_pwd'))
@section('css')
    <style>
        body {
            background-color: #ffffff;
        }

        .bg-darkBlue {
            background-color: #0d3675;
       

        }
    </style>
@endsection
@section('content')
    <div class="container-fluid p-0 m-0 overflow-hidden bgcolor">
        <div class="row">
            <div class="col-sm-12 mt-3">
                <div class="d-flex justify-content-center">
                    <div class=" col-sm-6 col-md-8 col-lg-5 mt-2 p-2">
                        @if ($errors->any())
                            <div class="row">
                                <div class="col-sm-10 col-sm-offset-3">
                                    {!! implode('', $errors->all('<div class="alert alert-danger text-white">:message</div>')) !!}
                                </div>
                            </div>
                        @endif

                        <div class="container mt-2">
                            <div class="col-12 d-flex justify-content-center mt-2 mb-3">
                                <img src="{{ asset('uploads/patient/logo/tracheslogo.png') }}"
                                    class="mt-5 mb-4 img-fluid " alt="Logo" style="height: auto;width:500px;">

                            </div>
                          
                            <div class="d-flex">
                                <p class=" text-dark fw-bold">{{ __('dashboard.VerifyOtp_title') }}</p>
                            </div>
                            <p class="">{{ __('dashboard.VerifyOtp_subtitle') }}</p>
                            <p class="">{{ __('dashboard.VerifyOtp_text') }}</p>

                            <form class="form-horizontal" method="POST" action="{{ route('patient.otp.verify') }}"
                                id="subform">
                                {{ csrf_field() }}
                                @if (isset($_GET['id']))
                                    <input type="hidden" name="id" value="{{ $_GET['id'] }}">
                                @endif
                                @if (isset($_GET['slug']))
                                    <input type="hidden" name="slug" value="{{ $_GET['slug'] }}">
                                @endif

                                <div class="form-group">
                                    <div class=" mb-3">
                                        <input class="form-control mt-2 p-1  rounded-3 text-muted border border-2"
                                            name="otp" placeholder="{{ __('dashboard.otp') }}" type="text"
                                            maxlength="7" id='otp' onkeypress="return /[0-9]/i.test(event.key)">
                                            <a class="d-flex justify-content-end text-decoration-none"  href="{{ route('patient.resend.otp', ['id'=>$_GET['id'], 'slug'=> ($_GET['slug'] ?? '')]) }}">{{ __('dashboard.resend') }} </a>
                                    </div>
                                </div>
                                <div align="center" class="d-grid gap-2  d-flex justify-content-center  mt-5 mb-5">
                                    
                                    <button class="col-lg-3 btn btn-primary bg-darkBlue rounded-pill "> {{ __('dashboard.verifyotp') }} </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- modal --}}

    <div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content ">
                <div class="modal-header d-flex justify-content-center  ">
                    <h5 class="modal-title " id="exampleModalLabel">{{ __('register.register_email_text') }}</h5>
                </div>
                <div class="modal-body flex-column d-flex justify-content-center">
                    <h6>{{ __('register.email_second_text') }}</h6>
                    <br>
                </div>
                <div class="modal-footer d-flex justify-content-center">
                    <button class="btn btn-dark  text-white border-0 p-2 bgDarkBlue" data-dismiss="modal"
                        aria-label="Close">
                        {{ __('register.dialog_ok') }}</button>
                </div>
            </div>
        </div>
    </div>
@section('js')
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
   <script nonce="{{ $cspNonce }}">
        $("#subform").validate({
            rules: {
                otp: {
                    required: true,
                    minlength: 7,
                }
            },
            messages: {
                otp: {
                    minlength: 'Please enter 7 digits',
                },
            }
        });
    </script>
    @if (isset($popup) && $popup == '1')
        <script nonce="{{ $cspNonce }}">
            $(function() {
                $('#exampleModal').modal('show');
            });
        </script>
    @endif

@endsection
@endsection