<!DOCTYPE html>
<html>
<head>
    <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"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>房东服务</title>
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ theme }}/css/rent.css">
    <script type="text/javascript" src="{{ theme }}/js/iscroll.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.validate.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/jquery.mobile.custom.min.js"></script>
    <script type="text/javascript" src="{{ theme }}/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="tab" class="list-unstyled btn-group-justified tab">
    <li class="btn-group active">
        <a href="#secondhand" data-toggle="tab" class="btn">出售</a>
    </li>
    <li class="btn-group">
        <a href="#rent" data-toggle="tab" class="btn">出租</a>
    </li>
</ul>
<div id="wrapper">
    <div id="scroller" class="tab-content">
        <div class="tab-pane fade in active" id="secondhand">
            <form id="secondhandForm" data-house="1">
                <ul class="list-unstyled">
                    <li>
                        <label class="col-xs-2">城市:</label>

                        <p class="col-xs-10">
                            <select class="form-control" name="cityId">
                                {% for item in city %}
                                <option value="{{ item.id }}">{{ item.value }}</option>
                                {% endfor %}
                            </select>
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-3">小区名称:</label>

                        <p class="col-xs-9">
                            <input type="text" class="form-control" name="community_name">
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-2">户型:</label>

                        <p class="col-xs-10">
                            （<input type="number" class="form-control width-sm" name="bedroom" value="0">室<input type="number" class="form-control width-sm" name="hall" value="0">厅<input type="number" class="form-control width-sm" name="kitchen" value="0">厨<input type="number" class="form-control width-sm" name="bathroom" value="0">卫）
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-2">面积:</label>

                        <p class="col-xs-8">
                            <input type="number" class="form-control" name="covered_area">
                        </p>

                        <p class="col-xs-2">m<em>2</em></p>
                    </li>
                    <li>
                        <label class="col-xs-3">所在楼层:</label>

                        <p class="col-xs-9">
                            （<input type="number" class="form-control width-sm" name="floor">层/共<input type="number" class="form-control width-sm" name="total_floor">层）
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-2">朝向:</label>

                        <p class="col-xs-10">
                            <select class="form-control" name="faceto">
                                <option value="其他">其他</option>
                                <option value="东">东</option>
                                <option value="南">南</option>
                                <option value="西">西</option>
                                <option value="北">北</option>
                                <option value="东西">东西</option>
                                <option value="南北">南北</option>
                                <option value="南南">南南</option>
                                <option value="东南">东南</option>
                                <option value="东北">东北</option>
                                <option value="西南">西南</option>
                                <option value="西北">西北</option>
                            </select>
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-3">期望售价:</label>

                        <p class="col-xs-7">
                            <input type="number" class="form-control" name="price">
                        </p>

                        <p class="col-xs-2">万元</p>
                    </li>
                    <li>
                        <label class="col-xs-12">房源描述:</label>

                        <p class="col-xs-12">
                            <textarea class="form-control" rows="8" placeholder="选填" name="description"></textarea>
                        </p>
                    </li>
                </ul>
                <input type="submit" value="提交" class="btn btn-lg">
            </form>
        </div>

        <div class="tab-pane fade" id="rent">
            <form id="rentForm" data-house="2">
                <ul class="list-unstyled">
                    <li>
                        <label class="col-xs-2">城市:</label>

                        <p class="col-xs-10">
                            <select class="form-control" name="cityId">
                                {% for item in city %}
                                <option value="{{ item.id }}">{{ item.value }}</option>
                                {% endfor %}
                            </select>
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-3">小区名称:</label>

                        <p class="col-xs-9">
                            <input type="text" class="form-control" name="community_name">
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-2">户型:</label>

                        <p class="col-xs-10">
                            （<input type="number" class="form-control width-sm" name="bedroom" value="0">室<input type="number" class="form-control width-sm" name="hall" value="0">厅<input type="number" class="form-control width-sm" name="kitchen" value="0">厨<input type="number" class="form-control width-sm" name="bathroom" value="0">卫）
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-2">面积:</label>

                        <p class="col-xs-8">
                            <input type="number" class="form-control" name="covered_area">
                        </p>

                        <p class="col-xs-2">m<em>2</em></p>
                    </li>
                    <li>
                        <label class="col-xs-3">所在楼层:</label>

                        <p class="col-xs-9">
                            （<input type="number" class="form-control width-sm" name="floor">层/共<input type="number" class="form-control width-sm" name="total_floor">层）
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-2">朝向:</label>

                        <p class="col-xs-10">
                            <select class="form-control" name="faceto">
                                <option value="其他">其他</option>
                                <option value="东">东</option>
                                <option value="南">南</option>
                                <option value="西">西</option>
                                <option value="北">北</option>
                                <option value="东西">东西</option>
                                <option value="南北">南北</option>
                                <option value="南南">南南</option>
                                <option value="东南">东南</option>
                                <option value="东北">东北</option>
                                <option value="西南">西南</option>
                                <option value="西北">西北</option>
                            </select>
                        </p>
                    </li>
                    <li>
                        <label class="col-xs-3">期望租金:</label>

                        <p class="col-xs-7">
                            <input type="number" class="form-control" name="price">
                        </p>

                        <p class="col-xs-2">元/月</p>
                    </li>
                    <li>
                        <label class="col-xs-12">房源描述:</label>

                        <p class="col-xs-12">
                            <textarea class="form-control" rows="8" placeholder="选填" name="description"></textarea>
                        </p>
                    </li>
                </ul>
                <input type="submit" value="提交" class="btn btn-lg">
            </form>
        </div>
    </div>
</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>

<script>
    var notice;
    var myModal;
    var flag = false;
    var user_id = '{{ user_id }}';
    var phone = '{{ phone }}';
    var myScroll;
    window.addEventListener("load",function(){
        myScroll = new IScroll('#wrapper',{
            click: true,
            submit: true
        });
    },false);
    $(document).ready(function () {
        notice = $('#notice');
        myModal = $('#myModal');
        validate_sale_form($('#secondhandForm'));
        validate_sale_form($('#rentForm'));
        notice.bind('DOMNodeInserted', function () {
            $(this).children(':not(:first)').remove();
        });
        myModal.on('hide.bs.modal', function () {
            notice.children().remove();
        });
        $('#tab a').click(function () {
            flag = true;
            myScroll.scrollTo(0, 0);
            setTimeout(function () {
                myScroll.refresh();
            }, 200);
        });
    });
    function validate_sale_form(form) {
        form.validate({
            onkeyup: false,
            onfocusout: false,
            rules: {
                community_name: 'required',
                bedroom: {
                    digits: true,
                    min: 0
                },
                hall: {
                    digits: true,
                    min: 0
                },
                kitchen: {
                    digits: true,
                    min: 0
                },
                bathroom: {
                    digits: true,
                    min: 0
                },
                covered_area: {
                    required: true,
                    number: true,
                    min: 0
                },
                floor: {
                    required: true,
                    digits: true,
                    min: 0
                },
                total_floor: {
                    required: true,
                    digits: true,
                    min: 0
                },
                faceto: 'required',
                price: {
                    required: true,
                    number: true,
                    min: 0
                }
            },
            messages: {
                community_name: '请输入小区名',
                bedroom: '请输入户型',
                hall: '请输入户型',
                kitchen: '请输入户型',
                bathroom: '请输入户型',
                covered_area: '请输入面积',
                floor: '请输入所在楼层',
                total_floor: '请输入总楼层',
                faceto: '请选择朝向',
                price: '请输入期望价格'
            },
            errorLabelContainer: "#notice",
            errorElement: 'span',
            invalidHandler: function () {
                flag = false;
                myModal.modal('show');
            },
            submitHandler: function (form) {
                flag = true;
                if (flag) {
                    var house_type = $(form).data('house');
                    $.ajax({
                        type: 'POST',
                        url: '{{ url }}/wp-admin/admin-ajax.php/',
                        data: 'action=submit_sale&user_id='+user_id+'&phone=' + phone + '&house_type=' + house_type + '&' + $(form).serialize(),
                        success: function (data) {
                            if (data.code == 2000) {
                                notice.html('<span>提交成功</span>');
                                notice.show();
                                myModal.modal('show');
                            } else {
                                notice.html('<span>提交失败</span>');
                                notice.show();
                                myModal.modal('show');
                            }
                        }
                    });
                }
            }
        });
        form.find('input[type=submit]').tap(function () {
            form.submit();
            return false;
        });
    }
</script>
</body>
</html>