@extends('company_dashboard.company_layout.master')

@section('title','Dashboard')

@section('header')
    @include('company_dashboard.partials.header')
@endsection

@section('content')

<div class="overlay-payment h-100 w-100">
  <div class="d-flex h-100 align-items-center justify-content-center bigger-z-index">
    <div class="w-100 text-center">
      <img src="{{asset('images/ajax-loader.gif')}}">
     
    </div>
  </div>
</div>




  <div class="modal" tabindex="-1" id="free-trial-error">
    <div class="modal-dialog">
      <div class="modal-content content-update">
          <div class="modal-header header-update-details">
            <h5 class="modal-title text-white title-update">Notification</h5>
            <button type="button" class="btn-close btn-close-update" data-bs-dismiss="modal" aria-label="Close">X</button>
          </div>
          <div class="modal-body text-white">
            @if(Session::has('error'))
              {{ Session::get('error') }}
            @endif
          </div>
      </div>
    </div>
  </div>


  @php $show_descount = 0; @endphp
<section class="top-section-single">
    <div class="container">
        <div class="select-course-block bigger">
          <h2 class="text-center" style="color:#191919">Step two: Set up your card details</h2>
            @include('company_dashboard.subscription_start_free_trial.nav_menu_buttons')
            <div class="tab-content">
                <div class="tab-pane fade active show" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                    <!-- Marital Status -->
                    <div class="boxed">
                        <div class="inside contact ">
                            <div class="px-4 pt-3 billing-new">
                                <div class="logo-height mb-3">
                                    <h2 class="text-uppercase">Payment details</h2>
                                </div>
                                <form action="{{route('strip_start_subscription_with_free_trial')}}" method="POST" id="card_info">  
                                  @csrf
                                  <div class="row pb-3 pb-md-4 ">
                                   
                                    @foreach ($plans as $plan)
                                      <div class="col-12 plan_div col-md-4  pb-4 pb-md-0" data-plan_id="{{$plan->price_id}}" >
                                        <div class="billed-yearly-check position-relative cursor-pointer div_payment h-100" style="cursor: pointer">
                                          <div class="boxed-inside h-100 border-active-yearly @if($plan->recommended_package) @if($plan->can_have_discount) @php $show_descount = 1; @endphp @endif active @endif">
                                            @if($plan->free_time)
                                              <div class="icon red d-flex flex-column align-items-center justify-content-center">
                                                <p class="mb-0">{{$plan->free_time}}</p>
                                                <p class="mb-0">months</p>
                                                <p class="mb-0">free</p>
                                              </div>
                                            @endif
                                          
                                            <div class="checkbox-billing text-center">
                                              <input class="form-check-input text-center mb-4 mb-md-4 monthYearY" type="radio" name="check"  data-type="yearly" value="{{$plan->price_id}}"@if($plan->recommended_package) checked @endif>
                                              <label class="custom-control-label" for="customSwitch1">&nbsp;</label>
                                            </div>
                                            <p class="mb-3 mb-md-4 text-center ">{{$plan->name}}</p>
                                              @if($plan->yearly_price)
                                                <p class="price text-center color-active-y">£{{$plan->yearly_price}}@if($plan->vat)<small style="font-size: 14px">+VAT</small> @endif</p>
                                              @elseif($plan->price) 
                                                <p class="price text-center color-active-y">£{{$plan->price}}@if($plan->vat)<small style="font-size: 14px">+VAT</small> @endif</p>

                                              @else
                                              <p class="price text-center color-active-y free_plan">£0.00</p>
                                            @endif
                                            <p class="mb-3 mb-md-4 text-center color-active-y">{{$plan->description}}</p>

                                            @if($plan->can_have_discount)

                                              <input type="hidden" name="can_have_discount" class="can_have_discount" value="1">
                                            @endif
                                            <div class="d-flex justify-content-center mt-5">
                                              <ul class="px-3 justify-content-center">
                                                @if($plan->features())
                                                  @foreach ($plan->features as $feature)
                                                    <li class="mb-1">{{$feature->name}}</li>
                                                  @endforeach

                                                @endif
                                              </ul>
                                            </div>
                                          </div>

                                        </div>
                                      </div>
                                    @endforeach
      
                                
                                </div>
                                <div class="apply pb-3">
                                  <div class="row">
                                      <div class="d-flex flex-column flex-md-row discount @if($show_descount == 0) d-none @endif" style="" id="discount">
                                          <div class="col-12 col-md-7">
                                              <div class="form">
                                                  <div class="form-group">
                                                      <input type="text" class="form-control" placeholder="Add promo code" name="discount_code">
                                                          <span class="text-success valid_code d-none">Code accepted <span class="percentDiscount"></span></span>
                                                          <span class="text-danger invalid_code d-none">Sorry this code is not valid.</span>
                                                  </div>
                                              </div>
                                          </div>
                                          <div class="col-12 col-sm-4 offset-0 col-md-4 offset-md-1">
                                              <div class="text-start text-md-end">
                                                  <button class="btn green w-140 mobile-auto" type="button" id="submitDiscount">Apply</button>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                </div>


                                    <div class="payment_card_entry">
                                        <div class="payment-details">
                                           
                                            <div class="boxed no-inside-shadow h-100">
                                                <ul class="list-unstyled input-icons">
                                                    <li class="list-unstyled-item mb-4">
                    
                                                        <div class="position-relative">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="17.386" height="15.986" viewBox="0 0 17.386 15.986">
                                                            <g id="Icon_feather-credit-card" data-name="Icon feather-credit-card" transform="translate(1 1)">
                                                                <path id="Path_605" data-name="Path 605" d="M2.9,6H15.487a1.6,1.6,0,0,1,1.4,1.748V18.238a1.6,1.6,0,0,1-1.4,1.748H2.9a1.6,1.6,0,0,1-1.4-1.748V7.748A1.6,1.6,0,0,1,2.9,6Z" transform="translate(-1.5 -6)" fill="none" stroke="#17202a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                                                                <path id="Path_606" data-name="Path 606" d="M1.5,15H16.886" transform="translate(-1.5 -9.755)" fill="none" stroke="#17202a" stroke-linejoin="round" stroke-width="4"/>
                                                            </g>
                                                            </svg>
                                                            <div id="card-element" class="placeholder">
                                                                <div class="placeholder-text cvc">Card Number*</div>
                                                            </div>
                                                            <div id="card-number-element" class="payment-forms card_holder pb-2">Card Number</div>
                                                        </div>
                                                    </li>
                                                    <li class="list-unstyled-item mb-4">
                    
                                                        <div class="position-relative">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="19.286" height="19.286" viewBox="0 0 19.286 19.286">
                                                            <path id="np_profile_3547891_FFFFFF" d="M28.647,19a9.642,9.642,0,1,0,5.33,1.605A9.638,9.638,0,0,0,28.647,19ZM23.981,34.865a5.288,5.288,0,0,1,9.332,0,7.762,7.762,0,0,1-9.332,0Zm2.489-6.844A2.178,2.178,0,1,1,28.647,30.2a2.18,2.18,0,0,1-2.177-2.177Zm8.222,5.506a7.175,7.175,0,0,0-3.135-2.706,4.044,4.044,0,1,0-5.824,0A7.1,7.1,0,0,0,22.6,33.527a7.776,7.776,0,1,1,12.088,0Z" transform="translate(-19.006 -19)" fill="#17202a"/>
                                                        </svg>
                                                            <div class="placeholder">
                                                                <div class="placeholder-text"> Full Name on Card* </div>
                                                            </div>
                                                            <input class="payment-forms card_holder pb-2">
                                                        </div>
                                                    </li>
                                                    <li class="list-unstyled-item row">
                                                        <div class="col-8 col-sm-9">
                    
                                                            <div class="position-relative">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="17.386" height="15.986" viewBox="0 0 17.386 15.986">
                                                                <g id="Icon_feather-credit-card" data-name="Icon feather-credit-card" transform="translate(1 1)">
                                                                    <path id="Path_605" data-name="Path 605" d="M2.9,6H15.487a1.6,1.6,0,0,1,1.4,1.748V18.238a1.6,1.6,0,0,1-1.4,1.748H2.9a1.6,1.6,0,0,1-1.4-1.748V7.748A1.6,1.6,0,0,1,2.9,6Z" transform="translate(-1.5 -6)" fill="none" stroke="#17202a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                                                                    <path id="Path_606" data-name="Path 606" d="M1.5,15H16.886" transform="translate(-1.5 -9.755)" fill="none" stroke="#17202a" stroke-linejoin="round" stroke-width="4"/>
                                                                </g>
                                                            </svg>
                                                                <div id="card-element" class="placeholder">
                                                                    <div class="placeholder-text cvc">Expiry*</div>
                                                                </div>
                                                                <div id="card-expiry-element" class="payment-forms card_holder pb-2">Expiry</div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4 col-sm-3">
                    
                                                            <div class="position-relative">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="17.386" height="15.986" viewBox="0 0 17.386 15.986">
                                                                <g id="Icon_feather-credit-card" data-name="Icon feather-credit-card" transform="translate(1 1)">
                                                                    <path id="Path_605" data-name="Path 605" d="M2.9,6H15.487a1.6,1.6,0,0,1,1.4,1.748V18.238a1.6,1.6,0,0,1-1.4,1.748H2.9a1.6,1.6,0,0,1-1.4-1.748V7.748A1.6,1.6,0,0,1,2.9,6Z" transform="translate(-1.5 -6)" fill="none" stroke="#17202a" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                                                                    <path id="Path_606" data-name="Path 606" d="M1.5,15H16.886" transform="translate(-1.5 -9.755)" fill="none" stroke="#17202a" stroke-linejoin="round" stroke-width="4"/>
                                                                </g>
                                                            </svg>
                                                                <div id="card-element" class="placeholder">
                                                                    <div class="placeholder-text cvc"> CVC*</div>
                                                                </div>
                                                                <div id="card-cvc-element" class="payment-forms card_holder pb-2">MM/YY</div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                                <p class="text-center mb-0 pt-2">
                                                    <input type="hidden" name="amount" value="200">
                                                
                                                    <button  id="card-button" type="submit"  data-secret="@if($intent){{ $intent->client_secret }}@endif" class="btn green">Start free trial</button>
                    
                                                    
                                                </p>
                                                <br>
                                                
                                                    <div class="d-block text-center" id="card-errors" style="color:red !important" role="alert">
                                                        
                                                    </div>
                                                    <div class="d-block text-center" style="color: #7FDAC7 !important" role="alert">
                                                        <small class="bold">Note: To start your free trial, we need to confirm your account. You will not be charged until your free trial ends or you cancel your free trial.</small>
                                                      
                                                    </div>
                                            </div>
                            
                                           
                            
                                        </div>

                                        <div class="free_payment_div d-none d-flex justify-content-center flex-column align-items-center">
                                          {{-- <p>2 bookings a month per user</p> --}}
                                          <button  id="card-button" type="submit" class="btn green">Start freemium</button>
                                        </div>
                                    </div>


                                </form>
                                
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</section>




    


@endsection

@section('footer')
    @include('company_dashboard.partials.footer')
@endsection

@push('scripts')

@if(Session::has('error'))
  <script>
    $(document).ready(function (){
      $("#free-trial-error").modal('show')
    });
  </script>
@endif


  {{-- stripe --}}
  <script src="https://js.stripe.com/v3/"></script>

  <script>
    $(document).ready(function(){

    $(document).on('click', "#submitDiscount", function(e){
      console.log('click');
      e.preventDefault();
      $(document).find('.invalid_code').addClass('d-none')
      $(document).find('.valid_code').addClass('d-none')

      
      let discount = $("input[name=discount_code]").val();
    
      $("#fullDiscount").val('')
      $("#fullTotalDiscount").val('')
      $.ajax({
        url: "{{route('getDiscountPercentage')}}",
        type: "GET",
       
        data:{discount:discount},
        success: function(response){
        
            $("#discount_div").attr('hidden', false);
            if(response.data){
              console.log(response.data);
              $(document).find('.valid_code').removeClass('d-none');
              let percentage = response.data.percentage;
              $(document).find('.percentDiscount').text(`${percentage}% discount`);
            
            }else if(response.error){
              console.log( $(document).find('.invalid-feedback'));
              $(document).find('.invalid_code').removeClass('d-none');
            }
        }
      });
    
    });


     $(document).on('click', '.div_payment', function(){
        $('.div_payment').find('.boxed-inside').removeClass('active');

        $(this).find('.boxed-inside').addClass('active');
        $(document).find('.form-check-input').attr('checked' , false);
        let input =  $(this).find('.form-check-input');
        let input_val = $(input).val()
        $(input).attr('checked' , true);
        let can_have_discount = $(this).find('.can_have_discount');
        if(can_have_discount.length > 0){
          $(document).find('.discount').removeClass('d-none');
        }else{
          $(document).find('.discount').addClass('d-none');
        }

        if($(this).find('.free_plan').length > 0){
          $('.payment_card_entry').find('.free_payment_div').removeClass('d-none');
          $('.payment_card_entry').find('.payment-details').addClass('d-none');
        }else{
          $('.payment_card_entry').find('.free_payment_div').addClass('d-none');
          $('.payment_card_entry').find('.payment-details').removeClass('d-none');
        }

     });
    
      const stripe = Stripe('{{ env("STRIPE_KEY") }}', { locale: 'uk' }); // Create a Stripe client.
      const elements = stripe.elements(); // Create an instance of Elements.
      // const cardElement = elements.create('card', { style: style }); // Create an instance of the card Element.

      const cardButton = document.getElementById('card-button');
      const clientSecret = cardButton.dataset.secret;

      var cardNumberElement = elements.create('cardNumber', {
        style: {
          base: {

            color: '#000000',

            color: '#000',

            fontFamily: 'Varela Round , sans-serif',
            textAlign: "right",
            fontSmoothing: 'antialiased',
            ':-webkit-autofill': {
              color: '#000',
            },
            '::placeholder': {

              color: '#BBBBBB',

              color: '#000',

            },
          },
        },
        placeholder: '1234 1234 1234 1234',
      });
      cardNumberElement.mount('#card-number-element');


      var cardExpiryElement = elements.create('cardExpiry', {
        style: {
          base: {


            color: '#000000',

            color: '#000',

            fontFamily: 'Varela Round , sans-serif',
            textAlign: "right",
            fontSmoothing: 'antialiased',
            ':-webkit-autofill': {
              color: '#000',
            },
            '::placeholder': {

              color: '#BBBBBB',

              color: '#000',

            },
          },
        },
        placeholder: 'MM/YY',
      });
      cardExpiryElement.mount('#card-expiry-element');


      var cardCvcElement = elements.create('cardCvc', {
        style: {
          base: {


            color: '#000000',

            color: '#000',

            fontFamily: 'Varela Round , sans-serif',
            textAlign: "right",
            fontSmoothing: 'antialiased',
            ':-webkit-autofill': {
              color: '#000',
            },
            '::placeholder': {
              color: '#000',
            },
          },
        },
        placeholder: 'xxx',
      });
      cardCvcElement.mount('#card-cvc-element');

      cardNumberElement.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
          displayError.textContent = event.error.message;
        } else {
          displayError.textContent = '';
        }
      });

      cardExpiryElement.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
          displayError.textContent = event.error.message;
        } else {
          displayError.textContent = '';
        }
      })
      cardCvcElement.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
          displayError.textContent = event.error.message;
        } else {
          displayError.textContent = '';
        }
      })

      // Handle form submission.
      var form = document.getElementById('card_info');
      form.addEventListener('submit', function(event) {
        event.preventDefault();
          let existing_btn =  $('.payment_card_entry').find('.free_payment_div');
      
          if($(existing_btn).hasClass('d-none')){
            $(form).find('#card-button').addClass('disabled');
         
              stripe
                .confirmCardSetup(clientSecret, {
                  payment_method: {
                    card: cardNumberElement,
                
                  },    
                })
                .then(function(result) {

                  if (result.error) {
                    // Inform the user if there was an error.
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                      $(form).find('#card-button').removeClass('disabled');
                      
                  } else {

                    // Send the token to your server.
                   
                    stripeTokenHandler(result.setupIntent.payment_method);
                   
                  }
                });
          }else{
            form.submit();
          }
         
           
       });

      // Submit the form with the token ID.
      function stripeTokenHandler(paymentMethod) {
        $(document).find('.overlay-payment').addClass('show-it');
        $('body').addClass('overflow-hidden');
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('card_info');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'paymentMethod');
        hiddenInput.setAttribute('value', paymentMethod);
        form.appendChild(hiddenInput);

        // $.ajax({
        //   url: "{{route('savePaymentMethod')}}",
        //   type: "POST",
        
        //   data:{
        //     paymentMethod:paymentMethod,
        //     "_token": $('input[name="_token"]').val()
          
        //   },
        //   success: function(response){
        //     if(response.html){
        //       $(document).find('#entry_card_modal').modal('hide');
        //       $(document).find('.gif_loader').addClass('d-none'); 
        //       $(document).find('.change_payment_card_div').empty();
        //       $(document).find('.change_payment_card_div').append(response.html);

        //         $(document).find('.overlay-payment').removeClass('show-it');
        //         $('body').removeClass('overflow-hidden');
        //         $(document).find('#card-button').removeClass('disabled');
        //         $(document).find('.cancel_card').removeClass('disabled');
        //          document.getElementById('payment-forms').reset();


        //     }
          
        //   }
        // });

    
        // Submit the form
        form.submit();
      }

    });

  

</script>


@endpush