{block name='content'}

    {include '../Creation_video/creation_manuel.tpl'}
    {include '../Creation_video/traitement_lot.tpl'}
    {include '../Creation_video/creation_auto.tpl'}
    
    {$form_nonce}

    <div class="DigitalSignage4_card DigitalSignage4_wp_card">

        <div style="display: flex;align-items: center;margin:0">

            <img style="height: 61px; widows: 40" src="{$VideosUrl}" alt=""/>
            <h2 style="margin: 0 1em;">{$t::getTraduction( "Mes_videos")}</h2>

        </div>

        <br>

        {if $stats.nb_videos_attente}
            <p>{$t::getTraduction( "nb_video_attente")} : {$stats.nb_videos_attente}</p>
        {/if}

        {if $stats.nb_videos_en_cours_creation}
            <p>{$t::getTraduction( "nb_video_cours")} : {$stats.nb_videos_en_cours_creation}</p>
        {/if}

        {if $stats.nb_video_erreur}
            <p>{$t::getTraduction( "nb_video_erreur")} : {$stats.nb_video_erreur}</p>
        {/if}

        <div class="wrapper_table">

            <div class="table">

                <div class="row header">

                    <div class="cell">
                    </div>

                    <div class="cell">
                        <!--{$t::getTraduction( "Aperçu")}-->
                    </div>

                    <!--div class="cell">
                        {$t::getTraduction( "Nom")}
                    </div-->

                    <div class="cell">
                        {$t::getTraduction( "Produit")}
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Shortcode")}

                        <span onmouseenter="this.classList.toggle('is_hover')"
                              onmouseleave="this.classList.toggle('is_hover')" class="DigitalSignage4_material-icons DigitalSignage4_click DigitalSignage4_tool-tips"
                              data-tips="{$t::getTraduction( "Video_shortcode_tuto")}">
                            help_outline
                        </span>

                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Statut")}
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Gabarit")}
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Automatique")}
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Date_demande")}
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Download_video")}
                    </div>

                </div>

                {foreach from=$videos item=videoHtmlContentRow}

                    {$videoHtmlContentRow}

                {/foreach}

                <div class="modal fade" id="ModalV" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">

                            <div class="modal-body">
                                <p>{$t::getTraduction( "DEl_video")}</p>
                            </div>

                            <div class="modal-footer">
                                <button style="font-size: 1.3em" type="button" class="btn btn-secondary"
                                        data-dismiss="modal">{$t::getTraduction( "Non")}</button>

                                <button onclick="deletePlaylist()" style="font-size: 1.3em" type="button"
                                        data-dismiss="modal"
                                        class="btn btn-primary">{$t::getTraduction( "Oui")}</button>
                            </div>

                        </div>
                    </div>
                </div>


                <script>

					// When the user clicks on div, open the popup
					function showHideDS4Popup(id) {
					  var allPopups = document.getElementsByClassName("ds4_popuptext");
					  for (let i = 0; i < allPopups.length; i++) {
						if (allPopups[i].id != "myPopup" + id) allPopups[i].classList.remove("show");
					  }
					  var popup = document.getElementById("myPopup" + id);
					  popup.classList.toggle("show");
					}

                    // suppression des vidéo

                    let id_playlist = null;

                    function deletePlaylist() {
                        let form = new FormData();

                        form.append("id", id_playlist);
                        form.append("delete", "true");

                        ajaxCall('', '{$t::getTraduction( "Video_supprime")}', form, () => {
                            let element = document.getElementById("row_" + id_playlist);
                            element.parentElement.removeChild(element);
                        });

                    }

                    function saveIdDeletePlaylist(id) {
                        id_playlist = id;
                    }

                    function ajaxCall(url, succesMessage = "", form = "", callBack = null) {

                        var xhr = new XMLHttpRequest();
                        xhr.open('POST', url, true);
                        xhr.onload = function () {


                            let response = stripScripts(this.responseText);

                            // do something to response
                            if (response === "ok") {

                                DigitalSignage4_showSuccessMessage(succesMessage);

                                if (callBack != null) {
                                    callBack();
                                }

                            } else {
                                DigitalSignage4_showErrorMessage(this.responseText);
                            }

                        };

                        xhr.send(form);

                    }

                    // Mise a jour des vidéos en direct

                    updateRows();
					
					

                    function updateRows() {
                        let rows = document.querySelectorAll(".DigitalSignage4_row:not([data-flag='completed'])");
                        rows.forEach(function (row) {
                            updateSingleRow(row.getAttribute("data-id"), row.getAttribute("data-flag"), row);
                        });
                    }

                    function updateSingleRow(id, flag, row) {

                        let url = "{$ajaxUrl}?action=UpdateVideoAjaxHandler&nonce={$ajax_nonce}&product_items=false&demande_id=" + id + "&product_flag=" + flag;

                        let xhr = new XMLHttpRequest();

                        xhr.open('POST', url, true);

                        xhr.onload = function () {

                            console.log(this.responseText);
                            returnJSON = JSON.parse(this.responseText);
                            let element = createElementFromHTML(stripScripts(returnJSON.data.message));

                            if( element.getAttribute("data-flag") !== flag ){
                                row.parentElement.replaceChild( element, row);
                                row = element;
                                flag = element.getAttribute("data-flag");
                            }

                            if ( element.getAttribute("data-flag") !== "completed" ){
                                setTimeout(
                                    () => {
                                        updateSingleRow(id, flag, row)
                                    },
                                    10_000
                                );
                            }


                        };

                        xhr.onerror = function () {
                            setTimeout(
                                () => {
                                    updateSingleRow(id, flag, row)
                                },
                                10_000
                            );
                        }

                        xhr.send();
                    }

                    function stripScripts(s) {
                        var div = document.createElement('div');
                        div.innerHTML = s;
                        var scripts = div.getElementsByTagName('script');
                        var i = scripts.length;

                        while (i--) {
                            scripts[i].parentNode.removeChild(scripts[i]);
                        }

                        return div.innerHTML;
                    }

                    function createElementFromHTML(htmlString) {
                        let div = document.createElement('div');
                        div.innerHTML = htmlString.trim();
                        return div.firstChild;
                    }


                    let index = 100;


                    function toggleVideo(btn, close = false) {

                        if (close) {
                            btn.classList.toggle("DigitalSignage4_display_none");
                            btn.previousElementSibling.classList.toggle("DigitalSignage4_display_none");
                        } else {
                            btn.classList.toggle("DigitalSignage4_display_none");
                            btn.nextElementSibling.classList.toggle("DigitalSignage4_display_none");
                        }

                        btn.parentElement.nextElementSibling.firstElementChild.style.zIndex = index;
                        btn.parentElement.nextElementSibling.firstElementChild.classList.toggle("DigitalSignage4_display_none");
                        btn.parentElement.nextElementSibling.firstElementChild.currentTime = 0;
                        btn.parentElement.nextElementSibling.firstElementChild.play();

                        index = index + 1;

                    }
                </script>

            </div>

            <div class="puces_videos">
                {foreach from=$puces item=puce}
                    <button onclick="document.location.href='{$puce.lien}'"
                            class="puce_videos {if $puce.active}actif{/if}">
                        {$puce.nombre}
                    </button>
                {/foreach}
            </div>

        </div>
    </div>
{/block}
