@extends('layouts.front')

@section('title')

Pet Clap || Sign-up

@stop

@section('page-class')
    signup-fluid
@parent

@stop


@section('content')
<div class="container">
    <div class="custom-form">
        <div class="row">
            <div class="col-md-6">
                <div class="business-form wow animated zoomIn" data-wow-duration="1s">
                    <form class="row form-styling" id="business-registration-form" action="{{route('business.register.process.from')}}" method="post">
                         @csrf
                        <div class="col-12">
                            <h2 class="form-heading">Create Business Account</h2>
                        </div>
                        <div class="form-group col-12">
                            <input type="text" class="form-control" placeholder="Business Name" name="name" value="{{ old('name') }}" data-parsley-required-message="Business name is required" data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" required>
                            <span class="text-danger"></span>
                        </div>
                        <div class="form-group col-12">
                            <input type="text" class="form-control" placeholder="Mobile No. or Email ID" data-parsley-required-message="Mobile No. or Email is required" data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" data-parsley-pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$|^(\+91-|\+91|0)?\d{10}$" data-parsley-pattern-message="Please provide valid email or phone number" required name="email" value="{{ old('email') }}">
                            <span class="text-danger"></span>
                        </div>
                        <div class="form-group col-12">
                            <input type="password" class="form-control" placeholder="Password" name="password" data-parsley-minlength="8" data-parsley-required-message="Password is required" data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" required>
                            <span class="text-danger"></span>
                        </div>
                        <div class="col-12">
                            <p>By clicking sign up, you agree to our <b>Terms Data Policy</b> and <b>Cookie Policy</b>. You receive SMS notification from us can opt out at any time.</p>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-styling">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-6">
                <div class="personal-form wow animated zoomIn" data-wow-duration="2s">
                   
                    <form class="row form-styling" id="sing-up-form" action="{{route('provider.register.process.from')}}" method="post">
                         @csrf
                        <div class="col-12">
                            <h2 class="form-heading">Create Individual Account</h2>
                        </div>
                        <div class="form-group col-6">
                            <input type="text" class="form-control" placeholder="First Name" name="first_name" value="{{ old('first_name') }}" data-parsley-required-message="First name is required" data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" required>

                            <span class="text-danger"></span>
                        </div>
                        <div class="form-group col-6">
                            <input type="text" class="form-control" placeholder="Last Name" name="last_name" value="{{ old('last_name') }}" data-parsley-required-message="Last name is required" data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" required>
                            <span class="text-danger"></span>
                        </div>
                        <div class="form-group col-12">
                            <input type="text" class="form-control" placeholder="Mobile No. or Email ID" data-parsley-required-message="Mobile No. or Email is required" data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" data-parsley-pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$|^(\+91-|\+91|0)?\d{10}$" data-parsley-pattern-message="Please provide valid email or phone number" required name="email" value="{{ old('email') }}">
                            <span class="text-danger"></span>
                        </div>
                        <div class="form-group col-12">
                            <input id="password" type="password" class="form-control" placeholder="Password" name="password" data-parsley-minlength="8" data-parsley-required-message="Password is required" data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" required>
                            <span class="text-danger"></span>
                        </div>
                        <div class="col-12">
                            <p>By clicking sign up, you agree to our <b>Terms Data Policy</b> and <b>Cookie Policy</b>. You receive SMS notification from us can opt out at any time.</p>
                        </div>
                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-styling">Submit</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal fade otp-popup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content text-center">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            <div class="modal-body">
                <p>Please enter the <b>One Time Password</b> to verify your account</p>
                <form class="mb-2">
                    <input type="hidden" id="hidden_user-id">
                    <input class="otp-input" type="text" id="digit-1" name="digit-1" data-next="digit-2" maxlength="1"/>
                    <input class="otp-input" type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" maxlength="1"/>
                    <input class="otp-input" type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" maxlength="1"/>
                    <input class="otp-input" type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" maxlength="1"/>
                    <br><span class="text-danger" id="otp-verification-msg"></span>
                    <span class="text-success" id="otp-resent-msg"></span>
                </form>
                <span id="countdowntimer">00:30</span>
            </div>
            <div class="text-center mt-2 mb-2 modal-foot">
                <button type="button" id="otp-btn" class="btn">Submit</button>
            </div>
            <a href="" id="resend-otp"><p id="otp-resend-btn" style="display: none">Resend One-Time Password</p></a>
        </div>
    </div>
</div>


@section('scripts')
<script src="{{asset('front/js/vendor/parsley.min.js')}}"></script>

<script type="text/javascript">

    /*$("#sing-up-form").parsley({
       errorClass: 'is-invalid text-danger',
       successClass: 'is-valid',
       errorsWrapper: '<span class="form-text text-danger"></span>',
       errorTemplate: '<span></span>',
       trigger: 'change'
    });*/

    $('#sing-up-form').parsley({
           errorClass: 'is-invalid text-danger',
           successClass: 'is-valid',
           errorsWrapper: '<span class="form-text text-danger"></span>',
           errorTemplate: '<span></span>',
           trigger: 'change'
        }).subscribe('parsley:form:validate', function (formInstance) {

            formInstance.validationResult = false //stops normal form submit

            if (formInstance.isValid() == true) { // check if form valid or not

                var form = $('#sing-up-form');         
                var data = form.serialize();
                $.ajax({
                    method: form.attr('method'),
                    url:form.attr('action'),
                    
                    data: data,
                    beforeSend: function () { 
                    },
                    success: function (data) {
                        console.log(data)
                        if(data.error == false){
                            
                            $('#hidden_user-id').val(data.user_id);
                            $('#exampleModal').modal('show');
                            /*swal({
                                title: "Success",
                                text: data.message,
                                type: "success",

                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                            },
                            function(){
                                location.reload(true);

                            });*/
                            
                        }
                        
                        else{  
                            swal({
                                title: "oops!",
                                text: data.message,
                                type: "error",
                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                            }); 
                        }
                    },
                    error: function () {
                          
                      console.log(`Failed`)
                    },
                    complete: function () { 
                    },
                }); 

            //$.post("createuser.php", $(#signupform).serialize());
            }
        }
    );

    $('#otp-btn').on('click', function(e) {

        var otp = $('#digit-1').val() + $('#digit-2').val() + $('#digit-3').val() + $('#digit-4').val();
        console.log(otp);

        $.ajax({
            method: 'POST',
            url:"{{route('registration.verify.otp')}}",
            
            data: {otp: otp, user_id: $('#hidden_user-id').val(), _token: "{{ csrf_token() }}"},
            beforeSend: function () { 
            },
            success: function (data) {

                if(data.error == false){
                    
                    window.location = "{{route('provider.profile.step1')}}";
                }
                
                else{  
                    
                    $('#otp-verification-msg').html(data.message);
                    $('.otp-input').val('');
                    setInterval(function(){

                        $('#otp-verification-msg').html('');
                            
                            
                    },3000); 
                }
            },
            error: function () {
                  
              console.log('Failed');
            },
            complete: function () { 
            },
        }); 
    });


    $('#resend-otp').on('click', function(e) {

        e.preventDefault();

        $.ajax({
            method: 'POST',
            url:"{{route('registration.resend.otp')}}",
            
            data: {user_id: $('#hidden_user-id').val(), _token: "{{ csrf_token() }}"},
            beforeSend: function () { 
            },
            success: function (data) {

                if(data.error == false){
                    
                    $('#otp-resent-msg').html(data.message);
                    $('.otp-input').val('');
                    setInterval(function(){

                        $('#otp-resent-msg').html('');
                            
                            
                    },3000); 
                    //$('#countdowntimer').show();
                    //$("#countdowntimer").html(30);
                    
                }
                
                else{  
                    

                }
            },
            error: function () {
                  
              console.log('Failed');
            },
            complete: function () { 
            },
        }); 

    });

    /*$('.otp-input').focus(function(){
        $('.otp-input').val('');
    });*/

    $('#business-registration-form').parsley({
           errorClass: 'is-invalid text-danger',
           successClass: 'is-valid',
           errorsWrapper: '<span class="form-text text-danger"></span>',
           errorTemplate: '<span></span>',
           trigger: 'change'
        }).subscribe('parsley:form:validate', function (formInstance) {

            formInstance.validationResult = false //stops normal form submit

            if (formInstance.isValid() == true) { // check if form valid or not

                var form = $('#business-registration-form');         
                var data = form.serialize();
                $.ajax({
                    method: form.attr('method'),
                    url:form.attr('action'),
                    
                    data: data,
                    beforeSend: function () { 
                    },
                    success: function (data) {

                        if(data.error == false){

                            $('#hidden_user-id').val(data.user_id);
                                                           
                            $('#exampleModal').modal('show');
                            /*swal({
                                title: "Success",
                                text: data.message,
                                type: "success",

                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                            },
                            function(){
                                location.reload(true);

                            });*/
                            
                        }
                        
                        else{  
                            swal({
                                title: "oops!",
                                text: data.message,
                                type: "error",
                                closeOnConfirm: false,
                                showLoaderOnConfirm: true,
                            }); 
                        }
                    },
                    error: function () {
                          
                      console.log(`Failed`)
                    },
                    complete: function () { 
                    },
                }); 

            //$.post("createuser.php", $(#signupform).serialize());
            }
        }
    );

    $('#exampleModal').on("hidden.bs.modal", function () {

        $('#otp-verification-msg').html('');
        $('.otp-input').val('');
    });

    $('#exampleModal').on("shown.bs.modal", function () {

        var timeleft = 30;
        var downloadTimer = setInterval(function(){
        timeleft--;
        $("#countdowntimer").html('00:'+timeleft);
            if(timeleft <= 0) {

                clearInterval(downloadTimer);
                $('#otp-resend-btn').show();
                $('#countdowntimer').hide();
            }
            
        },1000);
    });

    
    
</script>

@parent

@stop 

@endsection