(function ($) {
    "use strict";

    var offerCountDown = $('#offerCountDown');

    if (offerCountDown.length) {
        var endtimeDate = offerCountDown.attr('data-day');
        var endtimeHours = offerCountDown.attr('data-hour');
        var endtimeMinutes = offerCountDown.attr('data-minute');
        var endtimeSeconds = offerCountDown.attr('data-second');

        offerCountDown.countdown100({
            endtimeYear: 0,
            endtimeMonth: 0,
            endtimeDate: endtimeDate,
            endtimeHours: endtimeHours,
            endtimeMinutes: endtimeMinutes,
            endtimeSeconds: endtimeSeconds,
            timeZone: ""
        });
    }

    $('.barrating-stars select').each(function (index, element) {
        var $element = $(element);
        $element.barrating({
            theme: 'css-stars',
            readonly: false,
            initialRating: $element.data('rate'),
        });
    });

    /**
     * webinar demo modal
     * */
    var courseDemoVideoPlayer;

    $('body').on('click', '#webinarDemoVideoBtn', function (e) {
        e.preventDefault();

        if (courseDemoVideoPlayer !== undefined) {
            courseDemoVideoPlayer.dispose();
        }

        let path = $(this).attr('data-video-path');
        let source = $(this).attr('data-video-source');
        const height = $(window).width() > 991 ? 480 : 264;

        const videoTagId = 'demoVideoPlayer';
        const {html, options} = makeVideoPlayerHtml(path, source, height, videoTagId);

        let modalHtml = '<div id="webinarDemoVideoModal" class="demo-video-modal">\n' +
            '<h3 class="section-title after-line font-20 text-dark-blue">' + webinarDemoLang + '</h3>\n' +
            '<div class="demo-video-card mt-25">\n';

        modalHtml += html;

        modalHtml += '</div></div>';

        Swal.fire({
            html: modalHtml,
            showCancelButton: false,
            showConfirmButton: false,
            customClass: {
                content: 'p-0 text-left',
            },
            width: '48rem',
            onOpen: () => {
                courseDemoVideoPlayer = videojs(videoTagId, options);
            }
        });
    });

    /**
     * webinar report modal
     * */
    $('body').on('click', '#webinarReportBtn', function (e) {
        e.preventDefault();

        let modal_html = $('#webinarReportModal').html();

        Swal.fire({
            html: modal_html,
            showCancelButton: false,
            showConfirmButton: false,
            customClass: {
                content: 'p-0 text-left',
            },
            width: '48rem',
        });
    });

    $('body').on('click', '.js-course-report-submit', function (e) {
        e.preventDefault();

        const $this = $(this);
        const $form = $this.closest('form');
        const action = $form.attr('action');
        const data = $form.serializeObject();

        $this.addClass('loadingbar primary').prop('disabled', true);

        $form.find('.invalid-feedback').text('');
        $form.find('.is-invalid').removeClass('is-invalid');

        $.post(action, data, function (result) {
            if (result && result.code === 200) {
                Swal.fire({
                    icon: 'success',
                    html: '<h3 class="font-20 text-center text-dark-blue">' + reportSuccessLang + '</h3>',
                    showConfirmButton: false,
                });

                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else if (result && result.code === 401) {
                Swal.fire({
                    icon: 'error',
                    html: '<h3 class="font-20 text-center text-dark-blue">' + reportFailLang + '</h3>',
                    showConfirmButton: false,
                });
            }
        }).fail(err => {
            $this.removeClass('loadingbar primary').prop('disabled', false);
            var errors = err.responseJSON;
            if (errors && errors.errors) {
                Object.keys(errors.errors).forEach((key) => {
                    const error = errors.errors[key];
                    let element = $form.find('[name="' + key + '"]');
                    element.addClass('is-invalid');
                    element.parent().find('.invalid-feedback').text(error[0]);
                });
            }
        });
    });


    $('body').on('change', 'input[name="ticket_id"]', function (e) {
        e.preventDefault();

        const discountPrice = $(this).attr('data-discount-price');

        const realPrice = $('#realPrice');
        const priceWithDiscount = $('#priceWithDiscount');

        realPrice.removeClass('text-primary').addClass('d-block font-20 text-gray text-decoration-line-through mr-15');

        if (priceWithDiscount.length) {
            priceWithDiscount.addClass('d-block');
            priceWithDiscount.text(discountPrice);
        } else {
            realPrice.removeClass('d-block');

            var html = '<span\n' +
                'class="js-discounted-price-span font-30 text-primary">\n' +
                discountPrice +
                '</span>';

            $('.js-discounted-price-span').remove()

            realPrice.parent().append(html);
        }
    });

    $('body').on('click', '#favoriteToggle', function (e) {
        e.preventDefault();
        e.stopPropagation();

        const href = $(this).attr('href');
        const icon = $(this).find('svg');

        if (icon.hasClass('favorite-active')) {
            icon.removeClass('favorite-active');
        } else {
            icon.addClass('favorite-active');
        }

        $.get(href, function (result) {

        });
    });

    $('body').on('click', '.js-share-course', function (e) {
        e.preventDefault();

        Swal.fire({
            html: $('#courseShareModal').html(),
            showCancelButton: false,
            showConfirmButton: false,
            customClass: {
                content: 'p-0 text-left',
            },
            onOpen: () => {
                $('[data-toggle="tooltip"]').tooltip();
            },
            width: '32rem',
        });
    });

    $('body').on('click', '.js-course-share-link-copy', function (e) {
        e.preventDefault();

        $(this).attr('data-original-title', copiedLang)
            .tooltip('show');

        $(this).attr('data-original-title', copyLang);

        copyToClipboard();
    });

    function copyToClipboard() {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.css('position', 'absolute');

        $temp.val($('.js-course-share-link').html()).select();
        document.execCommand("copy");
        $temp.remove();
    }

    function handleCourseLearningToggle(course_id, item, item_id, status, $this) {
        const data = {
            item: item,
            item_id: item_id,
            status: status
        };

        $.post('/course/' + course_id + '/learningStatus', data, function (result) {
            $.toast({
                heading: '',
                text: learningToggleLangSuccess,
                bgColor: '#43d477',
                textColor: 'white',
                hideAfter: 10000,
                position: 'bottom-right',
                icon: 'success'
            });

            setTimeout(() => {
                window.location.reload();
            }, 500);
        }).fail(err => {

            $this.prop('checked', !status);

            $.toast({
                heading: '',
                text: learningToggleLangError,
                bgColor: '#f63c3c',
                textColor: 'white',
                hideAfter: 10000,
                position: 'bottom-right',
                icon: 'error'
            });
        });
    }

    $('body').on('change', '.js-file-learning-toggle', function (e) {

        const $this = $(this);
        const course_id = $this.val();
        const file_id = $this.attr('data-file-id');
        const status = this.checked;

        handleCourseLearningToggle(course_id, 'file_id', file_id, status, $this);
    });

    $('body').on('change', '.js-text-lesson-learning-toggle', function (e) {

        const $this = $(this);
        const course_id = $this.val();
        const lesson_id = $this.attr('data-lesson-id');
        const status = this.checked;

        handleCourseLearningToggle(course_id, 'text_lesson_id', lesson_id, status, $this);
    });

    $('body').on('change', '.js-text-session-toggle', function (e) {

        const $this = $(this);
        const course_id = $this.val();
        const session_id = $this.attr('data-session-id');
        const status = this.checked;

        handleCourseLearningToggle(course_id, 'session_id', session_id, status, $this);
    });

    function errorToast(heading, text) {
        $.toast({
            heading: heading,
            text: text,
            bgColor: '#f63c3c',
            textColor: 'white',
            hideAfter: 10000,
            position: 'bottom-right',
            icon: 'error'
        });
    }

    $('body').on('click', '.not-login-toast', function (e) {
        e.preventDefault();

        if (notLoginToastTitleLang && notLoginToastMsgLang) {
            errorToast(notLoginToastTitleLang, notLoginToastMsgLang);
        }
    });

    $('body').on('click', '.not-access-toast', function (e) {
        e.preventDefault();

        if (notAccessToastTitleLang && notAccessToastMsgLang) {
            errorToast(notAccessToastTitleLang, notAccessToastMsgLang);
        }
    });

    $('body').on('click', '.js-sequence-content-error-modal', function (e) {
        e.preventDefault();

        const passedError = $(this).attr('data-passed-error');
        const accessDaysError = $(this).attr('data-access-days-error');

        let html = '<ul class="list-group-custom">\n';
        if (passedError) {
            html += '<li class="font-14 mb-10">' + passedError + '</li>\n';
        }

        if (accessDaysError) {
            html += '<li class="font-14">' + accessDaysError + '</li>\n';
        }

        html += '</ul>';

        Swal.fire({
            icon: 'error',
            title: sequenceContentErrorModalTitle,
            html: html,
            showCancelButton: false,
            showConfirmButton: false,
            customClass: {
                content: 'p-0 text-left',
            },
            width: '30rem',
        });
    });

    $('body').on('click', '.can-not-try-again-quiz-toast', function (e) {
        e.preventDefault();

        if (canNotTryAgainQuizToastTitleLang && canNotTryAgainQuizToastMsgLang) {
            errorToast(canNotTryAgainQuizToastTitleLang, canNotTryAgainQuizToastMsgLang);
        }
    });

    $('body').on('click', '.can-not-download-certificate-toast', function (e) {
        e.preventDefault();

        if (canNotDownloadCertificateToastTitleLang && canNotDownloadCertificateToastMsgLang) {
            errorToast(canNotDownloadCertificateToastTitleLang, canNotDownloadCertificateToastMsgLang);
        }
    });

    $('body').on('click', '.session-finished-toast', function (e) {
        e.preventDefault();

        if (sessionFinishedToastTitleLang && sessionFinishedToastMsgLang) {
            errorToast(sessionFinishedToastTitleLang, sessionFinishedToastMsgLang);
        }
    });


    $('body').on('click', '.js-play-video', function (e) {
        e.preventDefault();

        const $modal = $('#playVideo');
        const $modalLoading = $modal.find('.file-video-loading');
        const $modalVideoContent = $modal.find('.js-modal-video-content');

        $modalLoading.removeClass('d-none');
        $modalVideoContent.addClass('d-none');

        const file_id = $(this).attr('data-id');
        const file_title = $(this).attr('data-title');
        $modal.find('.section-title:first').text(file_title);

        $modal.modal('show');

        const root = document.getElementsByTagName('html')[0];
        root.classList.add('html-modal-open');

        $modal.animate({
            scrollTop: 0
        }, 100);

        // make video player html
        console.log($modalVideoContent)
        handleVideoByFileId(file_id, $modalVideoContent, function () {
            $modalLoading.addClass('d-none');
            $modalVideoContent.removeClass('d-none');

            $modal.find('.modal-video-item').removeClass('active');
            $modal.find('.modal-video-item[data-id="' + file_id + '"]').addClass('active');

            $modal.find('.collapse').removeClass('show');
            $modal.find('#collapseVideo' + file_id).addClass('show');
        });

        $('#playVideo').on('hidden.bs.modal', function () {
            pauseVideoPlayer();

            const root = document.getElementsByTagName('html')[0];
            root.classList.remove('html-modal-open');
        });
    });

    $('body').on('click', '.js-buy-with-point', function (e) {
        e.preventDefault();

        Swal.fire({
            html: $('#buyWithPointModal').html(),
            showCancelButton: false,
            showConfirmButton: false,
            customClass: {
                content: 'p-0 text-left',
            },
            width: '28rem',
        });
    });

    $('body').on('click', '.js-buy-course-with-point', function (e) {
        $(this).addClass('loadingbar primary').prop('disabled', true);
    });

    $('body').on('click', '.js-course-add-to-cart-btn', function (e) {
        const $this = $(this);
        $this.addClass('loadingbar primary').prop('disabled', true);

        const $form = $this.closest('form');
        $form.attr('action', '/cart/store');

        $form.trigger('submit');
    });

    $('body').on('click', '.js-course-direct-payment', function (e) {
        const $this = $(this);
        $this.addClass('loadingbar danger').prop('disabled', true);

        const $form = $this.closest('form');
        $form.attr('action', '/course/direct-payment');

        $form.trigger('submit');
    });

    $('body').on('click', '.js-bundle-direct-payment', function (e) {
        const $this = $(this);
        $this.addClass('loadingbar danger').prop('disabled', true);

        const $form = $this.closest('form');
        $form.attr('action', '/bundles/direct-payment');

        $form.trigger('submit');
    });

    $('body').on('click', '.js-course-has-bought-status', function (e) {
        e.preventDefault();

        if (courseHasBoughtStatusToastTitleLang && courseHasBoughtStatusToastMsgLang) {
            errorToast(courseHasBoughtStatusToastTitleLang, courseHasBoughtStatusToastMsgLang);
        }
    });

    $('body').on('click', '.js-course-not-capacity-status', function (e) {
        e.preventDefault();

        if (courseNotCapacityStatusToastTitleLang && courseNotCapacityStatusToastMsgLang) {
            errorToast(courseNotCapacityStatusToastTitleLang, courseNotCapacityStatusToastMsgLang);
        }
    });

    $('body').on('click', '.js-course-has-started-status', function (e) {
        e.preventDefault();

        if (courseHasStartedStatusToastTitleLang && courseHasStartedStatusToastMsgLang) {
            errorToast(courseHasStartedStatusToastTitleLang, courseHasStartedStatusToastMsgLang);
        }
    });

    $(document).ready(function () {
        const $chapterCollapseToggles = $('.js-chapter-collapse-toggle');

        if ($chapterCollapseToggles && $chapterCollapseToggles.length) {
            const firstChapterCollapseToggle = $chapterCollapseToggles[0];

            if (firstChapterCollapseToggle) {
                $(firstChapterCollapseToggle).trigger('click')
            }
        }
    });

    /* Waitlist */
    function showWaitlistModal(webinarSlug, isLogin) {
        let html = '<div id="waitlistModal" class="waitlist-modal">\n' +
            '        <h3 class="section-title after-line font-20 text-dark-blue">' + joinCourseWaitlistLang + '</h3>\n' +
            '        <div class="d-flex-center flex-column text-center mt-25">\n' +
            '            <div class="waitlist-modal-icon">\n' +
            '                <img src="/assets/default/img/course/waitlist.png" alt="waitlist" class="img-cover">\n' +
            '            </div>\n' +
            '            <p class="font-14 font-weight-500 mt-15 text-gray">' + joinCourseWaitlistModalHintLang + '</p>\n' +
            '        </div>';

        html += '<div class="waitlist-modal-form">' +
            '<input type="hidden" name="slug" value="' + webinarSlug + '">';

        if (!isLogin) {
            html += '<div class="mt-15">\n' +
                '            <div class="form-group mb-10">\n' +
                '                <label class="input-label">' + nameLang + ':</label>\n' +
                '                <input name="name" type="text" class="js-ajax-name form-control">\n' +
                '                <div class="invalid-feedback"></div>\n' +
                '            </div>\n' +
                '            <div class="form-group mb-10">\n' +
                '                <label class="input-label">' + emailLang + ':</label>\n' +
                '                <input name="email" type="text" class="js-ajax-email form-control">\n' +
                '                <div class="invalid-feedback"></div>\n' +
                '            </div>\n' +
                '            <div class="form-group mb-10">\n' +
                '                <label class="input-label">' + phoneLang + ':</label>\n' +
                '                <input name="phone" type="text" class="js-ajax-phone form-control">\n' +
                '                <div class="invalid-feedback"></div>\n' +
                '            </div>\n' +
                '           <div class="form-group mb-10">\n' +
                '                <label class="input-label font-weight-500">' + captchaLang + '</label>\n' +
                '               <div class="row align-items-center">\n' +
                '                   <div class="col">\n' +
                '                       <input type="text" name="captcha" class="js-ajax-captcha form-control">\n' +
                '                       <div class="invalid-feedback"></div>\n' +
                '                   </div>\n' +
                '                   <div class="col d-flex align-items-center">\n' +
                '                       <img id="captchaImageComment" class="captcha-image" src="">\n' +
                '                       <button type="button" id="refreshCaptcha" class="btn-transparent ml-15">\n' +
                '                           <i data-feather="refresh-ccw" width="24" height="24" class=""></i>\n' +
                '                       </button>\n' +
                '                   </div>\n' +
                '               </div>\n' +
                '          </div>\n' +
                '      </div>';
        }

        html += '</div>' +
            '<div class="d-flex align-items-center justify-content-end mt-20">\n' +
            '            <button type="button" class="js-save-waitlist btn btn-primary btn-sm">' + joinLang + '</button>\n' +
            '        </div>\n' +
            '    </div>';

        Swal.fire({
            html: html,
            showCancelButton: false,
            showConfirmButton: false,
            customClass: {
                content: 'p-0 text-left',
            },
            width: '28rem',
            onOpen: () => {
                if (!isLogin) {
                    refreshCaptcha();
                    feather.replace();
                }
            }
        });
    }

    $('body').on('click', '.js-join-waitlist-user', function () {
        const webinarSlug = $(this).attr('data-slug')
        showWaitlistModal(webinarSlug, true)
    })

    $('body').on('click', '.js-join-waitlist-guest', function () {
        const webinarSlug = $(this).attr('data-slug')
        showWaitlistModal(webinarSlug, false)
    })

    $('body').on('click', '.js-save-waitlist', function (e) {
        e.preventDefault();
        const $this = $(this);

        const path = '/waitlists/join';
        const $form = $this.closest('#waitlistModal').find('.waitlist-modal-form');
        let data = serializeObjectByTag($form);

        $this.addClass('loadingbar primary').prop('disabled', true);
        $form.find('input').removeClass('is-invalid');
        $form.find('textarea').removeClass('is-invalid');

        $.post(path, data, function (result) {
            if (result && result.code === 200) {
                //window.location.reload();
                Swal.fire({
                    icon: 'success',
                    html: '<h3 class="font-16 text-center text-dark-blue py-25">' + result.msg + '</h3>',
                    showConfirmButton: false,
                    width: '25rem',
                });

                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            }
        }).fail(function (err) {
            $this.removeClass('loadingbar primary').prop('disabled', false);
            var errors = err.responseJSON;

            if (errors && errors.errors) {
                Object.keys(errors.errors).forEach((key) => {
                    const error = errors.errors[key];
                    let element = $form.find('.js-ajax-' + key);

                    element.addClass('is-invalid');
                    element.parent().find('.invalid-feedback').text(error[0]);
                });
            }
        })
    })
})(jQuery);