{config_load file=$language_path section="general"}
{config_load file=$language_path section="ebayapi_media"}

<style type="text/css">
    p.helptable{
        margin-top: 0;
    }
    #result{
        background-color: red;
        color: white;
        padding: 12px;
        margin:5px;
        display: none;
    }
    form fieldset legend {
            font-size: 1.4em;
            font-weight: bold;
    }
    form fieldset label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
    }
    #upload_document_div{
        display: none;
    }
    table.items tbody tr#no_items td{
        font-style: italic;
        color: #666;
    }
</style>
<script type="text/javascript">
<!--
var base_url = '{$BASEURL}';
var icon_image = 'images/basicons/hanging15.png';
var icon_pdf = 'images/basicons/document162.png';
var icon_video = 'images/basicons/file99.png';
var text_select = '{#select#}';
var icon_plus = '{icon type="plus" title="{#select#}"}';
var icon_delete = '{icon type="delete" title="{#delete#}" class="ui-state-error"}';
var update_status = '{#update_status#}';
var MEDIA_TYPE = '{$TYPE}';
var really_delete_media = '{#really_delete_media#}';
{literal}

function del(elm){
    if(!confirm(really_delete_media)){
        return false;
    }
    var connector = (base_url.indexOf('?')>-1)?'&':'?';
    var id = (MEDIA_TYPE == 'video') ? $(elm).data('videoid') : $(elm).data('documentid');
    let ajax_url = base_url+connector+'action=delete_media&type='+MEDIA_TYPE+'&id='+id;
    $.ajax({
        url: ajax_url,
        dataType: 'json',
        success:function(json){
            if(json.MSG){
                alert(json.MSG);
            }else{
                let idkey=(MEDIA_TYPE=='video')?'videoid':'documentid';
                $('table.items tbody tr.'+MEDIA_TYPE+'[data-'+idkey+'="'+id+'"').remove();
                if($('table.items tbody tr').length < 2){
                    $('table.items tbody tr#no_items').show();
                }
            }
        },
        error: function(xhr){
            alert('Cant delete media #'+id)
        }
    });
}
function refreshStatus( id ){
    var connector = (base_url.indexOf('?')>-1)?'&':'?';
    var action = (MEDIA_TYPE == 'video') ? 'getVideo' : 'getDocument';
    $.ajax({
        url: base_url+connector+'&action='+action+'&id='+id,
        dataType: 'json',
        success: function(json){
            updateItemRow( json.RESPONSE );
        },
        error: function( xhr ){
            alert('Cant get Data for '+MEDIA_TYPE+' #'+id);
        }
    });
}

function toggle_upload(){
    $('#upload_document_div').toggle();
}
function updateItemRow( data ){
    if(MEDIA_TYPE == 'video'){
        var vt = '';
        var ve = '';
        var vs = '';
        var remove_tr_class = false;
        if(data.video_title != ''){
            vt = data.video_title;
        }else{
            vt = '<i>'+data.video_id+'</i>';
        }
        if(data.video_thumbnail != ''){
            vt = '<img style="max-width: 90px" src="'+data.video_thumbnail+'" alt="'+data.video_title+'" title="'+data.video_title+'" />';
        }
        if(data.video_description != ''){
            vt += '<br /><i>'+data.video_description+'</i>';
        }
        if(data.expirationDate != ''){
            ve = data.expirationDate;
        }
        if(data.video_status != 'LIVE'){
            alert('Status des Videos: '+data.video_status+' (Warten auf Status "LIVE")');
            vs = '<a href="javascript:refreshStatus(\''+data.video_id+'\',\'video\');">'+update_status+'</a>';
        }else{
            vs = '';
            remove_tr_class = true;
        }
        if(remove_tr_class){
            $('table.items tbody tr[data-videoid="'+data.video_id+'"]').removeClass('ui-state-active');
        }
        $('table.items tbody tr[data-videoid="'+data.video_id+'"] td.title').html(vt);
        $('table.items tbody tr[data-videoid="'+data.video_id+'"] td.expirationDate').html(ve);
        let select = '';
        if(vs != ''){
            select = vs;
        }else{
            select = '<a data-videotitle="'+vt+'" data-videoid="'+data.video_id+'" href="javascript:;" onclick="itemselect(this);">'+icon_plus+'</a>'
                +' <a data-videoid="'+data.video_id+'" href="javascript:;" onclick="del(this);">'+icon_delete+'</a>';
        }
        $('table.items tbody tr[data-videoid="'+data.video_id+'"] td.itemselect').html(select);
    }else if(MEDIA_TYPE == 'document'){
        var remove_tr_class = false;
        var fileName = '';
        var fileStatus = '';
        if(data.fileName != ''){
            filetype = icon_pdf;
            if(data.fileType.indexOf('image/')){
                filetype = icon_image;
            }
            fileName = '<img title="'+data.fileType+'" src="'+filetype+'" border="0" style="max-width:15px;" /> '+data.fileName+' ('+data.fileSize+' bytes)';
        }else{
            fileName = '<i>'+data.documents_id+'</i>';
        }
        if(data.documentStatus != 'ACCEPTED'){
            alert('Status des Dokuments: '+data.documentStatus+' (Warten auf Status "ACCEPTED")');
            fileStatus = '<a href="javascript:refreshStatus(\''+data.documents_id+'\',\'document\');">'+update_status+'</a>';
        }else{
            fileStatus = '';
            remove_tr_class = true;
        }
        if(remove_tr_class){
            $('table.items tbody tr[data-documentid="'+data.documents_id+'"]').removeClass('ui-state-active');
        }
        $('table.items tbody tr[data-documentid="'+data.documents_id+'"] td.file').html(fileName);
        $('table.items tbody tr[data-documentid="'+data.documents_id+'"] td.documentType').html(data.documentType);
        let select = '';
        if(fileStatus != ''){
            select = fileStatus;
        }else{
            select = '<a data-documentid="'+data.documents_id+'" href="javascript:;" onclick="itemselect(this);">'+icon_plus+'</a>'
                +' <a data-documentid="'+data.documents_id+'" href="javascript:;" onclick="del(this);">'+icon_delete+'</a>';
        }
        $('table.items tbody tr[data-documentid="'+data.documents_id+'"] td.itemselect').html(select);
    }
}
function addItemRow( data ){
    if(MEDIA_TYPE == 'video'){
        var vt = '';
        var ve = '';
        var vs = '';
        var tr_class = '';
        if(data.video_title != ''){
            vt = data.video_title;
        }else{
            vt = '<i>'+data.video_id+'</i>';
        }
        if(data.video_thumbnail != ''){
            vt = '<img style="max-width: 90px" src="'+data.video_thumbnail+'" alt="'+data.video_title+'" title="'+data.video_title+'" />';
        }
        if(data.video_description != ''){
            vt += '<br /><i>'+data.video_description+'</i>';
        }
        if(data.expirationDate != ''){
            ve = data.expirationDate;
        }
        if(data.video_status != 'LIVE'){
            vs = '<a href="javascript:refreshStatus(\''+data.video_id+'\',\'video\');">'+update_status+'</a>';
            tr_class = 'ui-state-active';
        }else{
            vs = data.video_status;
        }
        let new_tr = '<tr class="video '+tr_class+'" data-videoid="'+data.video_id+'" data-videotitle="'+data.video_title+'">'
                +'  <td class="title">'+vt+'</td>'
                +'  <td class="expirationDate">'+ve+'</td>'
                +'  <td class="itemselect">'+vs+'</td>'
                +'</tr>';
        $('table.items tbody').append(new_tr);
    }else if(MEDIA_TYPE=='document'){
        var fileName = '';
        var fileStatus = '';
        var tr_class = '';
        if(data.fileName != ''){
            filetype = icon_pdf;
            if(data.fileType.indexOf('image/')){
                filetype = icon_image;
            }
            fileName = '<img title="'+data.fileType+'" src="'+filetype+'" border="0" style="max-width:15px;" /> '+data.fileName+' ('+data.fileSize+' bytes)';
        }else{
            fileName = '<i>'+data.documentId+'</i>';
        }
        if(data.documentStatus != 'ACCEPTED'){
            fileStatus = '<a href="javascript:refreshStatus(\''+data.documentId+'\');">'+update_status+'</a>';
            tr_class = 'ui-state-active';
        }else{
            fileStatus = data.documentStatus;
        }
        let new_tr = '<tr class="document '+tr_class+'" data-documentid="'+data.documentId+'">'
                +'  <td class="file">'+fileName+'</td>'
                +'  <td class="documentType">'+data.documentType+'</td>'
                +'  <td class="itemselect">'+fileStatus+'</td>'
                +'</tr>';
        $('table.items tbody').append(new_tr);
    }
}
$( function() {
    if($('table.items tbody tr').length > 1){
        $('table.items tbody tr#no_items').hide();
    }
    $('input#uploadBtnSubmit').click(function(event){
        event.preventDefault();
        var form = $('form[name="media_upload_form"]')[0];
        var data = new FormData(form);
        $("input#uploadBtnSubmit").prop("disabled", true);
        var formAction = $(form).attr('action');
        $.ajax({
            dataType: 'json',
            type: "POST",
            enctype: 'multipart/form-data',
            url: formAction,
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (json) {
                if(json.MSG != ''){
                    $("#result").html(json.MSG);
                }else{
                    $('table.items tbody tr#no_items').hide();
                    // json.RESPONSE = video_id
                    if(MEDIA_TYPE == 'video'){
                        addItemRow({video_id:json.RESPONSE, 
                            video_title:'', 
                            video_description:'',
                            video_thumbnail:'', 
                            video_status:'',
                            expirationDate: ''
                        });
                    }else{
                        addItemRow({
                            documentId:json.RESPONSE.documentId, 
                            fileName:json.RESPONSE.documentMetadata.fileName, 
                            fileType:json.RESPONSE.documentMetadata.fileType, 
                            fileSize:json.RESPONSE.documentMetadata.fileSize, 
                            documentStatus: json.RESPONSE.documentStatus,
                            documentType: json.RESPONSE.documentType
                        });
                        $('#result').html('').hide();
                    }
                    $('#upload_document_div').hide();
                }
                if(json.DEBUG){
                    $('#result').html($('#result').html()+json.DEBUG);
                }
                $("input#uploadBtnSubmit").prop("disabled", false);
                if($('#result').html() != ''){
                    $('#result').show();
                }else{
                    $('#result').hide();
                }

            },
            error: function (e) {

                $("#result").html(e.responseText);
                console.log("ERROR : ", e);
                $("input#uploadBtnSubmit").prop("disabled", false);

            }
        });
        
        
        
    });
    $("input#listsearch").focus();
    $("input#listsearch").on("keyup change", function(e) {
        $('table.items tbody tr').show();
        if($('input#listsearch').val() == ''){
            return false;
        }
        var s = $('input#listsearch').val();
        $('table.items tbody tr').each(function(){
            var hideTr = true;
            var Tr = $(this);
            $(this).children('td').each(function(){
                let inhalt = $(this).text();
                if(inhalt.indexOf(s)>-1){
                    hideTr = false;
                }
            });
            if(hideTr){
                Tr.hide();
            }
        });
    });
} );
    
function submitUploadForm(){
    alert('OK');
    return false;
}
{/literal}
//-->
</script>
    
<div class="main">
    {#search#} <input name="listsearch" type="text" id="listsearch" />
    <table class="items yesListTable_minimal">
        <thead>
            <tr>
        {if $TYPE == 'video'}
                <th>Titel</th>
                <th>G&uuml;ltigkeit</th>
        {else}
                <th>File</th>
                <th>Typ</th>
        {/if}
                <th></th>
            </tr>
        </thead>
        <tbody>
    {foreach from=$ITEMS item=i}
        <tr class="{$TYPE}" {if $TYPE == 'video'}data-videoid="{$i->video_id}" data-videotitle="{$i->video_title}" {else}data-documentid="{$i->documents_id}" {/if}>
        {if $TYPE == 'video'}
            <td class="title">
                {if $i->video_thumbnail != ''}
                    <img style="max-width: 90px" src="{$i->video_thumbnail}" alt="{$i->video_title}" title="{$i->video_title}" />
                {else}
                    {$i->video_title}
                {/if}
                <br />
                <i>{$i->video_description}</i>
            </td>
            <td class="expirationDate">{yes_date_short date=$i->expirationDate}</td>
            <td class="itemselect">
                {if $i->video_status != 'LIVE'}
                <a href="javascript:refreshStatus('{$i->video_id}');">{#update_status#}</a>
                {else}
                <a data-videotitle="{$i->video_title}" data-videoid="{$i->video_id}" href="javascript:;" onclick="itemselect(this);">{icon type="plus" title="{#select#}"}</a>
                <a data-videoid="{$i->video_id}" href="javascript:;" onclick="del(this);">{icon type="delete" title="{#delete#}" class="ui-state-error"}</a>
                {/if}
            </td>
        {else}
            <td class="file">
                {if $i->fileName != ''}
                    {if $i->fileType == 'application/pdf'}
                        <img src="images/basicons/book209.png" title="{$i->fileType}" border="0" style="max-width: 15px" />
                    {else}
                        <img src="images/basicons/hanging15.png" title="{$i->fileType}" border="0" style="max-width: 15px" />
                    {/if}
                    {$i->fileName} ({$i->fileSize} bytes)
                {/if}
            </td>
            <td class="documentType">{$i->documentType_title}</td>
            <td class="itemselect">
                {if $i->documentStatus != 'ACCEPTED'}
                <a title="{$i->documentStatus}" href="javascript:refreshStatus('{$i->documents_id}');">{#update_status#}</a>
                {else}
                <a data-documentid="{$i->documents_id}" href="javascript:;" onclick="itemselect(this);">{icon type="plus" title="{#select#}"}</a>
                <a data-documentid="{$i->documents_id}" href="javascript:;" onclick="del(this);">{icon type="delete" title="{#delete#}" class="ui-state-error"}</a>
                {/if}
            </td>
        {/if}
        </tr>
    {/foreach}
        <tr id="no_items">
            <td colspan="3">{#no_items#}</td>
        </tr>
        </tbody>
    </table>

    <a href="javascript:toggle_upload()"><button type="button" style="padding: 4px;" class="ui-button ui-corner-all ui-state-default">{#add#}</button></a>
    <div id="result"></div>

    <div id="upload_document_div" class="ui-widget">
        <form name="media_upload_form" action="{$LINK_UPLOAD_FORM}" enctype="multipart/form-data" method="post">
            <fieldset><legend>{if $TYPE == 'document'}{#upload_document#}{else}{#upload_video#}{/if}</legend>
            {if $TYPE == 'document'}
                <label for="documentFile">{#documentFile#}:<br /></label>
                <input id="documentFile" type="file" name="documentfile" />
                <p class="helptable">{#documentFile_hint#} (YES Upload Limit: {$UPLOAD_MAX})<br />{#upload_document_hint#}</p>
                <label for="documentType">{#documentType#}</label>
                {$input_document_type}
                <p class="helptable">{#documentType_hint#}</p>
                <label for="languages">{#languages#}<br /></label>
                {$input_document_languages}<br />
                <p class="helptable">{#languages_hint#}</p>
            {else}
                <label for="videofile">{#videoFile#}<br /></label>
                <input id="videofile" type="file" name="videofile" /><br />
                <p class="helptable">{#videoFile_hint#} (YES Upload Limit: {$UPLOAD_MAX})</p>
                <label for="title">{#videoTitle#}:<br /></label>
                <input type="text" id="title" name="title" size="32" /><br />
                <label for="description">{#videoDescription#}:<br /></label>
                <textarea id="description" name="description" cols="32" rows="2"></textarea><br />
            {/if}
                <input class="ui-button ui-corner-all ui-state-default" type="submit" id="uploadBtnSubmit" value="{#save#}" />
            </fieldset>
        </form>    
    </div>
</div>