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

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

{% block content %}
    {% load static humanize 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='2' %}
                                {% 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>

            <form method="post" name="form1" id="form1" class="col-12 needs-validation p-0" novalidate>
                {% csrf_token %}
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body pb-1">
                            <div class="form-row">

                                <div class="col-12 mb-3">
                                    <!-- Button Group -->
                                    {% with sub_menu_order='2' %}
                                        {% include 'project/partials/second_menu.html' %}
                                    {% endwith %}
                                </div>

                                <div class="col-12 bg-nav-pills form-row p-2">
                                    <div class="col-1 text-center"><strong>타입명칭</strong></div>
                                    <div class="col-1 text-center"><strong>타입색상</strong></div>
                                    <div class="col-2 text-center"><strong>전용면적(m<sup>2</sup>)</strong></div>
                                    <div class="col-2 text-center"><strong>공급면적(m<sup>2</sup>)</strong></div>
                                    <div class="col-2 text-center"><strong>계약면적(m<sup>2</sup>)</strong></div>
                                    <div class="col-2 text-center"><strong>평균가격</strong></div>
                                    <div class="col-2 text-center"><strong>세대 수</strong></div>
                                </div>

                                {{ formset.management_form }}

                                <fieldset class="empty-form col-12 p-0" style="display: none">
                                    <fieldset>
                                        <div class="col-12 p-1">
                                            <div class="form-row col-12">
                                                <div class="col-1">
                                                    <input type="text" name="form-__prefix__-name" maxlength="10"
                                                           placeholder="타입명칭" class="form-control"
                                                           id="id_form-__prefix__-name">
                                                </div>
                                                <div class="col-1">
                                                    <input type="color" name="form-__prefix__-color" maxlength="7"
                                                           class="form-control" id="id_form-__prefix__-color">
                                                </div>
                                                <div class="col-2">
                                                    <input type="number" name="form-__prefix__-actual_area" min="0"
                                                           placeholder="전용면적" class="form-control text-right"
                                                           id="id_form-__prefix__-actual_area">
                                                </div>
                                                <div class="col-2">
                                                    <input type="number" name="form-__prefix__-supply_area" min="0"
                                                           placeholder="공급면적" class="form-control text-right"
                                                           id="id_form-__prefix__-supply_area">
                                                </div>
                                                <div class="col-2">
                                                    <input type="number" name="form-__prefix__-contract_area" min="0"
                                                           placeholder="계약면적" class="form-control text-right"
                                                           id="id_form-__prefix__-contract_area">
                                                </div>
                                                <div class="col-2">
                                                    <input type="number" name="form-__prefix__-average_price" min="0"
                                                           placeholder="평균가격" class="form-control text-right"
                                                           id="id_form-__prefix__-average_price">
                                                </div>
                                                <div class="col-1">
                                                    <input type="number" name="form-__prefix__-num_unit" min="0"
                                                           placeholder="세대수" class="form-control text-right"
                                                           id="id_form-__prefix__-num_unit">
                                                </div>
                                                <div class="form-check col-1 align-self-center">
                                                    <a href="javascript:void(0)" class="font-18"
                                                       style="color: #999">
                                                        <i class="mdi mdi-close-circle"
                                                           data-formset-remove-form></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </fieldset>

                                <fieldset class="forms col-12 p-0">
                                    {% for form in formset %}
                                        {% for hidden in form.hidden_fields %}
                                            {{ hidden }}
                                        {% endfor %}
                                        <fieldset>
                                            <div class="col-12 p-1">
                                                <div class="form-row col-12">
                                                    <div class="col-1">
                                                        {{ form.name|add_class:"form-control"|attr:"placeholder:타입명칭" }}
                                                        <span class="text-danger">{{ form.name.errors }}</span>
                                                    </div>
                                                    <div class="col-1">
                                                        {{ form.color|add_class:"form-control" }}
                                                        <span class="text-danger">{{ form.color.errors }}</span>
                                                    </div>

                                                    <div class="col-2">
                                                        {{ form.actual_area|add_class:"form-control text-right"|attr:"placeholder:전용면적" }}
                                                        <span class="text-danger">{{ form.average_price.errors }}</span>
                                                    </div>
                                                    <div class="col-2">
                                                        {{ form.supply_area|add_class:"form-control text-right"|attr:"placeholder:공급면적" }}
                                                        <span class="text-danger">{{ form.average_price.errors }}</span>
                                                    </div>
                                                    <div class="col-2">
                                                        {{ form.contract_area|add_class:"form-control text-right"|attr:"placeholder:계약면적" }}
                                                        <span class="text-danger">{{ form.average_price.errors }}</span>
                                                    </div>

                                                    <div class="col-2">
                                                        {{ form.average_price|add_class:"form-control text-right"|attr:"placeholder:평균가격" }}
                                                        <span class="text-danger">{{ form.average_price.errors }}</span>
                                                    </div>
                                                    <div class="col-1">
                                                        {{ form.num_unit|add_class:"form-control text-right"|attr:"placeholder:세대수" }}
                                                        <span class="text-danger">{{ form.num_unit.errors }}</span>
                                                    </div>
                                                    {% if form.name.errors or form.average_price.errors or form.num_unit.errors %}
                                                        <div class="form-check col-1 align-self-center">
                                                            <a href="{% url 'ibs:project:set-unit-type' %}" class="font-18"
                                                               style="color: #999">
                                                                <i class="mdi mdi-close-circle"
                                                                   data-formset-remove-form></i>
                                                            </a>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </fieldset>
                                    {% endfor %}
                                </fieldset>

                                <fieldset
                                        class="controls form-row form-group mb-0 justify-content-end row pt-2 col-12 bg-light border-top">
                                    <div class="col-11">
                                        <div class="form-group col-12 mt-0 row add-form-row justify-content-end">
                                            <a href="javascript:void(0)" data-formset-add-form>
                                                <i class="mdi mdi-plus-circle-outline text-info font-18"></i> 타입 추가하기
                                            </a>
                                        </div>
                                    </div>
                                </fieldset>
                                {# 계약금 인라인 폼셋 finish #}
                            </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 class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group mb-0 justify-content-end row">
                                    <div class="col-12">
                                        {% if request.user.is_superuser or request.user.staffauth.project > '1' %}
                                            <button type="submit" class="btn btn-primary">등록하기</button>
                                        {% else %}
                                            <button type="button" class="btn btn-outline-secondary"
                                                    onclick="alert('세부 정보 관리 권한이 없습니다. 관리자에게 문의하여 주십시요.')">조회권한 사용자
                                            </button>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div> <!-- container -->

{% endblock %}

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

    <!-- formset add form script -->
    <script src="{% static 'common/js/formset_add_form.js' %}"></script>
{% endblock %}