<?php
if (! defined('ABSPATH')) {
    exit; // Exit if accessed directly
}
?>
<#
    var widgetId=view.getID();
    var data=settings.twae_list;
    var multiColor=1;
    var cutomStyle='' ;

    var random_number= Math.floor(Math.random() * 100);
    var content_right_div=view.getRepeaterSettingKey('modern_right_div');
    view.addRenderAttribute(content_right_div, { 'class': 'twae-modern-vertical-timeline-tab-content-box'
    });

    var line_filling=settings.center_line_filling;
    var line_border_class=typeof settings.twae_line_border !=='undefined' && settings.twae_line_border !=='yes' ? 'twae-border-disabled' : '' ;
    var loop_scroll=(typeof settings.enable_tab_loop !=='undefined' && settings.enable_tab_loop==='yes' ) ? 'true' : 'false' ;
    var enable_navigation=(
    (typeof settings.twae_navigation_bar_modern_vertical !=='undefined' && settings.twae_navigation_bar_modern_vertical==='yes' ) ||
    (typeof settings.twae_navigation_bar_modern_vertical==='undefined' && settings.twae_layout==='modern' )
    );




    if ( typeof settings.navigation_control_icon_modern_vertical !=="undefined" ) {
    var navi_icon_cls=settings.navigation_control_icon_modern_vertical;
    var navi_up_icon=navi_icon_cls;
    var navi_down_icon=navi_icon_cls.replace("up", "down" );
    } else {
    var navi_up_icon='fas fa-chevron-up' ;
    var navi_down_icon='fas fa-chevron-down' ;
    }

    var twae_bg_type='twae-bg-simple' ; // Default
    if (typeof settings.twae_cbox_background_type !=='undefined' ) {
    switch (settings.twae_cbox_background_type) {
    case 'multicolor' :
    twae_bg_type='twae-bg-multicolor' ;
    break;
    case 'gradient' :
    twae_bg_type='twae-bg-gradient' ;
    break;
    }
    }
    var image_lightbox=(typeof settings.twae_lightbox_settings !=='undefined' && settings.twae_content_in_popup !=='yes' )
    ? settings.twae_lightbox_settings
    : '' ;


    var twae_bg_hover=(typeof settings.twae_cbox_background_type_hover !=='undefined' && settings.twae_cbox_background_type_hover==='simple' ) ? 'twae-bg-hover' : '' ;

    var image_hover_effect=settings.twae_image_hover_effect=='yes' && settings.twae_content_in_popup !='yes' ? ' twae-img-effect' : '' ;

    #>
    <div id="twae-wrapper-{{widgetId}}" class="twae-wrapper twae-modern-vertical-timeline {{line_border_class}}  {{twae_bg_type}} {{twae_bg_hover}}" data-line-fill="{{line_filling}}">
        <div class="twae-modern-vertical-timeline-tab-container">
            <!-- Sidebar -->
            <div class="twae-modern-vertical-timeline-tab-menu" id=tab-menu-{{widgetId}}>
                <!-- Year and Scroll Buttons -->
                <div class="twae-modern-year">
                    <# if (settings.twae_navigation_bar_modern_vertical==='yes' || (typeof settings.twae_navigation_bar_modern_vertical==='undefined' && settings.twae_layout==='modern' )) { #>
                        <div class="twae-modern-yearSec">
                            <span><select id="twaeyearSelect"></select></span>
                        </div>
                        <# } #>

                            <div class="twae-modern-vertical-timeline-story-scroll-btns">
                                <div id="twaescrollUp">
                                    <i class="{{ navi_up_icon }}"></i>
                                </div>
                                <div id="twaescrollDown">
                                    <i class="{{ navi_down_icon }}"></i>
                                </div>
                            </div>
                </div><!-- Year and Scroll Buttons end  -->
                <!-- Timeline Tab Buttons -->
                <div class="twae-modern-vertical-timeline-tab-btn-wrapper" id="tabBtnWrapper-{{widgetId}}" data-loop-scroll="{{loop_scroll}}">
                    <div class="twae-modern-vertical-timeline-line twae-line twae-timeline" id="timelineLine-{{widgetId}}">
                        <# if(settings.center_line_filling!=="undefined" && settings.center_line_filling=="yes" ){
                            #>
                            <div class="twae-inner-line"></div>
                            <#
                                }
                                #>
                    </div>

                    <#
                        _.each(data, function(item, index) {
                        var timeline_image={
                        id: item.twae_image.id,
                        url: item.twae_image.url,
                        size: item.twae_thumbnail_size,
                        dimension: item.twae_thumbnail_custom_dimension,
                        model: view.getEditModel()
                        };
                        var image_url=elementor.imagesManager.getImageUrl( timeline_image );
                        var mediatype=item.twae_media;
                        var title_key=view.getRepeaterSettingKey( 'twae_story_title' , 'twae_list' , index );
                        description_key=view.getRepeaterSettingKey( 'twae_description' , 'twae_list' ,index );
                        content_div_mobile=view.getRepeaterSettingKey( 'modern_content_div_mobile' , 'twae_list' ,index );
                        var year_button=view.getRepeaterSettingKey( 'year_button' , 'twae_list' , index );
                        view.addInlineEditingAttributes( title_key, 'none' );
                        view.addInlineEditingAttributes( description_key, 'advanced' );
                        view.addRenderAttribute( title_key, {'class': 'twae-title'});
                        view.addRenderAttribute( description_key, {'class': 'twae-description'});
                        view.addRenderAttribute( content_div_mobile, { 'class' : 'twae-modern-vertical-timeline-tab-content twae-content elementor-repeater-item-' + item._id + ( index===0 ? ' active' : '' ),'data-multicolor': multiColor, 'data-tab-index' : index
                        } );
                        view.addRenderAttribute( year_button, { 'class' : 'twae-modern-vertical-timeline-tab-btn twae-story elementor-repeater-item-' + item._id + ( index===0 ? ' active' : '' ), 'data-tab' : index, 'data-year' : item.twae_show_year_label==='yes' ? (item.twae_year ? item.twae_year : '' ) : ''
                        } );
                        var twae_icon_type=item.twae_icon_type;
                        var twae_icon_text=item.twae_icon_text;
                        #>
                        <button {{{ view.getRenderAttributeString( year_button ) }}} data-tab="{{index}}" data-year="{{item.twae_year}}">
                            <#
                                var twae_display_icon=item.twae_display_icon;

                                var twae_display_icons=settings.twae_display_icons;
                                var icon_empty='' ;
                                if(twae_display_icons=="displayicons" ){
                                icon_empty='twae-story-icon' ;
                                }
                                if(twae_display_icons=="displaydots" ){
                                icon_empty='twae-story-no-icon' ;
                                }
                                if(twae_display_icons=="displaynone" ){
                                icon_empty='twae-story-no-dot' ;
                                }
                                let isEmpty=(
                                twae_icon_type=='none' ||
                                twae_display_icons=='displaynone' ||
                                (twae_icon_type=='customtext' && !twae_icon_text) ||
                                (twae_icon_type=='image' && !item.twae_icon_image.url)
                                );
                                #>
                                <div class="dot twae-icon <# if(index === 0){ #> active-dot <# } #> <# if(isEmpty){ #> empty-dot <# } #>">
                                    <# if (twae_icon_type=='none' ) { #>
                                        <!-- No icon -->
                                        <# } else if (twae_icon_type=='dot' || twae_display_icon=='' ) { #>
                                            <div class="twae-icondot"></div>
                                            <# } else if (twae_icon_type=='image' ) { #>
                                                <img src="{{ item.twae_icon_image.url }}">
                                                <# } else if (twae_icon_type=='customtext' ) { #>
                                                    <span class="twae_icon_text">{{{ twae_icon_text }}}</span>
                                                    <# } else if (twae_icon_type=='icon' && item.twae_story_icon || item.twae_story_icon.value!="far fa-clock" ) { #>
                                                        <#
                                                           
                                                            twaeiconHTML=elementor.helpers.renderIcon(view, item.twae_story_icon, { 'aria-hidden' : true }, 'i' , 'object' );
                                                            if (twaeiconHTML && twaeiconHTML.rendered) { #>
                                                            {{{ twaeiconHTML.value }}}
                                                            <# } else { #>
                                                                <i class="{{ item.twae_story_icon.value }}" aria-hidden="true"></i>
                                                                <# } #>
                                                                    <# }
                                                                        else if(twae_display_icons=="displaynone" ) { }
                                                                        else if(twae_display_icons=="displaydots" )
                                                                        { #>
                                                                        <div class="twae-icondot"></div>
                                                                        <# }
                                                                            else { #>
                                                                            <!-- If no story icon is set, use the global icon -->
                                                                            <#
                                                                                twaeiconHTML=elementor.helpers.renderIcon(view, settings.twae_story_icons, { 'aria-hidden' : true }, 'i' , 'object' );
                                                                                if (twaeiconHTML && twaeiconHTML.rendered) { #>
                                                                                {{{ twaeiconHTML.value }}}
                                                                                <# } else { #>
                                                                                    <i class="{{ settings.twae_story_icons.value }}" aria-hidden="true"></i>
                                                                                    <# } #>
                                                                                        <# } #>
                                </div>


                                <div class="twae-modern-labels">
                                    <div class="twae-modern-date twae-label-big">{{ item.twae_date_label }}</div>
                                    <div class="twae-modern-subtitle twae-label-small">{{item.twae_extra_label}}</div>
                                </div>
                        </button>

                        <div {{{ view.getRenderAttributeString( content_div_mobile ) }}} id="tab-{{index}}">
                            <#
                                if(item.twae_media==='image' ){ #>
                                <div class="twae-media {{image_hover_effect}} {{item.twae_thumbnail_size}}">
                                    <#
                                        if(image_lightbox==='yes' ){ #>
                                        <a href="{{ image_url }}">
                                            <img src="{{ image_url }}">
                                        </a>
                                        <# } else { #>
                                            <img src="{{ image_url }}">
                                            <# } #>
                                </div>


                                <#}else if( item.twae_media=='slideshow' ){
                                    var twae_slideshow_autoplay=item.twae_slideshow_autoplay;
                                    if(twae_slideshow_autoplay=="true" ){
                                    twae_slideshow_autoplay="true" ;
                                    }
                                    else{
                                    twae_slideshow_autoplay="false" ;
                                    }
                                    if(item.twae_slideshow !='' ){
                                    #>
                                    <div class="twae-media{{image_hover_effect}}">
                                        <div id="twae-slideshow-{{ item._id }}-{{ random_number }}" class="twae-slideshow swiper-container" dir="<?php echo esc_attr($dir); ?>" data-slideshow_autoplay="{{twae_slideshow_autoplay}}">
                                            <div class="swiper-wrapper">
                                                <#
                                                    _.each( item.twae_slideshow, function( image ) {
                                                    if(image_lightbox=='yes' ){ #>
                                                    <a class="swiper-slide" data-elementor-lightbox-slideshow="twae_img_lightbox_{{ item.id }}-{{ random_number }}" href="{{image.url}}">
                                                        <# }
                                                            #>
                                                            <img class="swiper-slide" src="{{ image.url }}">
                                                            <#
                                                                if(image_lightbox=='yes' ){ #>
                                                    </a>
                                                    <# };
                                                        });
                                                        #>
                                            </div>
                                            <div class="twae-icon-left-open"></div>
                                            <div class="twae-icon-right-open"></div>
                                        </div>
                                    </div>
                                    <#
                                        }
                                        }else if(item.twae_media=='video' ){
                                        var video_url=item.twae_video_url;
                                        if(video_url!='' ){
                                        var match=video_url.match(/(?:youtube(?:-nocookie)?\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?|shorts)\/|.*[?&]v=)|youtu\.be\/)([^"&?/ ]{11})/i);
                                        var video_id=(match && match[1]) ? match[1] : false;



                                        if(video_id !=false){
                                        #>
                                        <div class="twae-media"><iframe width="100%" src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe></div>
                                        <#
                                            }
                                            else{
                                            #>
                                            <div class="twae-media"><span class="twae-wrong-url">Wrong URL</span></div>
                                            <#
                                                }

                                                }
                                                }#>
                                                <div {{{ view.getRenderAttributeString( title_key ) }}}>{{{ item.twae_story_title}}}</div>
                                                <div {{{ view.getRenderAttributeString( description_key ) }}}>{{{ item.twae_description}}}

                                                    <# if(item.twae_title_link=="yes" ){
                                                        var btn_txt=item.twae_button_txt?item.twae_button_txt:'Read more';
                                                        #>
                                                        <div class="twae-button"><a class="elementor-button" href="{{item.twae_story_link.url}}">{{{btn_txt}}}</a></div>
                                                        <# } #>

                                                </div>

                                                <#
                                                    if('twae-bg-multicolor'===twae_bg_type){
                                                    var customBgColor=item.twae_custom_story_bgcolor;

                                                    if('' !==customBgColor ){
                                                    cutomStyle +='.twae-wrapper#twae-wrapper-' + widgetId + ' #twae-' + item._id + '.twae-content{' ;
                                                    cutomStyle +='' !==customBgColor ? '--tw-cbx-bg' + multiColor + ': ' + customBgColor + ';' : '' ;

                                                    cutomStyle +='}' ;
                                                    }
                                                    }
                                                    4===multiColor ? multiColor=1 : multiColor++;
                                                    countItem=countItem+1;#>
                        </div>
                        <#
                            });
                            #>
                </div>
            </div> <!-- Timeline Tab Buttons end  -->
            <!--- Right Content Area -->

            <div {{{ view.getRenderAttributeString(content_right_div) }}}></div>

        </div>
    </div>