{% extends "@corePath/admin/partial/layout_logged_in.html.twig" %}

{% block title %}Advertising Settings{% endblock %}
{% block selected_page %}plugins{% endblock %}
{% block selected_sub_page %}plugin_manage{% endblock %}

{% block body %}
<div class="row clearfix right_col" role="main">
    <div class="col_12">
        <div class="clearfix">
            <div class="page-title">
                <div class="title_left">
                    <h3>Advertising Settings</h3>
                </div>
            </div>
            <div class="clearfix"></div>
            
            {{ msg_page_notifications|raw }}

            <div class="widget_inside">
                <form method="POST" action="{{ ADMIN_WEB_ROOT }}/advertising/settings" autocomplete="off" enctype="multipart/form-data" class="form-horizontal form-label-left">
                    <div class="x_panel">
                        <div class="col_4 x_title">
                            <h2>Common Settings</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="col_8 last x_content">
                            <p>Settings which apply to all advertising types.</p>
                            <div class="form">
                                <div class="clearfix form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Adverts Shown To:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12" style="padding-top: 8px;">
                                        <span>
                                            <strong>
                                            {%  if userLevelLabels|length > 0 %}
                                                {{ userLevelLabels|join(', ') }}
                                            {%  else %}
                                                - No user levels are configured to see adverts.
                                            {%  endif %}
                                            </strong>
                                        </span>
                                        <p class="elementDescriptionMuted">
                                            The above user types will see adverts on the site. <a href="{{ WEB_ROOT }}/admin/account_package_manage">Click here</a> to manage user types.
                                        </p>
                                    </div>
                                </div>
                                <div class="clearfix form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Different Ads For Adult Content:</label>
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <select name="config_item[different_ads_for_adult_content]" id="different_ads_for_adult_content" class="medium validate[required] form-control" onchange="toggleAdultAds(); return false;">
                                            {% for k,yesNoOption in yesNoOptions %}
                                                <option value="{{ k }}"{% if config_item.different_ads_for_adult_content == k %} SELECTED{% endif %}>{{ yesNoOption }}</option>
                                            {% endfor %}
                                        </select>
                                        <p class="elementDescriptionMuted">
                                            If enabled, you'll be able to set different adverts for adult files. Files are flagged as adult based on their name and keywords. You can edit the list of "Adult Content Keywords" via the <a href="{{ ADMIN_WEB_ROOT }}/setting_manage?filterByGroup=File%20Uploads">site settings</a>.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                         
                    <ul class="nav nav-tabs bordered">
                        <li class="active"> <a href="#tabbans" data-toggle="tab" aria-expanded="true"><span>Banner Ads</span> </a> </li>
                        <li> <a href="#tabvideo" data-toggle="tab" aria-expanded="false"><span>Video Ads</span> </a> </li>
                        <li> <a href="#tabblock" data-toggle="tab" aria-expanded="false"><span>Ad Blocker</span> </a> </li>
                    </ul>
                    <div class="x_panel" style="border-top: 0px;">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tabbans">
                                <div class="clearfix col_12 ignore-compat">
                                    <div class="col_4 x_title">
                                        <h2>Banner Ads</h2><div class="clearfix"></div>
                                    </div>

                                    <div class="col_8 last x_content">
                                        <p>Used to show banner ads, such as Google Adsense, across your site.</p>
                                        <div class="form">
                                            {% for configItemElement in configItemElements %}
                                            <div class="form-group" style="margin-bottom: 0px;">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="username">{{ configItemElement['label'] }}</label>
                                                <div class="col-md-9 col-sm-9 col-xs-12">
                                                    {{ configItemElement['elementHtml']|raw }}
                                                    <p class="elementDescriptionMuted">
                                                        {{ configItemElement['description'] }}
                                                    </p>
                                                </div>
                                                <div class="col-md-3 col-sm-3 col-xs-12">
                                                    <a href="{{ configItemElement['image_url'] }}" data-toggle="lightbox" data-title="{{ configItemElement['label'] }}" data-footer="{{ configItemElement['description'] }}">
                                                        <img src="{{ configItemElement['thumb_url'] }}" style="max-width: 100%; max-height: 120px; border: 1px solid #cccccc; margin-bottom: 3px;"/>
                                                    </a>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tabvideo">
                                <div class="clearfix col_12 ignore-compat">
                                    <div class="col_4 x_title">
                                        <h2>Video Ads</h2><div class="clearfix"></div>
                                    </div>
                                    <div class="col_8 last x_content">
                                        <p>Register with a VAST ad provider such as Google and insert the provided VAST urls below.</p>
                                        <div class="form">
                                            <div class="clearfix">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12">Video Advertising Method:</label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <select name="config_item[advert_video_ad_type]" id="advertVideoAdType" title="SITE_CONFIG_ADVERT_VIDEO_AD_TYPE" class="medium validate[required] form-control" onchange="toggleVideoAdType(); return false;">
                                                        {% for k,videoAdTypeOption in videoAdTypeOptions %}
                                                            <option value="{{ k }}"{% if k == config_item.advert_video_ad_type %} SELECTED{% endif %}>{{ videoAdTypeOption }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>
                                                    
                                            <div id="vastWrapper" class="videoSettingsWrapper clearfix" style="display: none;">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">VAST Urls:</label>
                                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                                        <textarea id="config_item_advert_video_ad_vast_urls" rows="5" name="config_item[advert_video_ad_vast_urls]" class="large form-control" title="SITE_CONFIG_ADVERT_VIDEO_AD_VAST_URLS" placeholder="https://www.website.com/.../vast-file.xml">{{ config_item.advert_video_ad_vast_urls }}</textarea>
                                                        <p class="text-muted">Set 1 url on each line. If more than 1 set, they'll randomly be chosen on each video. <!--Sample <a href="https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags" target="_blank">Google VAST Urls</a>--></p>
                                                    </div>
                                                    
                                                    <div class="clearfix">
                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"></label>
                                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                                            <button type="reset" class="btn btn-secondary" onclick="reloadVideoPreview('config_item_advert_video_ad_vast_urls'); return false;">Show Preview</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Adult Only VAST Urls:</label>
                                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                                        <textarea id="config_item_adult_advert_video_ad_vast_urls" rows="5" name="config_item[adult_advert_video_ad_vast_urls]" class="large form-control adult-field" title="SITE_CONFIG_ADULT_ADVERT_VIDEO_AD_VAST_URLS" placeholder="https://www.website.com/.../vast-file.xml">{{ config_item.adult_advert_video_ad_vast_urls }}</textarea>
                                                        <p class="text-muted">Only applied to adult videos - Set 1 url on each line. If more than 1 set, they'll randomly be chosen on each video. <!--Sample <a href="https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags" target="_blank">Google VAST Urls</a>--></p>
                                                    </div>
                                                    
                                                    <div class="clearfix">
                                                        <label class="control-label col-md-3 col-sm-3 col-xs-12"></label>
                                                        <div class="col-md-6 col-sm-6 col-xs-12">
                                                            <button type="reset" class="btn btn-secondary" onclick="reloadVideoPreview('config_item_adult_advert_video_ad_vast_urls'); return false;">Show Preview</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">Test VAST Urls:</label>
                                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                                        <p style="margin-top: 8px;">Use the urls below to test VAST integration on your site. Copy and paste these into the textarea above and click "Show Preview" to test.</p>
                                                        <ul>
                                                            <li>{{ WEB_ROOT }}/app/assets/admin/vast/Single-inline-linear.xml</li>
                                                            <li>{{ WEB_ROOT }}/app/assets/admin/vast/Single-skippable-inline.xml</li>
                                                            <li>{{ WEB_ROOT }}/app/assets/admin/vast/Single-non-linear-inline.xml</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="previewWrapper" class="clearfix col_12 ignore-compat" style='margin-top:20px; display: none;'>
                                    <div class="col_4 x_title">
                                        <h2>Preview</h2>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="col_8 last x_content">
                                        <div class="form">
                                            <div class="clearfix">
                                                <div class="col-md-2 col-sm-1"></div>
                                                <div class="col-md-8 col-sm-10 col-xs-12">
                                                    <div id="Elite_video_player" style="display:block;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tabblock">
                                <div class="clearfix col_12 ignore-compat">
                                    <div class="col_4 x_title">
                                        <h2>Ad Blocker</h2><div class="clearfix"></div>
                                    </div>
                                    <div class="col_8 last x_content">
                                        <p>Whether to limit access to your site if the visitor is using an adblocker.</p>
                                        <div class="form">
                                            <div class="clearfix">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12">Adblock Limiter:</label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <select name="config_item[adblock_limiter]" title="SITE_CONFIG_ADBLOCK_LIMITER" class="medium validate[required] form-control">
                                                        {% for adblockAvailableValue in adblockAvailableValues %}
                                                            <option value="{{ adblockAvailableValue }}"{% if adblockAvailableValue == config_item.adblock_limiter %} SELECTED{% endif %}>{{ adblockAvailableValue }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <p class="elementDescriptionMuted">
                                                        {{ adblockLimiterDescription }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="clearfix">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12">Adblock Filename:</label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <input type="text" name="config_item[adblock_filename]" title="SITE_CONFIG_ADBLOCK_FILENAME" class="medium validate[required] form-control" value="{{ config_item.adblock_filename }}"/>
                                                    <p class="elementDescriptionMuted">
                                                        {{ adblockFilenameDescription }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix col_12">
                        <div class="col_4 adminResponsiveHide">&nbsp;</div>
                        <div class="col_8 last">
                            <div class="clearfix">
                                <div class="input no-label">
                                    <input name="submitted" type="hidden" value="1"/>
                                    <input type="submit" value="Update Settings" class="button blue">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>   
    </div>
</div>
{% endblock %}

{% block head_js %}
    <style>
        .elite_vp_mainContainer {
            background: rgb(255 255 255) !important;
        }
    </style>

    <script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.min.js" type="text/javascript"></script>

    <link rel="stylesheet" href="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/css/elite.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/css/elite-font-awesome.css" type="text/css">
    <link rel="stylesheet" href="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/css/jquery.mCustomScrollbar.css" type="text/css">

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/js/froogaloop.js" type="text/javascript"></script>
    <script src="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/js/jquery.mCustomScrollbar.js" type="text/javascript"></script>
    <script src="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/js/THREEx.FullScreen.js"></script>
    <script src="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/js/videoPlayer.js" type="text/javascript"></script>
    <script src="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/js/Playlist.js" type="text/javascript"></script>
    <script src="{{ WEB_ROOT }}/plugins/filepreviewer/assets/players/elite/js/vast.js" type="text/javascript"></script>
    <script>
        var videoPlayer = null;
        $(document).ready(function() {
            toggleAdultAds();
            toggleVideoAdType();
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var target = $(e.target).attr("href") // activated tab
            });
        });
        
        function toggleAdultAds() {
            if($('#different_ads_for_adult_content').val() == '1') {
                $('.adult-field').closest('.form-group').show();
            }
            else {
                $('.adult-field').closest('.form-group').hide();
            }
        }

        function toggleVideoAdType() {
            $('.videoSettingsWrapper').hide();
            if($('#advertVideoAdType').val() !== '') {
                $('#'+$('#advertVideoAdType').val()+'Wrapper').show();
            }
        }
        
        function reloadVideoPreview(vastUrlSourceId) {
            $('#previewWrapper').fadeIn();
            setupVideoPreview(vastUrlSourceId);
            $([document.documentElement, document.body]).animate({
                scrollTop: $("#previewWrapper").offset().top
            }, 200);
        }
        
        function getSampleVASTUrl(vastUrlSourceId) {
            vastUrls = $('#'+vastUrlSourceId).val();
            if(vastUrls.length === 0) {
                return false;
            }
            
            lines = vastUrls.split('\n');
            return lines[Math.floor(Math.random() * lines.length)];
        }
 
        function setupVideoPreview(vastUrlSourceId) {
            // stop any existing player
            if(videoPlayer !== null) {
                videoPlayer.stop();
            }
            
            // setup player
            var options = {   
                instanceName:"videoPlayer",                      
                instanceTheme:"light",       
                videoPlayerShadow:"off",
                autohideControls:5,                         
                hideControlsOnMouseOut:"Yes",                 
                playerLayout: "fitToContainer",                    
                videoRatio: 16/9,                           
                videoRatioStretch: false,                    
                iOSPlaysinline: true,
                autoplay:false,                              
                colorAccent:"#cc181e",                        
                loadRandomVideoOnStart:"No",                
                shuffle:"No",				                 
                onFinish:"Play next video",                  
                nowPlayingText:"No",                        
                HTML5VideoQuality:"HD",                      
                HTML5videoThumbnails: "vtt",                
                preloadSelfHosted:"none",                    
                rightClickMenu:false,                        
                hideVideoSource:true,						 
                showAllControls:true,						                      
                qualityShow: "No",                         
                infoShow:"No",                             
                shareShow:"No",                             		 
                logoShow:"No",                             
                logoClickable:"Yes",                         
                logoPath:"{{ logoUrl }}",
                logoGoToLink:"{{ WEB_ROOT }}",
                logoPosition:"bottom-left",
                embedShow:"No", 
                showGlobalPrerollAds: false,
                advertisementTitle:"Advertisement",          
                skipAdvertisementText:"Skip advertisement",  
                skipAdText:"You can skip this ad in",        
                mutedNotificationText:"Video has no sound", 
                playBtnTooltipTxt:"Play",                    
                pauseBtnTooltipTxt:"Pause",                 
                rewindBtnTooltipTxt:"Rewind",                
                downloadVideoBtnTooltipTxt:"Download video", 
                qualityBtnOpenedTooltipTxt:"Close settings",
                qualityBtnClosedTooltipTxt:"Settings",       
                ccShowOnHTML5Videos: false,                   
                ccShowOnVideoLoad: true,                     
                ccBtnOpenedTooltipTxt:"Hide captions",     
                ccBtnClosedTooltipTxt:"Show captions",       
                muteBtnTooltipTxt:"Mute",                   
                unmuteBtnTooltipTxt:"Unmute",               
                fullscreenBtnTooltipTxt:"Fullscreen",        
                exitFullscreenBtnTooltipTxt:"Exit fullscreen",
                fullscreenADBtnTooltipTxt:"Watch advertisement in fullscreen",
                exitFullscreenADBtnTooltipTxt:"Exit fullscreen",			              
                shareBtnTooltipTxt:"Share",
                volumeTooltipTxt:"Volume",
                lastBtnTooltipTxt:"Go to last video",        
                firstBtnTooltipTxt:"Go to first video",      
                nextBtnTooltipTxt:"Play next video",        
                previousBtnTooltipTxt:"Play previous video",
                nowPlayingTooltipTxt:"NOW PLAYING",          
                copyTxt:"Copy",
                copiedTxt:"Copied!",
                videos:[
                    {
                        videoType: "HTML5",
                        mp4HD: "https://yetishare.com/script-resources/examples/content/yetishare-script-admin-video-sample.mp4",
                        enable_mp4_download: "no",
                        imageTimer: 4
                    }
                ]
            };
            
            if($('#advertVideoAdType').val() === 'vast') {
                var vastUrl = getSampleVASTUrl(vastUrlSourceId);
                if(!vastUrl) {
                    alert('Failed finding any VAST urls, please ensure you\'ve set at least 1.');
                    return false;
                }
                options.vastUrl = vastUrl;
            }
            
            videoPlayer = $("#Elite_video_player").Video(options);
        }
    </script>
{% endblock %}