@php
    $tutorials = config('sys.tutorial_popup_sequence');
    if($tutorials){
        foreach ($tutorials as &$tut) {
            foreach ($tut as $k => &$lang_id) {
                $lang_id = __($lang_id);
            }
        }
        unset($tut, $lang_id);
    }
@endphp

@push('script')
    <script src="{{ asset('assets/bower/jquery-ui/jquery-ui.min.js') }}"></script>
    <script>
        $(function(){
            let TUTORIAL_DATA = @json($tutorials);
            if(TUTORIAL_DATA.length) {
                const $modal = $('#popup_tutorial_seq');
                let seq = 0;

                $modal.on('modal.bs.hidden',()=>{
                    $modal.find('.title, .subtitle, .cta').empty().hide();
                });


                const showNextTutorialSequence = ()=>{
                    $modal.modal('hide');
                    const updateSeq = (reset=false)=>{
                        seq = reset ? 0 : seq + 1;
                    }
                    if(seq>=TUTORIAL_DATA.length) {
                        updateSeq(false);
                        return;
                    }
                    const openPopup = ()=>{
                        setTimeout(()=>{
                            loadPopup('popup_tutorial_seq');
                            $modal.off('show.bs.modal').on('show.bs.modal',()=>{
                                $modal.off('hidden.bs.modal');
                                $modal.find('.title').html(TUTORIAL_DATA[seq].title).show();
                                $modal.find('.subtitle').html(TUTORIAL_DATA[seq].subtitle).show();
                                $modal.find('.cta').html(TUTORIAL_DATA[seq].cta).show()
                                    .off('click').on('click',showNextTutorialSequence);
                                updateSeq();
                            });
                        }, 500);

                    }

                    $modal.is(':visible') ? $modal.off('hidden.bs.modal').on('hidden.bs.modal', openPopup) : openPopup();
                }

                window.checkTutorial = ()=>{
                    return new Promise(resolve => {
                        // Get the query string part of the URL
                        const params = getUrlParam('tutorial');
                        const startFunction = (params === 'true');
                        const is_first_load = Boolean(window?.user_details?.first_login);

                        if (startFunction) {
                            const url = new URL(window.location.href);
                            url.searchParams.delete('tutorial');
                            history.replaceState({}, '', url.toString());
                        }
                        resolve(startFunction || is_first_load);
                    });
                }
                    window.startTutorial = function (forceStart = false) {
                        if (!forceStart) return;
                        showNextTutorialSequence()
                    };

                window.checkTutorial().then(doTutorial => {
                    window.startTutorial(doTutorial);
                }).catch(console.log);
            }


        })
    </script>
@endpush

@push('style')
@endpush

@if($tutorials)
    @component(getPopupLayout(), ['id'=>'popup_tutorial_seq'])
        <h5 class="title mt-4" style="display: none"></h5>
        <p class="subtitle mb-4" style="display: none"></p>
        <button id="close" class='btn btn-primary cta'>{{ __('heading.btn_close') }}</button>
    @endcomponent
@endif