@extends('layouts.app')

@section('content')
<style>
.role-permission-submenus .role-permission-list {
  display: flex;
  width: 50%;
  flex-direction: row;
  margin: auto;
}
.role-permission-submenus .role-permission-list li {
  width: 50%;
  text-align: center;
  border-bottom: 3px solid #918c8c;
  background-color: #e3e3e3;
}
.role-permission-list li.menu-item-selected a {
  color: #F9A035;
}
.role-permission-submenus .role-permission-list li a {
  text-align: center;
  float: initial;
  margin: auto;
  white-space: nowrap;
  width: 100%;
  outline: none;
}
.role-permission-list li.menu-item-selected {
  border-bottom: 4px solid #F9A035;
  color: #F9A035;
}
.tab {
	display:none;
}

.tab.active {
	display:block;
}


#metaTable_filter input, #manageUserTable_filter input
{
  border-radius: 35px!important;
  padding: 10px;
  outline:none;
  margin-top: -40px;
  margin-bottom: 11px;
  width: 100%;
}
.paginate_button
{
  border: 2px solid #d7d7d7!important;
  color: #ebe7e7!important;
  font-weight: bold;
}
.paginate_button:hover
{
  border: 2px solid #34548A!important;;
  background: #34548A!important;
  border-color: #34548A!important;
  color: #ebe7e7!important;
  font-weight: bold!important;
}
.paginate_button.disabled:hover
{
  color: #ebe7e7!important;
  font-weight: bold!important;
}
.dataTables_paginate a.current
{
  color: #ebe7e7!important;
  background: #34548A!important;
  border-color: #34548A!important;
}
.daily-calling-status-table-container
{
  padding-right: 5%;
  padding-left: 5%;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
{
  color: #ebe7e7!important;
  font-weight: bold!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active
{
  color: #ebe7e7!important;
}
.dataTables_info
{
  color: #34548A!important;
  font-size: 16px;
  font-weight: bold;
}
.dataTables_wrapper .dataTables_paginate .paginate_button
{
  color: #34548A !important;
}
table.dataTable
{
  border: none!important;
}
table.dataTable thead
{
  background-color:#34548A!important;
  border: 0!important;
  padding: 5px!important;
  color: #ebe7e7!important;
  padding-top: 10px;
  padding-bottom: 10px;
}
table.dataTable thead th
{
  border: none!important;
}
table.dataTable tbody td
{
  border: none!important;
}
table.dataTable tbody th, table.dataTable tbody td
{
  padding: 16px 6px;
}
.manage-roles-block {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #e3e3e3;
  box-shadow: 0px 0px 2px #35093b6e;
}
.empty-block {
  margin: 100px;
}
.empty-block .fa-user-friends {
  font-size: 48px;
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

{{--  .active, .accordion:hover {
  background-color: #ccc;
}  --}}

.manage-roles-container .accordion:after {
  content: '\276F';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  transform: rotate(90deg);
  transition: all 0.35s;
}

.manage-roles-container .active:after {
  content: '\276F';
  transform: rotate(270deg);
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.manage-roles-container .accordion {
  border-radius: 5px;
  margin: 5px;
  box-shadow: 0px 1px 4px #35093b6e;
}
.manage-roles-container .accordion:focus {
  outline: unset;
}
.roles-head h5 {
  float:left;
  margin: 20px;
}
.roles-head a {
  float: right;
  margin: 20px;
}
.permission-attb {
  padding: 5px 10px;
  border-radius: 5px;
  background: #eee;
  font-size: .9rem;
  font-weight: 400;
  color: #868181;
  line-height: 35px;
}
.page-wise-permissions {
  text-align: left;
}
.m-page-title {
  margin-bottom: 10px;
}
.edit-link {
  position: absolute;
  right: 60px;
}

.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;
}
.please-select-role-error-message {
  color: #d91d17;
  display: none;
}
#manage-users .roles-head {
  float: left;
  margin-bottom: -45px;
  z-index: 999;
  position: relative;
}
</style>
<div class="container">
  <div class="textlabel">
      <h2 class="role-permission-heading">Roles & Permissions</h2>
  </div>
  <div class="margin-top-bottom pagetextlabel">
      <div class="role-permission-submenus" id="RolePermissionPageMenu">
          <ul class="navbar-nav ml-auto role-permission-list">
            <li class="nav-item dropdown menu-item-selected">
                <a class="menu-item" href="#role-management">
                    <span>Role Management</span>
                </a>
            </li>
            <li class="nav-item dropdown" >
                <a class="menu-item " href="#manage-users">
                    <span>User Management</span>
                </a>
            </li>
            {{--  <li class="nav-item dropdown" >
              <a class="menu-item " href="#role-assignment">
                  <span>Roles Assignment</span>
              </a>
            </li>  --}}
          </ul>
         
      </div>
  </div>
  <div class="margin-top-bottom textlabel">
    <div class="tab-content">
      <div id="role-management" class="tab active">
        @include('RolePermissions.roles')
      </div>
    
      <div id="manage-users" class="tab">
        @include('RolePermissions.create_user')
      </div>

      <div id="role-assignment" class="tab">
        @include('RolePermissions.assign_permission')
      </div>
    
    </div>
  </div>
  
</div>

{{--  Assign Permissions Model  --}}
<div id="assign_permission_to_user" class="modal" style="display:none">
  <div class="modal-content">
      <span class="close close-popup">&times;</span>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="hidden" name="u_role_id" id="u_role_id" value="">
            <input type="hidden" name="usr_id" id="usr_id" value="">
            <select class="form-control assign-role" name="selected_role_id[]" id="user_role" multiple placeholder="Select Role">
              <option value="">Select Role</option>
              @foreach($rolesArr as $key => $val)
                <option value="{{ $key }}">{{ ucfirst($val) }}</option>
              @endforeach
            </select>
          </div>
        </div>
        <span class="please-select-role-error-message">The role is required!</span>
      </div>
      <div class="row">
          <div class="margin-top-bottom col">
              <button class="assign-role-to-user-btn">Save</button>
          </div>
      </div>
  </div>
</div>

{{--  Create User Modal  --}}
<div id="create-user-modal" class="modal" style="display:none">
  <div class="modal-content">
      <span class="close close-popup">&times;</span>
      <div class="modal-body">
        <h4 class="heading-title mb-3" style="margin-top: -45px;">Create User</h4>
        <form id="create_user">
          
          <div class="form-group row">
              <div class="col-md-6 text-md-left">
                <label for="Display Name" class="col-form-label text-md-left">Display Name</label>
                <input id="display_name" type="text" class="form-control" name="display_name" value="" required="">
  
              </div>
  
              <div class="col-md-6 text-md-left">
                  <label for="email" class="col-form-label text-md-left">E-Mail Address</label>
                  <input id="email" type="email" class="form-control" name="email" value="" required="" autofocus="">
  
              </div>
          </div>
  
          <div class="form-group row">
              <div class="col-md-6 text-md-left">
                <label for="password" class="col-form-label text-md-left">Password</label>
                <input id="password" type="password" class="form-control" name="password" required="" autocomplete="new-password">
  
              </div>
  
              <div class="col-md-6 text-md-left">
                  <label for="user_assign_role" class="col-md-4 col-form-label text-md-left">Role</label>
                  <select class="form-control assign-role" name="user_assign_role[]" id="user_assign_role" multiple placeholder="Select Role">
                    <option value="">Select Role</option>
                    @foreach($rolesArr as $key => $val)
                      <option value="{{ $key }}">{{ ucfirst($val) }}</option>
                    @endforeach
                  </select>
            </div>
              
          </div>
  
          <div class="form-group row mb-0">
              <div class="col-md-12 mt-3">
                  <button type="submit" class="create-user-btn">
                      Create
                  </button>
              </div>
          </div>
        </form>

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

<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>

<div id="loaderModal" class="modal">
  <img class="loader-img" src="../images/ajax-spinner.gif">
  <span class="loader-text">Please wait ...</span>
</div>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js"></script>
<script>
  jQuery(document).ready(function() {

    var activeTab = 0;
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    }

    if(activeTab) {
      setTimeout(function(){
				$('.role-permission-list li:nth-child(2)').find('.menu-item').trigger('click');
			},200);
      var currUrl = new URL(window.location.href);
				currUrl.searchParams.delete("tab");
				history.pushState('', '', currUrl.href);
    }

    jQuery("#user_role").fSelect({
        placeholder: 'Select Role(s)',
        numDisplayed: 5,
        overflowText: '{n} Role(s) selected',
        noResultsText: 'No Role(s) found',
        searchText: 'Search Role(s)',
        showSearch: true
    });

    jQuery("#user_assign_role").fSelect({
        placeholder: 'Select Role(s)',
        numDisplayed: 5,
        overflowText: '{n} Role(s) selected',
        noResultsText: 'No Role(s) found',
        searchText: 'Search Role(s)',
        showSearch: true
    });

    jQuery('.nav-item .menu-item').on('click', function(e) {
      
      var currentAttrValue = jQuery(this).attr('href');
      // Show/Hide Tabs
      jQuery(currentAttrValue).addClass('active').siblings().removeClass('active');
  
      // Change/remove current tab to active
      jQuery(this).parent('li').addClass('menu-item-selected').siblings().removeClass('menu-item-selected');
  
      e.preventDefault();
    });

    $('#metaTable').DataTable({
      bLengthChange:false,
      pageLength:10,
      language: { search: "", searchPlaceholder:"Search", background: "none"},
      "aoColumnDefs": [{ "bSortable": false, "aTargets": [3]}],
    });

    $('#manageUserTable').DataTable({
      bLengthChange:false,
      pageLength:10,
      language: { search: "", searchPlaceholder:"Search", background: "none"},
      "aoColumnDefs": [{ "bSortable": false, "aTargets": [3]}],
    });

    $(document).on('click', '.edit-user-role', function (e) {
      var role_id = $(this).data('role_id');
      var user_id = $(this).data('user_id');
      $('#user_role').val(role_id);
      $('#user_role').fSelect('reload');
      $('#usr_id').val(user_id);
      $("#assign_permission_to_user").fadeToggle();
      $("#assign_permission_to_user").css({"visibility":"visible","display":"block"});
    });

    $(document).on('click', '.edit-user-info', function (e) {
      $('#edit_user_id').remove();
      $('#create_user').find('input, select').removeClass('is-invalid');
      $('.invalid-feedback').remove();
      $('.heading-title').text('Update User');
      $('.create-user-btn').text('Update');
      var userInfo = $(this).data('user_info');
      console.log(userInfo);
      $('#display_name').val(userInfo.name);
      $('#email').val(userInfo.email).removeAttr('required').attr('readonly', true);
      $('#password').removeAttr('required');
      var user_id = $(this).data('user_id');
      var role_id = $(this).data('role_id');
      $('#create_user').append('<input type="hidden" name="edit_user_id" id="edit_user_id" value="' + user_id + '">');
      $('#user_assign_role').val(role_id);
      $('#user_assign_role').fSelect('reload');
      $("#create-user-modal").fadeToggle();
      $("#create-user-modal").css({"visibility":"visible","display":"block"});
    });

    $(document).on('click', '.create-new-user', function (e) {
      $('#edit_user_id').remove();
      $('.heading-title').text('Create User');
      $('.create-user-btn').text('Create'); 
      $('#create_user').find('input, select').removeClass('is-invalid');
      $('.invalid-feedback').remove();
      $('#email').removeAttr('readonly').attr('required', true);
      $('#password').attr('required', true);
      $('#create_user')[0].reset();
      $('#user_assign_role').val([]);
      $('#user_assign_role').fSelect('reload');
      $("#create-user-modal").fadeToggle();
      $("#create-user-modal").css({"visibility":"visible","display":"block"});
    });
    
    $('.close-popup').on('click', function(e) {
      $("#assign_permission_to_user").fadeToggle();
      $("#assign_permission_to_user").css({
          "visibility": "hidden",
          "display": "none"
      });

      $("#create-user-modal").fadeToggle();
      $("#create-user-modal").css({
          "visibility": "hidden",
          "display": "none"
      });
    });

    $(document).on('click', '.assign-role-to-user-btn', function (e) {
      $('.please-select-role-error-message').hide();
      var role_id = $('#user_role').val();
      if(role_id == '') {
        $('.please-select-role-error-message').show();
        return false;
      }

      var user_id = $('#usr_id').val();

      $("#assign_permission_to_user").fadeToggle();
      $("#assign_permission_to_user").css({"visibility":"visible","display":"block"});
      var post_data = 'role_id=' + role_id + '&user_id=' + user_id + '&_token={{ csrf_token() }}';

      $('#loaderModal').show();
      $.ajax({
        type: "POST",
        data: post_data,
        url: "{{ route('assignRole') }}",
        success: function(res) {
          $('#loaderModal').hide();
          if (res.success) {
            jQuery('.simple-success-modal').show();
            jQuery('.simple-success-modal-msg-text').text(res.message);
            window.location.reload(true);
          } else {
            jQuery('.simple-error-modal').show();
            jQuery('.simple-error-modal-msg-text').text(res.message);
          }
        },
        error: function(error) {
          $('#loaderModal').hide();
          // Handle error
        }
      });
    });

    $('#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");
    });

    $(document).on('submit', '#create_user', function (e) {
      e.preventDefault();
      var formData = $(this).serialize();
      
      $('#loaderModal').show();
      $.ajax({
        type: "POST",
        data: formData,
        url: "{{ route('createUser') }}",
        success: function(res) {
          $('#loaderModal').hide();
          $('#create_user').find('input, select').removeClass('is-invalid');
          $('.invalid-feedback').remove();
          if (res.success) {
            $('#create_user')[0].reset();
            $('#user_assign_role').val([]).fSelect('reload');
            jQuery('.simple-success-modal').show();
            jQuery('.simple-success-modal-msg-text').text(res.message);

            if(window.location.href.indexOf("?") > -1) {
              var url = document.location.href+"&tab=managerole";
            } else {
              var url = document.location.href+"?tab=managerole";
            }
            document.location = url;
            {{--  window.location.reload(true);  --}}
          } else {
            jQuery('.simple-error-modal').show();
            jQuery('.simple-error-modal-msg-text').text(res.message);
          }
        },
        error: function(error) {
          $('#loaderModal').hide();
          $('#create_user').find('input, select').removeClass('is-invalid');
          $('.invalid-feedback').remove();
          if(error.responseJSON.errors) {
            $.each(error.responseJSON.errors, function( key, value ) {
              $('#' + key).addClass('is-invalid');
              $('#' + key).after('<span class="invalid-feedback" role="alert"> <strong>' +value+ '</strong></span>');
            });
          }
        }
      });
    });

  });
</script>
@endsection