{% include "header.html" %}
{% load custom_filters %}
{% load static %}

<div class="mdk-header-layout__content">
    <div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">
        <div class="mdk-drawer-layout__content page">

            <div class="container page__heading-container">
                <div class="row mb-3">
                    <div class="col-6">
                        <h1 class="heading">Exam Validities</h1>
                    </div>
                    <div class="col-6">
                        <div class="d-flex justify-content-end">
                            <button class="add-btn" id="save-validities-btn">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container page__container">
                <div class="card card-body">
                    <form id="exam-validities-form">
                        {% csrf_token %}

                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead>
                                    <tr>
                                        <th>YEAR</th>
                                        {% for exam in exams %}
                                            <th>{{ exam.exam_category_name|upper }}</th>
                                        {% endfor %}
                                    </tr>
                                </thead>
                                <tbody>
    {% for row in data %}
    <tr>
        <td><strong>{{ row.year.name }}</strong></td>

        {% for item in row.values %}
        <td>
            <input
                type="date"
                name="expiry_{{ row.year.id }}_{{ item.exam.id }}"
                class="form-control"
                value="{{ item.expiry }}"
            >
        </td>
        {% endfor %}
    </tr>
    {% endfor %}
</tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        {% include "sidebar.html" %}
    </div>
</div>

{% include "footer.html" %}
<script>
$('#save-validities-btn').click(function () {
    var formData = $('#exam-validities-form').serialize();

    $.ajax({
        url: '{% url "saveExamValidities" %}',
        type: 'POST',
        data: formData,
        success: function(response) {
            if (response.status === 'success') {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: response.msg,
                    confirmButtonColor: '#3085d6'
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error!',
                    text: response.msg,
                    confirmButtonColor: '#d33'
                });
            }
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Something went wrong.',
                confirmButtonColor: '#d33'
            });
        }
    });
});
</script>