@extends('layouts.app')
@section('title')
@endsection
@section('content')

    <div class="card card-white mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-normal text-head-color"><b>Access URL: {{ $shareData->Title ?  $shareData->Title :null }}</b></h6>
            <span > <a class="btn btn-danger btn-sm btn-rounded" href="{{ route('dashboard')}}">Back </a></span>
        </div>

       
            <div class="body-content">
                <form id="sendOTPForm" action="{{ url('send-otp') }}/{{ base64_encode($shareData->ID)}}"
                     method="POST">
                    @csrf
                    <div class="row">
                         
                         <div class=" form-group col-md-4 text-center"></div>
                        <div class=" form-group col-md-4 text-center">
                            <label> Mobile No  <span class="astric-sign">*</span></label>
                            <input type="text" placeholder="Enter Mobile No" maxlength="10" onkeypress='return event.charCode >= 48 && event.charCode <= 57' name="MobileNo" value="{{ old('MobileNo') }}" class="form-control">
                            @error('MobileNo')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
    
                        <div class="form-group col-md-12 serch-button text-center">
                            <button type="submit" id="SendOTPSubmit" class="btn btn-success btn-sm btn-rounded">
                                Send OTP</button>
                        </div>

                    </div>
                    
                </form>
                

            </div>
</div>

    @endsection
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
       
        $(document).ready(function () {
            
                $("#SendOTPSubmit").click(function (e) 
                {     
                    e.preventDefault();
                    var form = $("#sendOTPForm");
                    form.validate({
                        rules: {
                            MobileNo: {
                                required: true
                            },
                        
                        },
                        messages: {
                            MobileNo: {
                                required: "MobileNo cannot be blank."
                            }
                        
                        },
                        errorElement: 'span',
                        errorPlacement: function (error, element) {
                            error.addClass('invalid-feedback');
                            element.closest('.form-group').append(error);
                        },
                        highlight: function (element, errorClass, validClass) {
                        $(element).addClass('is-invalid');            
                        },
                        unhighlight: function (element, errorClass, validClass) {
                        $(element).removeClass('is-invalid');
                        }
    
                    });
                    if (form.valid() === true) {
                        $("#sendOTPForm").submit();
                    }  
                });


                // $("#ValidateOTPSubmit").click(function (e) 
                // {     
                //     e.preventDefault();
                //     var form = $("#ValidateOTPForm");
                //     form.validate({
                //         rules: {
                //             mobile_no: {
                //                 required: true
                //             },
                //             MobileOTP: {
                //                 required: true
                //             },
                        
                //         },
                //         messages: {
                //             mobile_no: {
                //                 required: "MobileNo cannot be blank."
                //             },
                //             MobileOTP: {
                //                 required: "OTP cannot be blank."
                //             }
                        
                //         },
                //         errorElement: 'span',
                //         errorPlacement: function (error, element) {
                //             error.addClass('invalid-feedback');
                //             element.closest('.form-group').append(error);
                //         },
                //         highlight: function (element, errorClass, validClass) {
                //         $(element).addClass('is-invalid');            
                //         },
                //         unhighlight: function (element, errorClass, validClass) {
                //         $(element).removeClass('is-invalid');
                //         }
    
                //     });
                //     if (form.valid() === true) {
                //         $("#ValidateOTPSubmit").submit();
                //     }  
                // });
         
        });
    
    </script>