{% extends '@admin/default_frame.twig' %}

{% set menus = ['plg_apg_simple_calendar', 'plg_apg_simple_calendar_admin_config_individual_holidays'] %}

{% block title %}定休日カレンダー{% endblock %}
{% block sub_title %}定休日(個別指定){% endblock %}

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

{% block stylesheet %}
    <link rel="stylesheet" href="{{ asset('assets/css/tempusdominus-bootstrap-4.min.css', 'admin') }}">
    <style type="text/css">
        .datepicker-days th.dow:first-child,
        .datepicker-days td:first-child {
            color: #f00;
        }

        .datepicker-days th.dow:last-child,
        .datepicker-days td:last-child {
            color: #00f;
        }
        @media (min-width: 576px){
            .modal-body dl{
                width: 480px;
            }
            .modal-body dt{
                clear:left;
                float: left;
                width: 120px;
            }
            .modal-body dd{
                float:left;
                width: 360px;
            }
        }
    </style>
{% endblock stylesheet %}

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

            // 削除モーダルのhrefとmessageの変更
            $('#DeleteModal').on('shown.bs.modal', function(event) {
                var target = $(event.relatedTarget);
                // hrefの変更
                $(this).find('[data-method="delete"]').attr('href', target.data('url'));
                // messageの変更
                $(this).find('p.modal-message').text(target.data('message'));
            });

            if ($('[type="date"]').prop('type') != 'date') {
                // input type属性でdateが利用できるかどうか(カレンダー表示できないブラウザ対応)
                $.when(
                    $.getScript("{{ asset('assets/js/vendor/tempusdominus-bootstrap-4.min.js', 'admin') }}")
                ).done(function() {
                    $('input#holiday_target_date').datetimepicker({
                        locale: '{{ eccube_config.locale }}',
                        format: 'YYYY-MM-DD',
                        useCurrent: false,
                        buttons: {
                            showToday: true,
                            showClose: true
                        }
                    });
                });
            }

    });
</script>
{% endblock javascript %}

{% block main %}

    <form id="form_individual" role="form" method="post">
        {{ form_widget(form._token) }}
        <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"><span>個別指定</span></div>
                        <div class="card-body">
                            {% if TargetHoliday.id is empty %}
                                <p>※既に登録済みの日付が指定された場合、名称が上書きされます。</p>
                            {% else %}
                                <p>編集対象（
                                    日付 : {{ TargetHoliday.targetDate|date_day }}、名称 : {{ TargetHoliday.name }}
                                    ）
                                </p>
                            {% endif %}
                            <div class="row mb-2">
                                <div class="col-2">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top"
                                         title="休日とする対象の日付を入力してください。(ex.2020/07/07)">
                                        <span>日付</span>
                                        <i class="fa fa-question-circle fa-lg ml-1"></i>
                                        <span class="badge badge-primary ml-1">必須</span>
                                    </div>
                                </div>
                                <div class="col-3">
                                    {{ form_widget(form.target_date) }}
                                    {{ form_errors(form.target_date) }}
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-2">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top"
                                         title="何の休日かわかるような名称を入力してください">
                                        <span>名称</span>
                                        <i class="fa fa-question-circle fa-lg ml-1"></i>
                                        <span class="badge badge-primary ml-1">必須</span>
                                    </div>
                                </div>
                                <div class="col-3">
                                    {{ form_widget(form.name,{'attr': {'class': ''}}) }}
                                    {{ form_errors(form.name) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if TargetHoliday.id is empty %}
                    <div class="card rounded border-0 mb-4">
                        <div class="card-body p-0">
                            <div class="card rounded border-0">
                                <ul class="list-group list-group-flush sortable-container">
                                    <li class="list-group-item">
                                        <div class="row">
                                            <div class="col-2"><strong>日付</strong></div>
                                            <div class="col-2"><strong>名称</strong></div>
                                        </div>
                                    </li>
                                    {% if Holidays|length > 0 %}
                                        {% for Holiday in Holidays %}
                                            <li class="list-group-item sortable-item">
                                                <div class="row justify-content-around mode-view">
                                                    <div class="col-2 d-flex align-items-center">
                                                        {{ Holiday.targetDate|date_day }}
                                                    </div>
                                                    <div class="col d-flex align-items-center">
                                                        {{ Holiday.name }}
                                                    </div>
                                                    <div class="col-auto text-right">
                                                        <a class="btn btn-ec-actionIcon mr-2 action-edit"
                                                           href="{{ url('apg_simple_calendar_admin_config_individual_holidays_edit', {id: Holiday.id}) }}"
                                                           data-tooltip="true" data-placement="top"
                                                           title="{{ 'admin.common.edit'|trans }}">
                                                            <i class="fa fa-pencil fa-lg text-secondary"></i>
                                                        </a>
                                                        <div class="d-inline-block mr-2" data-tooltip="true"
                                                             data-placement="top"
                                                             title="{{ 'admin.common.delete'|trans }}">
                                                            <a class="btn btn-ec-actionIcon"
                                                               data-toggle="modal" data-target="#DeleteModal"
                                                               data-url="{{ url('apg_simple_calendar_admin_config_individual_holidays_delete', {id: Holiday.id}) }}"
                                                               data-message="{{ 'admin.common.delete_modal__message'|trans({ "%name%" : Holiday.name }) }}">
                                                                <i class="fa fa-close fa-lg text-secondary"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        {% endfor %}
                                    {% endif %}
                                </ul>
                                <!-- 削除モーダル -->
                                <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog"
                                     aria-labelledby="DeleteModal" 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 modal-message"></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" href="#" {{ csrf_token_for_anchor() }}
                                                   data-method="delete" data-confirm="false">
                                                    {{ 'admin.common.delete'|trans }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>


        <div class="c-conversionArea">
            <div class="c-conversionArea__container">
                <div class="row justify-content-between align-items-center">
                    {% if TargetHoliday.id is empty %}
                        <div class="col-6">
                            <div class="c-conversionArea__leftBlockItem">
                                <a class="c-baseLink"
                                   href="{{ url('apg_simple_calendar_admin_config') }}">
                                    <i class="fa fa-backward" aria-hidden="true"></i>
                                    <span>設定</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="row align-items-center justify-content-end">
                                <div class="col-auto">
                                    <button class="btn btn-ec-conversion px-5"
                                            type="submit">
                                        登録
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <div class="col-6">
                            <div class="c-conversionArea__leftBlockItem">
                                <a class="c-baseLink"
                                   href="{{ url('apg_simple_calendar_admin_config_individual_holidays') }}">
                                    <i class="fa fa-backward" aria-hidden="true"></i>
                                    <span>編集をキャンセルする</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="row align-items-center justify-content-end">
                                <div class="col-auto">
                                    <button class="btn btn-ec-conversion px-5"
                                            type="submit">
                                        更新
                                    </button>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </form>
{% endblock %}
