{% include "header.html"  %}
{% load static %}
<style>
    .cat-img{
        height: 100px;
    border-radius: 10px;
    margin: 10px;
    }
</style>

    <!-- main page  -->
    <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="page__heading">
                   
                    </div>
                   

                    <div class="row mb-3">
                        <div class="col-6">
                            <h1 class="heading">Exam Category Details</h1>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                                    
                                    <li class="breadcrumb-item" aria-current="page">Exam Category</li>
                                    <li class="breadcrumb-item active" aria-current="page">Exam Category Details</li>
                                </ol>
                            </nav>
                        </div>
                       
                    </div>
                  
                </div>



                <div class="container page__container exam-module mt-4">
                    <div class="card card-body">
                        <div class="row no-gutters">

                            <div class="col-lg-12 card-body">
                            <div>
                                <div class="row mb-4">
                                    <div class="col-md-3 text-center">
                                        {% if exam_category.image %}
                                            <img src="{{ exam_category.image.url }}" alt="" class="img-fluid cat-img">
                                        {% else %}
                                            <p> Image Not Available</p>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-8">
                                        <h5 class="mb-2">Exam Category Name : {{exam_category.exam_category_name}}</h5>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p>Marks per Questions :</p>
                                            </div>
                                            <div class="col-md-6">
                                                <p>
                                                    {{exam_category.marks_per_question}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p>Negative mark per Question :</p>
                                            </div>
                                            <div class="col-md-6">
                                                <p>
                                                    {{exam_category.negative_marks_per_question}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p>Section Wise Timer :</p>
                                            </div>
                                            <div class="col-md-6">
                                                <p>
                                                    {% if exam_category.section_wise_timer == 1 %}
                                                        Yes
                                                    {% else %}
                                                        No
                                                    {% endif %}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p>Switching Between Section :</p>
                                            </div>
                                            <div class="col-md-6">
                                                <p>
                                                    {% if exam_category.section_switching == 1 %}
                                                        Yes
                                                    {% else %}
                                                        No
                                                    {% endif %}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p>Calculator Allowed :</p>
                                            </div>
                                            <div class="col-md-6">
                                                <p>
                                                    {% if exam_category.calculator == 1 %}
                                                        Yes
                                                    {% else %}
                                                        No
                                                    {% endif %}
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <p>Status :</p>
                                            </div>
                                            <div class="col-md-6">
                                                <p> {{exam_category.status}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 text-end">
                                    <a class="btn add-btn"
                                    href="{{SITE_URL}}/admin/add-exam-syllabus/{{exam_category.id}}">Add Syllabus</a>
                                </div>
                            </div>
                                <div class="table-responsive" data-toggle="lists"
                                    data-lists-values='["js-lists-values-employee-name"]'>

                                  

                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th >Section</th>
                                                <th >Sub-section</th>
                                                <th >Topics</th>
                                            </tr>
                                           
                                        </thead>
                                        <tbody>
                                            {% for section, section_data in sections_data.items %}
                                                <tr>
                                                    <td rowspan="{{ section_data.rowspan }}">
                                                        {{ section.section_name }}
                                                        <span class="float-end">
                                                            <a href="#modal-delete" class="delete-button-section badge badge-danger p-0"
                                                                data-toggle="modal" data-id="{{ section.id }}" data-type="section">
                                                                <i class="fas fa-trash delete"></i>
                                                            </a>
                                                        </span>
                                                    </td>
                                                    {% for subsection, subsection_data in section_data.subsections.items %}
                                                        <td rowspan="{{ subsection_data.rowspan }}">
                                                            {{ subsection.sub_section_name }}
                                                            <span class="float-end">
                                                                <a href="#modal-delete" class="delete-button-subsection badge badge-danger p-0"
                                                                    data-toggle="modal" data-id="{{ subsection.id }}" data-type="subsection">
                                                                    <i class="fas fa-trash delete"></i>
                                                                </a>
                                                            </span>
                                                        </td>
                                                        {% for topic in subsection_data.topics %}
                                                            <td>
                                                                {{ topic.topic_name }} 
                                                                <span class="float-end">
                                                                    <a href="#modal-delete" class="delete-button-topic badge badge-danger p-0"
                                                                        data-toggle="modal" data-id="{{ topic.id }}" data-type="topic">
                                                                        <i class="fas fa-trash delete"></i>
                                                                    </a>
                                                                </span>
                                                            </td>
                                                        </tr>
                                                        {% if not loop.last %}
                                                            <tr>
                                                        {% endif %}
                                                        {% endfor %}
                                                    {% endfor %}
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                    
                                    
                                  

                                </div>
                               <div class="text-center">
                                <a href="{% url 'exam_category' %}" class="btn add-btn">Back to Exam Categories</a>
                               </div>
                            </div>
                        </div>
                      
                    </div>

                    
                  
                </div>
             
            </div>

            
            <!-- // END drawer-layout__content -->

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

    </div>
    <!-- // END header-layout__content -->

</div>

<!-- // END header-layout -->

{% include "footer.html" %}

  


   

 


  

</div>

<div id="modal-delete" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <form method="post" enctype="multipart/form-data" id="delete_form">
                    {% csrf_token %}
                    <h4>Are you sure you want to delete this item?</h4>
                    <input type="hidden" name="id" id="delete_id" />
                    <input type="hidden" name="type" id="delete_type" />
                    <button type="submit" class="btn btn-danger">Yes</button>
                    <button type="button" class="btn btn-light text-dark" data-dismiss="modal">No</button>
                </form>
            </div> 
        </div> 
    </div> 
</div>





</body>




   

</html>

<script>
    // When a delete button is clicked, set the ID and type (section, subsection, topic) in the hidden inputs
$('.delete-button-section, .delete-button-subsection, .delete-button-topic').click(function() {
    var id = $(this).data('id');
    var type = $(this).data('type');
    
    // Set the ID and type in the hidden fields
    $('#delete_id').val(id);
    $('#delete_type').val(type);
    
    // Show the modal
    $('#modal-delete').modal('show');
});

// Handle form submission for deletion
$('#delete_form').submit(function(event) {
    event.preventDefault(); // Prevent form from submitting normally
    var formData = new FormData($(this)[0]);

    // Send the AJAX request
    $.ajax({
        url: '{% url "delete_examitem" %}',  // URL to delete item (section, subsection, or topic)
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if(response.status === 'success') {
                $('#modal-delete').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'Item deleted successfully.',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        location.reload();
                    }
                });
            } else {
                $('#delete_msg').html('<div class="text-danger">' + response.msg + '</div>');
            }
        },
        error: function(xhr, status, error) {
            console.log(error);  // Log any error
        }
    });
});

</script>