@extends('themes.frontend.layouts.app')
@section('validate') @stop
@section('recaptcha') @stop

@if (isset($dataArr['meta_title']))
@section('page-title'){{ $dataArr['meta_title'] }}@stop
@else
@section('page-title'){{ $dataArr['title'] }}@stop
@endif
@if (isset($dataArr['meta_key']))
@section('meta-keywords'){{ $dataArr['meta_key'] }}@stop
@endif
@if (isset($dataArr['meta_descp']))
@section('meta-description'){{ $dataArr['meta_descp'] }}@stop
@endif
@if (isset($dataArr['image_path']))
@section('meta-image'){{ $dataArr['image_path'] }}@stop
@endif
@if ($dataArr['full_url'])
@section('cur-url'){{ $dataArr['full_url'] }}@stop
@endif

@section('content')
<div>
    <img src="{{asset('themes/frontend/assets/images/checklist-bg.jpg')}}" class="w-100">
</div>
<div class="container-fluid about-1 p-0">
    <div class="wave-effect  wave-anim">
        <div class="waves-shape shape-1">
            <div class="wave wave-1"></div>
        </div>
        <div class="waves-shape shape-2">
            <div class="wave wave-2"></div>
        </div>
        <div class="waves-shape shape-3">
            <div class="wave wave-3"></div>
        </div>
    </div>
</div>
<div class="custom-row-image-1">
    <img src="{{asset('themes/frontend/assets/images/restaurant-icon.png')}}">
</div>
<!-- Wave effect -->

<section class="reservation">
    <div class="container p-0">
        <div class="row">
            <div class="col-12">
                <div class="inner-tittle">
                    <h1>Sign Up</h1>
                </div>
            </div>
            <div class="col-lg-3 col-12 p-0 section-50 wow fadeInLeft">
                &nbsp;
            </div>

            <div class="col-lg-6 col-12 p-0  section-50 wow fadeInRight">
                <form class="reservation-form app-1" id="signupFrm" action="{{ route('web.signup.save') }}" method="POST" enctype="multipart/form-data" style="padding: 30px;">
                    
                    {{ csrf_field() }}
                    <!-- Hidden text and password fields to trick browser autocomplete -->
                    <input type="text" name="hidden" id="hidden1" style="display:none;">
                    <input type="password" name="hidden" id="hidden2" style="display:none;">
                    <x-form.field.hidden name="recaptcha_v3" id="recaptcha_v3" />


                    <div class="form-row">
                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('f_name') }}" required=true>
                            <x-form.field.text class="form-control" type="text" id="f_name" name="f_name" value="{{ old('f_name') }}" placeholder="First Name*" value="{{ old('f_name') }}"/>
                        </x-form.frnt_group_lyt7v1>
                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('l_name') }}">
                            <x-form.field.text class="form-control" type="text" id="l_name" name="l_name" value="{{ old('l_name') }}" placeholder="Last Name*" value="{{ old('l_name') }}"/>
                        </x-form.frnt_group_lyt7v1>

                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('mobile') }}" required=true>
                            <x-form.field.text class="form-control" type="text" id="mobile" name="mobile" value="{{ old('mobile') }}" placeholder="Phone*" value="{{ old('mobile') }}"/>
                        </x-form.frnt_group_lyt7v1>

                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('email') }}" required=true>
                            <x-form.field.text class="form-control" type="email" id="email" name="email" value="{{ old('email') }}" placeholder="E-mail Address*" value="{{ old('email') }}"/>
                        </x-form.frnt_group_lyt7v1>
                        
                        <x-form.frnt_group_lyt7v1 default_class="form-group col-md-12" error="{{ $errors->first('address') }}">
                            <x-form.field.text class="form-control" type="text" id="address" name="address" value="" placeholder="Address" value="{{ old('address') }}"/>
                        </x-form.frnt_group_lyt7v1>
                        
                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('city') }}">
                            <x-form.field.text class="form-control" type="text" id="city" name="city" value="" placeholder="City" value="{{ old('city') }}"/>
                        </x-form.frnt_group_lyt7v1>
                        
                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('state') }}">
                            <x-form.field.text class="form-control" type="text" id="state" name="state" value="" placeholder="Province" value="{{ old('state') }}"/>
                        </x-form.frnt_group_lyt7v1>
                        
                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('pincode') }}">
                            <x-form.field.text class="form-control" type="text" id="pincode" name="pincode" value="" placeholder="Zipcode*" value="{{ old('pincode') }}"/>
                        </x-form.frnt_group_lyt7v1>

                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('country') }}">
                            <x-form.field.text class="form-control" type="text" id="country" name="country" value="" placeholder="Country*" value="{{ old('country') }}"/>
                        </x-form.frnt_group_lyt7v1>
                        
                        <x-form.frnt_group_lyt7v1 default_class="form-group col-md-12" error="{{ $errors->first('username') }}" required=true>
                            <x-form.field.text class="form-control" type="text" id="username" name="username" value="" placeholder="Username*" value="{{ old('username') }}"/>
                        </x-form.frnt_group_lyt7v1>

                        <x-form.frnt_group_lyt7v1 class="passswordWrap" error="{{ $errors->first('password') }}"  info="At least 8 chars,with one(lowercase, uppercase, digit, special)"  required=true>
                            <x-form.field.text class="form-control" type="password" id="password" name="password" value="" placeholder="Password*" />
                            <span class="password-toggle-icon"><i class="fa fa-eye"></i></span>
                        </x-form.frnt_group_lyt7v1>

                        <x-form.frnt_group_lyt7v1 error="{{ $errors->first('password_confirmation') }}" required=true>
                            <x-form.field.text class="form-control" type="password" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password*" />
                            <span class="password-toggle-icon password_confirmation-toggle-icon"><i class="fa fa-eye"></i></span>
                        </x-form.frnt_group_lyt7v1>
                    </div>
                    <div class="form-row">
                        <div class="form-group res-btn col-6">
                            <button type="submit" class="btn btnAppointmentsubmit" id="send">Submit</button>
                        </div>
                        <div class="form-group res-btn col-6">
                            <a class="float-right" href="{{ route('web.login') }}" role="button" style="color: #FFF; font-family:'Rufina';font-size:18px; margin-top:15px"> {{ __('auth.sign_in_txt') }}</a>
                        </div>
                    </div>
                </form>

                <div id="msg_id"></div>

                {{-- Alert message start --}}
                @if(session()->has('alert'))
                <x-form.alert type="{{ session()->get('alert') }}" title="{{ session()->get('title') }}" message="{{ session()->get('message') }}" />
                @endif
                {{-- Alert message end --}}
                <!-- END: FORM -->

                @if ($errors->any())
                <div class="row mb-5">
                    <div class="col-lg-12 alert">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li class="alert alert-danger" role="alert" style="margin-bottom: 2px;">
                                {{ $error }}
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@stop

@push('scripts')
<script src="{{asset('themes/assets/js/toggle-password.js')}}"></script>
<script src="{{asset('themes/frontend/assets/js/sweetalert.min.js')}}"></script>

<script>
   $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


    $.validator.addMethod("uniqueEmail", function (value, element) {
        let isValid = false;
        // Make an AJAX request to the server
        $.ajax({
            url: "{{ route('check-user-unique-field') }}", // Server endpoint to validate email
            type: 'GET', // HTTP method
            data: { field: 'email', value: value }, // Data sent to the server
            async: false, // Make the request synchronous
            dataType: "json",
            success: function (response) {
                isValid = response.isUnique; // Response should indicate if email is unique
            },
            error: function () {
                isValid = false; // Handle errors, assume not unique
            }
        });
        return isValid;
    }, "This email is already registered, please use another one.");

    
    $.validator.addMethod("uniqueUsername", function (value, element) {
        let isValid = false;
        // Make an AJAX request to the server
        $.ajax({
            url: "{{ route('check-user-unique-field') }}", // Server endpoint to validate email
            type: 'GET', // HTTP method
            data: { field: 'username', value: value }, // Data sent to the server
            async: false, // Make the request synchronous
            dataType: "json",
            success: function (response) {
                isValid = response.isUnique; // Response should indicate if email is unique
            },
            error: function () {
                isValid = false; // Handle errors, assume not unique
            }
        });
        return isValid;
    }, "This Username is already registered, please use another one.");

    $("#signupFrm").validate({
      rules: {
        email: {
          required: true,
          email: true,
          uniqueEmail: true
        },
        mobile: {
          required: true
        },
        f_name: {
          required: true
        },
        l_name: {
          required: true
        },
        pincode: {
          required: true
        },
        country: {
          required: true
        },
        username: {
          required: true,
          uniqueUsername: true
        },
        password: {
          required: true
        },
        password_confirmation : {
          required: true,
          equalTo : "#password"
        }
      },
      messages: {
        f_name: "First name is required",
        l_name: "Last name is required",
        email: {
            required: "Email address is required",
            email: "Enter a valid Email address",
            uniqueEmail: "This email is already registered, please use another one."
        },
        mobile: "Phone is required",
        pincode: "Zipcode is required",
        country: "Country is required",        
        username: {
            required: "Username is required",
            uniqueUsername: "This username is already used, please use another one."
        },
        password: "Password is required",
        password_confirmation: {
         required: "Confirm password is required",
         equalTo: "This does not match with your password"
       }
     },
     errorPlacement: function(error, element)
     {
      if ( element.is(":checkbox") )
      {
        error.appendTo( element.parents('.error-container') );
      }
      else
      { // This is the default behavior
        error.insertAfter( element.parent() );
      }
    }
  }),
    $("#send").click(function(e) {
      var btnObj = $(this);
      e.preventDefault();
      grecaptcha.ready(function() {
        grecaptcha.execute("{{ Config('commonconstants.recaptcha.site_key') }}", {action: 'signuppage'}).then(function(token) {
          var a = $("#signupFrm");
          if (1 == a.valid()) {
        //   alert(token);
          if(token) {      
            btnObj.html("<i class=\"fa fa-refresh fa-spin text-white\"></i>&nbsp;Please wait...");
            btnObj.attr('disabled','disabled');

            $("#recaptcha_v3").val(token);
            // alert($("#recaptcha_v3").val());
            $("#signupFrm").submit();
          }
        }
      });
      });
    })
  });
</script>
@endpush