{% extends "base/base.html" %}
{% load staticfiles %}

{% block staticfile %}
<link rel="stylesheet" href="{% static 'css/schedule.css' %}">
<link rel="stylesheet" href="{% static 'css/simple-calendar.css' %}">
<script type="text/javascript" src="{% static 'js/jquery.simple-calendar.js' %}"></script>
<script>
    $(document).ready(function() {
        var platform = window.navigator.platform;
        var os;
        var macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];
        var orderCount = '{{ designOrderCount }}';
        var yarnCount = '{{ yarnCount }}';
        var beamCount = '{{ beamCount }}';
        var rawCount = '{{ rawCount }}';

        if (macosPlatforms.indexOf(platform) !== -1) {
            os = 'Mac OS';
        }

        $('#calendar').simpleCalendar({
            fixedStartDay: false
        });

        if(orderCount >= 13 && os != 'Mac OS'){
            $('#orderDesign tr > td:nth-child(5)').css('width', '77px');
        }

        if(yarnCount > 10 && os != 'Mac OS'){
            $('#yarnTable tr > td:nth-child(6)').css('width', '65px');
        }

        if(beamCount > 10 && os != 'Mac OS'){
            $('#beamTable tr > td:nth-child(4)').css('width', '54px');
        }

        if(rawCount > 10 && os != 'Mac OS'){
            $('#rawTable tr > td:nth-child(2)').css('width', '64px');
        }
    });

    function selectOrder(orderId) {
        $('.orderTr').removeClass('selected');
        var selectedOrderTr = '#order' + orderId;
        $(selectedOrderTr).addClass('selected');
        $('#orderId').val(orderId);
        $('#orderName').val($(selectedOrderTr + '>td:nth-child(1)').html());
        $.ajax({
            url:'/schedule/selectOrder',
            type: 'POST',
            cache:false,
            data:{'orderId': orderId},
            dataType:'json',
            async: false,
            success: function(res){
                console.log(res);
                res.trs.forEach(function (trsObj) {
                    $('#knitMachine' + trsObj.trs_code).text(trsObj.dailyOutPut + 'yard')
                });
            },
            error: function(e){
                console.log(e)
            }
        });
    }

    function showWarpMachineInfo(id) {
        console.log(id);
        $('#mask').css('display', 'block');
        $('#detailOrderModal').css('display', 'block');
        event.stopPropagation();
    }

    function showKnitMachineInfo(id) {
        console.log(id);
        $('#mask').css('display', 'block');
        $('#detailOrderModal').css('display', 'block');
        event.stopPropagation();
    }

    function selectMachine(type, id) {
        if(type == 1){
            $('.warpMachine').removeClass('selected');
            $('#warpMachine' + id).addClass('selected');
            $('#warpMachineId').val(id);
            $('#warpMachineName').val($('#warpMachineName' + id).html());
        }else{
            $('.knitMachine').removeClass('selected');
            $('#knitMachine' + id).addClass('selected');
            $('#knitMachineId').val(id);
            $('#knitMachineName').val($('#knitMachineName' + id).html());
        }
    }

    function closeModal(){
       $('#detailOrderModal').css('display','none');
       $('#mask').css('display','none');
    }

    function closeModal1(){
       $('#detailOrderModalYarn').css('display','none');
       $('#mask').css('display','none');
    }

    function showYarnInfo(id) {
        console.log(id);
        $.ajax({
            url:'/material/getYarnInfoByJson',
            type: 'POST',
            cache:false,
            data:{'id': id},
            dataType:'json',
            async: false,
            success: function(res){
                $('#yarnName').html(res.name);
                $('#yarnCode').html(res.code);
                $('#yarnQty').html(res.qty);
                $('#yarnMaker').html(res.maker);
                $('#yarnCount').html(res.count);
                $('#yarnFilament').html(res.filament);
                $('#yarnContraction').html(res.contraction);
                $('#yarnMaterial').html(res.material);
                $('#yarnKind').html(res.kind);
                $('#yarnColor').html(res.color);
            },
            error: function(e){
                console.log(e)
            }
        });
        $('#detailOrderModalYarn').css('display','block');
        $('#mask').css('display','block');
    }

</script>
{% endblock staticfile %}

{% block content %}
<div id="ContentWrap">
    <div>
        <h4>Calendar</h4>
        <div class="calendarMachine">
            <div id="calendar"></div>
            <hr>
            <h4>Machine Schedule</h4>
            <div id="machineSchedule">
                <div id="warpMachineSchedule">
                    <div>
                        <h4>정경기</h4>
                        <div>

                        </div>
                    </div>
                </div>
                <div class="division"></div>
                <div id="knitMachineSchedule">
                    <div>
                        <h4>경편기</h4>
                        <div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <h4>Schedule</h4>
        <div class="orderMaterial">
            <div id="orderDesign">
                <div class="machine">
                    <div class="warpMachineList">
                        <h4>정경기</h4>
                        <div>
                            {% for warpMachineObj in warpMachineList %}
                                <div class="warpMachine" id="warpMachine{{ warpMachineObj.id }}" onclick="selectMachine(1, {{ warpMachineObj.id }})">
                                    <div>
                                        <div id="warpMachineName{{ warpMachineObj.id }}">{{ warpMachineObj.tws_code }}</div>
                                        <img class="infoBtn" onclick="showWarpMachineInfo('{{ warpMachineObj.tws_code }}')" src="{% static 'image/information.png' %}">
                                    </div>
                                    <div><div>{{ warpMachineObj.tws_name }}</div></div>
                                    <div><div id="warpMachine{{ warpMachineObj.tws_code }}">Order를 선택하세요</div></div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="division"></div>
                    <div class="knitMachineList">
                        <h4>경편기</h4>
                        <div>
                            {% for knitMachineObj in knitMachineList %}
                                <div class="knitMachine" id="knitMachine{{ knitMachineObj.id }}" onclick="selectMachine(2, {{ knitMachineObj.id }})">
                                    <div>
                                        <div id="knitMachineName{{ knitMachineObj.id }}">{{ knitMachineObj.trs_code }}</div>
                                        <img class="infoBtn" onclick="showKnitMachineInfo('{{ knitMachineObj.trs_code }}')" src="{% static 'image/information.png' %}">
                                    </div>
                                    <div><div>{{ knitMachineObj.trs_model_name }}</div></div>
                                    <div><div id="knitMachine{{ knitMachineObj.trs_code }}">Order를 선택하세요</div></div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="scheduleOrder">
                    <h4>Order</h4>
                    <div class="order">
                        <table>
                            <col width="26%">
                            <col width="20%">
                            <col width="14%">
                            <col width="20%">
                            <col width="20%">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Design</th>
                                    <th>Manager</th>
                                    <th>Order Date</th>
                                    <th>Due Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in designOrderList %}
                                    <tr class="orderTr" onclick="selectOrder({{ order.id }})" id="order{{ order.id }}">
                                        <td>{{ order.code }}</td>
                                        <td>{{ order.design_data_id.CAD_Design_Data_name }}</td>
                                        <td>{{ order.order_id.manager.name }}</td>
                                        <td>{{ order.order_id.order_date|date:"Y-m-d" }}</td>
                                        <td>{{ order.order_id.due_date|date:"Y-m-d" }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <hr>
            <form method="post" action="/schedule/createSchedule">
                <div class="createScheduleForm">
                    <div>Order</div>
                    <div><input type="text" id="orderName" disabled><input type="hidden" name="orderId" id="orderId"> </div>
                    <div>Warping</div>
                    <div>
                        <div>
                            <input type="text" id="warpMachineName" disabled><input type="hidden" id="warpMachineId" name="warpMachineId">
                        </div>
                        <div>
                            <input type="datetime-local" id="warpStartTime" name="warpStartTime">
                        </div>
                        <div>
                            <input type="datetime-local" id="warpEndTime" name="warpEndTime">
                        </div>
                    </div>
                    <div>
                        Knitting
                    </div>
                    <div>
                        <div>
                            <input type="text" id="knitMachineName" disabled><input type="hidden" id="knitMachineId" name="knitMachineId">
                        </div>
                        <div>
                            <input type="datetime-local" id="knitStartTime" name="knitStartTime">
                        </div>
                        <div>
                            <input type="datetime-local" id="knitEndTime" name="knitEndTime">
                        </div>
                    </div>
                    <div>
                        <button>스케줄저장</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="material">
            <div class="yarnMaterial">
                <h4>Yarn</h4>
                <div>
                    <table id="yarnTable">
                        <thead>
                            <tr>
                                <th>이름</th>
                                <th>코드</th>
                                <th>굵기</th>
                                <th>필라멘트</th>
                                <th>색</th>
                                <th>수량</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for yarnObj in yarnList %}
                                <tr onclick="showYarnInfo({{ yarnObj.id }})">
                                    <td>{{ yarnObj.name }}</td>
                                    <td>{{ yarnObj.code }}</td>
                                    <td>{{ yarnObj.count }}</td>
                                    <td>{{ yarnObj.filament }}</td>
                                    <td>{{ yarnObj.color }}</td>
                                    <td>{{ yarnObj.qty }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="beamMaterial">
                <h4>Beam</h4>
                <div>
                    <table id="beamTable">
                        <thead>
                            <tr>
                                <th>이름</th>
                                <th>실</th>
                                <th>크기</th>
                                <th>실 수량</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for beamObj in beamList %}
                                <tr onclick="showBeam({{ beamObj.id }})">
                                    <td>{{ beamObj.name }}</td>
                                    <td>{{ beamObj.yarn.name }}</td>
                                    <td>{{ beamObj.size }}</td>
                                    <td>{{ beamObj.yarn_qty }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="rawMaterial">
                <h4>Raw</h4>
                <div>
                    <table id="rawTable">
                        <thead>
                            <tr>
                                <th>디자인</th>
                                <th>재고</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for rawObj in rawList %}
                                <tr onclick="showRaw({{ rawObj.id }})">
                                    <td>{{ rawObj.designData_id.CAD_Design_Data_name }}</td>
                                    <td>{{ rawObj.qty }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="detailOrderModal">
    <div>
        <h3>기계 상세보기</h3>
    </div>
    <div class="inputTab fix">
    </div>
    <div id="subModalBtnBox">
        <span onclick="closeModal()">닫기</span>
    </div>
</div>
<div id="detailOrderModalYarn">
    <div>
        <h3>원사 상세보기</h3>
    </div>
    <div class="inputTab fix">
        <div>
            <div class="line">
                <label for="detailCompany">이름</label>
                <div id="yarnName"></div>
            </div>
            <div class="line">
                <label for="detailBuyer">메이커</label>
                <div id="yarnMaker"></div>
            </div>
            <div class="line">
                <label for="detailManager">필라멘트</label>
                <div id="yarnFilament"></div>
            </div>
            <div class="line">
                <label for="detailOrderDate">재료</label>
                <div id="yarnMaterial"></div>
            </div>
            <div class="line">
                <label for="detailDueDate">색</label>
                <div id="yarnColor"></div>
            </div>
        </div>
        <div>
            <div class="line margin_exempt">
                <label for="detailOrderType">코드</label>
                <div id="yarnCode"></div>
            </div>
            <div class="line margin_exempt">
                <label for="detailOrderInout">굵기</label>
                <div id="yarnCount"></div>
            </div>
            <div class="line">
                <label for="detailRound">수축률</label>
                <div id="yarnContraction"></div>
            </div>
            <div class="line">
                <label for="detailDueDate">종류</label>
                <div id="yarnKind"></div>
            </div>
            <div class="line">
                <label for="detailDueDate">수량</label>
                <div id="yarnQty"></div>
            </div>
        </div>
    </div>
    <div id="subModalBtnBoxYarn">
        <span onclick="closeModal1()">닫기</span>
    </div>
</div>
{% endblock content %}