@extends('layouts.app')

@section('content')
<style>
  .input-group-prepend {
    width: 36%;
  }

  .input-group-text {
    width: 100%;
  }

  .input-group {
    width: 50%;
    margin: 5px auto;
  }

  .maintenance-device-dropdown-control,
  .maintenance-device-dropdown-control-app {
    margin-bottom: -7px;
  }

  .maintenance-device-dropdown-control-cont,
  .maintenance-device-dropdown-control-cont-app {
    width: 64%;
  }

  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
  }

  .common-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #e2e2e2;
    text-align: center;
    background-color: #f8f8f8;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
    -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  }

  .simple-success-modal {
    width: 420px;
    font-family: 'Nunito', sans-serif;
    display: none;
  }

  .simple-error-modal {
    width: 420px;
    font-family: 'Nunito', sans-serif;
    display: none;
  }

  .simple-success-modal-close,
  .simple-error-modal-close {
    cursor: pointer;
    font-size: 20px;
    line-height: 25px;
    margin-left: 98%;
    color: #64677a;
    font-weight: 100;
  }

  .msg-header {
    color: #008000;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .error-msg-header {
    color: red !important;
  }

  .msg-text {
    font-size: 16px;
  }

  .lyphicon {
    border: 1px solid #008000;
    border-radius: 50%;
  }

  .close-btn {
    min-width: 100px;
    outline: none !important;
  }

  .close-icon {
    border: 1px solid #008000;
    border-radius: 50%;
    padding: 2px 4px 0px 4px;
  }

  .error {
    color: red;
  }

  .navigation-list {
    list-style: none;
    display: flex;
    gap: 3%;
    justify-content: flex-end;
    font-size: 17px;
    margin-right: 3.5%;
    color: #34548A;
    font-weight: bold;
    cursor: pointer;
  }

  .permissionsToUser-assignment-subheading {
    margin-top: 5%;
  }

  .permission-list,
  .permission-list-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
    padding: 10px;
    align-items: center;
    justify-items: flex-start;
  }

  .permission-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .permission-label {
    margin-bottom: 0;
  }

  .activated-link {
    text-decoration: underline;
  }
</style>
<div id="loaderModal" class="modal">
  <img class="loader-img" src="/images/ajax-spinner.gif">
  <span class="loader-text">Please wait ...</span>
</div>
<div class="navigation-div">
  <ul class="navigation-list">
    <li>
      <a href="/rolesAndPermissions"><span>Roles</span></a>
    </li>
    <li>
      <a class="activated-link" href="/permissions"><span>Permissions</span></a>
    </li>
  </ul>
</div>
<div class="margin-top-bottom textlabel">
  <h2>Permissions</h2>
</div>
<!-- form for assigning permissions according to role -->
<h3 class="sub-heading role-assignment-subheading">Assign Permission(s) to Role</h3>
<form id="AssignPermissionsToRoleForm">
  @csrf
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">Select Role</span>
      </div>
      <div class="maintenance-device-dropdown-control-cont">
        <div class="maintenance-device-dropdown-control">
          <select class="maintenance-device-select-roles" name="role_id" id="role" placeholder="Select Role">

          </select>
        </div>
        <div class="blink-me blink-text" id="maintenance-device-progress-roles" style="padding: 0 20px;">
          Loading ...
        </div>
      </div>
    </div>
  </div>

  <div class="form-group permission-list-group">
    <div class="permission-list">

    </div>
  </div>
  <button type="button" id="AssignPermissionsToRoleBtn" class="btn btn-default">Submit</button>
</form>
<!-- form to assign permissions to user -->
<h3 class="sub-heading permissionsToUser-assignment-subheading">Assign Permission(s) to User</h3>
<form id="AssignPermissionsToUserForm">
  @csrf
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">Select User</span>
      </div>
      <div class="maintenance-device-dropdown-control-cont">
        <div class="maintenance-device-dropdown-control">
          <select class="maintenance-device-select-users" name="user_id" id="user" placeholder="Select User">

          </select>
        </div>
        <div class="blink-me blink-text" id="maintenance-device-progress-users" style="padding: 0 20px;">
          Loading ...
        </div>
      </div>
    </div>
  </div>
  <div class="form-group permission-list-group">
    <div class="permission-list-2">

    </div>
  </div>
  <button type="button" id="AssignPermissionsToUserBtn" class="btn btn-default">Submit</button>
</form>

<div class="custom-modal-wrapper simple-success-modal common-modal">
  <i class="fa fa-times simple-success-modal-close" aria-hidden="true"></i>
  <div class="">
    <p class="success-msg-header msg-header"><i class="lyphicon fa fa-check"></i>&nbsp;Success</p>
    <p class="msg-text simple-success-modal-msg-text"></p>
    <div class="close-button" id="close-button">
      <button type="button" class="close-btn" id="closeSimpleSuccessModal">OK</button>
    </div>
  </div>
</div>

<div class="custom-modal-wrapper simple-error-modal common-modal">
  <i class="fa fa-times simple-error-modal-close" aria-hidden="true"></i>
  <div class="">
    <p class="error-msg-header msg-header"><i class="fa fa-times close-icon" aria-hidden="true"></i>&nbsp;Error</p>
    <p class="msg-text simple-error-modal-msg-text"></p>
    <div class="close-button" id="close-button">
      <button type="button" class="close-btn" id="closeSimpleErrorModal">OK</button>
    </div>
  </div>
</div>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
  var baseURL = "{{ URL::to('/') }}" + "/";
  var getPermissionsApiUrl = baseURL + 'GetPermissions';
  var getRolesApiUrl = baseURL + 'GetRoles';
  var getUsersApiUrl = baseURL + 'GetUsers';
  var AssignPermissionsToRoleApiUrl = baseURL + 'AssignPermissionsToRole';
  var AssignPermissionsToUserApiUrl = baseURL + 'AssignPermissionsToUser';
  $(document).ready(function() {
    $('#AssignPermissionsToRoleBtn').click(function() {
      var formData = $('#AssignPermissionsToRoleForm').serializeArray();
      var formattedData = {};

      formData.forEach(function(item) {
        if (item.name === 'role_id') {
          formattedData['role_id'] = item.value;
        } else if (item.name === 'permissions[]') {
          if (!formattedData['permissions']) {
            formattedData['permissions'] = [];
          }
          formattedData['permissions'].push(item.value);
        }
      });
      var jsonString = JSON.stringify(formattedData);
      AssignPermissionsToRole(formattedData);
    })
    $('#AssignPermissionsToUserBtn').click(function() {
      var formData = $('#AssignPermissionsToUserForm').serializeArray();
      var formattedData = {};

      formData.forEach(function(item) {
        if (item.name === 'user_id') {
          formattedData['user_id'] = item.value;
        } else if (item.name === 'permissions[]') {
          if (!formattedData['permissions']) {
            formattedData['permissions'] = [];
          }
          formattedData['permissions'].push(item.value);
        }
      });
      var jsonString = JSON.stringify(formattedData);
      AssignPermissionsToUser(formattedData);
    })

    $('#closeSimpleSuccessModal, .simple-success-modal-close').click(function() {
      $('.simple-success-modal').css("display", "none");
    });
    $('#closeSimpleErrorModal, .simple-error-modal-close').click(function() {
      $('.simple-error-modal').css("display", "none");
    });

    getRoles();
    getPermissions();
    getUsers();
  });

  function getRoles() {
    $('#loaderModal').show();
    $.ajax({
      type: "GET",
      url: getRolesApiUrl,
      success: function(res) {
        if (res.success) {
          if (res.data.length > 0) {
            var all_Roles = res.data;
            var RoleOptions = "<option value=''>Select Role</option>";
            // var deviceMaintenanceNameOptions = "";
            for (var k = 0; k < all_Roles.length; k++) {
              RoleOptions += "<option value='" + all_Roles[k].id + "'>" + all_Roles[k].name + "</option>";
            }
            jQuery("#role").html('');
            jQuery("#role").append(RoleOptions);
            jQuery("#role").fSelect({
              placeholder: 'Select Role',
              numDisplayed: 4,
              overflowText: '{n} Role(s) selected',
              noResultsText: 'No Role(s) found',
              searchText: 'Search Role(s)',
              showSearch: true
            });
            jQuery(".maintenance-device-dropdown-control-cont").show();
            // $('#loaderModal').hide();
          } else {
            $('#loaderModal').hide();
          }
        } else {
          $('#loaderModal').hide();
        }
      },
      error: function(error) {
        console.log("getPermissions error =====================>", error);
        $('#loaderModal').hide();
        // Handle error
      }
    });
  }

  function getPermissions() {
    $('#loaderModal').show();
    $.ajax({
      type: "GET",
      url: getPermissionsApiUrl,
      success: function(res) {
        if (res.success) {
          if (res.data.length > 0) {
            // var permissionListDiv = document.querySelector('.permission-list-group');
            // var Heading = document.createElement('h3');
            // Heading.classList.add('permission-heading');
            // Heading.textContent = "Home Page Permissions";
            // permissionListDiv.appendChild(Heading);

            var permissionList = document.querySelector('.permission-list');
            var permissionList2 = document.querySelector('.permission-list-2');

            res.data.forEach(function(permission) {
              var permissionItem = document.createElement('div');
              permissionItem.classList.add('permission-item');

              var checkbox = document.createElement('input');
              checkbox.type = 'checkbox';
              checkbox.name = 'permissions[]';
              checkbox.value = permission.id;

              var label = document.createElement('label');
              label.classList.add('permission-label');
              label.textContent = permission.name;
              label.setAttribute('for', 'permission_' + permission.id);

              var permissionItemClone = permissionItem.cloneNode(true);

              // Append to the first list
              permissionItem.appendChild(checkbox);
              permissionItem.appendChild(label);
              permissionList.appendChild(permissionItem);

              // Append to the second list
              permissionItemClone.appendChild(checkbox.cloneNode(true));
              permissionItemClone.appendChild(label.cloneNode(true));
              permissionList2.appendChild(permissionItemClone);
            });

          } else {
            $('#loaderModal').hide();
          }
        } else {
          $('#loaderModal').hide();
        }
      },
      error: function(error) {
        console.log("getPermissions error =====================>", error);
        $('#loaderModal').hide();
      }
    });
  }

  function getUsers() {
    $('#loaderModal').show();
    $.ajax({
      type: "GET",
      url: getUsersApiUrl,
      success: function(res) {
        if (res.success) {
          if (res.data.length > 0) {
            var all_users = res.data;
            var UserOptions = "<option value=''>Select User</option>";
            // var deviceMaintenanceNameOptions = "";
            for (var k = 0; k < all_users.length; k++) {
              UserOptions += "<option value='" + all_users[k].id + "'>" + all_users[k].name + " - " + all_users[k].email + "</option>";
            }
            jQuery("#user").html('');
            jQuery("#user").append(UserOptions);
            jQuery("#user").fSelect({
              placeholder: 'Select user',
              numDisplayed: 4,
              // overflowText: '{n} user(s) selected',
              noResultsText: 'No user(s) found',
              searchText: 'Search user(s)',
              showSearch: true
            });
            jQuery(".maintenance-device-dropdown-control-cont").show();
            $('#loaderModal').hide();
          } else {
            $('#loaderModal').hide();
          }
        } else {
          $('#loaderModal').hide();
        }
      },
      error: function(error) {
        console.log("getUsers error =====================>", error);
        $('#loaderModal').hide();
        // Handle error
      }
    });
  }

  function AssignPermissionsToRole(payload) {
    $('#loaderModal').show();
    $.ajax({
      type: "POST",
      data: payload,
      url: AssignPermissionsToRoleApiUrl,
      success: function(res) {
        if (res.success) {
          jQuery('.simple-success-modal').show();
          jQuery('.simple-success-modal-msg-text').text(res.message);
          $('#loaderModal').hide();
           //to reset the value after succesfully added the permissions to role
          $('#role').val('').fSelect('reload');
          $('.permission-list input[type="checkbox"]').prop('checked', false);
        } else {
          jQuery('.simple-error-modal').show();
          jQuery('.simple-error-modal-msg-text').text(res.message);
          $('#loaderModal').hide();
        }
      },
      error: function(error) {
        console.log("createRole error =====================>", error);
        $('#loaderModal').hide();
        // Handle error
      }
    });
  }

  function AssignPermissionsToUser(payload) {
    $('#loaderModal').show();
    $.ajax({
      type: "POST",
      data: payload,
      url: AssignPermissionsToUserApiUrl,
      success: function(res) {
        if (res.success) {
          jQuery('.simple-success-modal').show();
          jQuery('.simple-success-modal-msg-text').text(res.message);
          $('#loaderModal').hide();
          //to reset the value after succesfully added the permissions to user
          $('#user').val('').fSelect('reload');
          $('.permission-list-2 input[type="checkbox"]').prop('checked', false);
        } else {
          jQuery('.simple-error-modal').show();
          jQuery('.simple-error-modal-msg-text').text(res.message);
          $('#loaderModal').hide();
        }
      },
      error: function(error) {
        console.log("createRole error =====================>", error);
        $('#loaderModal').hide();
        // Handle error
      }
    });
  }
</script>
@endsection