{% extends 'order_contract/add_option/add_option_base.html' %}
{% load staticfiles %}
{% load humanize %}
{% block extrastyle %}
<link rel="stylesheet" href="{% static 'order_contract/css/addOption.css' %}">
<link rel="stylesheet" href="{% static 'order_contract/css/estimate.css' %}">
{% endblock extrastyle %}

{% block step_image %}
        <ul class="carouselList">
            <a href="{% url 'simulation:extend_mapping:index' order_id %}"><li>1. 디자인 제안</li></a>
            <a href="{% url 'order_contract:option_index' order_id %}"><li>2. 추가옵션</li></a>
            <a href="{% url 'order_contract:estimate_index' order_id %}"><li class="active">3. 공급가격</li></a>
            <li>4. 계약서 작성</li>
        </ul>
{% endblock step_image %}
{% block content %}
    <article>
        {% for set in final_set %}   
        <table class="estimate01T" data-final="{{ set.final_couple_id }}">
            <colgroup>
                <col width="10%">
                <col width="20%">
                <col width="15%">
                <col width="15%">
                <col width="40%">
            </colgroup>
            <thead>
                <tr>
                    <th>품번</th>
                    <th>구분</th>
                    <th>TAG가격</th>
                    <th data-rate="{{ set.discount_rate }}" data-acc-rate="{{ set.acc_discount_rate }}" data-max="{{ set.max_rate }}">공급가격</th>
                    <th>이미지</th>
                </tr>
            </thead>
            <tbody>
                
                {% for main_fabric in set.boy_product_set %}
                {% if main_fabric.product.product_type.name == 'acc' %}
                <tr class="row-acc">
                {% else %}
                <tr>
                {% endif %}
                    <td>{{ main_fabric.product.name }}-{{ main_fabric.index }}</td>
                    <td>{{ main_fabric.product.product_type.get_name_display }}(남아)</td>
                    <td>{{ main_fabric.price|intcomma }}원</td>
                    <td></td>
                    {% ifchanged %}
                    <!-- 렌더링 된 내용을 이전 상태와 비교하여 내용이 변경된 경우에만 내용을 표시 -->
                    <td rowspan="13" class="modelImg">
                        <img data-couple-id="{{ set.couple_id }}" src="{{ set.image.url }}" alt="">
                        {% for obj_quantity in set.option_set %}
                        <img src="{{ obj_quantity.option.front_image.url }}" alt="">
                        {% endfor %}
                    </td>
                    {% endifchanged %}
                </tr>
                {% endfor %}
                <tr class="total-boy">
                    <td>남아 합계</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                {% for main_fabric in set.girl_product_set %}
                {% if main_fabric.product.product_type.name == 'acc' %}
                <tr class="row-acc">
                {% else %}
                <tr>
                {% endif %}
                    <td>{{ main_fabric.product.name }}-{{ main_fabric.index }}</td>
                    <td>{{ main_fabric.product.product_type.get_name_display }}(여아)</td>
                    <td>{{ main_fabric.price|intcomma }}원</td>
                    <td></td>
                </tr>
                {% endfor %}
                <tr class="total-girl">
                    <td>여아 합계</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                {% for i in set.loop_range %}
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                {% endfor %}
                <tr class="row-total">
                    <td>합 계</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        {{ set.total_count }}
        {% if forloop.last %}
        {% if set.option_set %}
        {% for obj_quantity in set.option_set %}
        <table class="optionTable" data-option="{{ obj_quantity.option.id }}">
            <colgroup>
                <col width="10%">
                <col width="20%">
                <col width="15%">
                <col width="15%">
                <col width="40%">
            </colgroup>
            <thead>
                <tr>
                    <th>품번</th>
                    <th>구분</th>
                    <th>TAG가격</th>
                    <th data-rate="{{ obj_quantity.discount_rate }}" data-max="{{ obj_quantity.option.sub_category.maximum_discount_rate }}">
                        공급가격
                        {% if obj_quantity.option.sub_category.name == '가방' %}
                        <br>
                        <span class="bagComment">※ 유치원명 프린트 비용은<br>별도 금액입니다.</span>
                        {% endif %}
                    </th>
                    <th>이미지</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ obj_quantity.option.name }}</td>
                    <td>{{ obj_quantity.option.sub_category.name }}</td>
                    <td>{{ obj_quantity.option.price|intcomma }}원</td>
                    <td></td>
                    <td><img src="{{ obj_quantity.option.thumb.url }}" alt=""></td>
                </tr>
            </tbody>
        </table>
        {% endfor %}
        {% endif %}
        {% endif %}
        {% endfor %}
        <div class="hello menu-discount-couple">
            <label for="inp-discount-product">Product</label><br>
            <input id="inp-discount-product" type="number" min="0" name="price" placeholder="할인율"><span> %</span>
            <p class="menu-discount-acc">
                <label for="inp-discount-acc">Acc</label><br>
                <input id="inp-discount-acc" type="number" min="0" name="price" placeholder="할인율"><span> %</span>
            </p>
            <button class="helloSubmit">확인</button>
        </div>
        <div class="hello menu-discount-option">
            <input id="inp-discount-option" type="number" min="0" name="price" placeholder="할인율"><span> %</span>
            <button class="helloSubmit">확인</button>
        </div>
    </article>
{% endblock content%}
{% block step_btn %}
    <footer>
        <div class="arrow_left"><a href="{% url 'order_contract:option_index' order_id %}"><img src="{% static 'order_contract/images/arrow_left.png' %}"></a></div>
        <p>COPYRIGHT @ 2017 SMART FNC ALL RIGHT RESERVED</p>
        <div class="arrow_right"><a href="#"><img src="{% static 'order_contract/images/arrow_right.png' %}"></a></div>
    </footer>
{% endblock step_btn %}

{% block modal %}
    <div class="Modalmask"></div>
    <div class="ModelModalWrap">
        <div class="closebtn"><img src="{% static 'order_contract/images/closeIcon.png' %}"></div>
        <div class="mainModelWrap"></div>
        <div class="favoriteContent">
            <!-- {% include 'order_contract/add_option/favorite_set_list.html' %} -->
        </div>
    </div>

    <div class="Modalmask"></div>
    <div class="ModalPW">
        <div class="closebtn"><img src="{% static 'order_contract/images/closeIcon.png' %}"></div>
        <img class="lockImg" src="{% static 'base/image/unlock.png' %}">
        <p>비밀번호를 다시 한번 입력 해 주세요</p>
        <input type="password" name="" class="ModalPWInput">
        <button class="ModalPWBtn">확인</button>
    </div>
{% endblock modal %}

{% block extrascript %}
<script src="{% static 'order_contract/js/estimate.js' %}"></script>
<script src="{% static 'base/js/pdfmake.min.js' %}"></script>
<script src="{% static 'base/js/html2canvas.js' %}"></script>
<script src="{% static 'base/js/vfs_fonts.js' %}"></script>
<script type="text/javascript">
    var order_id = {{ order_id }};
    var username = "{{ user.username }}";
    var nextPage = "{% url 'order_contract:contract_index' order_id %}";

    $(".arrow_right").on('click', function() {   
        var pdfFile;
        var $elements = $('table'),
            content = [],
            count = 0;
            docDefinition = {content: content};

        for (i = $elements.length - 1; i >= 0; i--) {
            makeCanvas(i); 
        } 

        function makeCanvas(idx) {
            count += 1;
            html2canvas($elements[idx], {
                onrendered: function(canvas) {
                    var data = canvas.toDataURL();
                    content[idx] = {
                        image:data, 
                        width:520,
                        margin: [0,20]
                    };
                    count -= 1;
                    if (count === 0) {
                        pdfMake.createPdf(docDefinition).getDataUrl(function(dataUrl) {
                            var pdfFile = dataUrl;
                            $.ajax({
                                type: 'POST',
                                url: '/order_contract/estimate/pdf/save/',
                                data: {
                                    'order_id': order_id,
                                    'pdf_file': pdfFile
                                },
                                async: false,
                                success: function() {
                                    window.location.href = nextPage;
                                }
                            }); 
                        });
                    }
                }
            })
        }
    });
</script>
{% endblock extrascript %}

</body>
</html>