{% load static %}
{% load humanize %}

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta name="robots" content="none" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <title>{{ room.building.building_name }} {{ room.room_no }} 号室</title>
    <link rel="shortcut icon" href="{% static 'vacancy_mgr/images/favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'lib/bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'property/css/ledger.css' %}">
    <script type="text/javascript" src="{% static 'lib/jquery/jquery-3.4.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'lib/bootstrap/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'lib/vue/vue.min.js' %}"></script>
</head>
<body>
    <div id="container">
        <div id="header">
            <div class="row">
                <div id="btn_print" class="col col-12">
                    <input type="button" value="印刷" onclick="window.print();"/>
                </div>
            </div>
        </div>

        <div id="contents">
            <div id = "details">
                <div class="row">
                    <div class="col col-12 ledger-title">
                        {{ room.building.building_name | default_if_none:'' }}
                        {% if room.room_no %} {{ room.room_no }}号室{% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="col col-8 address">
                        <div>〒{{ room.building.postal_code | default_if_none:''}} {{ room.building.address | default_if_none:''}}</div>
                        {% if room.building.nearest_station1 %}<div>1: {{ room.building.nearest_station1 }}</div>{% endif %}
                        {% if room.building.nearest_station2 %}<div>2: {{ room.building.nearest_station2 }}</div>{% endif %}
                        {% if room.building.nearest_station3 %}<div>3: {{ room.building.nearest_station3 }}</div>{% endif %}
                    </div>
                    <div class="col col-4 building-info">
                        {% if room.building.building_type.name %}<div>種別: {{ room.building.building_type.name }}</div>{% endif %}
                        <div>築年月: {{ room.building.build_year}}年{{ room.building.build_month}}月</div>
                        {% if room.building.structure.name %}<div>構造: {{ room.building.structure.name}}</div>{% endif %}
                        <div>所在階: {{ room.room_floor }}階 / {{ room.building.building_floors }}階建 総戸数: {{ room.building.building_rooms }}戸</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-12 room-info">
                        間取り: {{ room.layout_type.name | default_if_none:'' }}
                        {% if room.layout_detail_text %}（{{ room.layout_detail_text }}）{% endif %}
                        {% if room.direction.name %}{{ room.direction.name }}向き{% endif %}
                        専有面積: {{ room.room_area_text }}m<sup>2</sup>
                        バルコニー面積: {{ room.balcony_area_text }}m<sup>2</sup>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-12 monthly-cost">
                        <div>【月額費用】</div>
                        <div>
                            <span class="nowrap">賃料{{ room.rent_text }}</span>
                            <span class="nowrap">{{ condo_fees_name }}{{ room.condo_fees_text }}</span>
                            <span class="nowrap">水道費{{ room.water_cost_text }}</span>
                            {% if room.payment_fee_text %}<span class="nowrap">{{ room.payment_fee_text }}</span>{% endif %}
                            {% if room.monthly_cost_text1 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text2 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text3 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text4 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text5 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text6 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text7 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text8 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text9 %}<span class="nowrap">{{ room.monthly_cost_text1 }}</span>{% endif %}
                            {% if room.monthly_cost_text10 %}<span class="nowrap">{{ room.monthly_cost_text1 }</span>}{% endif %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-3 deposit">
                        <div>【敷金・礼金等】</div>
                        <div>
                            <div>
                                {% if room.deposit_text1 %}<span class="nowrap">{{ room.deposit_text1 }}</span>{% endif %}
                                {% if room.deposit_text2 %}<span class="nowrap">{{ room.deposit_text2 }}</span>{% endif %}
                            </div>
                            <div>
                                {% if room.key_money_text1 %}<span class="nowrap">{{ room.key_money_text1 }}</span>{% endif %}
                                {% if room.key_money_text2 %}<span class="nowrap">{{ room.key_money_text2 }}</span>{% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col col-3 contract-span">
                        <div>【契約期間等】</div>
                        <div>
                            <div>契約期間: {{ room.contract_span_text | default_if_none:'' }}</div>
                            {% if room.renewal_fee_text %}<div>更新料{{ room.renewal_fee_text }}</div>{% endif %}
                            {% if room.renewal_charge_text %}<div>更事務手数料{{ room.renewal_charge_text }}</div>{% endif %}
                            {% if room.recontract_fee_text %}<div>再契約料{{ room.recontract_fee_text }}</div>{% endif %}
                        </div>
                    </div>
                    <div class="col col-3 garage">
                        <div>【駐車場】</div>
                        <div>種別: {{ room.building.garage_type.name }}</div>
                        {% if room.building.garage_distance > 0 %}
                        <div>距離: {{ room.building.garage_distance }} m</div>
                        {% endif %}
                        {% if room.building.garage_fee_lower > 0 %}
                        <div>
                            月額: {{ room.building.garage_fee_lower | intcomma }}円
                            {% if room.building.garage_fee_upper > building.garage_fee_lower %}
                                〜{{ room.building.garage_fee_upper | intcomma }}円
                            {% endif %}
                            {% if room.building.garage_fee_tax_type.text %}
                                （{{ room.building.garage_fee_tax_type.text }}）
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                    <div class="col col-3 bike-park">
                        <div>【駐輪場】</div>
                        <div>種別: {{ room.building.bike_parking_type }}</div>
                        {% if room.building.bike_parking_fee_lower > 0 %}
                        <div>
                            月額: {{ room.building.bike_parking_fee_lower | intcomma }}円
                            {% if room.building.bike_parking_fee_upper > building.bike_parking_fee_lower %}
                                〜{{ room.building.bike_parking_fee_upper | intcomma }}円
                            {% endif %}
                            {% if room.building.bike_parking_fee_tax_type.text %}
                                （{{ room.building.bike_parking_fee_tax_type.text }}）
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    <div class="col col-6 guarantee">
                        <div>【火災保険】</div>
                        <div>
                            <div>{{ room.insurance_text | default_if_none:'' }}</div>
                        </div>
                    </div>
                    <div class="col col-6 guarantee">
                        <div>【家賃保証会社】</div>
                        <div>
                            <div>
                                家賃保証: {{ room.guarantee_type.name | default_if_none:'' }}
                                {% if room.guarantee_company %}（{{ room.guarantee_company }}）{% endif %}
                            </div>
                            {% if room.guarantee_fee %}<div>保証料: {{ room.guarantee_fee }}</div>{% endif %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col col-12 equipments">
                        <div>【主要設備等】</div>
                        <div>
                            <span class="nowrap">浴室/{{ room.bath_type.name }}</span>
                            <span class="nowrap">トイレ/{{ room.toilet_type.name }}</span>
                            <span class="nowrap">キッチン/{{ room.kitchen_range_type.name }}</span>
                            <span class="nowrap">インターネット/{{ room.internet_type.name }}</span>
                            <span class="nowrap">洗濯機設置/{{ room.washer_type.name }}</span>
                            <span class="nowrap">ペット/{{ room.pet_type.name }}</span>
                            <span class="nowrap">楽器/{{ room.instrument_type.name }}</span>
                        </div>
                        {% if equipments %}
                        <div>【その他設備】</div>
                        <div>{{ equipments }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div id="images">
                <div class="row">
                    <div class="col col-4">
                        <img src="/viewer/public_media/buildings/{{ room.building.file_oid }}/pictures/{{ building_image.file_name }}" alt="建物外観" class="img-fluid ">
                    </div>
                    <div class="col col-4">
                        <img src="/viewer/public_media/buildings/{{ room.building.file_oid }}/pictures/{{ room_image.file_name }}" alt="室内" class="img-fluid">
                    </div>
                    <div class="col col-4">
                        <img src="/viewer/public_media/buildings/{{ room.building.file_oid }}/pictures/{{ layout_image.file_name }}" alt="間取図" class="img-fluid">
                    </div>
                </div>
                <div class="row">
                    <div class="col col-12">
                        {% if room.building.lat > 0 and room.building.lng > 0 %}
                        <div id="id_map">
                            <l-map :zoom="zoom" :center="center">
                                <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
                                <l-marker :lat-lng="marker" :icon="icon"></l-marker>
                            </l-map>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% if user.staff.department %}
            <div id="contact">
                <div class="row">
                    <div class="col col-12">
                        <div>【連絡先】
                        {{ company.company_name }} {{ user.staff.department.department_name }}
                        〒{{ user.staff.department.postal_code }} {{ user.staff.department.address }}
                        TEL: {{ user.staff.department.tel }}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <link rel="stylesheet" href="{% static 'lib/leaflet/leaflet.css' %}" />
    <script src="{% static 'lib/leaflet/leaflet.js' %}"></script>
    <script src="{% static 'lib/vue2-leaflet/vue2-leaflet.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'property/js/ledger.js' %}"></script>
    <script type="text/javascript">
        var app = createLedgerVue(
            {{ room.building.lat }},
            {{ room.building.lng }},
        );
    </script>

</body>
</html>