<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>Главная</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mask.min.js"></script>
    <script type="text/javascript" src="jquery/datepicker-ru.js"></script>

    <link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center">
    <div><h3>Журнал Заказов</h3></div>
    <table border="1"  class="tableStyle" >
        <tr>
            <th colspan="2" align="center">
                Новая заявка
            </th>
        </tr>
        <tr>
            <td>
                Дата приема заявки
            </td>
            <td>
                <input id="recDate" class="date" type="text" placeholder="__.__.____" value="<%=data.recDate%>">
            </td>
        </tr>
        <tr>
            <td>
                Дата доставки груза
            </td>
            <td>
                <input id="delDate" class="date" type="text" placeholder="__.__.____" value="<%=data.delDate%>">
            </td>
        </tr>
        <tr>
            <td>
                Время доставки груза
            </td>
            <td>
                <input id="delTime" type="text" placeholder="__:__" value="<%=data.delTime%>">
            </td>
        </tr>
        <tr>
            <td>
                Причина срыва поставки
            </td>
            <td>
                <textarea id="reason" cols="50" rows="5"><%=data.reason%></textarea>
            </td>
        </tr>
        <tr align="center">
            <td>
                <input type="button" onclick="saveButton()" value="Сохранить">
            </td>
            <td>
                <input type="button" onclick="cancelButton()" value="Отмена">
            </td>
        </tr>
    </table>
</div>
</body>
<script>

    $(".sel").selectmenu({
        width: 300
    });

    $(".date").mask("00.00.0000");
    $("#delTime").mask("00:00");

    $(function() {
        $(".date").datepicker();
    });



    /*function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }*/
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    function cancelButton() {
        location.href = '/';
    }

    function saveButton() {
        var data = {
            recDate: $('#recDate').val(),
            delDate: $('#delDate').val(),
            delTime: $('#delTime').val(),
            reason: $('#reason').val(),
            id: getQueryVariable("id")
        };
        if (isVal()) {
            $.post("/saveEdit", data, function () {
                location.href = '/';
            });
        }
    }

    function isVal() {
        let elems = document.querySelectorAll("input[type='text'],select,textarea");
        for (let i = 0; i < elems.length; ++i) {
            elems[i].classList.remove('wrong');
            if(elems[i].tagName == 'SELECT') {
                elems[i].nextSibling.classList.remove('wrong');
            }
        }
        for (let i = 0; i < elems.length; ++i) {
            if(!elems[i].value && elems[i].id != "reason") {
                elems[i].classList.add('wrong');
                return false;
            }
            if(elems[i].tagName == 'SELECT' && elems[i].value == '0') {
                elems[i].nextSibling.classList.add('wrong');
                return false;
            }
            if(elems[i].classList.contains('date')) {
                let pattern = /^(0?[1-9]|[12][0-9]|3[01]).(0?[1-9]|1[012]).2\d\d\d$/;
                if (!pattern.test(elems[i].value)) {
                    elems[i].classList.add('wrong');
                    return false;
                }
            }
            if(elems[i].id == "delTime") {
                let pattern = /^(0?[0-9]|1[0-9]|2[0-3]):([0-5][0-9])$/;
                if (!pattern.test(elems[i].value)) {
                    elems[i].classList.add('wrong');
                    return false;
                }
            }
        }
        return true;
    }
</script>
</html>