{%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 Schedule list</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">Group list </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-schedule">Create Counseling Schedule 
                            </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">Group Title</th>
                                        <th class="table-head">Zoom Id</th>
                                        <th class="table-head">Meeting Id</th>
                                        <th class="table-head">Password</th>
                                        <th class="table-head">Counselling Date</th>
                                        <th class="table-head">Counselling Time</th>
                                        <th class="table-head">Status</th>
                                        <th class="table-head text-center">Action</th>
                                      </tr>
                                    </thead>
                                    <tbody class="list" id="counseling_schedule_list">
                                      {% for schedule in all_schedules %}
                                      <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td><a href="{{SITE_URL}}/admin/counseling-schedule-detail/{{ schedule.id }}/"> {{ schedule.counseling_group.title }} </a></td>
                                        <td>{{ schedule.zoom_key.meet_id }}</td>
                                        <td>{{ schedule.meeting_id }}</td>
                                        <td>{{ schedule.password }}</td>
                                        <td>{{ schedule.counseling_date }}</td>
                                        <td>{{ schedule.counseling_time }}</td>
                                        <td>
                                          {% if schedule.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-schedule"
                                              class="delete-counseling-schedule-button badge badge-danger delete-btn" data-toggle="modal"
                                              data-id="{{ schedule.id }}">
                                              <i class="fas fa-trash delete"></i>
                                            </a>
                                            <a href="#edit-counseling-schedule" data-toggle="modal"
                                            class="edit-counseling-group-button badge badge-warning edit-btn"
                                            data-id="{{ schedule.id }}"
                                            data-title="{{ schedule.counseling_group.title }}"
                                            data-zoom_id="{{ schedule.zoom_key.id }}"
                                            data-meeting_id="{{ schedule.meeting_id }}"
                                            data-password="{{ schedule.password }}"
                                            data-date="{{ schedule.counseling_date|date:'Y-m-d' }}"
                                            data-time="{{ schedule.counseling_time|time:'H:i' }}"
                                            data-status="{{ schedule.status }}">
                                            <i class="fas fa-edit"></i>
                                         </a>
                                          </td>
                                      </tr>
                                      {% empty %}
                                      <tr>
                                        <td colspan="9" class="text-center">No counseling schedules found.</td>
                                      </tr>
                                      {% endfor %}
                                    </tbody>
                                  </table>
                                  



                            </div>

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

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

                        {% if all_schedules.has_next %}

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




<!-- Add Counseling Schedule Modal -->
<div id="add-counseling-schedule" 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 Counselling Schedule</h4>
            <form id="add_counseling_schedule_form" method="post" enctype="multipart/form-data" class="modal-form">
              {% csrf_token %}
              <div class="row">
                <div class="col-md-6 form-group">
                  <label for="counseling_group">Counselling Group</label>
                  <select id="counseling_group" name="counseling_group" class="form-control">
                    {% for group in counseling_groups %}
                      <option value="{{ group.id }}">{{ group.title }}</option>
                    {% endfor %}
                  </select>
                </div>
  
                <div class="col-md-6 form-group">
                  <label for="zoom_key">Zoom Key</label>
                  <select id="zoom_key" name="zoom_key" class="form-control">
                    {% for key in zoom_keys %}
                      <option value="{{ key.id }}">{{ key.meet_id }}</option>
                    {% endfor %}
                  </select>
                </div>
  
                <!-- <div class="col-md-6 form-group">
                  <label for="meeting_id">Meeting ID</label>
                  <input class="form-control" type="text" id="meeting_id" name="meeting_id" placeholder="Meeting ID" />
                </div>
  
                <div class="col-md-6 form-group">
                  <label for="password">Password</label>
                  <input class="form-control" type="text" id="password" name="password" placeholder="Password" />
                </div> -->
  
                <div class="col-md-6 form-group">
                  <label for="counseling_date">Counselling Date</label>
                  <input class="form-control" type="date" id="counseling_date" name="counseling_date" />
                </div>
  
                <div class="col-md-6 form-group">
                  <label for="counseling_time">Counselling Time</label>
                  <input class="form-control" type="time" id="counseling_time" name="counseling_time" />
                </div>
  
                <!-- <div class="col-md-12 form-group">
                  <label for="meeting_data">Meeting Data</label>
                  <textarea class="form-control" id="meeting_data" name="meeting_data" rows="3" placeholder="Enter any extra meeting details..."></textarea>
                </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> <!-- // END .modal-body -->
      </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
  </div> <!-- // END #add-counseling-schedule -->
  

<!-- Edit Counseling Schedule Modal -->
<div id="edit-counseling-schedule" 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 Counselling Schedule</h4>
            <form id="edit_counseling_schedule_form" method="post" enctype="multipart/form-data" class="modal-form">
              {% csrf_token %}
              <input type="hidden" name="id" id="edit_schedule_id" />
  
              <div class="row">
                <div class="col-md-6 form-group">
                  <label for="edit_counseling_group">Counselling Group</label>
                  <select id="edit_counseling_group" name="counseling_group" class="form-control">
                    {% for group in counseling_groups %}
                      <option value="{{ group.id }}">{{ group.title }}</option>
                    {% endfor %}
                  </select>
                </div>
  
                <div class="col-md-6 form-group">
                  <label for="edit_zoom_key">Zoom Key</label>
                  <select id="edit_zoom_key" name="zoom_key" class="form-control">
                    {% for key in zoom_keys %}
                      <option value="{{ key.id }}">{{ key.meet_id }}</option>
                    {% endfor %}
                  </select>
                </div>
  
                <!-- <div class="col-md-6 form-group">
                  <label for="edit_meeting_id">Meeting ID</label>
                  <input class="form-control" type="text" id="edit_meeting_id" name="meeting_id" placeholder="Meeting ID" />
                </div>
  
                <div class="col-md-6 form-group">
                  <label for="edit_password">Password</label>
                  <input class="form-control" type="text" id="edit_password" name="password" placeholder="Password" />
                </div> -->
  
                <div class="col-md-6 form-group">
                  <label for="edit_counseling_date">Counselling Date</label>
                  <input class="form-control" type="date" id="edit_counseling_date" name="counseling_date" />
                </div>
  
                <div class="col-md-6 form-group">
                  <label for="edit_counseling_time">Counselling Time</label>
                  <input class="form-control" type="time" id="edit_counseling_time" name="counseling_time" />
                </div>
  
                <!-- <div class="col-md-12 form-group">
                  <label for="edit_meeting_data">Meeting Data</label>
                  <textarea class="form-control" id="edit_meeting_data" name="meeting_data" rows="3" placeholder="Enter any extra meeting details..."></textarea>
                </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> <!-- // END .modal-body -->
      </div> <!-- // END .modal-content -->
    </div> <!-- // END .modal-dialog -->
  </div> <!-- // END #edit-counseling-schedule -->
  
  



<!-- Counseling Schedule Delete Modal -->
<div id="modal-delete-counseling-schedule" 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_schedule">
            {% csrf_token %}
            <h4 class="">Are you sure you want to delete this Counseling Schedule?</h4>
            <input type="hidden" name="id" id="delete_id_counseling_schedule" />
            <div id="delete_msg_counseling_schedule" 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>
    // Listen for the form submission event for adding a Counseling Schedule
    $('#add_counseling_schedule_form').submit(function (event) {
        event.preventDefault();  // Prevent default form submission

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

        $.ajax({
            url: '{% url "add_counseling_schedule" %}',  // Change to your actual Django view URL name
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                if (response.status === 'success') {
                    $('#add-counseling-schedule').modal('hide');  // Hide modal

                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Counseling Schedule Added Successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 500);

                    setTimeout(function () {
                        location.reload();  // Refresh to reflect changes
                    }, 1000);
                } else {
                    $('#msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                console.error(error);
                $('#msg').html('<div class="text-danger">Something went wrong. Please try again.</div>');
            }
        });
    });
</script>



<script>
    // Populate modal fields on edit button click
$('.edit-counseling-group-button').on('click', function () {
    $('#edit_schedule_id').val($(this).data('id'));
    $('#edit_group').val($(this).data('title'));
    $('#edit_zoom_id').val($(this).data('zoom_id'));
    $('#edit_meeting_id').val($(this).data('meeting_id'));
    $('#edit_password').val($(this).data('password'));
    $('#edit_date').val($(this).data('date'));
    $('#edit_time').val($(this).data('time'));
    $('#edit_status').val($(this).data('status'));
});

// Submit updated schedule via AJAX
$('#edit_counseling_schedule_form').submit(function (event) {
    event.preventDefault();
    var formData = new FormData($(this)[0]);

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

</script>



<script>
    // Set the Counseling Schedule ID when the delete button is clicked
    $('.delete-counseling-schedule-button').click(function () {
        var id = $(this).data('id'); // Get the schedule ID from data-id attribute
        $('#delete_id_counseling_schedule').val(id); // Set the ID in the hidden input
    });

    // Handle the delete form submission for Counseling Schedule
    $('#delete_form_counseling_schedule').submit(function (event) {
        event.preventDefault(); // Prevent default form submission

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

        // Send AJAX request to delete schedule
        $.ajax({
            url: '{% url "delete_counseling_schedule_by_id" %}', // Django URL name
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status === 'success') {
                    $('#modal-delete-counseling-schedule').modal('hide'); // Close modal
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Deleted!',
                            text: response.msg || 'Counseling Schedule deleted successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 500);
                    setTimeout(function () {
                        location.reload(); // Reload to reflect deletion
                    }, 1000);
                } else {
                    $('#delete_msg_counseling_schedule').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                console.error(error);
                $('#delete_msg_counseling_schedule').html('<div class="text-danger">Something went wrong. Please try again.</div>');
            }
        });
    });
</script>




</html>