<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>

    <title>填写预约码-入库预约</title>
    <style>
        html{
            height: 100%;
            width: 100%;
        }
        body{
            text-align:center;
            height: 100%;
            width: 100%;
        }
        .center{
            margin:0 auto;
            position: fixed;
            top: 50%;
            left: 50%;
            width:50%;
            height: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
        }
        #msg{
            width:266px;
            position: fixed;
            z-index:999;
            top: 49%;
            margin-top:-80px;
            left:50%;
            margin-left:-133px;
            background:#fff;
            box-shadow:5px 5px 8px #999;
            font-size:17px;
            color:red;
            border:1px solid #f8f8f8;
            text-align: center;
            line-height: 2rem;
            display:inline-block;
            padding-bottom:20px;
            border-radius:5px;
        }
        #msg_top {
            background: #f8f8f8;
            padding: 5px 15px 5px 20px;
            text-align: left;
        }
        #msg_top span{
            font-size:22px;
            float:right;
            cursor:pointer;
        }
        #msg_cont{
            padding:15px 20px 20px;
            text-align:left;
        }
        #msg_clear{
            background:#8fc31f;
            float:right;
        }
        .msg_btn{
            display:inline-block;
            color:#fff;
            padding:1px 15px;
            border-radius:2px;
            margin-right:15px;
            cursor:pointer;
        }
        .label{
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 50px;
        }
        .btn{
            width: 50%;
            height: 40px;
            margin-top: 50px;
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
            border-radius: 5px;
        }
        .input{
            display: block;
            width: 100%;
            font-weight: 400;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #1b1e21;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            height: calc(1.5em + .5rem + 2px);
            padding: .25rem .5rem;
            font-size: .875rem;
            line-height: 1.5;
            border-radius: .3rem;
        }
    </style>
</head>
<body>
<div class="center">
    <div>
        <div class="label">下方填写您的预约码</div>
        <label><input type="text" class="input" id="appointment_number" oninput="if(value.length>10)value=value.slice(0,10)"></label>
    </div>
    <div>
        <button type="button" class="btn" onclick="submit()"> 确 认 </button>
    </div>
</div>
</body>
<script type="text/javascript">
    //重绘弹窗样式
    function alert(e){
        let dom = document.createElement('div');
        dom.innerHTML = '<div id="msg"><div id="msg_top">提示</div><div id="msg_cont">'+e+
        '</div><div class="msg_close msg_btn" id="msg_clear">确定</div></div>';
        document.querySelector('body').appendChild(dom);
        document.getElementById('msg_clear').addEventListener('click', function() {
            document.getElementById("msg").remove();
        }, false);
    }
    function submit() {
        let xhr = new XMLHttpRequest();
        let url = "{{url('store/deliveryAppointment/delivery')}}";
        let number = document.getElementById("appointment_number").value;
        if (!number)return;
        let data = "number="+number+"&k={{$k}}";
        xhr.open("POST",url,true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
                let res = JSON.parse(xhr.responseText);
                if (res.status === 406)window.location.href = "{{url('store/deliveryAppointment/errMsg')}}";
                if (res.status === 417)alert("无效预约码！");
                if (res.status === 416)alert("当前时间禁止送货！");
                if (res.status === 200)window.location.href = "{{url('store/deliveryAppointment/successMsg?k=')}}"+res.k;
            }
        };
        xhr.send(data);
    }
</script>
</html>
