{% extends 'vacancy_mgr/base.html' %}
{% load static %}
{% load humanize %}

    {% block head_title %}オーナー情報 {{owner.owner_name}}{% endblock %}
    {% block head %}
        <link rel="stylesheet" href="{% static 'owner/css/style.css' %}">
    {% endblock %}

    {% block page_top %}{% endblock %}

    {% block header %}{% endblock %}

    {% block h1_title %}【オーナー情報】 {{ owner.owner_name }}{% endblock %}

    {% block contents %}
        <div id="data-form">
        {% if back_url %}
            <form action="{% url 'owner_detail' owner.idb64 %}?back_url={{ escaped_back_url }}" method="post" enctype="multipart/form-data">
        {% else %}
            <form action="{% url 'owner_detail' owner.idb64 %}" method="post" enctype="multipart/form-data">
        {% endif %}
                {% csrf_token %}
                {% if form.errors %}
                    {% for field in form %}
                        {% for error in field.errors %}
                            <p>*&nbsp;{{ field.label }} : {{ error }}</p>
                        {% endfor %}
                     {% endfor %}
                {% endif %}
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">オーナーID</label></div>
                    <div class="col col-9 col-md-10 col-form-label">{{ owner.id }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">オーナー名</label></div>
                    <div class="col col-9 col-md-10">{{ form.owner_name }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">カナ</label></div>
                    <div class="col col-9 col-md-10">{{ form.owner_kana }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">法人区分</label></div>
                    <div class="col col-3 col-md-2 text-center">{{ form.is_corporation }}<label class="form-check-label">法人</label></div>
                    <div class="col col-6 col-md-8"></div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">法人オーナー名</label></div>
                    <div class="col col-9 col-md-10">{{ form.corporation_owner_name }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">郵便番号</label></div>
                    <div class="col col-3 col-md-4">{{ form.postal_code }}</div>
                    <div class="col col-6"></div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">住所</label></div>
                    <div class="col col-9 col-md-10">{{ form.address }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">電話番号1</label></div>
                    <div class="col col-3 col-md-4">{{ form.tel1 }}</div>
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">電話番号2</label></div>
                    <div class="col col-3 col-md-4">{{ form.tel2 }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">FAX番号</label></div>
                    <div class="col col-9 col-md-10">{{ form.fax }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">E-MAIL</label></div>
                    <div class="col col-9 col-md-10">{{ form.mail }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">担当者</label></div>
                    <div class="col col-9 col-md-10">
                        <div class="form-inline">
                            [[ staffName ]]{{ form.staff }}&nbsp;
                            <input type="button" value="選択" v-on:click="openStaffModal($event)" class="btn d-block d-flex align-items-center btn-info">&nbsp;
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">備考</label></div>
                    <div class="col col-9 col-md-10">{{ form.note }}</div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">停止 / 削除</label></div>
                    <div class="col col-3 col-md-2 col-form-label text-center">{{ form.is_stopped }}<label class="form-check-label">{{form.is_stopped.label}}</label></div>
                    <div class="col col-3 col-md-2 col-form-label text-center">{{ form.is_deleted }}<label class="form-check-label">{{form.is_deleted.label}}</label></div>
                    <div class="col col-3 col-md-6"></div>
                </div>
                <div class="form-group row">
                    <div class="col col-3 col-md-2 col-form-label"><label class="float-right">登録情報</label></div>
                    <div class="col col-9 col-md-10 col-form-label">
                        <div>
                            <label>登録日時:</label>{{ owner.created_at }}
                            <label>登録ユーザ:</label>{{ owner.created_user }}
                        </div>
                        <div>
                            <label>更新日時:</label>{{ owner.updated_at }}
                            <label>更新ユーザ:</label>{{ owner.updated_user }}
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-2"></div>
                    <div class="col-4">
                        <input type="submit" value="保存" class="btn d-block mx-auto d-flex align-items-center btn-primary">
                    </div>
                    <div class="col-4">
                    {% if back_url %}
                        <a href="{{ back_url }}" class="btn btn-secondary">戻る</a>
                    {% else %}
                        <input type="button" value="閉じる" onclick="window.close();" class="btn d-block mx-auto d-flex align-items-center btn-secondary">
                    {% endif %}
                    </div>
                    <div class="col-2"></div>
                </div>
            </form>

            <modal name="select-staff" :draggable="true" :resizable="true" :width="400" :height="300">
                <div class="modal-header">
                    <h2>スタッフ選択</h2>
                </div>
                <div class="modal-body">
                    <div class="row modal-select-hint">
                        <div class="col col-8">
                            <input type="text" class="form-control" v-model="selectStaffHint">
                        </div>
                        <div class="col col-3">
                            <button v-on:click="narrowDownStaffs($event)" class="btn btn-info">部分一致</button>
                        </div>
                        <div class="col col-1"></div>
                    </div>
                    <div class="row">
                        <div class="col col-12">
                            <select class="modal-select form-control" v-model="selectedStaff">
                                <option v-for="staff in selectStaffs" v-bind:value="staff.id">[[ staff.staff_name ]]</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="row">
                        <div class="col col-2"></div>
                        <div class="col col-4">
                            <button v-on:click="okCloseStaffModal($event)" class="btn d-block mx-auto d-flex align-items-center btn-primary">OK</button>
                        </div>
                        <div class="col col-4">
                            <button v-on:click="cancelCloseStaffModal($event)" class="btn d-block mx-auto d-flex align-items-center btn-secondary">キャンセル</button>
                        </div>
                        <div class="col col-2"></div>
                    </div>
                </div>
            </modal>

        </div>
    {% endblock %}

    {% block footer %}{% endblock %}

    {% block page_bottom %}
        <script type="text/javascript" src="{% static 'owner/js/owner.js' %}"></script>
        <script type="text/javascript">
            var app = createOwnerVue(
                "{{ api_key }}",
                {{ owner.staff.id }},
                "{{ owner.staff.staff_name | default_if_none:'' }}",
            );
        </script>
    {% endblock %}
