{#
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 = ['product', 'category_csv_import'] %}

{% block title %}{{ 'admin.product.category_csv_upload'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.product.product_management'|trans }}{% endblock %}

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

{% block javascript %}
    <script src="{{ asset('assets/js/vendor/spin.min.js', 'admin') }}"></script>
    <script>
        $(function() {

            var opts = {
                lines: 13,
                length: 30,
                width: 2,
                radius: 12,
                corners: 1,
                rotate: 0,
                direction: 1,
                color: '#BBB',
                speed: 1,
                trail: 67,
                shadow: true,
                hwaccel: false,
                className: 'spinner',
                zIndex: 2e9,
                top: top
            };

            ImageSpinner = new Spinner(opts).spin(document.getElementById('spinner'));
            ImageSpinner.stop();

            $('#upload-form').submit(function() {
                $('#upload-button').attr('disabled', 'disabled');
                $('#download-button').attr('disabled', 'disabled');
                ImageSpinner.spin(document.getElementById('spinner'));
            });

            $('#file-select').click(function() {
                $('#admin_csv_import_import_file').click();
                $('#admin_csv_import_import_file').on('change', function() {
                    var files = $(this).prop('files');
                    if (files.length) {
                        $('#admin_csv_import_import_file_name').text(files[0].name);
                    }
                });
            });
        });
    </script>
{% endblock javascript %}
{% block main %}
    <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="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.category.csv_upload'|trans }}"><span>{{ 'admin.common.csv_upload'|trans }}</span><i class="fa fa-question-circle fa-lg fa-lg ml-1"></i></div>
                    </div>
                    <div id="ex-csv_category-upload" class="card-body">
                        <div class="row">
                            <div class="col-2"><span>{{ 'admin.common.csv_select'|trans }}</span></div>
                            <div class="col">
                                <form id="upload-form" method="post" action="{{ url('admin_product_category_csv_import') }}" enctype="multipart/form-data">
                                    {{ form_widget(form._token) }}
                                    <div class="mb-2">
                                        <span id="file-select" class="btn btn-ec-regular mr-2">{{ 'admin.common.file_select'|trans }}</span>
                                        <span id="admin_csv_import_import_file_name">{{ 'admin.common.file_select_empty'|trans }}</span>
                                        {{ form_widget(form.import_file, {'attr': {'accept': 'text/csv,text/tsv', 'class': 'd-none'}}) }}
                                        {{ form_errors(form.import_file) }}
                                    </div>
                                    <button class="btn btn-ec-conversion" id="upload-button" type="submit">{{ 'admin.common.bulk_registration'|trans }}</button>
                                    {% for error in errors %}
                                        <div class="text-danger">{{ error }}</div>
                                    {% endfor %}
                                </form>
                            </div>
                        </div>
                        <div id="spinner"></div>
                    </div>
                </div>
                <div class="card rounded border-0 mb-4">
                    <div class="card-header">
                        <div class="row justify-content-between">
                            <div class="col-6">
                                <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.category.csv_format'|trans }}"><span class="align-middle">{{ 'admin.common.csv_format'|trans }}</span><i class="fa fa-question-circle fa-lg fa-lg ml-1"></i></div>
                            </div>
                            <div class="col-4 text-right">
                                <a href="{{ url('admin_product_csv_template', {'type': 'category'}) }}" class="btn btn-ec-regular" id="download-button">{{ 'admin.common.csv_skeleton_download'|trans }}</a>
                            </div>
                        </div>
                    </div>
                    <div id="ex-csv_category-format" class="card-body">
                        <table class="table table-striped table-bordered">
                            <tbody>
                            {% for header, key in headers %}
                                <tr>
                                    <th class="w-25 align-middle table-ec-lightGray" id="file_format_box__header--{{ loop.index }}">{{ header }}
                                        {% if key.required %}
                                            <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
                                        {% endif %}
                                    </th>
                                    <td class="align-middle">
                                        {% if key.description %}
                                            {{ key.description|trans|raw }}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
