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

<style>
    .mt-12px{
        margin-top: 12px !important;
    }
</style>

<!-- Header Layout Content -->
<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 mx-4"></div>

            <div class="container page__container exam-module mock-test-list-add">
                <h2 class="mt-4 mb-4">Add Syllabus Form</h2>
                <div class="card card-form">
                    <div class="row no-gutters">
                        <div class="col-lg-12 card-form__body">
                            <form id="add_exam_syllabus" method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <input type="hidden" name="exam-category-id" value="{{id}}">
                                {% for section in section_list %}
                                <div class="row mb-4" data-section-name="{{ section.section.section_name }}" data-section-id="{{ section.section.id }}">
                                    <div class="col-12">
                                        <h5>Section Name: {{ section.section.section_name }}</h5>
                                        <input type="hidden" name="section-id" value="{{ section.section.id }}">
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div class="row">
                                            <div class="col-md-5">
                                                <div class="form-group">
                                                    <label for="sub_section">Select Sub Section</label>
                                                    <select class="sub_section  form-control" name="sub_section_id">
                                                        <option value="">Select Sub Section</option>
                                                        {% for sub_section in sub_section_dict|get_item:section.section.id %}
                                                        <option value="{{ sub_section.id }}">{{ sub_section.sub_section_name }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-5">
                                                <div id="s_topic">
                                                    <div class="form-group">
                                                        <label for="topic">Select Topic</label>
                                                        <select data-toggle="select" class="form-control select2 topic" multiple="multiple" name="topic_ids">
                                                            <option value="">Select Topic</option>
                                                            {% for topic in topic %}
                                                                <option value="{{ topic.id }}">{{ topic.topic_name }}</option>
                                                            {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="mt-12px">
                                                    <button class="btn btn-primary w-100 text-white add_data_btn" type="button">Add</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table align-middle" id="dataTable">
                                                <thead>
                                                    <tr>
                                                        <th>Sub Section Name</th>
                                                        <th>Topic Names</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <!-- Data will be dynamically added here -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}

                                <div class="row d-flex justify-content-center">
                                    <div class="col-md-2 col-6 d-flex justify-content-center align-items-center">
                                        <div class="form-group text-center w-100">
                                            <button class="btn add-btn w-100" type="submit" id="add-exam-syllabus">Add</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- drawer -->
        {% include "sidebar.html" %}
        <!-- // END drawer -->
    </div>
    <!-- // END drawer-layout -->
</div>
<!-- // END header-layout -->


{% include "footer.html" %}

<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Select here",
            maximumSelectionSize: 100
        });

        $('.add_data_btn').on('click', function() {
                const sectionRow = $(this).closest('.row.mb-4');
                const subSectionSelect = sectionRow.find('.sub_section');
                const topicSelect = sectionRow.find('.select2');

                const selectedSubSection = subSectionSelect.find('option:selected').text();
                const selectedSubSectionId = subSectionSelect.val();
                const selectedTopics = topicSelect.val();
                const selectedTopicNames = selectedTopics.map(topicId => {
                    return topicSelect.find(`option[value="${topicId}"]`).text();
                });

                const sectionId = sectionRow.data('section-id');  // Get the section ID from data attribute

                if (!selectedSubSectionId || selectedTopics.length === 0) {
                    alert("Please select a sub-section and at least one topic.");
                    return;
                }

                const dataTableBody = sectionRow.find('#dataTable tbody');
                const newRow = `<tr>
                    <td>${selectedSubSection}</td>
                    <td>${selectedTopicNames.join(', ')}</td>
                </tr>`;
                dataTableBody.append(newRow);

                // Add hidden inputs for sub-section and section data
                sectionRow.append(`
                    <input type="hidden" name="sub_section_ids[]" value="${selectedSubSectionId}">
                    <input type="hidden" name="section_id_for_${selectedSubSectionId}" value="${sectionId}">
                    <input type="hidden" name="topic_ids_for_${selectedSubSectionId}[]" value="${selectedTopics.join(',')}">
                `);

                subSectionSelect.val('').trigger('change');
                topicSelect.val([]).trigger('change');
            });

        // Prevent default form submission behavior and handle it via AJAX
        $('#add_exam_syllabus').submit(function(event) {
            event.preventDefault();  // Prevent normal form submission
            const formData = new FormData(this);

            $.ajax({
                url: '{% url "add_exam_syllabus" %}',  // Update with your view URL
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Exam syllabus created successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then(function() {
                            location.reload();
                        });
                    } else {
                        $('#msg').html('<div class="text-danger">'+response.msg+'</div>');
                    }
                },
                error: function(xhr, status, error) {
                    console.log(error);
                }
            });
        });
    });
</script>

<script>
     $(".sub_section").change(function() {
          //  alert();
            var sub_section = $(this).find("option:selected").val();
            
           // var category_level = $(this).attr("data-id");
            var html = '';
            if (sub_section != "") {
                $(".topic").empty();
                $.ajax({
                    url: '{% url "subsection_select" %}',
                    method: "GET",
                    data: {
                        sub_section: sub_section,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(response) {
                        // alert(response);
                        $('.topic').html(response);
                    
                    },
                });
            }
    });       
</script>