{%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">Zoom Keys</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">Zoom Keys</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-zoom-key">Add
                                Key</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">
                                <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">Zoom Id</th>
                                            <th class="table-head">Account Id</th>
                                            <th class="table-head">Nick Name</th>
                                            <th class="table-head">Client Id</th>
                                            <th class="table-head">Client Secret</th>
                                            <th class="table-head">Sdk Key</th>
                                            <th class="table-head">Sdk Secret</th>
                                            <th class="table-head">App Sdk Key</th>
                                            <th class="table-head">App Sdk Secret</th>
                                            <th class="table-head">Status</th>
                                            <th class="table-head text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="tbody " id="zoomkeys">
                                        {% for zoomkey in all_zoomkeys %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{ zoomkey.meet_id }}</td>
                                            <td>{{ zoomkey.account_id }}</td>
                                            <td>{{ zoomkey.nick_name }}</td>
                                            <td>{{ zoomkey.client_id }}</td>
                                            <td>{{ zoomkey.client_secret }}</td>
                                            <td>{{ zoomkey.sdk_key }}</td>
                                            <td>{{ zoomkey.sdk_secret }}</td>
                                            <td>{{ zoomkey.app_sdk_key }}</td>
                                            <td>{{ zoomkey.app_sdk_secret }}</td>
                                            <td>
                                                {% if zoomkey.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-zoomkey" class="delete-zoomkey-button badge badge-danger"
                                                    data-toggle="modal" data-id="{{ zoomkey.id }}">
                                                    <i class="fas fa-trash delete"></i>
                                                </a>
                                                <a href="#edit-zoom-key" class="edit-button badge badge-warning"
                                                    data-toggle="modal"  data-id="{{ zoomkey.id }}"
                                                    data-meet_id="{{ zoomkey.meet_id }}"
                                                    data-account_id="{{ zoomkey.account_id }}"
                                                    data-nick_name="{{ zoomkey.nick_name }}"
                                                    data-client_id="{{ zoomkey.client_id }}"
                                                    data-client_secret="{{ zoomkey.client_secret }}"
                                                    data-sdk_key="{{ zoomkey.sdk_key }}"
                                                    data-sdk_secret="{{ zoomkey.sdk_secret }}"
                                                    data-app_sdk_key="{{ zoomkey.app_sdk_key }}"
                                                    data-app_sdk_secret="{{ zoomkey.app_sdk_secret }}"
                                                    data-status="{{ zoomkey.status }}">
                                                    <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_zoomkeys.has_previous %}
                        <li class="page-item ">
                            <a class="page-link" href="?page={{ all_zoomkeys.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_zoomkeys.number }}{{filter}}" aria-label="1">
                                <span>{{ all_zoomkeys.number }}</span>
                            </a>
                        </li>

                        {% if all_zoomkeys.has_next %}

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




<!-- Zoom Key Modal -->
<div id="add-zoom-key" 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 Zoom Key</h4>
            <form id="add_zoomkey_form" method="post" enctype="multipart/form-data" class="modal-form">
              {% csrf_token %}
              <div class="row">
                <div class="col-md-6 form-group">
                  <label for="meet_id">Zoom ID</label>
                  <input class="form-control" type="text" id="meet_id" name="meet_id" placeholder="Zoom ID" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="account_id">Account ID</label>
                  <input class="form-control" type="text" id="account_id" name="account_id" placeholder="Account ID" />
                </div>
                <div class="col-md-6 form-group">
                    <label for="nick_name">Nick Name</label>
                    <input class="form-control" type="text" id="nick_name" name="nick_name" placeholder="Nick Name" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="client_id">Client ID</label>
                  <input class="form-control" type="text" id="client_id" name="client_id" placeholder="Client ID" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="client_secret">Client Secret</label>
                  <input class="form-control" type="text" id="client_secret" name="client_secret" placeholder="Client Secret" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="sdk_key">SDK Key</label>
                  <input class="form-control" type="text" id="sdk_key" name="sdk_key" placeholder="SDK Key" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="sdk_secret">SDK Secret</label>
                  <input class="form-control" type="text" id="sdk_secret" name="sdk_secret" placeholder="SDK Secret" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="app_sdk_key">App SDK Key</label>
                  <input class="form-control" type="text" id="app_sdk_key" name="app_sdk_key" placeholder="App SDK Key" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="app_sdk_secret">App SDK Secret</label>
                  <input class="form-control" type="text" id="app_sdk_secret" name="app_sdk_secret" placeholder="App SDK Secret" />
                </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-zoom-key -->
  

<!-- Edit Zoom Key Modal -->
<div id="edit-zoom-key" 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 Zoom Key</h4>
            <form method="post" enctype="multipart/form-data" class="edit_zoomkey_form modal-form">
              {% csrf_token %}
              <input type="hidden" name="id" id="edit_zoomkey_id" />
  
              <div class="row">
                <div class="col-md-6 form-group">
                  <label for="edit_meet_id">Zoom ID</label>
                  <input class="form-control" type="text" id="edit_meet_id" name="meet_id" placeholder="Zoom ID" />
                </div>
                <div class="col-md-6 form-group">
                    <label for="edit_nick_name">Nick Name</label>
                    <input class="form-control" type="text" id="edit_nick_name" name="nick_name" placeholder="Nick Name" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="edit_account_id">Account ID</label>
                  <input class="form-control" type="text" id="edit_account_id" name="account_id" placeholder="Account ID" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="edit_client_id">Client ID</label>
                  <input class="form-control" type="text" id="edit_client_id" name="client_id" placeholder="Client ID" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="edit_client_secret">Client Secret</label>
                  <input class="form-control" type="text" id="edit_client_secret" name="client_secret" placeholder="Client Secret" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="edit_sdk_key">SDK Key</label>
                  <input class="form-control" type="text" id="edit_sdk_key" name="sdk_key" placeholder="SDK Key" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="edit_sdk_secret">SDK Secret</label>
                  <input class="form-control" type="text" id="edit_sdk_secret" name="sdk_secret" placeholder="SDK Secret" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="edit_app_sdk_key">App SDK Key</label>
                  <input class="form-control" type="text" id="edit_app_sdk_key" name="app_sdk_key" placeholder="App SDK Key" />
                </div>
                <div class="col-md-6 form-group">
                  <label for="edit_app_sdk_secret">App SDK Secret</label>
                  <input class="form-control" type="text" id="edit_app_sdk_secret" name="app_sdk_secret" placeholder="App SDK Secret" />
                </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">Save</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-zoom-key -->
  



<!-- ZoomKey Delete Modal -->
<div id="modal-delete-zoomkey" 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_zoomkey">
                    {% csrf_token %}
                    <h4 class="">Are you sure you want to delete this Zoom Key?</h4>
                    <input type="hidden" name="id" id="delete_id_zoomkey" />
                    <div id="delete_msg_zoomkey" 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 Zoom Key
    $('#add_zoomkey_form').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();

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

        // Send the Ajax request
        $.ajax({
            url: '{% url "add_zoomkey" %}',  // Change this URL to match your Django view URL
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#add-zoom-key').modal('hide');  // Hide the modal
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'Zoom Key Added Successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload();  // Reload the page to reflect the changes
                    }, 1000);
                } else {
                    // Show error message if any
                    $('#msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle error response
                console.log(error);
            }
        });
    });
</script>


<script>
    // Set dynamic value in modal on button click for editing
    $('.edit-button').click(function () {
        var id = $(this).data('id');
        $('#edit_zoomkey_id').val(id); 

        $('#edit_meet_id').val($(this).data('meet_id')); 
        $('#edit_account_id').val($(this).data('account_id')); 
        $('#edit_nick_name').val($(this).data('nick_name')); 
        $('#edit_client_id').val($(this).data('client_id')); 
        $('#edit_client_secret').val($(this).data('client_secret')); 
        $('#edit_sdk_key').val($(this).data('sdk_key')); 
        $('#edit_sdk_secret').val($(this).data('sdk_secret')); 
        $('#edit_app_sdk_key').val($(this).data('app_sdk_key')); 
        $('#edit_app_sdk_secret').val($(this).data('app_sdk_secret')); 
        $('#edit_status').val($(this).data('status')); 
    });

    // Edit ZoomKey event
    $('.edit_zoomkey_form').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();

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

        // Send the AJAX request to update the ZoomKey
        $.ajax({
            url: '{% url "edit_zoomkey" %}', // URL to the Django view handling ZoomKey update
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#edit-zoom-key').modal('hide'); // Hide the modal after success
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'ZoomKey Updated Successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload(); // Reload the page to reflect the changes
                    }, 1000);
                }
                else {
                    $('#edit_msg').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle any errors in the AJAX request
                console.log(error);
            }
        });
    });
</script>



<script>
    // Set the ZoomKey ID when the delete button is clicked
    $('.delete-zoomkey-button').click(function () {
        var id = $(this).data('id'); // Get the ZoomKey ID from data-id attribute
        $('#delete_id_zoomkey').val(id); // Set the ZoomKey ID in the hidden field
    });

    // Handle the delete form submission for ZoomKey
    $('#delete_form_zoomkey').submit(function (event) {
        // Prevent the default form submission behavior
        event.preventDefault();

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

        // Send the Ajax request to delete the ZoomKey
        $.ajax({
            url: '{% url "delete_zoomkey_by_Id" %}', // Django view URL to handle deletion
            type: 'POST',
            data: formData,
            processData: false,
            dataType: 'json',
            contentType: false,
            success: function (response) {
                if (response.status == 'success') {
                    $('#modal-delete-zoomkey').modal('hide'); // Close the modal after success
                    setTimeout(function () {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: 'ZoomKey Deleted Successfully.',
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        });
                    }, 1000);
                    setTimeout(function () {
                        location.reload(); // Reload the page to reflect the changes
                    }, 1000);
                } else {
                    $('#delete_msg_zoomkey').html('<div class="text-danger">' + response.msg + '</div>');
                }
            },
            error: function (xhr, status, error) {
                // Handle any errors in the AJAX request
                console.log(error);
            }
        });
    });
</script>



</html>