@extends('layouts.auth')

@section('title') {{__("words.Sign Up")}} @endsection

@section('content')
@push('page_style')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
@endpush



<section class="loginPage">
  <div class="container">
    <div class="row align-items-center loginRow">
      <div class="col-md-12 col-lg-6 text-center">
        <a href="{{url('/')}}" class="loginBrandLogo">
          <img src="{{ asset('frontend/img/loginLogo.png') }}" class="img-fluid">
        </a>
      </div>
      <div class="col-md-12 col-lg-6">
        <!-- Start Right Side -->
        <div id="rightArea">
          <!-- Start Login Page -->
          <div class="card loginContainer login_page signup_">
            <div class="card-body p-0">
              <div class="content_container_ text-center">
                <h3 class="loginSubheading_">{{__("words.Sign Up")}}</h3>
                <p class="subtextOuter_">{{__("words.Enter details below to create your account")}}.
                </p>
              </div>
              {{-- @if ($errors->any())
              @foreach ($errors->all() as $error)
                  <div>{{$error}}
            </div>
            @endforeach
            @endif
            --}}
            <form class="form_Loginhorizontal row" role="form" id="user-signup" method="post" action="{{ route('user.signup.post') }}">
              @csrf
              <ul class="nav nav-pills userSelectTabs">
                <li class="userSelectTabsItems">
                  <div href="#tab1" data-bs-toggle="tab" role="tab1" class="userSelectTabsLinks {{((old('seller_type') == '1') ? 'active' : (empty(old('seller_type')) ? 'active' : ''))}}">
                    <input type="radio" id="buyer" name="seller_type" value="1" checked>
                    <label for="buyer" class="labelTxt_">{{__("words.Individual")}}</label>
                  </div>
                </li>
                <li class="userSelectTabsItems">
                  <div href="#tab2" data-bs-toggle="tab" role="tab2" class="userSelectTabsLinks {{(old('seller_type') == '2') ? 'active' : ''}}">
                    <input type="radio" id="seller" name="seller_type" value="2" {{(old('seller_type') == '2') ? 'checked' : ''}}>
                    <label for="seller" class="labelTxt_">{{__("words.Company")}}</label>
                  </div>
                </li>
              </ul>
              <div class="tab-content">
                {{-- <div class="buyer_form"> --}}
                <div class="tab-pane fade
                        {{((old('seller_type') == '1') ? 'show active' : (empty(old('seller_type')) ? 'show active' : ''))}}" id="tab1">
                  @include('auth.individual')
                </div>
                {{-- </div> --}}

                <div class="tab-pane fade {{(old('seller_type') == '2') ? 'show active' : ''}}" id="tab2">
                  @include('auth.company')
                </div>
                <input type="hidden" id="countryCode" value="{{strtoupper(getCountryCode())}}">
              </div>
              <!-- <div id="or-separator" class="or-separator mt-3"><span class="or-text">or continue with</span></div> -->
            </form>
          </div>
        </div>
        <!-- End Login Page -->
      </div>
      <!-- End Right Side -->
    </div>
  </div>
  </div>
</section>



<!-- /.login-card-body -->

@push('page_script')
<script>
  $('.select2-multiple-country').select2({
    placeholder: 'Select ',
    allowClear: true,
    templateResult: formatStateCountry,
    language: {
      noResults: function() {
        return 'No result found';
      }
    },
    templateSelection: function(state) {
      var $span = $(`<span>${(state.title) ? state.title : state.text}</span>`);
      if (state.selected) {
        $span = $(
          '<span class="flag-icon flag-icon-' + $(state.element).data('id') + ' flag-icon-squared">' + state.title + '</span>'
        );
      }
      return $span;
    }
  });

  function formatStateCountry(state) {
    var $state = $(
      '<span class="flag-icon flag-icon-' + $(state.element).data('id') + ' flag-icon-squared">' + state.text + '</span>'
    );
    return $state;
  }
</script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>


   <script>
        function phoneNumber(code, phone,inputField ){
              var countryCode = $('#countryCode').val();
              var isoCode = ($('#'+code).val()) ? ($('#'+code).val()) : (countryCode);
                //  phone 1 input
                var phoneInput = document.querySelector("#"+inputField);
                var phoneInstance = window.intlTelInput(phoneInput, {
                    autoPlaceholder: "off",
                    separateDialCode: true,
                    initialCountry: isoCode,

                    // utilsScript: '{{URL::asset("frontend/build/js/utils.js")}}',
                });


                $("#"+phone).val(phoneInstance.getSelectedCountryData().dialCode);
                $('#'+code).val(phoneInstance.getSelectedCountryData().iso2);
                phoneInput.addEventListener("countrychange",function() {
                    $("#"+phone).val(phoneInstance.getSelectedCountryData().dialCode);
                    $('#'+code).val(phoneInstance.getSelectedCountryData().iso2);
                });
        }
        $(document).ready(function(){
          let oldValue = $("input[name='seller_type']:checked").val();
         if(oldValue == '1'){
          let code = 'iso_code1';
            let phone = 'phone_code1';
            let inputField = 'phone_number'
            phoneNumber(code,phone,inputField)
         }else{
          let code = 'iso_code';
            let phone = 'phone_code';
            let inputField = 'phone_number_company'
            phoneNumber(code,phone,inputField)
         }
        });




        $(document).on('change','input[name=seller_type]',() =>{

          if($('input[name=seller_type]:checked').val() == '2'){
            let code = 'iso_code';
            let phone = 'phone_code';
            let inputField = 'phone_number_company'
            phoneNumber(code,phone,inputField)
            $('.sellerCompany').text('Company Name');
            $('.sellerCompanyEmail').text('Company Email');
          }else{
            let code = 'iso_code1';
            let phone = 'phone_code1';
            let inputField = 'phone_number'
            phoneNumber(code,phone,inputField)
            $('.sellerCompany').text('Full Name');
            $('.sellerCompanyEmail').text('Email');
          }
        });


    </script> -->
@endpush

@endsection