<html>
{% block head %}

<head>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="shortcut icon" href="#" />
    <!-- Bootstrap -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/static/bootstrap/css/modern-business.css" rel="stylesheet">

    <script src="/static/form.js"></script>
    <script src="https://unpkg.zhimg.com/sweetalert/dist/sweetalert.min.js"></script>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script src="/static/bootstrap/vendor/jquery/jquery.min.js"></script>
    <script src="/static/bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!--如果页面模板在后台传入了标题，那页面的标题就是（传入标题+ '- 测试平台'），否则就是'测试平台'-->
    <title>作业提交网站</title>

</head>
{% endblock %}

<body>
    {% block Navi %}
    <!-- Navigation -->
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="/">作业提交</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    {% endblock %}

    <!-- Page Content -->
    {% block main %}
    <div class="container">

        <!-- Page Heading/Breadcrumbs -->
        <h1 class="mt-4 mb-3">作业一览
        </h1>

        <div class="row">

            <!-- Blog Entries Column -->
            <div class="col-md-8">
                {% for homework in homeworks %}
                <!-- Blog Post -->
                <div class="card mb-4">
                    <div class="card-body">
                        <h2 class="card-title">{{homework["name"]}}</h2>
                        
                        <p class="card-text">{{homework["describe"]}}</p>
                        <button class="btn btn-primary" onclick="display_form('{{homework['name']}}')">Submit
                            &rarr;</button>
                    </div>
                    <a class="card-footer text-muted">DEADLINE:{{homework["deadline"]}}<a>
                    <h2 class="card-footer countdown">{{homework["deadline"]}}</h2>
                </div>
                {% endfor %}
            </div>

        </div>
        <!-- /.row -->
    </div>

    {% endblock %}
    <!-- /.container -->


    <!-- Footer -->
    {% block footer %}
    <footer class="py-5 bg-dark">
        <div class="container">
            <p class="m-0 text-center text-white">Copyright &copy; 2021</p>
        </div>
        <!-- /.container -->
    </footer>
    {% endblock %}
    {% block form %}
    <div class="modal fade" id="formWindow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="homeworkName">
                        作业名称
                    </h4>
                </div>
                <div class="modal-body">
                    <!--上传信息表格-->
                    <form id="upload" action="/upload" enctype='multipart/form-data' method='POST'>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">姓名</span>
                            </div>
                            <label for="name"></label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>

                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">学号</span>
                            </div>
                            <label for="num"></label>
                            <input type="text" class="form-control" id="num" name="num">
                        </div>
                        <!--上传文件的控件-->
                        <input id='file' class="btn btn-info" name="file" type="file">
                        <div class="modal-footer">
                            <button type="button" onclick="submit_form()" class="btn btn-primary">提交</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}
</body>
<script>
    function t2t(leave) {
        var day = Math.floor(leave / (1000 * 60 * 60 * 24));
        var hour = Math.floor(leave / (1000 * 3600)) - (day * 24);
        var minute = Math.floor(leave / (1000 * 60)) - (day * 24 * 60) - (hour * 60);
        var second = Math.floor(leave / (1000)) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
        return day.toString() + "day " + hour.toString() + ":" + minute.toString() + ":" + second.toString()
    }
    function parseDate(stringInput) {
        var daySplit = stringInput.split("day ");
        var day = daySplit[0]
        var time = daySplit[1].split(":")
        var t = (1000 * 60 * 60 * 24) * parseInt(day) + (1000 * 3600) * parseInt(time[0]) + (1000 * 60) * parseInt(time[1]) + 1000 * parseInt(time[2])
        return t
    }
    $().ready(function () {
        var now = Date.now()
        $(".countdown").each(function () {
            var deadline = Date.parse($(this).text());
            var leave = deadline - now;
            $(this).text(t2t(leave))
        })
        setInterval(function (e) {
            $(".countdown").each(function () {
                var stringtime = $(this).text();
                var leave = parseDate(stringtime)
                if (leave<1000){
                    leave=1000;
                }
                $(this).text(t2t(leave - 1000))
            })
        }, 1000);
    })
</script>

</html>