window.jQuery(function ($) {
    /**
    * Handles duplicating slides
    */
    $('.metaslider').on('click', '.duplicate-slide-html_overlay', function (event) {
        event.preventDefault();
        var APP = window.parent.metaslider.app.MetaSlider;
        var el = $(this);
        $.ajax({
            url: metaslider.ajaxurl,
            data: {
                action: 'duplicate_html_overlay_slide',
                slide_id: el.data('slide-id'),
                slider_id: window.parent.metaslider_slider_id,
                nonce: metaslider_html_overlay.duplicate_slide_nonce
            },
            type: 'POST',
            error: function (error) {
                APP && APP.notifyError('metaslider/slide-duplicate-failed', 
                    APP && __("Duplicating the slide failed.", "ml-slider-pro"),
                    true
                );
            },
            success: function (response) {

                var res = window.metaslider.app.Vue.compile(response.data.html)

                // Mount the slide to the beginning or end of the list
                const cont_ = (new window.metaslider.app.Vue({
                    render: res.render,
                    staticRenderFns: res.staticRenderFns
                }).$mount()).$el;

                if (metaslider.newSlideOrder === 'last') {
                    $('#metaslider-slides-list > tbody').append(cont_);
                } else {
                    $('#metaslider-slides-list > tbody').prepend(cont_);
                }

                // Display image (is hidden by default)
                $("#slide-" + response.data.slide_id).find('.update-image .thumb img').show();

                /* Add mobile icon for slides with existing mobile setting */
                var show_mobile_icon = function (slide_id) {
                    var mobile_checkboxes = $('#metaslider-slides-list #'+ slide_id +' .mobile-checkbox:checked');
                    var icon = '<span class="mobile_setting_enabled float-left"><span class="inline-block mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smartphone"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg></span></span>';
                    var mobile_enabled = $('#metaslider-slides-list #'+ slide_id +' .slide-details .mobile_setting_enabled');
                    if (mobile_checkboxes.length > 0) {
                        if(mobile_enabled.length == 0) {
                            $('#metaslider-slides-list #'+ slide_id +' .slide-details').append(icon);
                        }
                    } else {
                        mobile_enabled.remove();
                    }
                };

                /* Add clock icon for slides with existing schedule setting */
                var show_clock_icon = function (slide_id) {
                    var sched_checkboxes = $('#metaslider-slides-list #'+ slide_id +' .schedule-slide:checked');
                    var icon = '<span class="schedule_visual_indicator float-left tipsy-tooltip-top" style="margin-top:1px;" original-title="Visible on the frontend"><span class="inline-block mr-1" style="color: rgb(70, 180, 80);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" width="18" height="18" style=""><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span></span>';
                    var mobile_enabled = $('#metaslider-slides-list #'+ slide_id +' .slide-details .mobile_setting_enabled');
                    if (sched_checkboxes.length > 0) {
                        $('#metaslider-slides-list #'+ slide_id +' .slide-details').append(icon);
                    }
                };


                //Icon for mobile settings
                show_mobile_icon('slide-' + response.data.slide_id);
                show_clock_icon('slide-' + response.data.slide_id);

                //scroll to new slide
                $([document.documentElement, document.body]).animate({
                    scrollTop: metaslider.newSlideOrder === 'last' ? $("#slide-"+response.data.slide_id).offset().top : 0
                }, 2000);

                // Add timeouts to give some breating room to the notice animations
                setTimeout(function () {
                    setTimeout(function () {
                        APP && APP.triggerEvent('metaslider/save')
                    }, 1000);
                }, 1000);
                
            }
        }); 
    });

    /**
     * Dynamically show/hide boxes based on selected video source
     * 
     * @since 2.35
     */
    $('.metaslider').on('change', '.layer-slide-video-source', function () {
        var el = $(this);
        var id = el.parents('tr').attr('id');

        if (typeof id === 'undefined') {
            console.error('No id found!');
            return;
        }
        
        // Hide both sources
        $(`#${id}`).find(`[data-source]`).hide();

        // Show only selected source
        $(`#${id}`).find(`[data-source="${el.val()}"]`).show();
    });
});