@extends ('web.layouts-v2.master-ssaveim')

@section ('title')
@lang('messages.submenu_ssaveim_TtT') | @lang('messages.title')
@endsection
@section ('description')
<meta name="description" content="@lang('messages.submenu_ssaveim_TtT_legend')">
@endsection

@section ('seoNotation')
@include('web.partials.seo-notation')
{!! $jsonLdSchema !!}
@endsection

@section ('css')
<style type="text/css">
    .school-instructors-circle {
        display: block;
        background: rgba(255,255,255,0);
        background-image: url("{{ asset('../resources/assets/img/ssaveim-inline/circle-of-instructors.png') }}");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        border-style: none;
        border-radius: 226px;
        z-index: 100;
        width: 95%;
        height: 95%;
        position: absolute;
    }
    
    .progress-bar {
        transition: width .6s ease;
        animation: 2s linear infinite;
    }
</style>
@endsection

@section ('content')
<!--=== Content Part ===-->
<section class="container-fluid g-bg-gray-light-v4 g-pt-80--lg">
    <div class="row justify-content-center">

        <div class="col-lg-12 p-0">
            <!-- Landing Block -->
            <div class="g-pos-rel">
                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall" data-options="{direction: 'reverse'}" style="height: 100%;">
                    <div class="hidden-md-down divimage dzsparallaxer--target w-100 g-bg-cover g-bg-pos-top-center g-bg-black-opacity-0_2--after" style="background-image: url(../resources/assets/img/inline/ssaveim_landing_page.jpg); height: 120%;"></div>
                    <div class="hidden-lg-up divimage dzsparallaxer--target w-100 g-bg-cover g-bg-pos-top-center g-bg-black-opacity-0_2--after" style="background-image: url(../resources/assets/img/inline/ssaveim_landing_page.jpg); height: 120%;" ></div> 

                    <div class="container g-bg-cover__inner g-py-100">
                        <div class="row align-items-center">
                            <div class="col-lg-12 g-mb-30 g-mb-0--lg">
                                <div class="g-py-10 text-center">
                                    <img class="img-fluid" style="max-height: 80px;" src="{{ asset('../resources/assets/img/logo/logo-bw-reverse-md.png') }}" alt="@lang('messages.title_inc')">
                                </div>
                                <h2 class="h1 g-color-white text-center g-mt-80 g-mb-30">
                                    <span class="g-px-5"><b>Keep Your School Safe</b><br> with our unique, hands-on violent event <br>incident management training</span><br>
                                </h2>
                                <h3 class="h3 g-color-white text-center">
                                    <span class="g-px-5">We train school personnel side-by-side with police, fire, and EMS to work <br>faster as one team and save every life that can be saved.</span><br>
                                </h3>
                                
                                @include ('web.partials.ssaveim.quiz-button')
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@include ('web.partials.ssaveim.quiz')
@include ('web.partials.ssaveim.1-pricing-details')
@include ('web.partials.ssaveim.2-percentage')
@include ('web.partials.ssaveim.1-partnership')
@include ('web.partials.ssaveim.3-breakdown-by-discipline')
{{-- @include ('web.partials.ssaveim.3-plan-prepare-practice')
@include ('web.partials.ssaveim.4-protect-section') --}}
@include ('web.partials.ssaveim.5-train')
@include ('web.partials.ssaveim.6-curriculum-details')
{{-- @include ('web.partials.ssaveim.6-schools-we-train')
@include ('web.partials.ssaveim.7-train-school')
@include ('web.partials.ssaveim.8-learn-from-experience')
@include ('web.partials.ssaveim.9-what-is-ssaveim') --}}
@include ('web.partials.ssaveim.10-first-step')
@include ('web.partials.ssaveim.11-contact-us')

<!--=== End Content Part ===-->

@endsection

@section ('javascript')
<!-- JS JQuery Validation -->
<script  src="{{ asset('../resources/assets/js/components/validation/jquery.validate.min.js') }}"></script>
<script  src="{{ asset('../resources/assets/js/components/validation/additional-methods.min.js') }}"></script>

<script>
    const prefix = ".custombox-content";
    
    $(document).on('ready', function () {
        // initialization of popups
        $.HSCore.components.HSModalWindow.init('[data-modal-target]', {
            onOpen: initQuiz, //,
            onComplete: function() {
                // $(prefix + " .quiz-progress").css("width", "20%");
            }
        });
        
        let openQuiz = getQueryParam("open");
        // console.log(openQuiz);
        if (openQuiz === "true") {
            $(".btn-open-quiz")[0].click();
        }
    });
    
    function initQuiz() {
	
        $(prefix + " .btn-quiz-procced").click(function() {
            $(prefix + " .error-message").addClass("g-hidden-xs-up");
            let proceed = $(prefix + " .quiz-form ").valid();
            let recaptchaProceed = true; // checkIfCapchaIsFilled(); // Validate if Captcha is not empty
            
            if (proceed && recaptchaProceed) {
                let activeStep = $(prefix + " .quiz-step.quiz-step-active");
                let newIndex = activeStep.data("quiz-index") * 1 + 1;

                activeStep.removeClass("quiz-step-active").addClass("g-hidden-xs-up");
                $(prefix + " .quiz-step[data-quiz-index=" + newIndex + "]").addClass("quiz-step-active").removeClass("g-hidden-xs-up");
                $(prefix + " .quiz-progress").parent().removeClass("g-hidden-xs-up");
                $(prefix + " .quiz-progress").css("width", (newIndex - 1) * 25 + "%");
                
                $(prefix + " .btn-quiz-next-step").removeClass("g-hidden-xs-up");
                $(prefix + " .btn-quiz-procced").addClass("g-hidden-xs-up");
                $(prefix + " .btn-quiz-results").addClass("g-hidden-xs-up");
            }
            else {
                $(prefix + " .quiz-form ").valid();
                // $(prefix + " .btn-quiz-results").attr("disabled", false);
                $(prefix + " .error-message").removeClass("g-hidden-xs-up");
            }
        });
                
        $(prefix + " .btn-quiz-next-step").click(function() {
            let activeStep = $(prefix + " .quiz-step.quiz-step-active");
            let newIndex = activeStep.data("quiz-index") * 1 + 1;

            activeStep.removeClass("quiz-step-active").addClass("g-hidden-xs-up");
            $(prefix + " .quiz-step[data-quiz-index=" + newIndex + "]").addClass("quiz-step-active").removeClass("g-hidden-xs-up");
            $(prefix + " .quiz-progress").css("width", (newIndex - 1) * 25 + "%");

            if (newIndex === 5) {
                $(prefix + " .btn-quiz-next-step").addClass("g-hidden-xs-up");
                $(prefix + " .btn-quiz-results").removeClass("g-hidden-xs-up");
            }
            
        });
        
        $(".custombox-content .btn-quiz-results").click(function() {
            $(prefix + " .error-message").addClass("g-hidden-xs-up");
            let proceed = $(prefix + " .quiz-form ").valid();
            let recaptchaProceed = true; // checkIfCapchaIsFilled(); // Validate if Captcha is not empty
            
            if (proceed && recaptchaProceed) {
                $(prefix + " .btn-quiz-results").attr("disabled", true);

                $.post("{{ URL::to('/postSsaveimquiz') }}", $(prefix + " .quiz-form ").serialize(), function () {
                    $(prefix + " .progress").parent().addClass("g-hidden-xs-up");
                    $(prefix + " .quiz-footer").addClass("g-hidden-xs-up");
                    
                    let activeStep = $(prefix + " .quiz-step.quiz-step-active");
                    let newIndex = activeStep.data("quiz-index") * 1 + 1;

                    activeStep.removeClass("quiz-step-active").addClass("g-hidden-xs-up");
                    $(prefix + " .quiz-step[data-quiz-index=" + newIndex + "]").addClass("quiz-step-active").removeClass("g-hidden-xs-up");
                })
                .done(function(data) {
                    gtag('send', 'event', 'Quiz Completed', 'submit');
            
                    if (data.success) {
                        <!-- Event snippet for Quiz Completed conversion page -->
                        gtag('event', 'conversion', {'send_to': 'AW-344507654/hAniCJmOht4CEIaKo6QB'});
                        console.log("Google tags sent " + data.success);
                    }
                    else {
                        console.log("Google tags don't send because of data.success = " + data.success);
                    }
                })
                .fail(function() {
                    console.log('fail');
                    $(prefix + " .btn-quiz-results").attr("disabled", false);
                    $(prefix + " .error-message").removeClass("g-hidden-xs-up");
                });
            }
        });
    }
    
    // Open quiz modal param
    function getQueryParam(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, '\\$&');
        let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
        let results = regex.exec(url);
        if (!results) {
            return null;
        }
        if (!results[2]) {
            return '';
        }
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
    
</script>
@endsection