{{-- Extends layout --}}
@extends(getThemeBasePath())
@section('page_title')
    {{ $page_title }}
@endsection
<link href="{{asset('backend/css/pages/wizard/wizard-2.css')}}" rel="stylesheet" type="text/css" />
<style>
    .header-menu {
        display: none !important;
    }

    .pdfobject-container {
        height: 35rem;
        border: 1rem solid rgba(0, 0, 0, .1);
    }

    .wizard.wizard-2 .wizard-nav {
        flex: 0 0 190px;
        width: 190px;
    }
    @media (min-width: 768px) {
        [data-kt-stepper-element="content"] {
            min-height: 300px;
        }
    }
    @media (max-width: 767px) {
        [data-kt-stepper-element="content"] {
            min-height: unset;
        }
    }
</style>
{{-- Content --}}
@section('content')

<div class="card shadow-sm">
    <!--begin::Card header-->
    <div class="card-header card-header-tabs-line nav-tabs-line-3x">
        <!--begin::Toolbar-->
        <div class="card-toolbar">
            <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                <!--begin::Item-->
                <li class="nav-item mr-3">
                    <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                        <span class="nav-text font-size-lg">{{$page_title}}</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--end::Toolbar-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body">
        <div class="tab-content">
            <!--begin::Tab-->
            <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
                <div class="rounded border p-10 p-lg-20">
                    @include('backend.training.attend.module.wizard')
                </div>
            </div>
            <!--end::Tab-->
        </div>
    </div>
    <!--begin::Card body-->
</div>
<input type="hidden" value="{{$link->link??''}}" id="link">
<!--end::Card-->
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script src="//cdn.jsdelivr.net/npm/pdfobject@2.2.5/pdfobject.min.js"></script>
@if (isset($requiredSignature) && $requiredSignature)    
@include('backend.forms.common_form_script')
@endif
<script src="{{asset('backend/js/components/card.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var link = $('#link').val();
        //alert(link);
        if (link != '') {
            Swal.fire({
                text: link,
                icon: "success",
                showCancelButton: false,
                buttonsStyling: false,
                confirmButtonText: "Visit Link",
                customClass: {
                    confirmButton: "btn font-weight-bold btn-primary",
                    cancelButton: "btn font-weight-bold btn-default"
                }
            }).then(function(result) {
                console.log(result);
                if (result.value) {
                    var newTab = window.open(link, '_blank');
                    newTab.location;
                }
            });
        }
        var pdf = document.getElementsByName('mypdf');
        var image = document.getElementById('myimage');
        var files = '{{$files}}';
        var acknowledgment = '{{$acknowledgment}}';
        var requiredSignature = '{{$requiredSignature}}';        
        
        console.log(files.length);
        if (files.length == 0 && acknowledgment == 0 && requiredSignature == 0 ) {
            $('#next').css('visibility', 'hidden');
            $('#previous').css('visibility', 'hidden');
            $('#submit_btn').css('visibility', '');
            $('#submit_btn').addClass('d-inline-block');
        } else {
            // alert("not empty");
            $('#next').css('visibility', '');
            $('#previous').css('visibility', '');
            $('#submit_btn').css('visibility', '');
        }




        // Stepper lement
        var element = document.querySelector("#kt_stepper_example_vertical");

        // Initialize Stepper
        var validations = [];
        var stepper = new KTStepper(element);
        var _formEl = $('#manage_form');
        var requiredSignature = "{{$requiredSignature??0}}";
        var requiredQuestions = "{{$training_with_questionnaire??0}}";


        // Handle next step
        stepper.on("kt.stepper.next", function(stepper) {
            if (_formEl.valid()) {
                stepper.goNext(); // go next step
            } else {
                Swal.fire({
                    text: "Sorry, looks like there are some errors detected, please try again.",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Ok, got it!",
                    customClass: {
                        confirmButton: "btn btn-light"
                    }
                }).then(function () {
                    KTUtil.scrollTop();
                });
            } 
            var activeStep = $('.pb-5[data-wizard-state="current"]');
            var aod = activeStep.attr('data-step-id');
            var video = document.getElementById('myvideo' + aod);

            KTUtil.scrollTop();
            document.getElementById('next').style.visibility = '';
            document.getElementById('previous').style.visibility = '';
            document.getElementById('submit_btn').style.visibility = '';
            // alert(video.id);
            // alert(pdf.name);
            // alert(image.id);

            if (video) {
                video.autoplay = true;
                video.load();
                var supposedCurrentTime = 0;
                video.addEventListener('timeupdate', function() {
                    if (!video.seeking) {
                        supposedCurrentTime = video.currentTime;

                        //next.style.display = "none";
                    }
                });

                video.addEventListener('play', function() {
                    document.getElementById('next').style.visibility = 'hidden';
                    document.getElementById('previous').style.visibility = 'hidden';
                    document.getElementById('submit_btn').style.visibility = 'hidden';


                });


                // prevent user from seeking
                video.addEventListener('seeking', function() {
                    document.getElementById('next').style.visibility = 'hidden';
                    document.getElementById('previous').style.visibility = 'hidden';
                    document.getElementById('submit_btn').style.visibility = 'hidden';
                    var delta = video.currentTime - supposedCurrentTime;
                    if (delta > 0.01) {
                        video.currentTime = supposedCurrentTime;
                        //next.style.display = "none";
                    }
                });

                video.addEventListener('ended', function() {
                    document.getElementById('next').style.visibility = '';
                    document.getElementById('previous').style.visibility = '';
                    document.getElementById('submit_btn').style.visibility = '';
                    video.autoplay = false;
                });
            }
        });

        // Handle previous step
        stepper.on("kt.stepper.previous", function(stepper) {
            stepper.goPrevious(); // go previous step
        });

        // Handle previous step
        $('[data-kt-stepper-action="submit"]').on('click', function(event) {
                if (_formEl.valid()) {
                    if(requiredSignature && $('#signature_hidden').val() == ''){
                        errorAlert['text'] = 'Please sign on the signature pad and confirm it!';
                        Swal.fire(errorAlert);
                    }else{
                        if (requiredQuestions == 1) {
                            var swalQuestionText = "Everything looks good! Please confirm to start the questionnaire"; 
                        }else{
                            var swalQuestionText = "Everything looks good! <br> Please confirm to finish training"; 
                        }
                        Swal.fire({
                        html: swalQuestionText,
                        icon: "success",
                        showCancelButton: true,
                        buttonsStyling: false,
                        confirmButtonText: "Yes, confirm!",
                        cancelButtonText: "No, cancel",
                        customClass: {
                            confirmButton: "btn font-weight-bold btn-primary",
                            cancelButton: "btn font-weight-bold btn-default"
                        }
                        }).then(function(result) {
                            if (result.value) {
                                _formEl.submit(); // Submit form
                            } else if (result.dismiss === 'cancel') {
                                Swal.fire({
                                    text: "Please finish start training!.",
                                    icon: "error",
                                    buttonsStyling: false,
                                    confirmButtonText: "Ok, got it!",
                                    customClass: {
                                        confirmButton: "btn font-weight-bold btn-primary",
                                    }
                                });
                            }
                        });
                    }            
            } else {
                Swal.fire({
                    text: "Please fill out all required fields correctly.",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Ok, got it!",
                    customClass: {
                        confirmButton: "btn font-weight-bold btn-primary",
                    }
                });
            }
        });

    });
</script>
@endsection