{%include "header.html"%}

<!-- Header Layout Content -->
<div class="mdk-header-layout__content" id="main">

  <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">

          </nav>
        </div>

        <div class="row mb-3">
          <div class="col-6">
            <h1 class="heading">{{counseling_detail.title}}</h1>
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Counselling Groups Details</li>
              </ol>
          </div>
          <div class="col-6">
            <div class="d-flex justify-content-end">
              <button type="button" class="add-btn" data-toggle="modal" data-target="#add-counseling-students">Add
                Students</button>
            </div>
          </div>
        </div>

        <div class="row">
          <!-- <div class="col-md-6">
            <p>Course Name :{{counseling_detail.course.course_name}}</p>
          </div> -->
          <div class="col-md-6">
            <p>Exam Name : {{counseling_detail.exam.exam_category_name}}</p>
          </div>
        </div>


      </div>



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

            <div class="col-lg-12 card-body">

              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="counselling_students-tab" data-bs-toggle="pill"
                    data-bs-target="#counselling_students" type="button" role="tab" aria-controls="counselling_students"
                    aria-selected="true">Counselling Students</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="non_counselling_students-tab" data-bs-toggle="pill"
                    data-bs-target="#non_counselling_students" type="button" role="tab"
                    aria-controls="non_counselling_students" aria-selected="false">Non Counselling Students</button>
                </li>

              </ul>
              <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="counselling_students" role="tabpanel"
                  aria-labelledby="counselling_students-tab">
                  <div class="table-responsive border-bottom" data-toggle="lists"
                    data-lists-values='["js-lists-values-employee-name"]'>

                    <table class="table mb-4">
                      <thead class="table-heading">
                        <tr>
                          <th class="table-head">Sr.No.</th>
                          <th class="table-head">Name</th>
                          <th class="table-head">Marks</th>
                          <th class="table-head">isAdmin</th>
                          <th class="table-head">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for student_info in paid_students %}
                        <tr>
                          <td>{{ forloop.counter }}</td>
                          <td>{{ student_info.name }}</td>
                          <td>{{ student_info.marks }}</td>
                          <td>
                            {% if student_info.is_admin %}
                            <span class="badge badge-success">Yes</span>
                            {% else %}
                            <span class="badge badge-secondary">No</span>
                            {% endif %}
                          </td>
                          <td class="text-center">
                            <a href="#modal-delete-counseling-student"
                               class="badge badge-danger delete-counseling-student-button delete-btn"
                               data-toggle="modal"
                               data-id="{{ student_info.student.id }}"
                               data-counseling-group-id="{{ student_info.student.counseling_group.id }}">
                              <i class="fas fa-trash delete"></i>
                            </a>
                          </td>
                        </tr>
                        {% empty %}
                        <tr>
                          <td colspan="4" class="text-center">No paid students.</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                    





                  </div>

                </div>
                <div class="tab-pane fade" id="non_counselling_students" role="tabpanel"
                  aria-labelledby="non_counselling_students-tab">
                  <div class="table-responsive border-bottom" data-toggle="lists"
                    data-lists-values='["js-lists-values-employee-name"]'>

<table class="table mb-4">
  <thead class="table-heading">
    <tr>
      <th class="table-head">Sr.No.</th>
      <th class="table-head">Name</th>
      <th class="table-head">Marks</th>
      <th class="table-head">isAdmin</th>
      <th class="table-head">Action</th>
    </tr>
  </thead>
  <tbody>
    {% for student_info in unpaid_students %}
    <tr>
      <td>{{ forloop.counter }}</td>
      <td>{{ student_info.name }}</td>
      <td>{{ student_info.marks }}</td>
      <td>
        {% if student_info.is_admin %}
        <span class="badge badge-success">Yes</span>
        {% else %}
        <span class="badge badge-secondary">No</span>
        {% endif %}
      </td>
      <td class="text-center">
        <a href="#modal-delete-counseling-student"
           class="badge badge-danger delete-counseling-student-button delete-btn"
           data-toggle="modal"
           data-id="{{ student_info.student.id }}"
           data-counseling-group-id="{{ student_info.student.counseling_group.id }}">
          <i class="fas fa-trash delete"></i>
        </a>
      </td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="4" class="text-center">No unpaid students.</td>
    </tr>
    {% endfor %}
  </tbody>
</table>





                  </div>

                </div>

              </div>


            </div>
          </div>
        </div>

        <div class="col-lg-12 p-0">
          <ul class="pagination m-0">
            {% if counseling_students.has_previous %}
            <li class="page-item ">
              <a class="page-link" href="?page={{ counseling_students.previous_page_number }}{{filter}}"
                aria-label="Previous">
                <span aria-hidden="true" class="material-icons">chevron_left</span>
                <span>Prev</span>
              </a>
            </li>
            {% endif %}

            <li class="page-item active ">
              <a class="page-link" href="?page={{ counseling_students.number }}{{filter}}" aria-label="1">
                <span>{{ counseling_students.number }}</span>
              </a>
            </li>

            {% if counseling_students.has_next %}

            <li class="page-item">
              <a class="page-link" href="?page={{ counseling_students.next_page_number }}{{filter}}" aria-label="Next">
                <span>Next</span>
                <span aria-hidden="true" class="material-icons">chevron_right</span>
              </a>
            </li>
            {% endif %}
          </ul>
        </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"%}


<script>
  (function () {
    'use strict';
    // ENABLE sidebar menu tabs
    $('#sidebar-mini-tabs [data-toggle="tab"]').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })()



</script>

<script>
  $(document).ready(function () {
    $('.select2').select2({
      dropdownParent: $('body') // Ensures the dropdown renders outside the scrollable container
    });
  });
</script>




<!-- Add Students to Counseling Group Modal -->
<div id="add-counseling-students" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <div class="px-3">
          <h4 class="modal-heading mb-3">Add Students to Counseling Group</h4>
          <form id="add_counseling_students_form" method="post" enctype="multipart/form-data" class="modal-form">
            {% csrf_token %}
            <input type="hidden" name="counseling_group_id" value="{{ counseling_detail.id }}" />

            <div class="row">
              <div class="col-md-6 form-group">
                <label for="course">Course</label>
                <select id="course" name="course" class="form-control">
                  <option value="">Select Course</option>
                  {% for course in courses %}
                  <option value="{{ course.id }}">{{ course.course_name }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="col-md-6 form-group">
                <label for="exam">Exam</label>
                <select id="exam" name="exam" class="form-control">
                  <option value="">Select Exam</option>
                  {% for exam in exams %}
                  <option value="{{ exam.id }}">{{ exam.exam_category_name }}</option>
                  {% endfor %}
                </select>
              </div>

              <div class="col-md-12 form-group">
                <label for="student">Select Students</label>
                <select id="student" name="student" class="form-select select2" multiple="multiple" multiple>
                  {% for student in all_students %}
                  <option value="{{ student.id }}">{{ student.first_name }} {{ student.last_name }}</option>
                  {% endfor %}
                </select>
              </div>


            </div>

            <div id="msg" class="mt-4 mb-4"></div>

            <div class="form-group text-center">
              <button class="btn modal-btn" type="submit">Add Students</button>
              <button type="button" class="btn modal-btn-cancel ms-4" data-dismiss="modal">Cancel</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>









<!-- Delete Counseling Group Student Modal -->
<div id="modal-delete-counseling-student" 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_counseling_student">
          {% csrf_token %}
          <h4 class="">Are you sure you want to remove this student from the Counseling Group?</h4>
          <input type="hidden" name="id" id="delete_id_counseling_student" />
          <input type="hidden" name="counseling_group_id" id="delete_counseling_group_id" />
          <div id="delete_msg_counseling_student" class="my-2"></div>
          <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>

<script>
  $('#add_counseling_students_form').submit(function (event) {
    event.preventDefault();

    var formData = new FormData($(this)[0]);

    $.ajax({
      url: '{% url "add_counseling_students" %}',  // Define this name in your urls.py
      type: 'POST',
      data: formData,
      processData: false,
      dataType: 'json',
      contentType: false,
      success: function (response) {
        if (response.status == 'success') {
          $('#add-counseling-students').modal('hide');
          setTimeout(function () {
            Swal.fire({
              icon: 'success',
              title: 'Success!',
              text: 'Students added to counseling group successfully.',
              confirmButtonColor: '#3085d6',
              confirmButtonText: 'OK'
            });
          }, 1000);
          setTimeout(function () {
            location.reload();
          }, 1500);
        } else {
          $('#msg').html('<div class="text-danger">' + response.msg + '</div>');
        }
      },
      error: function (xhr, status, error) {
        console.log(error);
      }
    });
  });
</script>








<script>
  // Set Student ID when delete button clicked
  $('.delete-counseling-student-button').on('click', function () {
    const studentId = $(this).data('id');
    const counselingGroupId = $(this).data('counseling-group-id');  // Get the counseling group ID

    // Set the values in the modal
    $('#delete_id_counseling_student').val(studentId);
    $('#delete_counseling_group_id').val(counselingGroupId);  // Set the counseling group ID
  });

  // Handle the delete form submission
  $('#delete_form_counseling_student').submit(function (event) {
    event.preventDefault();

    var formData = new FormData(this);

    $.ajax({
      url: '{% url "delete_counseling_student_by_id" %}',  // Replace with your actual URL name
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      dataType: 'json',
      success: function (response) {
        if (response.status === 'success') {
          $('#modal-delete-counseling-student').modal('hide');
          setTimeout(function () {
            Swal.fire({
              icon: 'success',
              title: 'Deleted!',
              text: response.msg,
              confirmButtonColor: '#3085d6',
              confirmButtonText: 'OK'
            });
          }, 500);
          setTimeout(function () {
            location.reload();  // Refresh to update student list
          }, 1000);
        } else {
          $('#delete_msg_counseling_student').html('<div class="text-danger">' + response.msg + '</div>');
        }
      },
      error: function (xhr, status, error) {
        console.error(error);
      }
    });
  });
</script>




</html>