{% extends 'base.html' %}
{% load static %}
{% block tittle %}登陆{% endblock tittle %}
{% block body %}
<section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('{% static 'images/backgrounds/img-1.jpg' %}')">
    <span class="mask bg-primary alpha-7"></span>
    <div class="spotlight-holder py-lg pt-lg-xl" style="height: auto;">
        <div class="container align-items-center no-padding">
            <div class="col">
                <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                    <div class="col-7">
                        <div class="text-center mt-5">
                            <img src="{% static 'images/brand/icon.png' %}" style="width: 80px;" class="img-fluid animated" data-animation-in="jackInTheBox" data-animation-delay="1000">
                            <h2 class="heading display-4 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                                贡献题目
                            </h2>
                            <form id="createForm" onsubmit="event.preventDefault(); submitForm();" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="form-group">
                                    <label>题目文本</label>
                                    <textarea id="text" name="text" required class="form-control" placeholder="请输入题目文本，不超过300字" rows="4"></textarea>
                                </div>
                                <input type="file" name="image" id="image" accept="image/*" onchange="imgChange(this);" class="custom-input-file"/>
                                <label for="image">
                                  <svg class="svg-inline--fa fa-upload fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="upload" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path></svg><!-- <i class="fa fa-upload"></i> -->
                                  <span>上传附图</span>
                                </label>
                                <img id="image-preview" width="50%" src=""/><br>
                                <div class="input-group mb-4">
                                    <input type="text" id="a" name="a" class="form-control" placeholder="A选项文本" required>
                                </div>
                                <div class="input-group mb-4">
                                    <input type="text" id="b" name="b" class="form-control" placeholder="B选项文本" required>
                                </div>
                                <div class="input-group mb-4">
                                    <input type="text" id="c" name="c" class="form-control" placeholder="C选项文本" required>
                                </div>
                                <div class="input-group mb-4">
                                    <input type="text" id="d" name="d" class="form-control" placeholder="D选项文本" required>
                                </div>
                                <div class="card col-lg-12">
                                    <div class="card-body">
                                    <h5 class="mb-4">答案</h5>
                                    <div class="custom-control custom-radio mb-3">
                                        <input type="radio" name="answer" class="custom-control-input" id="ans_A" value="A" checked>
                                        <label class="custom-control-label" for="ans_A">------A------</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-3">
                                        <input type="radio" name="answer" class="custom-control-input" id="ans_B" value="B">
                                        <label class="custom-control-label" for="ans_B">------B------</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-3">
                                        <input type="radio" name="answer" class="custom-control-input" id="ans_C" value="C">
                                        <label class="custom-control-label" for="ans_C">------C------</label>
                                    </div>
                                    <div class="custom-control custom-radio mb-3">
                                        <input type="radio" name="answer" class="custom-control-input" id="ans_D" value="D">
                                        <label class="custom-control-label" for="ans_D">------D------</label>
                                    </div>
                                    </div>
                                </div>
                                <div class="input-group mb-4">
                                    <button type="submit" class="btn btn-block btn-primary">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock body %}

{% block script %}
        <script>

        function imgChange(obj) {
            var file = document.getElementById("image");
            var imgUrl = window.URL.createObjectURL(file.files[0]);
            var img = document.getElementById('image-preview');
            img.setAttribute('src', imgUrl); // 修改img标签src属性值
        };

        function submitForm() {
            var formData = new FormData($('#createForm')[0]);
            $.ajax({
                url: "{% url 'exam:create' %}", // Django模板标签，用于生成URL
                type: "POST",
                data: formData,
                contentType: false, // 告诉jQuery不要设置Content-Type请求头
                processData: false, // 告诉jQuery不要处理发送的数据
                success: function(response) {
                    if (response.code === 200) {
                        alert(response.message); // 成功时的消息框
                        window.location.reload();
                    } else {
                        alert(response.message); // 显示错误信息
                    }
                },
                error: function() {
                    alert("提交失败");
                }
            });
        }
    </script>
{% endblock script %}