let live_template_html={"change_password":"<div class=\"modal fade modal-body-scroll\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"createProject\" aria-hidden=\"true\" data-keyboard=\"false\">\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n        <form class=\"modal-content\" action=\"\" method=\"post\">\n\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\" id=\"exampleModalLongTitle\">Change Password<\/h5>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                    <span aria-hidden=\"true\">\u00d7<\/span>\n                <\/button>\n            <\/div>\n\n            <div class=\"modal-body\">\n                <label for=\"oldPassword\" class=\"mt-3\">Current Password<\/label>\n                <input type=\"password\" name=\"old_pass\" id=\"oldPassword\" value=\"\" class=\"form-control\">\n\n                <label for=\"newPassword\" class=\"mt-3\">New Password<\/label>\n                <input type=\"password\" name=\"new_pass\" id=\"newPassword\" value=\"\" class=\"form-control\">\n\n                <label for=\"reNewPassword\" class=\"mt-3\">New Password<\/label>\n                <input type=\"password\" name=\"re_new_pass\" id=\"reNewPassword\" value=\"\" class=\"form-control\">\n            <\/div>\n\n            <div class=\"modal-footer\">\n                <div class=\"row w-100\">\n                    <div class=\"col-12 text-right\">\n\n                        <button type=\"submit\" class=\"btn btn-primary\" id=\"btnFilterAll\">Change<\/button>\n                        <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close<\/button>\n\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/form>\n    <\/div>\n<\/div>","article_manage":"<div class=\"modal fade modal-body-scroll\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"createProject\" aria-hidden=\"true\" data-keyboard=\"false\">\n    <div class=\"modal-dialog modal-dialog-centered modal-xl\" role=\"document\">\n        <form class=\"modal-content\" action=\"\" method=\"post\">\n\n            <div class=\"modal-header\">\n                <h5 class=\"modal-title\" id=\"exampleModalLongTitle\">News Sorting<\/h5>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                    <span aria-hidden=\"true\">\u00d7<\/span>\n                <\/button>\n            <\/div>\n\n            <div class=\"modal-body\">\n                <div class=\"text-center no-data\">\n                    <br>\n                    <br>\n                    <br>\n                    <h2>News Not Available<\/h2>\n                    <br>\n                    <br>\n                    <br>\n                <\/div>\n\n                <div class=\"text-center having-data\">\n                    <table class=\"table table-vertical-middle\">\n                        <thead class=\"thead-light\">\n                        <tr class=\"text-center\">\n                            <th width=\"50\" scope=\"col\">SL<\/th>\n                            <th width=\"100\" scope=\"col\">ID<\/th>\n                            <th scope=\"col\">News<\/th>\n                        <\/tr>\n                        <\/thead>\n                        <tbody id=\"tblData\">\n\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n            <\/div>\n\n            <div class=\"modal-footer\">\n                <div class=\"row w-100\">\n                    <div class=\"col-8 modal-nav\"><\/div>\n                    <div class=\"col-4 text-right\">\n\n                        <button type=\"submit\" class=\"btn btn-primary\" id=\"btnFilterAll\">Save Sorting<\/button>\n                        <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close<\/button>\n\n                    <\/div>\n                <\/div>\n            <\/div>\n\n        <\/form>\n    <\/div>\n<\/div>","welcome_message":"<div class=\"modal fade modal-body-scroll modal-welcome-message\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"createProject\" aria-hidden=\"true\" data-keyboard=\"false\">\n    <div class=\"modal-dialog modal-dialog-centered modal-lg\" role=\"document\">\n        <div class=\"modal-content\">\n\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" style=\"opacity: 1\">\n                <span aria-hidden=\"true\">\u00d7<\/span>\n            <\/button>\n\n            <div class=\"modal-body\">\n\n\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>"};

    function liveTemplate_change_password(targetUrl) {
        $("<div/>").liveTemplate('change_password', function ($template) {
                $('.modal').modal('hide');
                $template.modal('show');

                let $form = $template.find('form');
                $form.attr('action', targetUrl);

                console.log($form);

                $form.ajaxFormOnSubmit();
            }
        );
    }


    function livetemplate_sort_articles(category, page, date) {
        $("<div/>").liveTemplate('article_manage', function ($template) {
                $('.modal').modal('hide');
                $template.modal('show');
                $template.find('.modal-body > div').hide();
                let i = 1;

                //--Table Process
                tblLoadData();

                function tblLoadData() {
                    let listUrl = urlGenerator("manage/article/sorting/{category}/{page}/{date}/json", {
                        'category': category,
                        'page': page,
                        'date': date,
                    });

                    let $tblData = $template.find('#tblData');

                    $.getJSON(listUrl, function (data) {
                        //--Prepare & Create Table Row
                        tblPrepareData($tblData, data['article_all_ar']);

                        if (data.length === 0) {
                            $template.find('.no-data').show();
                        } else {
                            $template.find('.having-data').show();
                        }
                    });

                    $template.find("form").attr('action', listUrl).on("submit", function () {
                        $(this).treenForm();
                        return false;
                    });

                }

                function tblPrepareData($tblData, data) {
                    $tblData.html("");

                    $.each(data, function (key, item) {
                        $tblData.append(`<tr class="text-center hoh-aria">
                            <td><input type="hidden" name="priority[]" value="` + item['sl'] + `">` + (i++) + `<\/td>
                            <td class="sorting">
                                <i class="fas fa-arrows-alt-v drug-icon"><\/i>
                                <span>` + item['sl'] + `<\/span>
                            <\/td>
                            <td class="text-left">
                                <b class="file-name">` + item['title'] + `<\/b>
                            <\/td>
                        <\/tr>`);
                    });


                    $template.find('table').DataTable({
                        "paging": false,
                        "info": false,
                        "searching": false,
                        rowReorder: {
                            update: false,
                            selector: 'td:nth-child(2)'
                        },
                        "aoColumnDefs": [{
                            "bSortable": false,
                            //"aTargets": [9]
                        }],
                        //responsive: true,
                    });
                }
            }
        );
    }


    function liveTemplate_welcome_message(data) {
        $("<div/>").liveTemplate('welcome_message', function ($template) {
            let $modalBody = $template.find('.modal-body');
            let clickEvent = false;
            let currentTime = new Date().getTime();
            let hideOn = parseInt(localStorage.getItem("welcome-message-hide-on"));
            let hideTill = hideOn + data.hide_duration * 1000;

            if (!hideOn || (hideOn && hideTill < currentTime)) {
                if (data.stay_duration > 0) {
                    buildModal();
                }
            }

            //--Event Operation
            $template.find('.close').on('click', function () {
                clickEvent = true;
            })

            /*$template.on('click', function (obj) {
                if (obj.target === obj.currentTarget) {
                    clickEvent = true;
                }
            })*/

            $template.on('hidden.bs.modal', function () {
                $modalBody.html("");

                if (clickEvent === true) {
                    localStorage.setItem("welcome-message-hide-on", new Date().getTime().toString());
                }
            });

            //--Build Floating Button
            let $floatingButton = $(`<a href="#" class="floating-image">
                <img src="/favicon.ico" alt="Bahanno News">
            `);
            $("body").append($floatingButton);

            $floatingButton.on('click', function () {
                buildModal();
            });

            //--Build Main Moadl
            function buildModal() {

                if (data.type === "image") {
                    let url = data.url;
                    $modalBody.html(`<img src="https://www.optimizee.xyz/images/${btoa('https://steemitimages.com/DQmRCoAoYnaETgTwNWJdqSm1LfNgR5xoYUKhKemy8wjim8Z/21c.PNG')}.png" width="100%" height="100%" alt="" style="object-fit: cover;" />`);

                    //--Show/Hide Operation
                    $('.modal').modal('hide');
                    $template.modal('show');
                }

                if (data.type === "facebook-video") {
                    let url = data.url;
                    $modalBody.html(`<iframe src="https://www.facebook.com/plugins/video.php?height=314&show_text=true&width=560&href=` + encodeURI(url) + `" width="100%" height="100%" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true">`);

                    //--Show/Hide Operation
                    $('.modal').modal('hide');
                    $template.modal('show');
                }

                if (data.type === "facebook-video") {
                    let url = data.url;

                    let youtubeId = youtubeParser(url);
                    if (youtubeId) {
                        $modalBody.html(`<iframe width="100%" height="100%" src="https://www.youtube.com/embed/${youtubeId}" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen>`);

                        //--Show/Hide Operation
                        $('.modal').modal('hide');
                        $template.modal('show');
                    }
                }

                setTimeout(function () {
                    $template.modal('hide');
                }, data.stay_duration * 1000);
            }
        });
    }

    function youtubeParser(url) {
        let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
        let match = url.match(regExp);
        return (match && match[7].length === 11) ? match[7] : false;
    }