<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 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>
    <style></style>
    <script src="{{ theme }}/js/jquery.min.js"></script>
    <script src="{{ theme }}/js/jquery.validate.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,
                onChange: function () {
                    $('#date').val(this.Year + '-' + this.Month + '-' + this.Day);
                }
            });
            ds.onChange();

            var viewForm = $('#viewForm');
            viewForm.submit(function () {
                $.ajax({
                    type: 'POST',
                    url: '{{ url }}/wp-admin/admin-ajax.php/',
                    data: 'action=view_house&' + viewForm.serialize(),
                    success: function (data) {
                        if (data.code == 2000) {
                            alert('预约成功');
                        } else {
                            alert('预约失败');
                        }
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
<form id="viewForm" method="post">
    <div>
        <label for="jt">今天</label>
        <input type="radio" name="day" id="jt" value="0"/>
        <label for="mt">明天</label>
        <input type="radio" name="day" id="mt" value="1"/>
        <label for="ht">后天</label>
        <input type="radio" name="day" id="ht" value="2"/>
    </div>
    <div>
        <p>指定日期</p>

        <p>
            <label for="year">年</label>
            <select id="year"></select>
            <label for="month">月</label>
            <select id="month"></select>
            <label for="day">日</label>
            <select id="day"></select>
        </p>
    </div>
    <div>
        <label for="index">选择时间</label>
        <select id="index" name="index">
            <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>
    </div>
    <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 }}">

    <p class="submit">
        <input type="submit" id="view_submit" value="提交">
    </p>
</form>
</body>
</html>