@extends('company_portal.layouts.master')

@section('title','Creating the third workspace.')

@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="admin-wrapper d-flex align-items-start flex-column flex-md-row">
    <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>

  {{-- new cancel modal --}}
  @include('company_portal.payment_partials.modals._new_cancel_modal')
  {{-- subscription reasons modal --}}
  @include('company_portal.payment_partials.modals._cancel_reason_modal')



 @include('company_portal.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">
              @if((Auth::user()->subscription('default') && !Auth::user()->subscription('default')->cancelled() && !Auth::user()->subscription('default')->onGracePeriod()))
                @if(isset($plan_subscribed) && $plan_subscribed && $plan_subscribed->can_upgrate)
              
                  <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-row justify-content-start justify-content-md-between align-items-center">
                            <p class="free font-bold font-gotham mb-3 mb-md-0">Get 3 months free! Upgrade to annual today!</p>
                              {{--  <p class="mb-0"><a href="" class="btn green w-140 mobile-auto" onclick="switchHidden()">Upgrade</a></p>--}}
                            <p class="mb-0"><button class="btn green w-140 mobile-auto upgrate_plan">Upgrade</button></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                @endif
              @endif

              @if(Auth::user()->company && Auth::user()->company->companyFreelancer && count(Auth::user()->company->companyFreelancer()->where('status', 1)->get()) < 1)
                <section class="bg-danger">
                  <div class="row justify-content-center align-items-center">
                    <div class="col-12 col-xxl-11">
                      <div class="bg-danger p-3">
                        <div class="d-flex flex-column flex-md-row justify-content-start justify-content-md-between align-items-center">
                          <p class="free font-bold font-gotham mb-3 mb-md-0">No user has access on the app! Please select which one can access.</p>
                        
                          <p class="mb-0"><a href="{{route('users_list_commercial_portal')}}" class="btn green w-block mobile-auto">Add access to app</a></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>

              @endif



                <div class="row">
                  @if(Auth::user()->subscription('default') && Auth::user()->subscription('default')->cancelled() && Auth::user()->subscription('default')->onGracePeriod())
                    <form id="payment-forms" action="{{ route('payment-stripe-company-new') }}" method="POST">
                      {{ csrf_field() }}
                      
                      <div class="col-12 col-lg-8 mb-4 mb-lg-0">

                        <p class="text-center text-md-start h4 mb-4 font-header main_title">Resume your subscription</p> 
                        @if(Auth::user()->subscription('default') && Auth::user()->subscription('default')->onGracePeriod())

                          <p class="text-center text-md-start h4 mb-4 font-header main_title">
                            Your subscription will be resume and your next payment will be on {{\Carbon\Carbon::parse(Auth::user()->subscription('default')->ends_at)->format('d-m-Y')}}
                          </p> 
                          <input type="hidden" name="resume_subscription" value="1">
                        @endif

                        <div class="boxed h-100">
                          @include('company_portal.payment_partials._payment_stripe')
                        </div>
                      </form>
                    </div>
                  @elseif(Auth::user()->subscription('default') && Auth::user()->subscription('default')->cancelled() && !Auth::user()->subscription('default')->onGracePeriod()) 
                    <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                      <div class="boxed">
                      
                        <p class="text-center text-md-start h4 mb-4 font-header main_title">Order summary</p>
                        
                    
                          <input type="hidden" class="stipe" value="{{Session::get('plan')}}">
                          <form id="payment-forms" action="{{ route('payment-stripe-company-new') }}" method="POST">
                            {{ csrf_field() }}
                            
                            <input type="hidden" name="term_length" value="monthly">
                          

                            <div class="row pb-3 pb-md-4">

                              @if(!$subscription_old_plan)

                            
                                @foreach ($plans as $plan)
                            
                                  @if($plan->price == null && $plan->yearly_price == null )

                                  @else
                                    @include('company_portal.payment_partials._payment_plans')
                                  @endif
                                @endforeach
                              @else  

                                @include('company_portal.payment_partials._old_subscription_payment_plan')

                              @endif
                            
                            </div>
                            <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                            
                              {{-- Current Licences: {{Auth::user()->licences}} --}}
                            </div>
                          @if(!isset($plan_subscribed))
                            <div class="apply pb-3">
                              <div class="row">
                                  <div class="d-flex flex-column flex-md-row discount d-none" style="" id="discount">
                                      <div class="col-12 col-md-7">
                                          <div class="form">
                                              <div class="form-group">
                                                  <input type="text" class="form-control test" placeholder="Add promo code" name="discount_code" @if(isset($discount)) value="{{$discount}}" @endif>   
                                                  <span class="valid-feedback valid_code d-none">Code accepted <span class="percentDiscount"></span></span>
                                                      <span class="invalid-feedback 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>

                          @endif

                              @include('company_portal.payment_partials._calculator_payment')
                              
                              @include('company_portal.payment_partials._payment_stripe')
                            </form>
                        </div>
                    
                    
                    </div>
                    <div class="col-12 col-lg-4">
                        <div class="boxed list-included mb-4">
                            <div class="pt-0">
                                <p class="font-bold font-gotham h4 mb-4">What's included in your upgrade?</p>
                                <ul class="list-unstyled ps-5">
                                    <li class="py-3">Unlimited bookings</li>
                                    <li class="py-3">Exclusive Networking</li>
                                    <li class="py-3">Access to Reef Discord channel</li>
                                    <li class="py-3">Perks + discounts</li>
                                    <li class="py-3">Invite + collaborate with colleagues</li>
                                </ul>
                            </div>
                        </div>
                        <div class="boxed list-included">
                            <div class="pt-4">
                                <p class="f-20 font-bold font-gotham h4 mb-4">We accept</p>
                                <div>
                                    <img src="{{asset('images/dashbord-visa.png')}}" alt="" class="image-auto">
                                </div>
                            </div>
                        </div>
                    </div>


                  @else
                  
                    <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                      <div class="boxed h-100">
                        @if(isset($plan_subscribed) && $plan_subscribed)
                         <p class="text-center text-md-start h4 mb-4 font-header main_title">Add Users </p> 
                         <span class="text-end color-green">@if(Auth::user()->onTrial() && Auth::user()->subscription('default')->trial_ends_at) @php $date = Auth::user()->subscription('default')->trial_ends_at; @endphp Free trial ends on {{\Carbon\Carbon::parse($date)->format('d-m-Y')}}  @endif </span>
                         @else 
                         <p class="text-center text-md-start h4 mb-4 font-header main_title">Order summary</p>
                         @endif
                     
                          <input type="hidden" class="stipe" value="{{Session::get('plan')}}">
                          <form id="payment-forms" action="{{ route('payment-stripe-company-new') }}" method="POST">
                            {{ csrf_field() }}
                            
                            <input type="hidden" name="term_length" value="monthly">
                           

                            <div class="row pb-3 pb-md-4">
                              @if(!$subscription_old_plan)
                                @if(isset($plan_subscribed) && $plan_subscribed)
                                  @php $plan = $plan_subscribed; @endphp 
                                  @include('company_portal.payment_partials._payment_plans') 
                                  @foreach ($plans as $plan)
                                  @if($plan_subscribed->id != $plan->id)
                                  
                                      @include('company_portal.payment_partials._payment_plans')
                                  
                                    @endif
                                  @endforeach
                                @else 
                                  @foreach ($plans as $plan)
                                    @if($plan->price == null && $plan->yearly_price == null )

                                    @else
                                        @include('company_portal.payment_partials._payment_plans')
                                    @endif
                                  @endforeach

                                @endif
                              @elseif($subscription_old_plan)

                                @include('company_portal.payment_partials._old_subscription_payment_plan')
                              @endif
                            </div>
                            <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                              Current Licences: {{Auth::user()->licences}}
                          </div>
                          @if(!isset($plan_subscribed))
                            <div class="apply pb-3">
                                <div class="row">
                                    <div class="d-flex flex-column flex-md-row discount d-none" style="" id="discount">
                                        <div class="col-12 col-md-7">
                                            <div class="form">
                                                <div class="form-group">
                                                    <input type="text" class="form-control test2" placeholder="Add promo code" name="discount_code" @if(isset($discount_code)) value="{{$discount_code}}" @elseif(old('discount_code')) value="{{old('discount_code')}}"@endif>
                                                        <span class="valid-feedback valid_code d-none">Code accepted <span class="percentDiscount"></span></span>
                                                        <span class="invalid-feedback 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>
                          @endif
                              @if($offer_exist)
                                <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                                 Special Discount: 20%
                                </div>
                              @endif
                              @include('company_portal.payment_partials._calculator_payment')
                            
                              @include('company_portal.payment_partials._payment_stripe')
                          
                            </form>
                        </div>
                        @if(!$freemium)
                          <div>
                            <p class="mb-0 text-center py-3 py-lg-4">Click <a href="#" class="color-main" data-bs-toggle="modal" data-bs-target="#unsubscribe-m" ><u>here</u></a> to cancel your subscription.</p>
                          </div>
                        @endif
                      {{-- @if($yearlySubscribedUser && !$monthlySubscribedUser)
                        <p class="text-center" style="font-size: 13px; padding-top: 1%">
                          Click <button id="cancel" data-toggle="modal" data-target="#confirmDeleteComment" style="text-decoration: underline">here</button> to cancel your subscription
                        </p>
                      @endif --}}
                    </div>
                    @include('company_portal.payment_partials._right_sidebar_payment_blade')
                  @endif
                </div>
            </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>
<script>
  var stripe_key = "{{ env("STRIPE_KEY") }}";
  var route_save_payment_method = "{{route('savePaymentMethod')}}";
</script>
<script type="text/javascript" src="{{ mix('js/portals-scripts/subscription/cancel_subscription.js') }}"></script>
<script type="text/javascript" src="{{ mix('js/portals-scripts/subscription/stripe_functions.js') }}"></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

@if($show_info_modal)
  <script>
    $(document).ready(function (){
      $("#companyDetails").modal('show')
    });
  </script>
@endif
<script>
  $(document).on('click', '#cancel', function (e) {
    e.preventDefault();
    $('#confirmDeleteComment').modal('show');
  });
</script>
<script>

$(document).ready(function(){

    let input =  $(this).find('.form-check-input');
    let input_val = $(input).val()
    let stripe_price =  input_val;
    let licences = $(document).find('.licences').val();
  
    if(stripe_price){
      callAjaxPaymentCalculation(stripe_price, licences)
    }
  });

$(document).ready(function(){
 
  $(document).on('click', '.upgrate_plan', function(e){
    e.preventDefault();
    let stripe_price = $(document).find(".plan_for_upgrating").val();

    console.log(stripe_price);
   
    let discount = $("input[name=discount_code]").val();
    $(document).find('.licences_num').attr('readonly', true);
    $(document).find('.licences_num').val("{{Auth::user()->licences}}");
    let licences = "{{Auth::user()->licences}}";
    $(document).find('.plan_div').addClass('d-none');
    let div_plan = $(document).find(`[data-plan_id=${stripe_price}]`).removeClass('d-none');
    $(div_plan).removeClass('d-none');

    $(document).find('.main_title').text('Upgrade subscription');
   
    $(document).find('.form-check-input').attr('checked' , false);
    $(div_plan).find('.form-check-input').attr('checked' , true);
    $(document).find('.purple_banner').addClass('d-none');
   // $(document).find('.discount').removeClass('d-none');
    let input = `<input type="hidden" class="change_plan" name="change_plan" value="change_plan">`
    $(document).find('form').append(input);
    $.ajax({
        url: "{{route('ajax_payment_calculation')}}",
        type: "GET",
       
        data:{stripe_price:stripe_price, licences:licences, discount:discount, change_plan:"change_plan"},
        success: function(response){
         $(document).find('.calculator_payment_div').empty();
         $(document).find('.calculator_payment_div').append(response.html);
         $(document).find('#confirm_payment').find('.text_modal_confirm_payment').text(`Are you sure you want to upgrade you subscription`);
        }
      });

  })
  
  $(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'); 
    callAjaxPaymentCalculation();
  })

  $(document).on('keyup change', '.licences', function(){

    let licences = $(this).val();
    let stripe_price = $(document).find("input[type='radio'][name='check']:checked").val();
    
    callAjaxPaymentCalculation()
  })
});



function callAjaxPaymentCalculation(){

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

 

    function calc(selected) {

      var inputVal  = document.getElementById("input").value;
      var answerVal = document.getElementById("answer");
      var answerVatInc = document.getElementById("answerVatInc")
      var totalWithVat = document.getElementById("totalWithVat")

      let price = 0;
      let discount = 0;
      let monthlyVat = 9 * 20 /100;
      let yearlyVat = 6.75 * 20 /100;

      if(selected === 'monthly'){
        price = 9;
        // answerVal.value =   (inputVal * price).toFixed(2);
        // answerVatInc.value =  (answerVal.value  * 20 / 100).toFixed(2);
        // totalWithVat = (parseFloat(answerVal.value)) + parseFloat(answerVatInc.value).toFixed(2);


        answerVal.value =  parseFloat(parseFloat(parseFloat(inputVal) * parseFloat(price))).toFixed(2);
        answerVatInc.value = parseFloat(answerVal.value  * parseFloat(20 / 100)).toFixed(2);
        totalWithVat =  parseFloat(parseFloat(answerVal.value) + parseFloat(answerVatInc.value)).toFixed(2);
        $('#totalWithVat').text(totalWithVat);
      }

      else if(selected === 'yearly') {
        if(inputVal != '' && typeof inputVal != 'undefined') {
          price = parseFloat(81 + yearlyVat).toFixed(2);
          answerVal.value =  parseFloat(parseFloat(parseFloat(inputVal) * parseFloat(price))).toFixed(2);
          answerVatInc.value = parseFloat(answerVal.value  * parseFloat(20 / 100)).toFixed(2);
          totalWithVat =  parseFloat(parseFloat(answerVal.value) + parseFloat(answerVatInc.value)).toFixed(2);
          $('#totalWithVat').text(totalWithVat);
        }

      }
    }

    function cal(percentage){
        let totalWithVat = document.getElementById("totalWithVat").value;
        let discount = (totalWithVat * percentage) / 100;
        let fullDiscount = document.getElementById('fullDiscount');
        fullDiscount.value =  discount.toFixed(2);
        let sumDiscount = document.getElementById('fullDiscount').value;
        let fullTotalDiscount = document.getElementById('fullTotalDiscount')
        fullTotalDiscount.value = (totalWithVat - sumDiscount).toFixed(2);
    }

    $("#submitDiscount").on('click', function() {
      $(document).find('.invalid-feedback').addClass('d-none')
      $(document).find('.valid_code').addClass('d-none')

      
      let discount = $("input[name=discount_code]").val();
      $("#fullDiscount").val('')
      $("#fullTotalDiscount").val('')
      $.ajax({
        url: '/get-discount-percentage',
        type: "get",
        dataType: 'json',//this will expect a json response
        data:{discount:discount},
        success: function(response){
          $("#discount_div").attr('hidden', false)
          if(response.data){
           $(document).find('.valid_code').removeClass('d-none');
           let percentage = JSON.parse(response.data.percentage)
           $(document).find('.percentDiscount').text(`${percentage}% discount`);
           callAjaxPaymentCalculation();
          }else if(response.error){
            $(document).find('.invalid-feedback').removeClass('d-none');
          }else{
          
            $(document).find('.invalid-feedback').removeClass('d-none')
          }
         
        }
      });
    });
</script>
@endpush