<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=360, user-scalable=0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bookingSeeHouse.css">
    <script src="{{ theme }}/js/jquery.min.js"></script>
    <script src="{{ theme }}/js/jquery.validate.js"></script>
    <script src="{{ theme }}/js/bootstrap.min.js"></script>
    <script src="{{ theme }}/js/date-selector.js"></script>
    <script src="{{ theme }}/js/public.js"></script>
    <script>
        $(document).ready(function () {
            var ds = new DateSelector('year', 'month', 'day', {
                MaxYear: new Date().getFullYear() + 1
            });
            var inputDate = $('#date');
            var viewForm = $('#viewForm');
            var notice = $('#notice');
            var myModal = $('#myModal');
            viewForm.submit(function () {
                var dayValue = Number($('input[name=day]:checked').val());
                var date = new Date();
                var indexTime = $('#index').find('option:selected').text();
                var min_time = indexTime.split('-')[0];
                var specified_time;
                switch (dayValue) {
                    case 3:
                        specified_time = new Date(ds.Year + '/' + ds.Month + '/' + ds.Day + ' ' + min_time).getTime();
                        break;
                    default:
                        specified_time = new Date(date.Format('yyyy/MM/dd') + ' ' + min_time).getTime() + dayValue * 24 * 60 * 60 * 1000;
                        break;
                }
                if (specified_time > date.getTime()) {
                    date.setTime(specified_time);
                    inputDate.val(date.Format('yyyy-MM-dd'));
                    $.ajax({
                        type: 'POST',
                        url: '{{ url }}/wp-admin/admin-ajax.php/',
                        data: 'action=view_house&' + viewForm.serialize(),
                        success: function (data) {
                            if (data.code == 2000) {
                                notice.html('预约成功');
                                myModal.modal('show');
                            } else {
                                notice.html('预约失败');
                                myModal.modal('show');
                            }
                        }
                    });
                } else {
                    notice.text('预约看房需提前至少一小时');
                    myModal.modal('show');
                }
                return false;
            });
            document.addEventListener('touchmove', function(e){
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
<div class="main">
    <form id="viewForm" method="post">
        <p class="">看房时间</p>
        <ul class="list-unstyled">
            <li>
                <label for="jt" class="col-xs-4">
                    <input type="radio" name="day" id="jt" value="0" checked>
                    <span></span>今天
                </label>

                <label for="mt" class="col-xs-4">
                    <input type="radio" name="day" id="mt" value="1">
                    <span></span>明天
                </label>

                <label for="ht" class="col-xs-4 ">
                    <input type="radio" name="day" id="ht" value="2">
                    <span></span>后天
                </label>
            </li>

            <li>
                <label class="col-xs-5">
                    <input type="radio" name="day" value="3">
                    <span></span>指定日期
                </label>

                <p class="col-xs-7">
                    <select id="year" class="form-control"></select>
                    <label for="year">年</label>
                    <select id="month" class="form-control"></select>
                    <label for="month">月</label>
                    <select id="day" class="form-control"></select>
                    <label for="day">日</label>
                </p>
            </li>

            <li>
                <label for="index" class="col-xs-5">
                    <span class="time"></span>看房时段
                </label>

                <p class="col-xs-7">
                    <select id="index" name="index" class="form-control">
                        <option value="0">9:00-10:00</option>
                        <option value="1">10:00-11:00</option>
                        <option value="2">11:00-12:00</option>
                        <option value="3">12:00-13:00</option>
                        <option value="4">13:00-14:00</option>
                        <option value="5">14:00-15:00</option>
                        <option value="6">15:00-16:00</option>
                        <option value="7">16:00-17:00</option>
                    </select>
                </p>
            </li>
        </ul>
        <input type="hidden" name="date" id="date" value="">
        <input type="hidden" name="user_id" value="{{ user_id }}">
        <input type="hidden" name="house_id" value="{{ house_id }}">
        <input type="hidden" name="consultant_id" value="{{ consultant_id }}">
        <input type="submit" id="view_submit" value="提交" class="btn btn-lg">
    </form>
</div>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <h4>提示</h4>

            <p id="notice"></p>
            <button type="button" class="btn btn-lg btn-block" data-dismiss="modal">确认</button>
        </div>
    </div>
</div>
</body>
</html>