@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;
  }

  .permission-list {
    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;
  }

  .role-assignment-subheading,
  .roleToUser-assignment-subheading {
    margin-top: 5%;
  }

  .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 class="activated-link" href="/rolesAndPermissions"><span>Roles</span></a>
    </li>
    <a class="" href="/permissions"><span>Permissions</span></a></li>
  </ul>
</div>
<div class="margin-top-bottom textlabel">
  <h2>Role(s) Management</h2>
</div>
<!-- form for creation of role -->
<h3 class="sub-heading role-creation-subheading">Create New Role</h3>
<form id="createRoleForm">
  @csrf
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">Role Name</span>
      </div>
      <input type="text" class="form-control" id="Role_name" name="Role_name" placeholder="Role Name">
    </div>
    <div class="error role-error" style="display: none;">Role Name is required</div>
  </div>
  <button type="button" id="createRoleBtn" class="btn btn-default">Create Role</button>
</form>

<!-- assign role to user form -->
<h3 class="sub-heading roleToUser-assignment-subheading">Assign Role to User</h3>
<form id="AssignRoleToUserForm">
  @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 class="error user-id-error" style="display: none;">Please Select a User</div>
  </div>
  <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 class="error role-id-error" style="display: none;">Please Select a Role</div>
  </div>
  </div>
  <button type="button" id="AssignRoleToUserBtn" class="btn btn-default">Assign Role</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 createRoleApiUrl = baseURL + 'CreateRole';
  var AssignRoleToUserApiUrl = baseURL + 'AssignRoleToUser';
  $(document).ready(function() {
    $('.navigation-list li').click(function() {
      $('.navigation-list li').removeClass('activated-link');
      $(this).addClass('activated-link');
    });

    //to remove the required field error when start typing
    $('#Role_name').on('input', function() {
      $('.role-error').hide();
    });

    $('#role').on('change', function() {
      $('.role-id-error').hide();
    });

    $('#user').on('change', function() {
      $('.user-id-error').hide();
    });

    $('#createRoleBtn').click(function() {
      var roleName = $('#Role_name').val();
      if (roleName === '') {
        $('.role-error').show();
      } else {
        var formData = $('#createRoleForm').serializeArray();
        var formattedData = {};
        formData.forEach(function(field) {
          if (field.name !== '_token') {
            formattedData[field.name] = field.value;
          }
        });
        createRole(formattedData);
      }
    })


    $('#AssignRoleToUserBtn').click(function() {
      var user_id = $('#user').val();
      var role_id = $('#role').val();
      var isValid = true;
      if (user_id == '') {
        $('.user-id-error').show();
        var isValid = false;
      }
      if (role_id == '') {
        $('.role-id-error').show();
        var isValid = false;
      }
      if (isValid) {
        var formData = $('#AssignRoleToUserForm').serializeArray();
        var formattedData = {};
        formData.forEach(function(field) {
          if (field.name !== '_token') {
            formattedData[field.name] = field.value;
          }
        });
        AssignRoleToUser(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();
    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();
          } else {
            $('#loaderModal').hide();
          }
        } else {
          $('#loaderModal').hide();
        }
      },
      error: function(error) {
        console.log("getPermissions error =====================>", error);
        $('#loaderModal').hide();
        // Handle error
      }
    });
  }

  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',
              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 createRole(payload) {
    $('#loaderModal').show();
    $.ajax({
      type: "POST",
      data: payload,
      url: createRoleApiUrl,
      success: function(res) {
        if (res.success) {
          jQuery('.simple-success-modal').show();
          jQuery('.simple-success-modal-msg-text').text(res.message);
          $('#loaderModal').hide();
          //reset the input field after succesfull creation of role
          $('#Role_name').val('');
        } 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 AssignRoleToUser(payload) {
    $('#loaderModal').show();
    $.ajax({
      type: "POST",
      data: payload,
      url: AssignRoleToUserApiUrl,
      success: function(res) {
        if (res.success) {
          jQuery('.simple-success-modal').show();
          jQuery('.simple-success-modal-msg-text').text(res.message);
          $('#loaderModal').hide();
          //reset the value after succedfully assign role to user 
          $('#user, #role').val('').fSelect('reload');
        } 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