<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增宗教活动场所')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body>
    <div class="main-content">
        <form id="form-place-add" class="form-horizontal">
            <h4 class="form-header h4">基本信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">场所名称：</label>
                        <div class="col-sm-8">
                            <input name="placeName" placeholder="请输入场所名称" class="form-control" type="text" maxlength="256" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">宗教类别：</label>
                        <div class="col-sm-8">
                            <select name="religionType" class="form-control" required th:with="type=${@dict.getType('religion_type')}">
                                <!--<option value="">请选择宗教类别</option>-->
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" ></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">场所类别：</label>
                        <div class="col-sm-8">
                            <select name="placeCategory" class="form-control" required th:with="type=${@dict.getType('category_type')}">
                                <!--<option value="">请选择场所类别</option>-->
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">所属区县：</label>
                        <div class="col-sm-8">
                            <select name="county" class="form-control" required th:with="type=${@dict.getType('region_xa_district')}">
                                <option value="">请选择所属区县</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label">详细地址：</label>
                        <div class="col-xs-10">
                            <input name="address" placeholder="请输入详细地址" class="form-control" type="text" maxlength="512">
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">负责人信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">负责人姓名：</label>
                        <div class="col-sm-8">
                            <input name="chargeName" placeholder="请输入负责人姓名" class="form-control" type="text" maxlength="128">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">联系电话：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input name="chargePhone" placeholder="请输入联系电话" class="form-control" type="text" maxlength="32" required>
                                <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">场所面积</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">场所面积：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input name="placeArea" placeholder="请输入场所面积" class="form-control" type="number" step="0.01">
                                <span class="input-group-addon">平方米</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">建筑面积：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input name="buildingArea" placeholder="请输入建筑面积" class="form-control" type="number" step="0.01">
                                <span class="input-group-addon">平方米</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">批准与登记信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">批准设立机关：</label>
                        <div class="col-sm-8">
                            <input name="approveOrgan" placeholder="请输入批准设立机关" class="form-control" type="text" maxlength="128">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">批准设立时间：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="approveTime" placeholder="yyyy-MM-dd" class="form-control" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">登记机关：</label>
                        <div class="col-sm-8">
                            <input name="regOrgan" placeholder="请输入登记机关" class="form-control" type="text" maxlength="128">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">登记证号：</label>
                        <div class="col-sm-8">
                            <input name="regNo" placeholder="请输入登记证号" class="form-control" type="text" maxlength="64">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">登记时间：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="regTime" placeholder="yyyy-MM-dd" class="form-control" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">统一社会信用代码：</label>
                        <div class="col-sm-8">
                            <input name="creditCode" placeholder="请输入统一社会信用代码" class="form-control" type="text" maxlength="32">
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">法人资格信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">是否具有法人资格：</label>
                        <div class="col-sm-8">
                            <select name="legalQualified" class="form-control">
                                <option value="">请选择</option>
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">法人资格取得时间：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="legalTime" placeholder="yyyy-MM-dd" class="form-control" type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="form-header h4">地理位置信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">经度：</label>
                        <div class="col-sm-8">
                            <input name="longitude" placeholder="请输入经度" class="form-control" type="number" step="0.000001">
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">纬度：</label>
                        <div class="col-sm-8">
                            <input name="latitude" placeholder="请输入纬度" class="form-control" type="number" step="0.000001">
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <style>
        /* 必填项校验失败时的样式 */
        input.error, select.error {
            border-color: #dd4b39 !important;
        }

        /* 必填项校验失败时 placeholder 变红 */
        input.error::placeholder, select.error::placeholder {
            color: #dd4b39 !important;
        }

        /* 隐藏默认的错误提示文字 */
        label.error {
            display: none !important;
        }
    </style>
    <script th:inline="javascript">
        var prefix = ctx + "religion/place";

        $("#form-place-add").validate({
            onkeyup: false,
            errorElement: "label",
            errorClass: "error",
            rules: {
                placeName: {
                    required: true,
                    minlength: 2,
                    maxlength: 256
                },
                religionType: {
                    required: true
                },
                placeCategory: {
                    required: true
                },
                county: {
                    required: true
                },
                chargeName: {
                    minlength: 2,
                    maxlength: 128
                },
                chargePhone: {
                    isPhone: true
                },
                placeArea: {
                    number: true,
                    min: 0
                },
                buildingArea: {
                    number: true,
                    min: 0
                },
                longitude: {
                    number: true,
                    min: -180,
                    max: 180
                },
                latitude: {
                    number: true,
                    min: -90,
                    max: 90
                }
            },
            messages: {
                placeName: {
                    required: "请输入场所名称",
                    minlength: "场所名称不能少于2个字符",
                    maxlength: "场所名称不能超过256个字符"
                },
                religionType: {
                    required: "请选择宗教类别"
                },
                placeCategory: {
                    required: "请选择场所类别"
                },
                county: {
                    required: "请选择所属区县"
                },
                chargeName: {
                    minlength: "负责人姓名不能少于2个字符",
                    maxlength: "负责人姓名不能超过128个字符"
                },
                chargePhone: {
                    isPhone: "请输入正确的手机号码"
                }
            },
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var data = $("#form-place-add").serializeArray();
                $.operate.save(prefix + "/add", data);
            }
        }

        $(function() {
            // 初始化日期选择器
            $("input[name='approveTime']").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                todayBtn: true
            });

            $("input[name='regTime']").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                todayBtn: true
            });

            $("input[name='legalTime']").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                todayBtn: true
            });
        });
    </script>
</body>
</html>


