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

{% block staticfile %}
<link rel="stylesheet" href="{% static 'css/schedule20191101.css' %}">
<link rel="stylesheet" href="{% static 'css/simple-calendar.css' %}">
<script type="text/javascript" src="{% static 'js/jquery.simple-calendar.js' %}"></script>
<script>
    var os = null;

    $(document).ready(function() {
        var platform = window.navigator.platform;
        var macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];

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

        $('#calendar').simpleCalendar({
            fixedStartDay: false
        });
        $('.machineSelect').change(changeMachineList);
        $('.materialSelect').change(changeMaterialList);

        var orderCount = '{{ designOrderCount }}';
        var yarnCount = '{{ yarnCount }}';
        var beamCount = '{{ beamCount }}';
        var rawCount = '{{ rawCount }}';

        if(orderCount > 13){
            $('#orderDesign tr > td:nth-child(5)').css('width', '77px');
        }
    });
    
    function changeMaterialList() {
        var materialType = $('.materialSelect').val();

        switch (materialType) {
            case '1':
                $('.materialList').css('display', 'none');
                $('#rawTable').css('display', 'block');
                break;
            case '2':
                $('.materialList').css('display', 'none');
                $('#yarnTable').css('display', 'block');
                break;
            case '3':
                $('.materialList').css('display', 'none');
                $('#beamTable').css('display', 'block');
                break;
        }
    }

    function changeMachineList() {
        var machineType = $('.machineSelect').val();
        $.ajax({
            url: '/machine/listByType',
            type: 'POST',
            cache: false,
            data: {
                machineType: machineType
            },
            dataType: 'json',
            async: false,
            success: function (response) {
                console.log(response);
                $('.machineList').empty();
                var selectedWarpMachineId = $('#warpMachineId').val();
                var selectedKnitMachineId = $('#knitMachineId').val();
                if(machineType == '1'){
                    response.forEach(function (machineObj) {
                        var warpMachineWrap = document.createElement('div');
                        warpMachineWrap.className = 'warpMachine';
                        warpMachineWrap.id = 'warpMachine' + machineObj.pk;
                        warpMachineWrap.onclick = function (){getMachineDetail(1, machineObj.pk)};
                        var machineCode = document.createElement('div');
                        machineCode.className = 'machineCode';
                        if(machineObj.pk == selectedWarpMachineId)
                            warpMachineWrap.className += ' selectedMachine';
                        machineCode.innerText = machineObj.fields.tws_code;
                        warpMachineWrap.append(machineCode);
                        var machineSpec = document.createElement('div');
                        machineSpec.className = 'machineSpec';
                        var machineDiv = document.createElement('div');
                        machineDiv.innerText = 'tws_name: ' + machineObj.fields.tws_name;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'user_id: ' + machineObj.fields.user_id;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'installation_time: ' + machineObj.fields.tws_installation_time.substr(0, 10);
                        machineSpec.append(machineDiv);
                        warpMachineWrap.append(machineSpec);
                        machineSpec = document.createElement('div');
                        machineSpec.className = 'machineSpec';
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'tws_onoff: ' + machineObj.fields.tws_onoff;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'company_code: ' + machineObj.fields.company_code;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'tws_ip: ' + machineObj.fields.tws_ip;
                        machineSpec.append(machineDiv);
                        warpMachineWrap.append(machineSpec);
                        $('.machineList').append(warpMachineWrap);
                    });

                }else{
                    response.forEach(function (machineObj) {
                        var knitMachineWrap = document.createElement('div');
                        knitMachineWrap.className = 'knitMachine';
                        if(machineObj.pk == selectedKnitMachineId)
                            knitMachineWrap.className += ' selectedMachine';
                        knitMachineWrap.id = 'knitMachine' + machineObj.pk;
                        knitMachineWrap.onclick = function (){getMachineDetail(2, machineObj.pk)};
                        var machineCode = document.createElement('div');
                        machineCode.className = 'machineCode';
                        machineCode.innerText = machineObj.fields.trs_code;
                        knitMachineWrap.append(machineCode);
                        var machineSpec = document.createElement('div');
                        machineSpec.className = 'machineSpec';
                        var machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_name: ' + machineObj.fields.trs_model_name;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'user_id: ' + machineObj.fields.user_id;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        if(machineObj.fields.trs_installation_time != null)
                            machineDiv.innerText = 'installation_time: ' + machineObj.fields.trs_installation_time.substr(0, 10);
                        else
                            machineDiv.innerText = 'installation_time: ' + machineObj.fields.trs_installation_time;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_ip: ' + machineObj.fields.trs_ip;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_lowmotor_enable: ' + machineObj.fields.trs_lowmotor_enable;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'company_code: ' + machineObj.fields.company_code;
                        machineSpec.append(machineDiv);
                        knitMachineWrap.append(machineSpec);
                        machineSpec = document.createElement('div');
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_bar_cnt: ' + machineObj.fields.trs_bar_cnt;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_beam_cnt: ' + machineObj.fields.trs_beam_cnt;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_eac_enable: ' + machineObj.fields.trs_eac_enable;
                        machineSpec.append(machineDiv);
                        machineSpec.className = 'machineSpec';
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_gauge: ' + machineObj.fields.trs_gauge;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_onoff: ' + machineObj.fields.trs_onoff;
                        machineSpec.append(machineDiv);
                        machineDiv = document.createElement('div');
                        machineDiv.innerText = 'trs_tempo: ' + machineObj.fields.trs_tempo;
                        machineSpec.append(machineDiv);
                        knitMachineWrap.append(machineSpec);
                        $('.machineList').append(knitMachineWrap);
                    });
                }
            }
        });
    }

    function getMachineDetail(type, machineId) {
        $('.machineList > div').removeClass('selectedMachine');
        console.log(selectedYear + selectedMonth + selectedDate + machineId);
        var data;
        if(type == 1){
            var selectMachineDiv = '#warpMachine' + machineId;
            $(selectMachineDiv).addClass('selectedMachine');
            data = {
                warpMachine: machineId,
                year: selectedYear,
                month: selectedMonth,
                date: selectedDate
            };
            $('#warpMachineId').val(machineId);
            $('#warpMachine').val($(selectMachineDiv + '>.machineCode').html());
        }else{
            var selectMachineDiv = '#knitMachine' + machineId;
            $(selectMachineDiv).addClass('selectedMachine');
            data = {
                knitMachine: machineId,
                year: selectedYear,
                month: selectedMonth,
                date: selectedDate
            };
            $('#knitMachineId').val(machineId);
            $('#knitMachine').val($(selectMachineDiv + '>.machineCode').html());
        }
        $.ajax({
            url: '/schedule/process',
            type: 'POST',
            cache: false,
            data: data,
            dataType: 'json',
            async: false,
            success: function (response) {
                $('#machineDetailWrap').empty();
                response.processList.forEach(function (processObj) {
                    console.log(processObj);
                    var machineTable = document.createElement("table");
                    machineTable.className = "machineTable";
                    var machineTr = document.createElement("tr");
                    var machineTd = document.createElement("td");
                    machineTd.innerHTML = "order";
                    machineTr.append(machineTd);
                    machineTd = document.createElement("td");
                    machineTd.innerHTML = processObj.order;
                    machineTr.append(machineTd);
                    machineTable.append(machineTr);
                    machineTr = document.createElement("tr");
                    machineTd = document.createElement("td");
                    machineTd.innerHTML = "endTime";
                    machineTr.append(machineTd);
                    machineTd = document.createElement("td");
                    machineTd.innerHTML = processObj.endTime;
                    machineTr.append(machineTd);
                    machineTable.append(machineTr);
                    machineTr = document.createElement("tr");
                    machineTd = document.createElement("td");
                    machineTd.innerHTML = "startTime";
                    machineTr.append(machineTd);
                    machineTd = document.createElement("td");
                    machineTd.innerHTML = processObj.startTime;
                    machineTr.append(machineTd);
                    machineTable.append(machineTr);
                    document.getElementById('machineDetailWrap').appendChild(machineTable);
                });
            }
        });
    }

    function selectOrder(orderId) {
        $('.orderTr').removeClass('selected');
        var selectedOrderTr = '#order' + orderId;
        $(selectedOrderTr).addClass('selected');
        $('#orderId').val(orderId);
        $('#orderCode').val($(selectedOrderTr + '>td:nth-child(1)').html());
    }
</script>
{% endblock staticfile %}

{% block content %}
            <div id="ContentWrap">
                <div class="fix">
                    <div>
                        <h4>Calendar</h4>
                        <div id="calendar"></div>
                    </div>
                    <div>
                        <span>Machine</span>
                        <select name="machineType" class="machineSelect">
                            <option selected value="1">정경기</option>
                            <option value="2">경편기</option>
                        </select>
                        <div class="machineList">
                            {% for warpObj in warpMachineList %}
                            <div id="warpMachine{{ warpObj.id }}" class="warpMachine" onclick="getMachineDetail(1, {{ warpObj.id }})">
                                <div class="machineCode">{{ warpObj.tws_code }}</div>
                                <div class="machineSpec">
                                    <div>tws_name: {{ warpObj.tws_name }}</div>
                                    <div>user_id: {{ warpObj.user_id }}</div>
                                    <div>installation_time: {{ warpObj.tws_installation_time|date:'Y-m-d' }}</div>
                                </div>
                                <div class="machineSpec">
                                    <div>tws_onoff: {{ warpObj.tws_onoff }}</div>
                                    <div>company_code: {{ warpObj.company_code }}</div>
                                    <div>tws_ip: {{ warpObj.tws_ip }}</div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div>
                        <h4>Machine Detail</h4>
                        <div id="machineDetailWrap"></div>
                    </div>
                </div>
                <div class="fix">
                    <div>
                        <h4>Order</h4>
                        <div id="orderDesign">
                        <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>
                        <span>Material</span>
                        <select name="materialType" class="materialSelect">
                            <option selected value="1">생지</option>
                            <option value="2">원사</option>
                            <option value="3">빔</option>
                        </select>
                        <div id="rawTable" class="materialList">
                            <table>
                                <col width="30%">
                                <col width="35%">
                                <col width="35%">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>디자인</th>
                                        <th>재고</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for rawObj in rawList %}
                                        <tr>
                                            <td>{{ rawObj.designData_id }}</td>
                                            <td>{{ rawObj.qty }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div id="yarnTable" class="materialList">
                            <table>
                                <col width="35%">
                                <col width="35%">
                                <col width="30%">
                                <thead>
                                    <tr>
                                        <th>이름</th>
                                        <th>코드</th>
                                        <th>재고</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for yarnObj in yarnList %}
                                        <tr>
                                            <td>{{ yarnObj.name }}</td>
                                            <td>{{ yarnObj.code }}</td>
                                            <td>{{ yarnObj.qty }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div id="beamTable" class="materialList">
                            <table>
                                <col width="25%">
                                <col width="25%">
                                <col width="25%">
                                <col width="25%">
                                <thead>
                                    <tr>
                                        <th>이름</th>
                                        <th>실</th>
                                        <th>수량</th>
                                        <th>크기</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for beamObj in beamList %}
                                        <tr>
                                            <td>{{ beamObj.name }}</td>
                                            <td>{{ beamObj.yarn.name }}</td>
                                            <td>{{ beamObj.yarn_qty }}</td>
                                            <td>{{ beamObj.size }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div>
                        <h4>Create</h4>
                        <div>
                            <form method="post" action="/schedule/createSchedule">
                                <div>order</div>
                                <div><input type="text" id="orderCode" disabled><input type="hidden" name="orderId" id="orderId"></div>
                                <div>warping schedule</div>
                                <div>
                                    <div><input type="text" id="warpMachine" disabled><input type="hidden" name="warpMachineId" id="warpMachineId"></div>
                                    <div>startTime<input type="datetime-local" name="warpingStart"></div>
                                    <div>endTime<input type="datetime-local" name="warpingEnd"></div>
                                </div>
                                <div>kniting schedule</div>
                                <div>
                                    <div><input type="text" id="knitMachine" disabled><input type="hidden" name="knitMachineId" id="knitMachineId"></div>
                                    <div>startTime<input type="datetime-local" name="knitingStart"></div>
                                    <div>endTime<input type="datetime-local" name="knitingEnd"></div>
                                </div>
                                <input type="submit" value="스케쥴 저장">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
{% endblock content %}