@extends('layouts.app')
@section("page-style")
<link href="{{ asset('front-assets/css/pages_css/step-form1.css') }}" rel="stylesheet">
<link href="{{ asset('front-assets/css/pages_css/login.css') }}" rel="stylesheet">
@endsection
@section('content')
<!----------|| Register Section ||---------->



    <section class="w-100 elcinaRegisterForm py-5 clearfix my-md-5" id="elcinaRegisterForm">
      <div class="container-fluid">
        <div class="elcinaFormDesign w-100">
          <div class="row">
            <div class="col-lg-6 d-none d-md-block ps-lg-0 p-3">
              <div class="logInBanner w-100 text-center">
                <img src="{{ asset('front-assets/images/login/1.jpg') }}" class="img-fluid w-100">
              </div>
            </div>
            <div class="col-lg-6 p-3">
              <div class="formInside w-100 pe-lg-5">
                <ul class="nav nav-tabs border-0" role="tablist" id="register_forms_tab">
                  <li role="presentation" class="p-2 active">
                    <a href="#BuyerFormTab" data-toggle="tab" aria-controls="BuyerFormTab" role="tab" aria-expanded="false"><span class="">Buyer</span></a>
                  </li>
                  <li role="presentation" class="p-2">
                    <a href="#SellerFormTab" data-toggle="tab" aria-controls="SellerFormTab" role="tab" aria-expanded="false"><span class="">Seller</span></a>
                  </li>
                </ul>
                <div class="tab-content" id="buyer_seller_forms ">
                  <div class="tab-pane active" role="tabpanel" id="BuyerFormTab">
                    <div class="login-box LoginBox pt-4">
                    <div class="headingTitle">
                       <h4>Register Now</h4>
                       <p class="HeadingP">Create your account and enjoy.</p>
                    </div>
                    <form class="w-100" action="javascript:;" onsubmit="Submit_Buyer_Form()" method="post" id="buyer_form">
                       @csrf
                       <div class="row">
                          <input type="hidden" name="id" value=""> 
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <input type="text" name="fname" class="form-control" placeholder="Your Name*">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <input type="text" name="lname" class="form-control" placeholder="Your Last Name" required="">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <input type="text" name="mobile" class="form-control" placeholder="Enter Contact Number" required="">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <input type="email" name="email" class="form-control" placeholder="Enter Email Address" required="">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <input type="password" name="password" class="form-control" placeholder="Enter Create Password" required="">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <input type="password" name="confirm_password" class="form-control" placeholder="Enter Confirm Password">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <select class="single-select form-control" name="country" required="" id="country"  data-placeholder="Select Country" onchange="get_state(this.value, 'buyer')">
                                   <option value="">Select Country</option>
                                   <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/auth/register.blade.php</b> on line <b>75</b><br />
                                </select>
                               
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <select class="single-select form-control" name="state" id="state_buyer"  data-placeholder="Select State" onchange="get_city(this.value, 'buyer')">
                                   <option value="">Select State</option>
                                </select>
                             </div>
                          </div>
                          <div class="col-md-12 p-3">
                             <div class="form-group">
                                <input type="text" name="address" class="form-control" placeholder="Address" required="">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <input type="text" name="zipcode" class="form-control" placeholder="Zip Code">
                             </div>
                          </div>
                          <div class="col-md-6 p-3">
                             <div class="form-group">
                                <select class="form-control" name="city" required="" id="city_buyer">
                                 <option value="">Select City</option>          
                                </select>
                             </div>
                          </div>
                          <div class="col-12">
                             <div class="form-group form-check">
                                <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" required=""> I Agree to all <a href="javascript:void(0);" class="">Tearms &amp; Conditions</a>
                                </label>
                             </div>
                          </div>
                       </div>
                       <div class="submitBtn w-100 mt-4">
                          <button type="submit" class="btn elcinaBtn ViewMoreBtn ">Next <img src="{{ asset('front-assets/images/icons/11.svg') }}" class="img-fluid"></button>
                          <h5 class="mt-3">Already have an account? <a href="javascript:void(0);">Sign In</a></h5>
                       </div>
                       <input type="hidden" name="is_seller" value="0">
                    </form>
                    </div>
                  </div>
                  <div class="tab-pane" role="tabpanel" id="SellerFormTab">
                   <div class="wizard">
                  <div class="wizard-inner">
                    <div class="connecting-line"></div>
                    <ul class="nav nav-tabs" role="tablist">
                      <li role="presentation" class="active">
                        <a href="#BasicInformation" data-toggle="tab" aria-controls="BasicInformation" role="tab" aria-expanded="true"><span class="round-tab">1 </span> <i>Basic Information</i></a>
                      </li>
                      <li role="presentation" class="disabled">
                        <a href="#ChooseCategory" onclick="second_step()" data-toggle="tab" aria-controls="ChooseCategory" role="tab" aria-expanded="false"><span class="round-tab">2</span> <i>Choose Category</i></a>
                      </li>
                      <li role="presentation" class="disabled">
                        <a href="#Membership" data-toggle="tab" onclick="three_step();" aria-controls="Membership" role="tab"><span class="round-tab">3</span> <i>Membership</i></a>
                      </li>
                    </ul>
                  </div>
                  <div class="login-box LoginBox">
                    <div class="tab-content" id="main_form">
                      <div class="tab-pane active" role="tabpanel" id="BasicInformation">
                        
                      </div>
                      <div class="tab-pane" role="tabpanel" id="ChooseCategory">
                       
                      </div>
                      <div class="tab-pane" role="tabpanel" id="Membership">
                        
                      </div>
                      <div id="stripe_payment_wrapper" class="d-none">
                        <form action="{{ url('/payment-status') }}" method="POST">
                          {{ csrf_field() }}
                          <script
                                  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                                  data-key="{{ env('STRIPE_PUB_KEY') }}"
                                  data-amount=""
                                  data-name=""
                                  data-email=""
                                  data-description=""
                                  data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
                                  data-locale="auto"
                                  data-currency="usd">
                          </script>
                          <input type="hidden" name="user_id" value="">
                          <input type="hidden" name="plan_id" value="">
                          <input type="hidden" name="total_payment" value="">
                      </form>
                      </div>
                    </div>
                  </div>
                </div>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <input type="hidden" name="next_id" id="next_id" value="">
    <input type="hidden" name="user_email" id="user_email" value="">
    <input type="hidden" name="user_name" id="user_name" value="">
    <!----------|| Register Section ||---------->
<!-- 
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Register') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="row mb-3">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="fname" value="{{ old('name') }}" required autocomplete="name" autofocus>

                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>

                        <div class="row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> -->
@endsection
@section("page-js-script")
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
      // ------------step-wizard-------------
      $(document).ready(function () {
        first_step();
          $('.nav-tabs > li a[title]').tooltip();
          $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
              var target = $(e.target);
              if (target.parent().hasClass('disabled')) {
                  return false;
              }
          });
          $(".next-step").click(function (e) {
              var active = $('.wizard .nav-tabs li.active');
              active.next().removeClass('disabled');
              nextTab(active);
          });
          $(".prev-step").click(function (e) {
              var active = $('.wizard .nav-tabs li.active');
              prevTab(active);
          });
      });
      function nextTab(elem) {
          $(elem).next().find('a[data-toggle="tab"]').click();
      }
      function prevTab(elem) {
          $(elem).prev().find('a[data-toggle="tab"]').click();
      }
      $('.nav-tabs').on('click', 'li', function() {
          $('.nav-tabs li.active').removeClass('active');
          $(this).addClass('active');

   
      }); 

     function Submit_Buyer_Form(e){
       
            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
            $.ajax({  
              url :"{{route('register.create.step.one')}}",  
              method:"POST",  
              dataType:"json",  
              data:$('#buyer_form').serialize(),
              success: function(data){ 
                if(data.success==1){   
                  toastr.success(data.message,'Success'); 
                  //$('[href="#Membership"]').trigger('click'); 
                  window.location.href = "{{route('home')}}";
                }
                if(data.error==1){
                  toastr.error(data.details,'Error');
                }
              },
              error: function(data){ 
                if(typeof data.responseJSON.status !== 'undefined'){
                  toastr.error(data.responseJSON.error,'Error');
                }else{
                  $.each(data.responseJSON.errors, function( key, value ) {
                      toastr.error(value,'Error');
                  });
                }
                
              } 
            }); 

  }

      function Submit_Stepone(e){
       
            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
            $.ajax({  
              url :"{{route('register.create.step.one')}}",  
              method:"POST",  
              dataType:"json",  
              data:$('#step_one').serialize(),
              success: function(data){ 
                if(data.success==1){   
                  $('#next_id').val(data.f_id);
                  $('#user_email').val(data.user_email);
                  $('#user_name').val(data.user_name);
                  toastr.success(data.message,'Success'); 
                  $('[href="#ChooseCategory"]').trigger('click'); 
                }
                if(data.error==1){
                  toastr.error(data.details,'Error');
                }
              },
              error: function(data){ 
                if(typeof data.responseJSON.status !== 'undefined'){
                  toastr.error(data.responseJSON.error,'Error');
                }else{
                  $.each(data.responseJSON.errors, function( key, value ) {
                      toastr.error(value,'Error');
                  });
                }
                
              } 
            }); 

  }

  function Submit_Steptwo(e){
        var next_id = $('#next_id').val();
            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
            $.ajax({  
              url :"{{route('register.create.step.two')}}",  
              method:"POST",  
              dataType:"json",  
             data : $('#step_two').serialize() +"&next_id="+next_id,
              
              success: function(data){ 
                if(data.success==1){   
                  //toastr.success(data.message,'Success'); 
                  $('[href="#Membership"]').trigger('click'); 
                }
              },
              error: function(data){ 
                if(typeof data.responseJSON.status !== 'undefined'){
                  toastr.error(data.responseJSON.error,'Error');
                }else{
                  $.each(data.responseJSON.errors, function( key, value ) {
                      toastr.error(value,'Error');
                  });
                }
                
              } 
            }); 

  }  
  function Submit_Stepthree(e){
        var next_id = $('#next_id').val();
        var user_email = $('#user_email').val();
        var user_name = $('#user_name').val();
        var script_tag = document.querySelector("#stripe_payment_wrapper form script");
        script_tag.setAttribute('data-name', user_name);
        script_tag.setAttribute('data-email', user_email);

            $.ajaxSetup({
              headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
            });
            $.ajax({  
              url :"{{route('register.plan.details')}}",  
              method:"POST",  
              dataType:"json",  
              data : $('#step_three').serialize() +"&next_id="+next_id,
              
              success: function(data){ 
                if(data.success==1){   
                  
                  //$('[href="#Membership"]').trigger('click'); 
                   //window.location.href = "/";
                   if (parseInt(data.plan_data.price) > 0) {                      
                      script_tag.setAttribute('data-amount', data.plan_data.price * 100);
                      script_tag.setAttribute('data-description', 'Membership subscription plan');
                      var user_id = document.querySelector("#stripe_payment_wrapper form input[name='user_id']");
                      user_id.value = data.user_data.id;
                      var plan_id = document.querySelector("#stripe_payment_wrapper form input[name='plan_id']");
                      plan_id.value = data.plan_data.id;
                      var total_payment = document.querySelector("#stripe_payment_wrapper form input[name='total_payment']");
                      total_payment.value = data.plan_data.price;
                      //$(document).find('').attr();
                      /*$(document).find('#stripe_payment_wrapper form script').attr('data-name', data.plan_data.name);
                      $(document).find('#stripe_payment_wrapper form script').attr('data-email', data.user_data.email);
                      $(document).find('#stripe_payment_wrapper form script').attr('data-description', 'Monthly subscription plan');*/
                      /*$(document).find('#stripe_payment_wrapper form input[name="user_id"]').val(data.user_data.id);
                      $(document).find('#stripe_payment_wrapper form input[name="plan_id"]').val(data.plan_data.id);
                      $(document).find('#stripe_payment_wrapper form input[name="total_payment"]').val(data.plan_data.price);*/
                      setTimeout(function(){
                          $(document).find('#stripe_payment_wrapper .stripe-button-el').click();
                        }, 5000);
                   } else {
                      toastr.success(data.message,'Success'); 
                      window.location.href = "{{route('home')}}";
                   }
                   
                   //$('#stripe_payment_wrapper form').submit();
                }
              },
              error: function(data){ 
                if(typeof data.responseJSON.status !== 'undefined'){
                  toastr.error(data.responseJSON.error,'Error');
                }else{
                  $.each(data.responseJSON.errors, function( key, value ) {
                      toastr.error(value,'Error');
                  });
                }
                
              } 
            }); 

  }

  function first_step(){ 

    $.ajax({  
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url :"{{ route('register.first.step') }}",  
            method:"POST",
            success: function(res){ 
                
                $('#BasicInformation').html(res);  
            },
        }); 
    }
    function second_step(){ 

    $.ajax({  
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url :"{{ route('register.second.step') }}",  
            method:"POST",
            success: function(res){ 
                
                $('#ChooseCategory').html(res);  
            },
        }); 
    }
    function three_step(){ 

    $.ajax({  
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url :"{{ route('register.three.step') }}",  
            method:"POST",
            success: function(res){
                
                $('#Membership').html(res);  
            },
        }); 
    }

    function get_state(id, user = 'seller'){ 
   
    $.ajax({  
          'headers': {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url :"{{ route('register.state') }}",  
          method:"POST",  
          data:{'id':id},
          success: function(res){ 
            if (user == 'buyer') {
              $('#state_buyer').html(res.all_states);   
              $('#state_buyer').trigger("change");
            } else {
              $('#state').html(res.all_states);   
              $('#state').trigger("change");
            }
          },
       }); 
    }  
    function get_city(id, user = 'seller'){ 
   
    $.ajax({  
          'headers': {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          url :"{{ route('register.city') }}",  
          method:"POST",  
          data:{'id':id},
          success: function(res){ 
            if (user == 'buyer') {
              $('#city_buyer').html(res.all_city);   
            } else {
              $('#city').html(res.all_city);   
            }
          },
       }); 
    }

     function get_activity(id){ 
      
   $.ajax({  
      'headers': {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      url :"{{ route('register.activities.get') }}",  
      method:"POST",  
      data:{'id':id,sub_cat:$('#activity').data('selected-subcat')},
      success: function(data){ 
         $('#activity').html(data);   
      },
   }); 
   }  
    </script>
    @endsection