{%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">Counselling Groups</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</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-group">Add
                Group</button>
            </div>
          </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">

              <div class="table-responsive border-bottom" data-toggle="lists"
                data-lists-values='["js-lists-values-employee-name"]'>

                <table class="table mb-0 thead-border-top-0">
                  <thead class="table-heading">
                    <tr>
                      <th class="table-head">Sr.No.</th>
                      <th class="table-head">Title</th>
                      <th class="table-head">Min Marks</th>
                      <th class="table-head">Max Marks</th>
                      <th class="table-head">Attempted Mocks</th>
                      <th class="table-head"> Mock Deadline</th>
                      <th class="table-head">Exam Name</th>
                      <!-- <th class="table-head">Course Name</th> -->
                      <th class="table-head">Status</th>
                      <th class="table-head text-center">Action</th>
                    </tr>
                  </thead>
                  <tbody class="list" id="counselinggroups">
                    {% for group in all_groups %}
                    <tr>
                      <td>{{ forloop.counter }}</td>
                      <td><a href="{{SITE_URL}}/admin/counseling-group-detail/{{ group.id }}/"> {{ group.title }}</a>
                      </td>
                      <td>{{ group.min_marks }}</td>
                      <td>{{ group.max_marks }}</td>
                      <td>{{ group.attempted_mocks }}</td>
                      <td>{{ group.mock_deadline }}</td>
                    
                      <td>{{ group.exam.exam_category_name }}</td>
                      <td>
                        {% if group.status == "active" %}
                        <span class="badge badge-success status active">Active</span>
                        {% else %}
                        <span class="badge badge-warning text-white status inactive">Inactive</span>
                        {% endif %}
                      </td>

                      <td class="text-center">
                        <a href="#modal-delete-counseling-group"
                          class="delete-counseling-group-button badge badge-danger delete-btn" data-toggle="modal"
                          data-id="{{ group.id }}">
                          <i class="fas fa-trash delete"></i>
                        </a>
                        <a href="#edit-counseling-group" data-toggle="modal"
                          class="edit-counseling-group-button badge badge-warning edit-btn" data-id="{{ group.id }}"
                          data-title="{{ group.title }}" data-min_marks="{{ group.min_marks }}"
                          data-max_marks="{{ group.max_marks }}" data-attempted_mocks="{{ group.attempted_mocks }}"
                          data-exam="{{ group.exam.id }}" data-status="{{ group.status }}"
                          data-mock_deadline="{{ group.mock_deadline }}">
                          <i class="fas fa-edit"></i>
                        </a>
                      </td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>




              </div>

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

        <div class="col-lg-12 p-0">
          <ul class="pagination m-0">
            {% if all_groups.has_previous %}
            <li class="page-item ">
              <a class="page-link" href="?page={{ all_groups.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={{ all_groups.number }}{{filter}}" aria-label="1">
                <span>{{ all_groups.number }}</span>
              </a>
            </li>

            {% if all_groups.has_next %}

            <li class="page-item">
              <a class="page-link" href="?page={{ all_groups.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>




<!-- Counseling Group Modal -->
<div id="add-counseling-group" 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 Counseling Group</h4>
          <form id="add_counseling_group_form" method="post" enctype="multipart/form-data" class="modal-form">
            {% csrf_token %}
            <div class="row">
              <div class="col-md-6 form-group">
                <label for="title">Title</label>
                <input class="form-control" type="text" id="title" name="title" placeholder="Title" />
              </div>
              <div class="col-md-6 form-group">
                <label for="min_marks">Min Marks</label>
                <input class="form-control" type="number" id="min_marks" name="min_marks" placeholder="Min Marks" />
              </div>
              <div class="col-md-6 form-group">
                <label for="max_marks">Max Marks</label>
                <input class="form-control" type="number" id="max_marks" name="max_marks" placeholder="Max Marks" />
              </div>
              <div class="col-md-6 form-group">
                <label for="attempted_mocks">Attempted Mocks</label>
                <input class="form-control" type="number" id="attempted_mocks" name="attempted_mocks"
                  placeholder="Attempted Mocks" />
              </div>

              <div class="col-md-6 form-group">
                <label for="mock_deadline">Mocks Deadline</label>
                <input class="form-control" type="date" id="mock_deadline" name="mock_deadline"
                  placeholder=" Mock Deadline" />
              </div>

              <div class="col-md-6 form-group">
                <label for="exam">Exam</label>
                <select id="exam" name="exam" class="form-select">
                  {% for exam in exams %}
                  <p>{{exam.exam_category_name}}</p>
                  <option value="{{ exam.id }}">{{ exam.exam_category_name }}</option>
                  {% endfor %}
                </select>
              </div>
              <!-- <div class="col-md-6 form-group">
                <label for="exam">Course</label>
                <select id="exam" name="exam" class="form-select">
                  {% for exam in exams %}
                  <p>{{exam.exam_category_name}}</p>
                  <option value="{{ exam.id }}">{{ exam.exam_category_name }}</option>
                  {% endfor %}
                </select>
              </div> -->
              <div class="col-md-6 form-group">
                <label for="status">Status</label>
                <select id="status" name="status" class="form-control">
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                </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</button>
              <button type="button" class="btn modal-btn-cancel ms-4" data-dismiss="modal">Cancel</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- Edit Counseling Group Modal -->
<div id="edit-counseling-group" 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">Edit Counseling Group</h4>
          <form id="edit_counseling_group_form" method="post" enctype="multipart/form-data" class="modal-form">
            {% csrf_token %}
            <input type="hidden" name="id" id="edit_group_id">
            <div class="row">
              <div class="col-md-6 form-group">
                <label for="edit_title">Title</label>
                <input class="form-control" type="text" id="edit_title" name="title" placeholder="Title" />
              </div>
              <div class="col-md-6 form-group">
                <label for="edit_min_marks">Min Marks</label>
                <input class="form-control" type="number" id="edit_min_marks" name="min_marks"
                  placeholder="Min Marks" />
              </div>
              <div class="col-md-6 form-group">
                <label for="edit_max_marks">Max Marks</label>
                <input class="form-control" type="number" id="edit_max_marks" name="max_marks"
                  placeholder="Max Marks" />
              </div>
              <div class="col-md-6 form-group">
                <label for="edit_attempted_mocks">Attempted Mocks</label>
                <input class="form-control" type="number" id="edit_attempted_mocks" name="attempted_mocks"
                  placeholder="Attempted Mocks" />
              </div>
              <div class="col-md-6 form-group">
                <label for="edit_mock_deadline">Mocks Deadline</label>
                <input class="form-control" type="date" id="edit_mock_deadline" name="mock_deadline"
                  placeholder=" Mock Deadline" />
              </div>

              <div class="col-md-6 form-group">
                <label for="edit_exam">Exam</label>
                <select id="edit_exam" name="exam" class="form-select">
                  {% for exam in exams %}
                  <option value="{{ exam.id }}">{{ exam.exam_category_name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-6 form-group">
                <label for="edit_status">Status</label>
                <select id="edit_status" name="status" class="form-control">
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                </select>
              </div>
            </div>

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

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




<!-- Counseling Group Delete Modal -->
<div id="modal-delete-counseling-group" 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_group">
          {% csrf_token %}
          <h4 class="">Are you sure you want to delete this Counseling Group?</h4>
          <input type="hidden" name="id" id="delete_id_counseling_group" />
          <div id="delete_msg_counseling_group" 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_group_form').submit(function (event) {
    event.preventDefault();

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


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



<script>
  // On edit button click, populate the modal with values
  $('.edit-counseling-group-button').click(function () {
    var button = $(this);

    $('#edit_group_id').val(button.data('id'));
    $('#edit_title').val(button.data('title'));
    $('#edit_min_marks').val(button.data('min_marks'));
    $('#edit_max_marks').val(button.data('max_marks'));
    $('#edit_attempted_mocks').val(button.data('attempted_mocks'));
    $('#edit_mock_deadline').val(button.data('mock_deadline'));
    $('#edit_exam').val(button.data('exam'));
    $('#edit_status').val(button.data('status'));
  });

  // On edit form submission
  $('#edit_counseling_group_form').submit(function (event) {
    event.preventDefault();

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

    $.ajax({
      url: '{% url "edit_counseling_group" %}',
      type: 'POST',
      data: formData,
      processData: false,
      dataType: 'json',
      contentType: false,
      success: function (response) {
        if (response.status == 'success') {
          $('#edit-counseling-group').modal('hide');
          setTimeout(function () {
            Swal.fire({
              icon: 'success',
              title: 'Success!',
              text: 'Counseling Group Updated Successfully.',
              confirmButtonColor: '#3085d6',
              confirmButtonText: 'OK'
            });
          }, 1000);
          setTimeout(function () {
            location.reload();
          }, 1000);
        } else {
          $('#edit_msg').html('<div class="text-danger">' + response.msg + '</div>');
        }
      },
      error: function (xhr, status, error) {
        console.log(error);
      }
    });
  });
</script>




<script>
  // Set Counseling Group ID when delete button clicked
  $('.delete-counseling-group-button').click(function () {
    var id = $(this).data('id');
    $('#delete_id_counseling_group').val(id);
  });

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

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

    $.ajax({
      url: '{% url "delete_counseling_group_by_id" %}',
      type: 'POST',
      data: formData,
      processData: false,
      dataType: 'json',
      contentType: false,
      success: function (response) {
        if (response.status == 'success') {
          $('#modal-delete-counseling-group').modal('hide');
          setTimeout(function () {
            Swal.fire({
              icon: 'success',
              title: 'Deleted!',
              text: response.msg,
              confirmButtonColor: '#3085d6',
              confirmButtonText: 'OK'
            });
          }, 500);
          setTimeout(function () {
            location.reload();
          }, 1000);
        } else {
          $('#delete_msg_counseling_group').html('<div class="text-danger">' + response.msg + '</div>');
        }
      },
      error: function (xhr, status, error) {
        console.log(error);
      }
    });
  });

</script>



</html>