{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{% set menus = ['content', 'file'] %}

{% block title %}{{ 'admin.content.file_management'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.content.contents_management'|trans }}{% endblock %}

{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}

{% block stylesheet %}
    <style>
        .copy-file-path {
            display: none;
        }
    </style>
{% endblock stylesheet %}

{% block javascript %}
    <script src="{{ asset('assets/js/file_manager.js', 'admin') }}"></script>
    <script>
        arrTree = {{ tpl_javascript|raw }};
        var paths = {{ paths|raw }}; // TODO 仮実装
        $(function() {
            var bread_crumbs = {{ now_dir_list|raw }};
            var file_path = '';
            var $delimiter = '<span>&nbsp;/&nbsp;</span>';
            var $node = $('#bread');
            var total = bread_crumbs.length;
            for (var i in bread_crumbs) {
                file_path += '/' + bread_crumbs[i];
                if (i == total - 1) {
                    $li = $('<li class="breadcrumb-item active" />').text(bread_crumbs[i]);
                } else {
                    $a = $('<a href="javascript:;" onclick="eccube.fileManager.openFolder(\'' + file_path.replace(/user_data/, '') + '\'); return false;" />')
                        .text(bread_crumbs[i]);
                    $li = $('<li class="breadcrumb-item" />').append($a);
                }
                $li.appendTo($node);
                if (i < total - 1) $node.append($delimiter);
            }


            $('.action-copy').on('click',function(){
            	var updated = $(this).parents('tr').find('.updated');
            	var copy_file_path = $(this).parents('tr').find('.copy-file-path');
            	if ($(updated).is(':visible')) {
            	    $('.updated').each(function() {
            	        $(this).show();
            	    });
            	    $('.copy-file-path').each(function() {
            	        $(this).hide();
            	    });
            	    $('.action-copy').each(function() {
            	        $(this).attr('title', '{{ 'admin.common.copy_path'|trans }}');
            	        $(this).tooltip('_fixTitle');
            	    });

               	    $(updated).hide();
            	    $(copy_file_path).show();
            	    $(copy_file_path).find('input:first').focus();
            	} else {
            	    $(updated).show();
            	    $(copy_file_path).hide();
            	}

            });

            $('.copy-file-path input').focus(function(){
                $(this).select();
                if (document.execCommand('copy')) {
                    var action_copy = $(this).parents('tr').find('.action-copy');
                    setTimeout(function() {
                        action_copy.attr('title', '{{ 'admin.common.copy_path_complete'|trans }}');
                        action_copy.tooltip('_fixTitle');
                        action_copy.tooltip('show');
                     }, 100);
                }
            });
        });


        eccube.fileManager.viewFileTree('directory_userdata', arrTree, '{{ tpl_now_dir }}', 'tree_select_file', 'tree_status', 'move');


    </script>
{% endblock javascript %}
{% block main %}
    <form name="form1" id="form1" method="post" action="?" enctype="multipart/form-data">
        <input type="hidden" name="mode" value=""/>
        <input type="hidden" name="now_file" value="{{ tpl_now_dir }}"/>
        <input type="hidden" name="now_dir" value="{{ tpl_now_dir }}"/>
        <input type="hidden" name="tree_select_file" value="{{ tpl_now_dir }}"/>
        <input type="hidden" name="tree_status" value=""/>
        <input type="hidden" name="select_file" value=""/>
        {{ form_widget(form._token) }}
        <div class="c-outsideBlock">
            <div class="c-outsideBlock__contents">
                <nav aria-label="breadcrumb" role="navigation">
                    <ol class="breadcrumb mb-2 p-0" id="bread"></ol>
                </nav>
                <div class="card rounded border-0 mb-4">
                    <div class="card-header"><span class="card-title">{{ 'admin.content.file.add_file__card_title'|trans }}</span></div>
                    <div class="card-body">
                        <div id="upload_box__file" class="row mb-2">
                            <div class="col-2" data-tooltip="true" data-placement="top" title="{{ 'tooltip.content.file.upload_file'|trans }}"><span>{{ 'admin.content.file.add_file'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i></div>
                            <div class="col mb-3">
                                <div class="mb-2">
                                    {{ form_widget(form.file) }}{# TODO input type="file" の装飾 #}
                                </div>
                                <div class="mb-2">
                                    <a class="btn btn-ec-conversion action-upload" href="javascript:;" onclick="eccube.fileManager.setTreeStatus('tree_status');eccube.setModeAndSubmit('upload','',''); return false;">{{ 'admin.common.upload'|trans }}</a>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-2"><span>{{ 'admin.content.file.add_directory'|trans }}</span></div>
                            <div class="col">
                                <div class="form-row">
                                    <div class="col-3">
                                        {{ form_widget(form.create_file, {attr: {placeholder: 'admin.content.file.directory_name'}}) }}
                                    </div>
                                    <div class="col-auto">
                                        <a class="btn btn-ec-regular action-create" href="javascript:" onclick="eccube.fileManager.setTreeStatus('tree_status');eccube.setModeAndSubmit('create','',''); return false;">{{ 'admin.common.create__new'|trans }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% for error in errors %}
                            <p class="text-danger errormsg">{{ error.message|trans }}</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="c-contentsArea__cols">
                <div class="c-contentsArea__primaryCol">
                    <div class="c-primaryCol">
                        <div class="card rounded border-0 mb-4">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-8"><span class="card-title">{{ 'admin.content.file.file_list__card_title'|trans }}</span></div>
                                    <div class="col-4 text-right"><a data-toggle="collapse" href="#fileList" aria-expanded="false" aria-controls="fileList"><i class="fa fa-angle-up fa-lg"></i></a></div>
                                </div>
                            </div>
                            <div class="collapse show ec-cardCollapse" id="fileList">
                                <div class="card-body p-0">

                                    <table class="table">
                                        <tbody>
                                        {% if tpl_is_top_dir != false %}
                                            <tr>
                                                <td class="align-middle text-center" style="width: 10%"><i class="fa fa-folder-o fa-2x"></i></td>
                                                <td class="align-middle"><a href="javascript:;" onclick="eccube.fileManager.openFolder('{{ tpl_parent_dir }}')"><i class="fa fa-reply"></i></a></td>
                                                <td class="align-middle">&nbsp;</td>
                                                <td class="align-middle">&nbsp;</td>
                                                <td class="align-middle">&nbsp;</td>
                                            </tr>
                                        {% endif %}
                                        {% for file in arrFileList %}
                                            <tr id="{{ loop.index }}">
                                                <td class="align-middle text-center" onDblClick="eccube.fileManager.setTreeStatus('tree_status');eccube.fileManager.doubleClick(arrTree, '{{ file.file_path }}', {% if file.is_dir %}true{% else %}false{% endif %} '{{ tpl_now_dir }}', false)">
                                                    {% if file.is_dir %}
                                                        <i class="fa fa-folder-o fa-2x"></i>
                                                    {% else %}
                                                        {% if file.extension|file_ext_icon({}, true) == 'fa-file-image-o' %}
                                                            <div class="d-inline-block p-3 bg-light"
                                                                 style="background: no-repeat center center;
                                                                    background-image: url('{{ asset('', 'user_data') }}{{ file.file_path|slice(1) }}');
                                                                    background-size: contain; width: 49px; height: 57px;">
                                                            </div>
                                                        {% else %}
                                                            <div class="d-inline-block p-3 bg-light">
                                                                {{ file.extension|file_ext_icon({class: "fa-2x"}) }}
                                                            </div>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                                <td class="align-middle">
                                                    {% if file.is_dir %}
                                                        <a href="javascript:;" onclick="eccube.setValue('tree_select_file', '{{ file.file_path }}', 'form1'); eccube.fileManager.selectFile('{{ loop.index }}', '#808080');eccube.setModeAndSubmit('move','',''); return false;">{{ file.file_name }}</a>
                                                    {% else %}
                                                        {{ file.file_name }}
                                                    {% endif %}
                                                </td>
                                                <td class="align-middle">
                                                    {% if not file.is_dir %}
                                                        {{ file.file_size }}
                                                    {% endif %}
                                                </td>
                                                <td class="align-middle">
                                                    <span class="updated">{{ file.file_time|date_sec }} {{ 'admin.content.file.updated'|trans }}</span>
                                                    {% if file.is_dir == false %}
                                                        <span class="copy-file-path"><input type="text"  class="form-control" value="{{asset('', 'user_data')}}{{ file.file_path|slice(1) }}"></span>
                                                    {% endif %}
                                                </td>
                                                {% if file.is_dir %}
                                                    <td class="align-middle pr-3">
                                                        <div class="text-right">
                                                            <div class="px-1 d-inline-block">
                                                                <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'admin.common.delete'|trans }}">
                                                                    <a class="btn btn-ec-actionIcon action-delete {% if file.is_empty == false %}disabled{% endif %}"
                                                                   data-toggle="modal" data-target="#confirmModal-{{ loop.index }}">
                                                                    <i class="fa fa-close fa-lg text-secondary" aria-hidden="true"></i></a>
                                                                </div>
                                                                <div class="modal fade" id="confirmModal-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="confirmModal-{{ loop.index }}" aria-hidden="true">
                                                                    <div class="modal-dialog" role="document">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title font-weight-bold">{{ 'admin.common.delete_modal__title'|trans }}</h5>
                                                                                <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                                            </div>
                                                                            <div class="modal-body text-left">
                                                                                <p class="text-left">{{ 'admin.common.delete_modal__message'|trans({ '%name%': file.file_name }) }}</p>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button class="btn btn-ec-sub" type="button" data-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
                                                                                <a class="btn btn-ec-delete" data-confirm="false"
                                                                                   href="{{ url('admin_content_file_delete', { 'select_file': file.file_path}) }}" {{ csrf_token_for_anchor() }} data-method="delete">
                                                                                    {{ 'admin.common.delete'|trans }}
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                {% else %}
                                                    <td class="align-middle pr-3">
                                                        <div class="text-right">
                                                            <div class="px-1 d-inline-block">
                                                                <a class="btn btn-ec-actionIcon action-copy" data-tooltip="true" data-placement="top" title="{{ 'admin.common.copy_path'|trans }}">
                                                                    <i class="fas fa-copy fa-lg text-secondary" aria-hidden="true"></i>
                                                                </a>
                                                            </div>
                                                            <div class="px-1 d-inline-block">
                                                                <a href="{{ url('admin_content_file_view') }}?file={{ file.file_path|e('url') }}" target="_blank" class="btn btn-ec-actionIcon action-view" data-tooltip="true" data-placement="top" title="{{ 'admin.common.display'|trans }}">
                                                                    <i class="fa fa-eye fa-lg text-secondary" aria-hidden="true"></i>
                                                                </a>
                                                            </div>
                                                            <div class="px-1 d-inline-block">
                                                                <a href="{{ url('admin_content_file_download') }}?select_file={{ file.file_path|e('url') }}" class="btn btn-ec-actionIcon action-download" data-tooltip="true" data-placement="top" title="{{ 'admin.common.download'|trans }}">
                                                                    <i class="fa fa-cloud-download fa-lg text-secondary" aria-hidden="true"></i>
                                                                </a>
                                                            </div>
                                                            <div class="px-1 d-inline-block">
                                                                <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'admin.common.delete'|trans }}">
                                                                    <a class="btn btn-ec-actionIcon action-delete" data-toggle="modal" data-target="#confirmModal-{{ loop.index }}">
                                                                        <i class="fa fa-close fa-lg text-secondary" aria-hidden="true"></i>
                                                                    </a>
                                                                </div>
                                                                <div class="modal fade" id="confirmModal-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="confirmModal-{{ loop.index }}" aria-hidden="true">
                                                                    <div class="modal-dialog" role="document">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title font-weight-bold">{{ 'admin.common.delete_modal__title'|trans }}</h5>
                                                                                <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                                            </div>
                                                                            <div class="modal-body text-left">
                                                                                <p class="text-left">{{ 'admin.common.delete_modal__message'|trans({ '%name%': file.file_name }) }}</p>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button class="btn btn-ec-sub" type="button" data-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
                                                                                <a class="btn btn-ec-delete" data-confirm="false"
                                                                                   href="{{ url('admin_content_file_delete', { 'select_file': file.file_path}) }}" {{ csrf_token_for_anchor() }} data-method="delete">
                                                                                    {{ 'admin.common.delete'|trans }}
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                {% endif %}
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-contentsArea__secondaryCol">
                    <div class="c-secondaryCol">
                        <div class="card rounded border-0 mb-4">
                            <div class="card-header">
                                <div class="row">
                                    <div class="col-8"><span class="card-title">{{ 'admin.content.file.directory_tree'|trans }}</span></div>
                                    <div class="col-4 text-right"><a data-toggle="collapse" href="#folderDirectory" aria-expanded="false" aria-controls="folderDirectory"><i class="fa fa-lg fa-angle-down"></i></a></div>
                                </div>
                            </div>
                            <div class="collapse show ec-cardCollapse" id="folderDirectory">
                                <div class="card-body">
                                    <div class="c-directoryTree--folder mb-3">
                                        <ul id="directory_userdata" class="list-unstyled">
                                            <li>
                                                <label class="collapsed" data-toggle="collapse" href="#directory_userdata" aria-expanded="false" aria-controls="directory_userdata">user_data</label>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
