@extends('layouts.app')
@section('title', 'User List')

@section('content')
    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> -->
<style>
  .badge
{font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    font-family: "IBM Plex Sans", sans-serif;
    line-height: 1.5;}
    
</style>


<!-- Main content -->
        <section class="content">

      <div class="row">

       
        
        <div class="col-12">
          <div class="box">
       
            <div class="box-body">           
    <!-- <div class="d-flex justify-content-between align-items-center"> -->
    <h4 class="box-title text-info mb-0"><i class="icon-Add-user"><span class="path1"></span><span class="path2"></span></i> Extension List</h4>

        <!-- <h4 class="box-title"><i class="icon-Add-user"><span class="path1"></span><span class="path2"></span></i> </h4> -->
        @if(Session::get('role') === 'admin' || Session::get('role') === 'super_admin' || Session::get('role') === 'system_administrator')

        <a href="{{ url('extension?download=excel') }}"style="float:right;" type="button"  class="waves-effect waves-light btn btn-rounded btn-warning btn-bitbucket btn-sm mb-5"><i class="fa fa-file-text"></i> Excel</a>
        @endif
        @if(Session::get('level') > 5)
        <form method="post">
          @csrf
          <a href="{{ url('/add-extension') }}"style="float:right;margin-top:-22px;margin-right:10px;margin-bottom:15px;" type="button" class="waves-effect waves-light btn btn-rounded btn-primary btn-bitbucket btn-sm mb-5"><i class="fa fa-plus"></i> Add Extension</a>
        </form>
        @endif

    <!-- </div> -->
    <hr class="my-15">


              <div class="table-responsive">
                <table id="tickets11" class="table mt-0 table-hover no-wrap" data-page-size="10">
                  <thead>
                            <tr>
                              <th>#</th>
                              <th>Extension</th>                  
                              <th>Name</th>
                                    @if(Session::get('role') === 'system_administrator')
                                    <th>Role</th>
                              @endif
                              <th>Email</th>
                              <th>Phone Number</th>

                              @if(Session::get('level') > 5)

                              <th>Web Phone</th>

                              @endif
                              <th>Action</th>

                            </tr>
                  </thead>
                  <tbody>
                
          

                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
   
<style>
.modal-dialog {
    max-width: 580px !important;   
    margin: auto;
    margin-top: 20px !important;
}
</style>

<div class="modal custom-modal fade" id="myModalPassword" tabindex="-1" aria-labelledby="myModalPasswordLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-edit">Change Password</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="post" name="edit-extention" action="">
      @csrf
      <input type="hidden" class="form-control" name="ext_id" value="" id="ext_id" required>

      <div class="modal-body">
          <div class="form-group">
              <label for="inputEmail3" class="form-label">New Password</label>
              <input type="text" class="form-control" required name="password" id="password" placeholder="Enter New Password">
          </div>                        
  
          </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        <button type="submit"name="submit" class="btn btn-info btn-ok btn-sm">Save</button>
      </div>
        </form>
    </div>
  </div>
</div>
<div class="modal fade" id="refresh_extension" tabindex="-1" aria-labelledby="myModalPasswordLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Confirm Reset</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="post" name="edit-extention" action="">
      @csrf
      <input type="hidden" class="form-control" name="ext_id" value="" id="ext_id" required>

      <div class="modal-body">
      <p>You are about to Reset <b><i class="title"></i></b> Extension.</p>
                                <p>Do you want to proceed?</p>                       
            <input type="hidden" class="form-control" name="label_id" value="" id="label_id">

          </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        <button type="submit"name="submit" class="btn btn-info btn-ok btn-sm deleteRefreshExtension">Reset</button>
      </div>
        </form>
    </div>
  </div>
</div>
<div class="modal fade" id="changePermissionModal" tabindex="-1" aria-labelledby="changePermissionModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="change-permission-title">Change permission</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
        <form method="post" name="save-user-roles-form" id="save-user-roles-form" action="{{ route('saveUserRoles') }}">
        @csrf

            <div class="modal-body">
                                  <div id="role-modal-loader" style="display:none; text-align: center;">
                                          <img src="assets/images/loader.gif" alt="loading..." height=100 width=100 />
                                      </div>
                                      <input type="hidden" class="form-control" name="role_ext_id" value="" id="role_ext_id" required>
                                      <div id="change-permission-body"></div>
                                  </div>                      
    
            <div class="modal-footer">
              <button type="button"id="role-modal-close" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
              <button type="submit" id="role-modal-save" style="display: none;"class="btn btn-info btn-ok btn-sm">Save</button>
            </div>
        </form>
    </div>
  </div>
</div>

<style>
.custom-modal-width {
    max-width: 90% !important; 
    width: 780px !important;
}
</style>
<!-- Replace id="myModal" with this -->
<div class="modal fade" id="extensionModal"  tabindex="-1"  aria-labelledby="extensionModalLabel" aria-hidden="true">
  <div class="modal-dialog lender-modal custom-modal-width">
    <div class="modal-content">
<div class="modal-header border-bottom" style="border-bottom: 1px solid #ddd;"> 
    <h4 class="text-dark mb-0" style="font-weight: 400; font-size: 1.25rem;">
        <i class="ti-id-badge" style="color: black; position: relative; top: 1px;"></i> User Details
    </h4>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

  <div class="modal-body" id="extensionModalBody">
    <!-- We'll load the form here dynamically -->
  </div>
</div>
  </div>
</div>
<div class="modal fade" id="delete" tabindex="-1" aria-labelledby="deleteLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Confirm Delete</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
     

      <div class="modal-body">
      <p>You are about to delete <b><i class="title"></i></b> Extension.</p>
                                <p>Do you want to proceed?</p>                       
                                <input type="hidden" class="form-control" name="label_id" value="" id="extension_id">

          </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        <button type="submit"name="submit" class="btn btn-danger btn-ok btn-sm deleteExtension">Delete</button>
      </div>
    </div>
  </div>
</div>


 <!-- Modal Start -->
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content border-0 rounded-4 shadow">

      <!-- Modal Header -->
      <div class="modal-header border-bottom pb-2 pt-2">
        <h5 class="modal-title fw-semibold">User Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body pt-2 pb-1">
        <div class="container-fluid">
          <div class="row g-1">
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-user fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Full Name</div>
                  <div class="fw-semibold">John Doe</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-email fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Email</div>
                  <div class="fw-semibold">john.doe@example.com</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-mobile fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Country Code</div>
                  <div class="fw-semibold">+91</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-user fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Extension</div>
                  <div class="fw-semibold">101</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-mobile fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Phone</div>
                  <div class="fw-semibold">9876543210</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-server fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Voice Server</div>
                  <div class="fw-semibold">US East Server</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-lock fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Enable 2FA</div>
                  <div class="fw-semibold">Yes</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-direction-alt fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Follow Me</div>
                  <div class="fw-semibold">No</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-control-forward fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Call Forward</div>
                  <div class="fw-semibold">Yes</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-mobile fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Mobile App Login</div>
                  <div class="fw-semibold">Yes</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-microphone fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Voicemail</div>
                  <div class="fw-semibold">No</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-link fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Twinning</div>
                  <div class="fw-semibold">Yes</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-settings fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">CLI Setting</div>
                  <div class="fw-semibold">Area Code</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-shield fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">IP Filtering</div>
                  <div class="fw-semibold">No</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-email fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Voicemail to Email</div>
                  <div class="fw-semibold">Yes</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-comment fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Forward SMS To</div>
                  <div class="fw-semibold">Email</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-layers fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Extension Type</div>
                  <div class="fw-semibold">Extension</div>
                </div>
              </div>
            </div>
            
            <div class="col-md-4">
              <div class="d-flex align-items-start gap-2 h-100">
                <i class="ti-bar-chart fs-5 mt-1" style="color: #4e73df;"></i>
                <div>
                  <div class="large text-muted">Call Limit</div>
                  <div class="fw-semibold">10</div>
                </div>
              </div>
            </div>
          
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- Modal End -->

<!-- Styles -->
<style>
  .modal .modal-content {
    background-color: #fff;
    font-family: 'Poppins', sans-serif;
    border-radius: 12px;
  }

  .modal-body .fw-semibold {
    font-weight: 500;
    font-size: 14px;
    color: #212529;
    margin-top: 4px;
  }

  .modal-body .text-muted {
    font-size: 12px;
    color: #6c757d;
  }

  .modal-body .d-flex .fs-5 {
    margin-top: 4px;
  }

  .modal-dialog {
    max-width: 750px;
  }

  /* .modal .modal-body {
    padding-top: 18px !important;
    padding-bottom: 4px !important;
  } */

  .modal-header {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
  }
</style>


 

      </div>
      <!-- /.row -->

    </section>
        <!-- /.content -->

        <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
        
<script>
$(document).ready(function() {
    // Format mobile numbers
    $('.phone').each(function() {
        const phoneText = $(this).text();
        
        const countryCode = phoneText.slice(0, -10); // Extract the country code from the beginning
        const phoneNumber = phoneText.slice(-10); // Extract the last 10 digits

        const formattedMobile = `${countryCode}(${phoneNumber.substr(0, 3)})-${phoneNumber.substr(3, 3)}-${phoneNumber.substr(6)}`;
        
        $(this).text(formattedMobile);
    });
});
</script>



<script>
$(document).ready(function() {
    // Format mobile numbers
    $('.mobile').each(function() {
        const mobile = $(this).text();
        const formattedMobile = `(${mobile.substr(0, 3)}) ${mobile.substr(3, 3)}-${mobile.substr(6)}`;
        $(this).text(formattedMobile);
    });
});
</script>

        <script>
  
        //refresh extension

            $(document).on("click", ".refresh_extension", function () {
            var delete_id = $(this).data('id');
            $("#refresh_extension").modal('show');
            $("#label_id").val(delete_id);

        });
                    $(document).on("click", ".openExtensionDelete", function () {
            var delete_id = $(this).data('id');
            $("#delete").modal('show');
            $("#extension_id").val(delete_id);
        });

        $(document).on("click", ".deleteRefreshExtension", function() {
            var delete_id = $("#label_id").val();
            var el = this;
            $.ajax({
                url: 'deleteExtLiv/'+delete_id,
                type: 'get',
                success: function(response) {
                    window.location.reload(1);
                }
            });
        });

        //close refresh extension
        function showSecret(element) {
    var row = $(element).data("row");
    var $secretText = $(".secret-text[data-row='" + row + "']");
    var $secretToggle = $(".secret-toggle[data-row='" + row + "']");
    var $copyButton = $("#showcopy_" + row);
    $secretText.show();
    $secretToggle.hide();
    $copyButton.hide();

}

$(".secret-toggle").on("mouseout", function() {
    var row = $(this).data("row");
    var $secretText = $(".secret-text[data-row='" + row + "']");
    var $secretToggle = $(".secret-toggle[data-row='" + row + "']");
    var $copyButton = $("#showcopy_" + row);
    $secretText.hide();
    $secretToggle.show();
    $copyButton.show();

});







        
     

        $(document).on("click", ".changePassword", function () {
            var id = $("#ext_id").val();
            var password = $("#password").val();


            $.ajax({
                url: 'changePasswordAgent/' + id + '/' + password,
                type: 'get',
                success: function (response) {
                    /*$("#title").val(response[0].title);

                    $("#id").val(response[0].id);*/
                }
            });
        });

        $(document).on("click", ".openChangePassword", function () {
            $("#myModalPassword").modal('show');
            $("#add-edit").html('Change Password');
            var extension_id = $(this).data('id');
            $("#ext_id").val(extension_id);
            /*$.ajax({
                url: 'editExtensionGroup/'+extension_id,
                type: 'get',
                success: function(response){
                    $("#title").val(response[0].title);

                    $("#id").val(response[0].id);
                }
            });*/
        });

        /* hangup Conference */
        $(document).on("click", ".hangupConferences", function () {
            $("#hangupConferencesModal").modal();
            $("#add-edit").html('Reset Extension');
            var extension_id = $(this).data('extensionid');
            $("#hangupConferences_id").val(extension_id);
        });

        $(document).on("click", "#hangupConferences", function (e) {
            e.preventDefault();
            postData = {
                "_token": $("#user-role-csrf").val(),
                "extensionId": parseInt($("#hangupConferences_id").val())
            };
            console.log(postData);

            $.ajax({
                type: "POST",
                url: "{{ route('hangupConferences') }}",
                data: postData,
                success: function(data){
                    console.log(data);
                    $("#hangupConferences-cancel").click();
                },
                error: function(error){
                    console.log(error.responseJSON);
                    $("#hangup-conference").html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
                    $("#hangup-conference").show();
                }
            });
        });

         /* end hangup Conference */


        $(document).on("click", ".openAddIp", function () {
            $("#addIpModal").modal();
            $("#add-edit").html('Add Ip');
            var extension_id = $(this).data('id');
            //alert(extension_id);
            $("#ext_ip_id").val(extension_id);
            /*$.ajax({
                url: 'editExtensionGroup/'+extension_id,
                type: 'get',
                success: function(response){
                    $("#title").val(response[0].title);

                    $("#id").val(response[0].id);
                }
            });*/
        });

        $(document).on("click", ".deleteExtension", function () {
            var extension_id = $('#extension_id').val();
            $.ajax({
                url: 'deleteExtension/' + extension_id,
                type: 'get',
                success: function (response) {
                    window.location.reload(1);
                }
            });
        });

        $(document).on("click", ".openChangePermissions", function (e) {
            e.preventDefault();

            var url = $(this).data('url');
            var extension_id = $(this).data('id');
            $("#role_ext_id").val(extension_id);

            $("#change-permission-body").html("");     // leave it blank before ajax call
            $("#role-modal-loader").show();     // load ajax loader
            $("#role-modal-save").hide();       // hide the save button
            $("#changePermissionModal").modal('show');

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html'
            }).done(function(content){
                $("#role-modal-loader").hide();     // hide ajax loader
                $("#role-modal-save").show();       // show save button
                $("#change-permission-body").html(content);
                $("#change-permission-body").show();
            }).fail(function(){
                $("#change-permission-body").html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
                $("#role-modal-loader").hide();
            });
        });
        $(document).on("click", "#role-modal-save", function (e) {
            e.preventDefault();

            $("#role-modal-save").hide();
            $("#change-permission-body").hide();
            $("#role-modal-loader").show();

            postData = {
                "_token": $("#user-role-csrf").val(),
                "userId": parseInt($("#role_ext_id").val()),
                "role": $("#role-select").val()
            };
            console.log(postData);

            $.ajax({
                type: "POST",
                url: "{{ route('saveUserRoles') }}",
                data: postData,
                success: function(data){
                    console.log(data);
                    $("#role-modal-close").click();
                },
                error: function(error){
                    console.log(error.responseJSON);
                    $("#role-modal-loader").hide();
                    $("#change-permission-body").html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
                    $("#change-permission-body").show();
                }
            });
        });
        </script>
   <script>
 $(document).ready(function() {
    // Use event delegation for the click event
    $("tbody").on("click", ".copyExtension", function(e) {
        e.preventDefault();
        var extensionId = $(this).data("id");
        var secret = $(this).closest("tr").find(".secret-text").text();
        var email = $(this).data("email");
        var successMessage = $("#successMessage_" + extensionId);

        // Combine email and secret values
        var textToCopy = "Email: " + email + ", Secret: " + secret;
        // Create a temporary input element
        var tempInput = document.createElement("input");
        tempInput.setAttribute("type", "text");
        tempInput.setAttribute("value", textToCopy);
        document.body.appendChild(tempInput);
        tempInput.select();
        tempInput.setSelectionRange(0, 99999);
        document.execCommand("copy");
        document.body.removeChild(tempInput);

        // Show the success message in the current row
        successMessage.text("Copied!");
        successMessage.show();

        // Hide the success message after a certain time (optional)
        setTimeout(function() {
            successMessage.hide();
        }, 3000); // 3000 milliseconds = 3 sec
    });
});


</script>
<!-- <script>
document.querySelectorAll('.dropdown').forEach(dropdown => {
    dropdown.addEventListener('shown.bs.dropdown', function () {
        const menu = dropdown.querySelector('.dropdown-menu');
        document.body.appendChild(menu);
        menu.style.position = 'absolute';
        const rect = dropdown.getBoundingClientRect();
        menu.style.top = `${rect.bottom}px`;
        menu.style.left = `${rect.left}px`;
    });

    dropdown.addEventListener('hidden.bs.dropdown', function () {
        const menu = dropdown.querySelector('.dropdown-menu');
        dropdown.appendChild(menu); // Return the dropdown to its original place
        menu.style.position = '';
        menu.style.top = '';
        menu.style.left = '';
    });
});
</script> -->
  <script>
$(document).ready(function(){
    $('#tickets11').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('extension.index') }}", // replace with your route
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex' },
            { data: 'extension', name: 'extension' },
            { data: 'name', name: 'name' },
            @if(Session::get('role') === 'system_administrator')
            { data: 'role', name: 'role' },
            @endif
            { data: 'email', name: 'email' },
            { data: 'phone', name: 'phone' },
            @if(Session::get('level') > 5)
            { data: 'web_phone', name: 'web_phone' },
            @endif
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],

              language: {
    processing: `
        <span style="display:flex; align-items:center; justify-content:center; gap:8px;">
            <img src="https://i.gifer.com/ZZ5H.gif"
                 alt="Loading..." style="width:20px; height:20px;">
            Processing...
        </span>
    `
}

    });
});
</script>
<script>
$(document).on('click', '.view-extension', function () {
    var extensionId = $(this).data('id');
      //alert(extensionId);
            $("#extensionModal").modal('show');

    $.ajax({
        url: '/extension/' + extensionId + '/modal',
        type: 'GET',
        success: function (response) {
                $('#extensionModalBody').html(response);


        },
        error: function () {
            alert('Could not load extension details.');
        }
    });
});
</script>
<script>$(document).on('click', '.copyCredentials', function (e) {
    e.preventDefault();

    let email = $(this).data('email');
    let secret = $(this).data('secret');
    let credentials = `Email: ${email}\nSecret: ${secret}`;

    // Create a temporary textarea to copy from
    let temp = $('<textarea>');
    $('body').append(temp);
    temp.val(credentials).select();
    document.execCommand('copy');
    temp.remove();
    toastr.success("Credentials copied to clipboard!.");
});
</script>


@endsection