{% extends 'base.html' %}

{% block title %}Upload Question Data{% endblock %}

{% block content %}
<!-- Header Start -->
{% comment %} <div class="container-fluid bg-primary py-5 mb-5 page-header">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-10 text-center">
                <h1 class="display-3 text-white animated slideInDown">Upload Files</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center">
                        <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                        <li class="breadcrumb-item"><a class="text-white" href="#">Question Bank</a></li>
                        <li class="breadcrumb-item text-white active" aria-current="page">Upload Files</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div> {% endcomment %}
<!-- Header End -->
<div class="container-xxl py-5">
    {% comment %} {% include "includes/message_alert.html" %} {% endcomment %}
    <div class="container">
        <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
            {% comment %} <h6 class="section-title bg-white text-center text-primary px-3">Upload Questions</h6> {% endcomment %}
            <h1 class="mb-5">Upload Question Data</h1>
        </div>
        <div class="row g-4">
            <div class="col-lg-12 wow fadeInUp" data-wow-delay="0.5s">
                <form id="uploadForm" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="file" class="form-label">Select Excel File to Upload</label>
                        <input type="file" class="form-control" id="file" name="file" required>
                    </div>
                    <button class="btn btn-primary w-100 py-3" type="submit">Upload File</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block custom_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('uploadForm');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            const fileInput = document.getElementById('file');
            if (!fileInput.value) {
                alert('Please select a file to upload.');
                return;
            }
            form.submit();
        });
    });
</script>
{% endblock custom_js %}