{% extends "../main.html" %}
{% block title %}权限验证{% end %}
{% block content %}
<div class="page-hero page-container " id="page-hero">
    <div class="padding d-flex">
        <div class="page-title">
            <h2 class="text-md text-highlight">权限验证</h2>
        </div>
        <div class="flex">
            <div class="alert alert-warning" role="alert" id="error-div" style="display: none">
                <i data-feather="alert-circle"></i>
                <span class="mx-2" id="error-msg"></span>
            </div>
        </div>
        <div>

        </div>
    </div>
</div>
<div class="page-content page-container" id="page-content">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <strong>网站权限验证</strong>
            </div>
            <div class="card-body">
                {% module xsrf_form_html() %}
                <div class="form-group row">
                    <label class="col-sm-4 col-form-label">权限验证文件</label>
                    <div class="col-sm-8">
                        <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" id="customFile">
                            <label class="custom-file-label" for="customFile">选择文件</label>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-body">
                <div class="text-right pt-2">
                    <div class="input-group-prepend float-right">
                        <button class="btn btn-outline-secondary" type="button" id="select_site">选择域名</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- .select_site modal -->
<div id="select_site_modal" class="modal bg-dark fade" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header ">
                <div class="modal-title text-md">选择需要上传的网站域名</div>
            </div>
            <div class="modal-body">
                <div class="modal-body p-4">
                    <div class="list list-row">
                        <div class="list-item " data-id="1">
                            <div>
                                <label class="ui-check m-0 ">
                                    <input type="checkbox" id="all_select" value="1" onclick="all_select()">
                                    <i></i>
                                </label>
                            </div>
                            <div class="flex">
                                <a href="#" class="item-author text-color ">全选</a>
                            </div>
                        </div>

                        {% for domain in domains %}
                        <div class="list-item ">
                            <div>
                                <label class="ui-check m-0 ">
                                    <input type="checkbox" class="domain_select" value="{{ domain }}">
                                    <i></i>
                                </label>
                            </div>
                            <div class="flex">
                                <a href="#" class="item-author text-color ">{{ domain }}</a>
                            </div>
                        </div>

                        {% end %}

                    </div>
                </div>
                <div class="modal-footer">
                    {% module xsrf_form_html() %}
                    <button class="btn btn-outline-secondary" type="button" id="upload_submit">上传</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / .select_site modal -->


{% end %}
{% block js %}
<script>

    $("#select_site").click(function () {
        $('#select_site_modal').modal();
    });


    function all_select() {
        var is_all_select = document.getElementById("all_select").checked;
        if (is_all_select) {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "checked";
            }
        } else {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "";
            }
        }
    }


    $('#upload_submit').click(function () {
        var fileObj = $("#customFile")[0].files[0];        //获取上传文件名称
        var form = new FormData();//创建表单对象
        var __xsrf = $("[name='_xsrf']").val();
        var domains = "";
        $(".domain_select").each(function () {
            var is_domain_select = $(this).is(":checked");
            if (is_domain_select) {
                domains = domains + $(this).val() + ",";
            }
        });
        form.append("upload_file", fileObj);
        form.append("_xsrf", __xsrf);
        form.append("domains", domains);
        $('#select_site_modal').modal("hide");
        console.log(form);
        $.ajax({
            url: '/verify',
            data: form,
            type: 'POST',
            contentType: false,
            processData: false,
            success: function (res) {
                if (res == 0) {
                    $("#error-div").show();
                    $("#error-msg").empty();
                    $("#error-msg").append("请选择域名！");
                } else {
                    if (res == 2) {
                        $("#error-div").show();
                        $("#error-msg").empty();
                        $("#error-msg").append("请选择上传文件！");
                    } else {
                        $("#error-div").show();
                        $("#error-msg").empty();
                        $("#error-msg").append("上传成功！请访问：域名+文件名 验证");
                    }
                }
            },
            error: function (res) {
                console.log(res);
            }
        });
    });

</script>
{% end %}