{{-- Onboarding Modal --}}
<div name="onboardingModal" class="modal fade" id="onboardingModal" tabindex="-1" role="dialog" aria-labelledby="onboardingModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content onboarding-content onboarding-image">
        <div class="row onboarding-row">
            <div class="onboarding-text col-sm-6 col-md-6 col-lg-6 p-4 order-2 order-sm-1 order-md-1 order-lg-1">
                  <div id="onboardingTexts" class="carousel slide" data-ride="carousel" style="">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                          <h3>{{ __('onboarding.title1') }}</h3>
                          <p>
                            {{ __('onboarding.text1') }}
                          </p>
                        </div>
                        <div class="carousel-item">
                          <h3>{{ __('onboarding.title2') }}</h3>
                          <p>
                            {{ __('onboarding.text2') }}
                          </p>
                        </div>
                        <div class="carousel-item">
                          <h3>{{ __('onboarding.title3') }}</h3>
                          <p>
                            {{ __('onboarding.text3') }}
                          </p>
                        </div>
                        <div class="carousel-item">
                          <h3>{{ __('onboarding.title4') }}</h3>
                          <p>
                            {{ __('onboarding.text4') }}
                          </p>
                        </div>
                        <div id="last_onboardingCaro" class="carousel-item">
                          <h3>{{ __('onboarding.title5') }}</h3>
                          <p>
                            {{ __('onboarding.text5') }}
                          </p>
                        </div>
                    </div>
                </div>

                <div id="onboarding_NextButtonDiv" class="d-flex justify-content-center mb-2">
                  <button id="next-onboardingImg" type="button" class="btn btn-primary m-2" onclick="" href="#carouselExampleControls" role="button" data-slide="next">{{ __('onboarding.nextButton') }}</button>
                  <button id="close-onboardingButton" type="button" class="btn btn-primary m-2 d-none" onclick="skipOnboarding()" href="#" role="button" >{{ __('onboarding.letsGoButton') }}</button>
                </div>

                <div id="onboarding_SkipButtonDiv" class="d-flex justify-content-center">
                  <a id="skip-onboardingLink" href="#" onclick="skipOnboarding()">{{ __('onboarding.skipButton') }}</a>
                </div>
            </div>
            <div id="onboardingAnimationDiv" class="d-flex justify-content-center align-content-center col-sm-6 col-md-6 col-lg-6 p-0 py-3 px-4 px-sm-3 px-md-2 px-lg-2 order-1 order-sm-2 order-md-2 order-lg-2">
            </div>

            <div id="onboarding_buttonsLower" class="onboarding-text col-sm-6 col-md-6 col-lg-6 p-4 d-none"></div>

        </div>
      </div>
    </div>
</div>

@push('scripts')
<script src="/js/lottie.js" type="text/javascript"></script>
<script>
// _____ Carousel ujjal történő mozgatásának és folyamatos slideolásának kikapcsolása
$('.carousel').carousel({
  interval: false,
  touch: false
});

// _____ Onboarding slider responsive nézetben a gomb elhelyezkedésének a cseréje
$('#onboardingTexts').on('slid.bs.carousel', function () {
  if ( $('#last_onboardingCaro').hasClass('active'))
  {
    $('#next-onboardingImg').addClass('d-none');
    $('#close-onboardingButton').removeClass('d-none');
    $('#skip-onboardingLink').addClass('d-none');
    $('#take-tourLink').removeClass('d-none');
  }
  else
  {
    $('#close-onboardingButton').addClass('d-none');
    $('#next-onboardingImg').removeClass('d-none');
    $('#take-tourLink').addClass('d-none');
    $('#skip-onboardingLink').removeClass('d-none');
  }
});

// _____ Onboarding kihagyása gomb
function skipOnboarding() {
  $('#onboardingModal').modal('toggle');
  window.location.href="#";
};

// _____ Onboarding animáció betöltése lottie-web segítségével
var container = document.getElementById('onboardingAnimationDiv');
var animData = {
    container: container,
    renderer: 'svg',
    autoplay: false,
    loop: false,
    path : '/onboardingAnimation.json'
};
var anim = bodymovin.loadAnimation(animData);

// ___ Animáció betöltésekor az első lépés futtatása
anim.addEventListener('DOMLoaded',firstLoop);

// ___ Animáció lépései
function firstLoop() {
     anim.playSegments([0,40], true);
};

function secondLoop() {
     anim.playSegments([40,107], true);
};

function thirdLoop() {
     anim.playSegments([107,173], true);
};

function fourthLoop() {
     anim.playSegments([173,243], true);
};

function fifthLoop() {
     anim.playSegments([243,300], true);
};

// ___ Animációk léptetése gomb nyomásra
var debug = false;
var num = 1;
$('#next-onboardingImg').on('click', function(e) {
  e.preventDefault()
  $('.carousel').carousel('next');

  if(debug == true) console.log(num);

  switch (num) {
    case 1:
      secondLoop();
      num++;
      break;
    case 2:
      thirdLoop();
      num++;
      break;
    case 3:
      fourthLoop();
      num++;
      break;
    case 4:
      fifthLoop();
      num++;
      break;
    default:
      firstLoop();
      num = 1;
  }
});
</script>

<script>
    $('#acceptTerm').on('hidden.bs.modal', function (e) {
        deleteCookie( 'acceptedTerms' );
    });
</script>
@endpush