@extends('company_portal.layouts.master')

@section('title','Add User')
@section('header')
	@include('company_portal.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>
<section class="main-container">
  <div class="padding">
    <div class="modal" tabindex="-1" id="success-message">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content content-update">
                <div class="modal-header header-update-details">
                    <h5 class="modal-title text-white title-update">Thank you</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('message'))
                      {{ Session::get('message') }}
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="modal" tabindex="-1" id="error-message">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content content-update">
                <div class="modal-header header-update-details">
                    <h5 class="modal-title text-white title-update">ALERT</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>


  <div class="modal " id="confirmDeleteComment" aria-modal="true">
    <div class="modal-dialog">
      <div class="modal-content content-update">
        <div class="modal-header header-update-details">
          <h3 class="modal-title text-white">Are you sure you wish to cancel your subscription? </h3>
            <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">
        </div>
        <div class="modal-footer footer-update justify-content-center">
          <a type="button" href="{{route('cancel-subscription')}}" class="btn btn-outline-light" data-dismiss="modal">YES</a>
          <button type="button" class="btn btn-outline-light" aria-label="Close" data-bs-dismiss="modal">NO</button>
        </div>
      </div>
    </div>
  </div>

 {{-- @include('company_dashboard.payment_partials._company_details_modal') --}}

 @include('company_portal.payment_partials._enter_card_modal')
 @include('company_portal.payment_partials._payment_confirmation_modal')
 

    <div class="content">
     
        <section class="pt-4">
            <div class="billing-new">
              <form method="POST" action="{{route('changePriceTemp')}}">
                @csrf
                <div class="row">
                  <div class="boxed h-100">
                    <section class="purple_banner">
                      <div class="row justify-content-center align-items-center">
                        <div class="col-12 col-xxl-11">
                          <div class="purple-banner">
                            <div class="d-flex flex-column flex-md-column justify-content-start  ">
                              <p class="free font-bold font-gotham mb-3 mb-md-0 ">Your new offer</p>
                                {{--  <p class="mb-0"><a href="" class="btn green w-140 mobile-auto" onclick="switchHidden()">Upgrade</a></p>--}}
                              
                                <p> We would love to thank you for your loyalty.</p> 
                                <p> We are offering the same subscription but at new subscription prices, that will start on the end of the current period that you are subscribed to. </p> 
                                <p> Just click on the plans below and pay less on your monthly/yearly subscription. </p> 
                                <p> No additional charges. Just a lower price on your next payment. Enjoy!</p> 
                            </div>
                          </div>
                        </div>
                      </div>
                    </section>

                    
                  
                      

                      <div class="row">
                        @foreach ($plans as $plan)

                          <div class="col-12 col-md-6 plan_div  pb-4 pb-md-0" data-plan_id="{{$plan->price_id}}" >
                            <div class="billed-yearly-check position-relative cursor-pointer div_payment" style="cursor: pointer">
                              <div class="boxed-inside h-100 border-active-yearly">
                              
                              
                                <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}}">
                                  <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"><sup>£</sup>{{$plan->yearly_price}}@if($plan->vat)<small style="font-size: 14px">+VAT</small> @endif</p>
                                  @else 
                                  <p class="price text-center color-active-y"><sup>£</sup>{{$plan->price}}@if($plan->vat)<small style="font-size: 14px">+VAT</small> @endif</p>
                                @endif
                                <p class="mb-3 mb-md-4 text-center color-active-y">{{$plan->description}}</p>
                        
                               
                               
                              </div>
                          
                            </div>
                          </div>
                        @endforeach


                       

                        

                        <div class="col-12">
                         
                          <div class="row mt-5">
                            <div class="col-md-6">
                              <ul class="list-unstyled h3 account-info">
                                <li class="list-unstyled-item mb-2"><b>Your current plan: </b></li>
                                @if($plan_subscribed)
                                  <li class="list-unstyled-item mb-2">{{$plan_subscribed->name}}</li>
                                  <li class="list-unstyled-item mb-2">£{{number_format($plan_subscribed->full_price, 2, '.', '')}} per user</li>
                                  <li class="list-unstyled-item mb-2">x{{Auth::user()->licences}} Total users</li>
                                  <li class="list-unstyled-item mb-3">£{{number_format($plan_subscribed->full_price * Auth::user()->licences, 2, '.', '')}} New price</li>
                                  {{-- <li class="list-unstyled-item mb-3">£0 Total</li> --}}
                                @endif
                              </ul>
                            </div>
                            <div class="col-md-6 new_price_box">

                            </div>
                          </div>
                          <button type="submit" class="btn green text-right">Upgrade</button>
                        </div>
                      </div>
              
                  </div>
                </div>
              </form>
            </div>
        </section>
    </div>
</div>
{{--  </div>--}}
</div>
</section>
@endsection


@push('scripts')
<script type="text/javascript" src="{{ mix('js/jquery.maskedinput.js') }}"></script>
<script src="https://js.stripe.com/v3/"></script>
@if(Session::has('message'))
  <script>
      $(document).ready(function (){
        $("#success-message").modal('show')
      });
  </script>
@endif
@if(Session::has('error'))
  <script>

      $(document).ready(function (){
        $("#error-message").modal('show')
      });
  </script>
@endif

<script>
  $(document).on('click', '#cancel', function (e) {
    e.preventDefault();
    $('#confirmDeleteComment').modal('show');
  });
</script>
<script>



  $(document).on('click', '#submit_form', function(e){
    e.preventDefault();
   
    let input =  $(document).find('.form-check-input');
    if(input.length > 0){
        if(licences > 0){
          let modal = $(document).find('#confirm_payment');
          if(modal.length > 0){
            $(modal).find('.licences_confirm').text(licences);
            $(modal).modal('show');
          }
        }
    }

  })

  $(document).on('click', '#confirm_payment_modal', function(e){
      e.preventDefault();
      $(this).addClass('disabled');
      $('.cancel_modal').addClass('disabled');
      let form = $(document).find('#payment-forms');
      $(document).find('.overlay-payment').addClass('show-it');
      $('body').addClass('overflow-hidden');
    
      form.submit();

  })

// $(document).ready(function(){
//     let input =  $(this).find('.form-check-input');
//     let input_val = $(input).val()
//     let stripe_price =  input_val;
    
//     if(stripe_price){
//       callAjaxPaymentCalculationTemp()
//     }
//   });

$(document).ready(function(){
 
 
  
  $(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 licences = $(document).find('.licences').val();
    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');
    }

    $(document).find('.freemium_div').addClass('d-none');
    $(document).find('.change_payment_card_div').removeClass('d-none'); 
    callAjaxPaymentCalculationTemp();
  })

  
});



$(document).on('click', '.cancel_modal', function(e){
  e.preventDefault();
  let modal = $(this).closest('.modal')
  $(modal).modal('hide');
  
})
$(document).on('click', '.cancel_card', function(e){
  e.preventDefault();
  let modal = $(this).closest('.modal')
  $(modal).modal('hide');
  $(modal).find('#card-errors').empty();
})

function callAjaxPaymentCalculationTemp(){
  let stripe_price = $(document).find("input[type='radio'][name='check']:checked").val();
 
  
  let change_plan = $(document).find('.change_plan');
  if(change_plan.length > 0){
    change_plan = "change_plan"
  }else{
    change_plan = null;
  }
  $.ajax({
        url: "{{route('calculateNewPrice')}}",
        type: "GET",
       
        data:{stripe_price:stripe_price, change_plan : change_plan},
        success: function(response){
         $(document).find('.new_price_box').empty();
         $(document).find('.new_price_box').append(response.html);
        }
      });
}

 

    

    

    

</script>



  {{-- stripe --}}


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

        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) {
          let existing_btn =  $(document).find('.freemium_div');
      
          if($(existing_btn).hasClass('d-none')){


              event.preventDefault();
              $(form).find('#card-button').addClass('disabled');
              $(form).find('.cancel_card').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');
                          $(form).find('.cancel_card').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('payment-forms');
          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