@extends('layouts.app')

@push('style')
  

 
  <style>
    select[readonly] {
    pointer-events: none;
    }

   

      </style>
      
  @endpush

@section('content')  
 

   
  @if ($infomessage)
        <div class="lead text-nowrap pb-4">   
  <div class="d-flex mx-auto justify-content-center  alert alert-danger  mb-2 col-md-8 mx-auto  mt-4  " id="">
        {{  __('applabels.'.$infomessage) }}</div>
        </div>
      
  @else
  <!-- SHOW FORM -->
          
   
   <form  action=" {{ route('registerSocialMediaPage') }}" method="POST" id="registerForm" class="needs-validation mt-2"> 
    <!-- start step indicators-->
    <div class="form-header d-flex mb-4"> 
      <span class="stepIndicator">{{  __('applabels.step_page') }}</span>
       
        
        @if  ( isset($pageId) )  
          <span class="stepIndicator">{{  __('applabels.step_pagedata') }}</span>
        @endif
     
     
    </div>
        <!-- end step indicators -->
        <!-- step one -->
        @if (isset($pages)) 
        <div class="step">   
                @include('subscriptions.fbpageselect')          
        </div>
        @endif

         @if (isset($IGpages)) 
        <div class="step">   
                @include('subscriptions.igpageselect')          
        </div>
        @endif

        <!--  step two -->
        <div class="step">    
            @if (isset($pageId)) 
             @include('subscriptions.components.pagedataform')
             @endif
        </div>

     

        <div class="text-center mx-auto d-block">
            <div id="loadingGif" style="display:none"><img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"></div>
        <div>

    @if (isset($pageId)) 
         <!-- start previous / next buttons -->
         <div class="form-footer d-flex">
           
            <button type="button" id="prevBtn" onclick="nextPrev(-1)">{{ __('applabels.previous') }}</button>
            <button type="button" id="nextBtn" onclick="nextPrev(1)">{{ __('applabels.next') }}</button>
        </div>
        <!-- end previous / next buttons -->
            <!-- div class="d-flex pt-2 flex-row bd-highlight justify-content-center mb-2">
                <button type="submit" class="btn btn-primary"> {{ __('applabels.pay') }}</button>
            </div -->
  
    
    @else
        <div class="form-footer d-flex">
            <button type="button" id="prevBtn" onclick="nextPrev(-1)" disabled>{{ __('applabels.previous') }}</button>
            <button type="button" id="nextBtn" class="pageBtn" >{{ __('applabels.next') }}</button>
        </div>
    @endif
</form>
  
 
@endif <!-- show form -->

@endsection
    @push('scripts')   
    

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script type="text/javascript">  
    $(document).ready(function(){  
       // $('#phone').inputmask('999 999 999');
       // $('#paymentphone').inputmask('999 999 999');
        $("#paymentname").val(($("#name").val())); 
        $("#paymentemail").val(($("#email").val())); 
        $("#phone").on("input", function() {
            $("#paymentphone").val(($(this).val())); 
        });
        $("#email").on("input", function() {
            $("#paymentemail").val(($(this).val())); 
        });
        $("#name").on("input", function() {
            $("#paymentname").val(($(this).val())); 
        });
        $('#typeOfBusiness').change(function(){
                const subtypeid = "{{ isset($pageSubTypeId) ? $pageSubTypeId : 0 }}";
                $.get("{{ url('api/pagetypedropdown')}}", 
                { id: $(this).val() }, 
                function(data) {
                    $('#typeOfStore').empty(); 
                    $('#businessInput').empty(); 
                    console.log($('#storeSelect'));
                    console.log($('#storeSelect').attr("required"));
                  
                   // $('#storeSelect').toggleClass('collapse');

                    if ($.isEmptyObject(data)){
                       // console.log(data);
                          
                        $('#storeSelect').removeAttr('required'); 
                        $('#storeSelect').addClass('d-none'); 
                        $('#storeSelect').val(''); 
                        
                        $('#typeOfSubBusiness').removeAttr('required'); 
                        $('#typeOfSubBusiness').val('');
                        $('#businessText').addClass('d-none'); 
                        $('#subtypeOfPage').val('');                            
                        
                        
                    } else {
                        console.log(data);
                        
                        //show store types
                        if (data[0]['type_of_info'] != 'text'){
                            // hide text input
                                
                            $('#typeOfSubBusiness').removeAttr('required'); 
                            $('#typeOfSubBusiness').val('');
                            $('#businessText').addClass('d-none'); 
                            $('#subtypeOfPage').val('');  


                            $('#storeSelect').removeClass('d-none');
                            $('#storeSelect').attr("required","required"); 
                            
                            $.each(data, function(key, element) {                                
                                $('#typeOfStore').append("<option value='" + element['id'] +"'"+ 
                                ((subtypeid == element['id']) ? ' selected ' : '' )+ ">" +element['title']  + "</option>");
                            });
                        } else {
                            // hide store types
                            $('#storeSelect').removeAttr('required'); 
                            $('#storeSelect').addClass('d-none'); 
                            $('#storeSelect').val(''); 

                            console.log('change to text: ID ');
                            console.log(data[0]['id'] );
                            // show business text input
                            $('#businessText').removeClass('d-none');
                            $('#typeOfSubBusiness').attr("required","required");
                          
                            $("label[for='typeOfSubBusiness']").text(data[0]['title']);
                            $('#subtypeOfPage').val(data[0]['id']);
                          //      alert($('#subtypeOfPage').val());
                        }

                    }

                    console.log($('#storeSelect'));
                });
            });

            
    });
  
  


        var currentTab = 0 ; // Current tab is set to be the first tab (0)

        if (currentTab == 1){ // set the first (zero) step to "active"
            console.log(document.getElementsByClassName("stepIndicator")[0]);
            document.getElementsByClassName("stepIndicator")[0].className += " active finish";
        }
        showTab(currentTab); // Display the current tab
        
        function showTab(n) {
          // This function will display the specified tab of the form...
          var x = document.getElementsByClassName("step");
          x[n].style.display = "block";
          console.log(x);
          console.log(n)
          console.log(x[n].style.display);
          //... and fix the Previous/Next buttons:
          if (n == 0) {
            document.getElementById("prevBtn").style.display = "none";
          } else {
            if (n == 1) {
                document.getElementById("prevBtn").disabled = true;
            } else {
                document.getElementById("prevBtn").disabled = false;
                document.getElementById("prevBtn").style.display = "inline";
            }
          }
          if (n == (x.length - 1)) {
            document.getElementById("nextBtn").innerHTML = "{{ __('applabels.subscribe') }}";
            document.getElementById("nextBtn").classname += ' btn-pay';
          } else {
            document.getElementById("nextBtn").innerHTML = "{{ __('applabels.next') }}";
            document.getElementById("nextBtn").classList.remove ('btn-pay');
          }
          //... and run a function that will display the correct step indicator:
          fixStepIndicator(n)
        }
        
        function nextPrev(n) {
          // This function will figure out which tab to display
          var x = document.getElementsByClassName("step");
          // Exit the function if any field in the current tab is invalid:
          if (n == 1 && !validateForm()) return false;
          // Hide the current tab:
          x[currentTab].style.display = "none";
          // Increase or decrease the current tab by 1:
          currentTab = currentTab + n;

          selectedSubscription = document.getElementById("subscription_types_id").value;
          console.log('subscription type:' + selectedSubscription);
          // if subscription type is free skip payment
          if ( ( selectedSubscription == 1) && (currentTab >= (x.length-2))) {
            var element =  document.getElementsByClassName('form-footer')[0]
            element.classList.add('invisible');
             
            document.getElementById("registerForm").submit();
            document.getElementById('loadingGif').style.display = "block";
            setTimeout(function() {
                document.getElementById('loadingGif').style.display = "none";
                
            },3000);
            
            return false;
          }
          // if you have reached the end of the form...
          if (currentTab >= x.length) {
            // ... the form gets submitted: 
                document.getElementsByClassName('form-footer')[0].classList.add('invisible');
                paymentmethod =document.getElementsByClassName("nav-method nav-link active")[0].id ;
                
                console.log(paymentmethod.replace("-tab", "")); //;
                document.getElementById('payments_methods_id').value = paymentmethod.replace("-tab", "");

                document.getElementById("registerForm").submit();
                document.getElementById('loadingGif').style.display = "block";
                setTimeout(function() {
                    document.getElementById('loadingGif').style.display = "none";                    
                },4000);
                return false;
          }
         // if you going back to step 0 of the form...
        /* if (currentTab == 0) {
            myForm = document.getElementById('registerForm');
            myForm.action = " route('handleCallback') ";
            myForm.method = 'GET';
            myForm.submit();


         }*/

          // Otherwise, display the correct tab:
          showTab(currentTab);
        }
        
        function validateForm() {
          // This function deals with validation of the form fields
          var x, y, i, valid = true;
          x = document.getElementsByClassName("step");
          y = x[currentTab].getElementsByTagName("input");
          // A loop that checks every input field in the current tab:
          for (i = 0; i < y.length; i++) {
            // If a field is empty...
            if ((y[i].value == "") && (y[i].hasAttribute('required'))  ){
              var clientTab = document.getElementById("company-tab");

              // check if company tab is active
              if (clientTab.classList.contains('active'))  {
                  // add an "invalid" class to the field:
                    y[i].className += " invalid";
                    // and set the current valid status to false
                    valid = false;
              }
              else if (y[i].classList.contains('company-input')) { 
                // ignore required fields
              } else {
                // add an "invalid" class to the field:
                y[i].className += " invalid";
                // and set the current valid status to false
                 valid = false;
              }
            } else {
                y[i].classList.remove("invalid");
                 
            }
          }
          y = x[currentTab].getElementsByTagName("select");
          for (i = 0; i < y.length; i++) {
            console.log(y[i]);
            console.log(y[i].hasAttribute('required'));
            console.log(y[i].value);
            // If a field is empty...
            if ((y[i].value == "") && (y[i].hasAttribute('required'))){
              // add an "invalid" class to the field:
              y[i].className += " invalid";
              // and set the current valid status to false
              valid = false;
            } else {
                y[i].classList.remove("invalid");
            }
          }
          // If the valid status is true, mark the step as finished and valid:
          if (valid) {
            document.getElementsByClassName("stepIndicator")[currentTab].className += " finish";
          }
          console.log('form valid: '+valid)
          return valid; // return the valid status
        }
        
        function fixStepIndicator(n) {
          // This function removes the "active" class of all steps...
          var i, x = document.getElementsByClassName("stepIndicator");
          for (i = 0; i < x.length; i++) {
            if (i>= n){
                x[i].className = x[i].className.replace(" active", "");
            }
          }
          //... and adds the "active" class on the current step:
          x[n].className += " active";
          x[n].className = x[n].className.replace(" finish", "");
        }


        function copyToClipBoard(value){
         // event.preventDefault()
          
          navigator.clipboard.writeText(value);
         // e.stopPropagation();
         // return false;
        };
</script>

@endpush