{% extends 'ibs/layouts/base.html' %}

{% block title %}IBS - Project{% endblock %}

{% block content %}
    {% load static humanize mathfilters widget_tweaks %}

    <!-- Start Content-->
    <div class="container-fluid">

        <!-- start page title -->
        {% include 'ibs/partials/content_title.html' with  second_bs="신규 프로젝트" title="토지 정보 관리" %}
        <!-- end page title -->

        <div class="row">
            <form class="form-horizontal p-0 col-12" method="get">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">

                            {% with menu_order='3' %}
                                {% include 'project/partials/head_menu.html' %}
                            {% endwith %}

                            <div class="row">
                                {% include 'ibs/partials/project_select.html' %}
                                <div class="col-sm-12 col-md-6"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body pb-1">
                        <div class="row">
                            <div class="col mb-3">
                                <!-- Button Group -->
                                {% with sub_menu_order='2' %}
                                    {% include 'project/partials/site_sub_menu.html' %}
                                {% endwith %}
                            </div>

                            <form method="post" class="col-12 p-0 needs-validation" novalidate>
                                {% csrf_token %}
                                {{ form.errors }}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                                <div class="col-12 form-row">
                                    <div class="col-sm-12 col-lg-1 bg-light text-center mb-1">
                                        <div class="col p-0 pt-2 pb-2 m-auto h-100"><strong>소유자 등록</strong></div>
                                    </div>
                                    <div class="col-sm-12 col-lg-11">
                                        <div class="col-12 form-row mb-1">
                                            <div class="form-group col-6 col-md-3 col-lg-2 mb-1">
                                                {{ form.own_sort|add_class:"form-control" }}
                                            </div>
                                            <div class="form-group col-6 col-md-3 col-lg-2 mb-1">
                                                {{ form.owner|add_class:"form-control"|attr:"placeholder:소유자" }}
                                            </div>
                                            <div class="form-group col-12 col-md-6 col-lg-2 mb-1">
                                                {{ form.date_of_birth|add_class:"form-control"|attr:"placeholder:생년월일"|attr:"data-provide=datepicker data-date-format=yyyy-mm-dd data-date-autoclose=true data-toggle=input-mask data-mask-format=0000-00-00" }}
                                            </div>
                                            <div class="form-group col-6 col-lg-3 mb-1">
                                                {{ form.phone1|add_class:"form-control"|attr:"placeholder:주연락처"|attr:"data-toggle=input-mask data-mask-format=000-0000-0000 data-reverse=true" }}
                                            </div>
                                            <div class="form-group col-6 col-lg-3 mb-1">
                                                {{ form.phone2|add_class:"form-control"|attr:"placeholder:비상연락처"|attr:"data-toggle=input-mask data-mask-format=000-0000-0000 data-reverse=true" }}
                                            </div>

                                            <div class="form-group col-12 mb-1">
                                                {{ form.sites|add_class:"form-control select2"|attr:"data-placeholder:소유부지 지번 ❖ 필수 선택 ❖"|attr:"data-toggle=select2 required" }}
                                                <div class="invalid-feedback">소유부지 지번을 선택하여 주십시요.</div>
                                            </div>
                                            <div class="form-group col-8 col-md-4 col-lg-1 mb-1">
                                                {{ form.zipcode|add_class:"form-control"|attr:"placeholder:우편번호"|attr:"readonly"|attr:"onclick=sample2_execDaumPostcode('id_')" }}
                                            </div>

                                            <div class="form-group col-4 col-md-2 col-lg-1 mb-1">
                                                <button type="button" class="btn btn-info"
                                                        onclick="sample2_execDaumPostcode('id_')">우편번호
                                                </button>
                                            </div>
                                            <div class="form-group col-md-6 col-lg-4 mb-1">
                                                {{ form.address1|add_class:"form-control"|attr:"placeholder:주소"|attr:"onclick=sample2_execDaumPostcode('id_')" }}
                                            </div>
                                            <div class="form-group col-12 col-md-6 col-lg-3 mb-1">
                                                {{ form.address2|add_class:"form-control"|attr:"placeholder:상세주소" }}
                                            </div>
                                            <div class="form-group col-12 col-md-6 col-lg-3 mb-1">
                                                {{ form.address3|add_class:"form-control"|attr:"placeholder:참고항목" }}
                                            </div>
                                            <div class="form-group col-xs-12 col-lg-10 mb-1">
                                                {{ form.counsel_record|add_class:"form-control"|attr:"placeholder:상담기록"|attr:"rows:2" }}
                                            </div>
                                            {% if request.user.is_superuser or request.user.staffauth.project > '1' %}
                                                <div class="col-6 col-lg-1 text-center m-auto">
                                                    {% if request.GET.id %}<a href="



                                                            {% url 'ibs:project:site-owner' %}{% if request.GET.page %}?page={{ request.GET.page }}{% endif %}">Reset</a>{% endif %}
                                                </div>
                                            {% endif %}
                                            <div class="col-6 col-lg-{% if request.user.is_superuser or request.user.staffauth.project > '1' %}1{% else %}2{% endif %} text-right m-auto">
                                                {% if request.user.is_superuser or request.user.staffauth.project > '1' %}
                                                    <button type="submit"
                                                            class="btn btn-{% if request.GET.id %}success{% else %}primary{% endif %}">
                                                        {% if request.GET.id %}변경{% else %}신규{% endif %}등록
                                                    </button>
                                                {% else %}
                                                    <button type="button" class="btn btn-outline-secondary"
                                                            onclick="alert('토지 정보 관리 권한이 없습니다. 관리자에게 문의하여 주십시요.')">조회권한
                                                        사용자
                                                    </button>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="col-12 table-responsive">
                                <div class="row m-1 mt-3">
                                    <div class="col-6 text-success">
                                        소유자 : {{ total_owner.count }}명 등록
                                        | 소유면적 : {{ total_area|floatformat:"2"|default:"-"|intcomma }}m<sup>2</sup>
                                        ({{ total_area|mul:"0.3025"|floatformat:"2"|intcomma }}평) 등록
                                    </div>
                                    <div class="col-6 text-right">
                                        <a href="{% url 'excel:sites-by-owner' %}?project={{ this_project.id }}">
                                            <i class="mdi mdi-file-excel-box"></i> Excel Export
                                            <i class="mdi mdi-download ml-1"></i>
                                        </a>
                                    </div>
                                </div>
                                <table id="scroll-horizontal-datatable"
                                       class="table table-hover table-bordered table-centered table-condensed table-sm w-100 m-0 nowrap">
                                    <thead>
                                    <tr class="bg-light">
                                        <th class="text-center" colspan="5">소유자 관련 정보</th>
                                        <th class="text-center" colspan="5">소유권 관련 정보</th>
                                    </tr>
                                    <tr>
                                        {#                                        <th class="text-center" rowspan="2">No</th>#}
                                        <th class="text-center bg-success-lighten" rowspan="2" style="width: 8%">소유구분
                                        </th>
                                        <th class="text-center bg-success-lighten" rowspan="2" style="width: 9%">소유자
                                        </th>
                                        <th class="text-center bg-success-lighten" rowspan="2" style="width: 10%">생년월일
                                        </th>
                                        <th class="text-center bg-success-lighten" rowspan="2" style="width: 12%">주연락처
                                        </th>
                                        <th class="text-center bg-success-lighten" rowspan="2" style="width: 9%">
                                            소유부지(지번)
                                        </th>
                                        <th class="text-center bg-info-lighten" rowspan="2" style="width: 11%">소유지분(%)
                                        </th>
                                        <th class="text-center bg-info-lighten" colspan="2">
                                            소유면적 {% if this_project.is_returned_area %}(환지면적 기준){% endif %}
                                        </th>
                                        <th class="text-center bg-info-lighten" rowspan="2" style="width: 11%">소유권 취득일
                                        </th>
                                        <th class="text-center bg-info-lighten" rowspan="2" style="width: 8%">
                                            <a href="javascript: void(0);" class="action-icon">
                                                <i class="mdi mdi-pencil"></i></a>
                                            <a href="javascript: void(0);" class="action-icon">
                                                <i class="mdi mdi-delete"></i></a>
                                        </th>
                                    </tr>
                                    <tr class="bg-info-lighten">
                                        <td class="text-center" style="width: 11%">m<sup>2</sup></td>
                                        <td class="text-center" style="width: 11%">평</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for object in object_list %}
                                        {% for s in object.relations.all %}
                                            {% with num=object.relations.all.count %}
                                                <tr>
                                                    {% if forloop.first %}
                                                        {#                                                        <td class="text-center" rowspan="{{ num }}">{{ object.id }}</td>#}
                                                        <td class="text-center"
                                                            rowspan="{{ num }}">{{ object.get_own_sort_display }}</td>
                                                        <td class="text-center" rowspan="{{ num }}">
                                                            <a href="{% url 'ibs:project:site-owner' %}?{% if request.GET.page %}page={{ request.GET.page }}&{% endif %}{% if request.GET.project %}project={{ request.GET.project }}&{% endif %}id={{ object.id }}">{{ object }}</a>
                                                        </td>
                                                        <td class="text-center"
                                                            rowspan="{{ num }}">{{ object.date_of_birth|date:"Y-m-d"|default:"-" }}</td>
                                                        <td class="text-center"
                                                            rowspan="{{ num }}">{{ object.phone1|default:"-" }}</td>
                                                    {% endif %}

                                                    <td class="text-center">{{ s.site.lot_number }}</td>
                                                    <td class="text-right"><input type="number" name="ratio"
                                                                                  id="id_ratio_{{ s.id }}" step="0.0001"
                                                                                  placeholder="소유지분(%)"
                                                                                  class="form-control"
                                                                                  value="{{ s.ownership_ratio|floatformat:4 }}">
                                                    </td>
                                                    <td class="text-right"><input type="number" name="area"
                                                                                  id="id_area_{{ s.id }}"
                                                                                  step="0.0001" placeholder="면적(㎡)"
                                                                                  class="form-control"
                                                                                  value="{{ s.owned_area|floatformat:4 }}">
                                                    </td>
                                                    <td class="text-right bg-warning-lighten">{{ s.owned_area|mul:"0.3025"|floatformat:4 }}</td>
                                                    <td class="text-center"><input type="text" name="date"
                                                                                   id="id_date_{{ s.id }}"
                                                                                   placeholder="소유권 등기일"
                                                                                   value="{{ s.acquisition_date|date:"Y-m-d" }}"
                                                                                   data-provide="datepicker"
                                                                                   data-date-format="yyyy-mm-dd"
                                                                                   data-date-autoclose="true"
                                                                                   data-toggle="input-mask"
                                                                                   data-mask-format="0000-00-00"
                                                                                   class="form-control" maxlength="10">
                                                    </td>
                                                    <td class="text-center bg-dragula">
                                                        <a href="javascript: relationshipUpdate('{{ s.id }}');"
                                                           class="action-icon">
                                                            <i class="mdi mdi-pencil"></i></a>
                                                        <a href="javascript: relationshipDelete('{{ s.id }}');"
                                                           class="action-icon">
                                                            <i class="mdi mdi-delete"></i></a>
                                                    </td>
                                                </tr>
                                            {% endwith %}
                                        {% endfor %}
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {% if is_paginated %}

                            {# to_first_last :: 맨처음 / 맨끝으로 버튼 사용 여부 #}
                            {# page_class ex:: pagination-rounded pagination-sm pagination-lg justify-content-center justify-content-end #}
                            {% include 'partials/pagination.html' with to_first_last="ok" page_class="pagination-rounded justify-content-end" %}

                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

    </div> <!-- container -->

{% endblock %}

{% block third_party_js %}
    <script>
      window.onload = function () {
        document.getElementById('id_project_sel').setAttribute('onchange', 'submit()')
      }

      function relationshipUpdate(id) {
        const ratio = document.getElementById('id_ratio_' + id).value
        const area = document.getElementById('id_area_' + id).value
        const date = document.getElementById('id_date_' + id).value

        if (confirm('해당 소유권 관련 정보를 업데이트 하시겠습니까??')) {
          let base_url = "{% url 'ibs:project:site-relation' %}?{% if request.GET.page %}page={{ request.GET.page }}&{% endif %}{% if request.GET.project %}project={{ request.GET.project }}&{% endif %}"
          var get_query = 'pk=' + id + '&ratio=' + ratio + '&area=' + area + '&date=' + date
          location.href = base_url + get_query
        } else {
          return
        }
      }

      function relationshipDelete(id) {
        del_url = "/ibs/project/site-relation-delete/" + id + '?'
        {% if request.GET.page %}
          del_url += 'page={{ request.GET.page }}'
        {% endif %}
        {% if request.GET.page and request.GET.project %}
          del_url += '&'
        {% endif %}
        {% if request.GET.project %}
          del_url += 'project={{ request.GET.project }}'
        {% endif %}
        if (confirm('삭제 후 되돌릴 수 없습니다. 해당 소유권 관련 정보를 삭제하시겠습니까?')) {
          location.href = del_url
        } else {
          return
        }
      }
    </script>

    <!-- iOS에서는 position:fixed 버그가 있음, 적용하는 사이트에 맞게 position:absolute 등을 이용하여 top,left값 조정 필요 -->
    <div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
        <img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer"
             style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()"
             alt="닫기 버튼">
    </div>

    <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script src="{% static 'common/js/daum_post_api.js' %}"></script>
{% endblock %}