{% extends "account/partial/layout_logged_in.html.twig" %}

{% block title %}{{ t("account_edit_page_name", "Account Details") }}{% endblock %}
{% block description %}{{ t("account_edit_meta_description", "Account details") }}{% endblock %}
{% block keywords %}{{ t("account_edit_meta_keywords", "details, account, short, url, user") }}{% endblock %}
{% block selected_navigation_link %}settings{% endblock %}


{% block body %}
<style>
.folder-name{
    line-height: 2;
    font-size: 16px;
    cursor:grabbing;
}
#sortable{
    list-style:none;
    margin-top:30px;
}
.fa-folder{
    padding:10px;
    color:#ffc155
}
.fa-file{
    padding:10px;
    color:#ffc155
}
.underline-italic-small {
    text-decoration: underline;
    font-style: italic;
    font-size: smaller;
    color:blue;
    margin-left: 10px;
}
</style>
    <div class="main-content layer base-slide">
        <ol class="breadcrumb bc-3">
            <li>
                <a href="{{ theme.getAccountWebRoot() }}"><i class="entypo-home"></i>{{ t("home", "Home") }}</a>
            </li>
            <li id="active" onclick="loadRootFolders();">
                Sort Folders
            </li>
        </ol>
        <h3 class="mb-2" style="padding-left:50px;">Sort folders and files by drag and drop</h3>
        <ul id="sortable">
        </ul>
    </div>
    <script type="text/javascript" src="{{ theme.getAccountJsPath() }}/evolution-api.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://unpkg.com/quill-html-edit-button@2.2.7/dist/quill.htmlEditButton.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
    <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/xml.min.js"></script>
    <script>

        currentAlbumId = 'folder_arrange';
        $(document).ready(function(){
            loadRootFolders();
            
            $( "#sortable" ).sortable({
                update: function( event, ui) {
                    var data = [];
                    var folderId = ui.item.attr('id');
                    var category = ui.item.attr('data-category');
                    var type = ui.item.attr('data-type');
                    $('.folder-name').each(function(val){
                        data.push($(this).attr('id'));
                    });

                    $.ajax({
                        url:ACCOUNT_WEB_ROOT+"/sort_folder",
                        type:"POST",
                        data:{
                            data:data,
                            category:category
                        },
                        success:function(response){
                            console.log(category);
                            showSuccessNotification(response);
                            setTimeout(function(){
                                if(type === 'root'){
                                    window.location.href=ACCOUNT_WEB_ROOT+"/folder_arrange";
                                }
                            },1300);
                        }
                    });
                }
            });
        })
        function loadData(id,name){
            $('#sortable').empty();
            $.ajax({
                url:CORE_SITE_PATH + "/load_files",
                type:"POST",
                data:{
                    pageType:'folder',
                    nodeId:id,
                    pageStart:'',
                    perPage:0,
                },
                success:function(response){
                    var file_data="";
                    if(response.Data){
                        for(var i=0; i<response.Data.length; i++){
                            if(response.Data[i].folderName){
                                file_data+='<li class="folder-name" data-type="child" data-category="parent_folder" id="'+response.Data[i].id+'"><i class="fa fa-folder" aria-hidden="true"></i>'+response.Data[i].folderName+'<a href="javascript:void()" onclick="loadData('+response.Data[i].id+',\''+response.Data[i].folderName+'\');" class="underline-italic-small">open</a></li>';
                            }else{
                                file_data+='<li class="folder-name" data-type="child" data-category="child_file" id="'+response.Data[i].id+'"><i class="fa fa-file" aria-hidden="true"></i>'+response.Data[i].originalFilename+'';
                            }
                        }
                    }else{
                        file_data+='<li><strong class="alert alert-danger">No Data To Show</strong></li>'
                    }
                    var newLi = $('<li id="active" onclick="loadData('+id+',\''+name+'\')">').text(name);
                    if($('.breadcrumb li#active:first').text() != name){
                        $('.breadcrumb #active').after(newLi);
                        $('.breadcrumb #active:first').removeAttr('id','active');
                    }
                    $('#sortable').html(file_data);
                }
            });
        }

        function loadRootFolders(){
            var file_data="";
            $('#sortable').html('');
                $.ajax({
                    url:ACCOUNT_WEB_ROOT+"/ajax/home_v2_folder_listing?folder=-1",
                    type:"GET",
                    data:{},
                    success:function(response){
                        for(i=0;i<response.length;i++){
                            file_data+='<li class="folder-name" data-type="root" data-category="parent_folder" id="'+response[i].attr['id']+'"><i class="fa fa-folder" aria-hidden="true"></i>'+response[i].data+'<a href="javascript:void()" onclick="loadData('+response[i].attr['id']+',\''+response[i].data+'\');" class="underline-italic-small">open</a></li>';
                        }
                        $('#sortable').html(file_data);
                    }
                });
            }


            $(document).on('click','.breadcrumb li',function(index){
                $(this).nextAll().remove(); 
                $(this).attr('id','active');
            });
            
    </script>
{% endblock %}