@extends('theme::layouts.app')


@section('content')

	<h2 class="dashboard-title">{{ __("Security Group") }}</h2>

	<div class="tabs-navigation blue-tabs">
		<ul>
			<li class="active"><a href="#" class="js-tab-navigate" data-id="#group-list"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/security-2.svg') }}"> {{ __("Group List") }} </a></li>
			@if (auth()->user()->userRole->hasAccess('manage-security-group'))
				<li><a href="#" class="js-tab-navigate" data-id="#group-access-right"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/security-safe.svg') }}"> {{ __("Group Access Right") }} </a></li>
			@endif
		</ul>
	</div>

	<div class="tabs-content">
		<div class="tabs-content-item white-bg no-padd" id="group-list">
			<table id="groupListTable" class="">
				<thead>
					<tr>
						<td>{{ __("Access level") }}</td>
						<td>{{ __("Role") }}</td>
						<td>{{ __("Status") }}</td>
						<td>{{ __("Action") }}</td>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
		@if (auth()->user()->userRole->hasAccess('manage-security-group'))
			<div class="tabs-content-item white-bg no-padd no-box-shadow cms-permissions-wrapper" id="group-access-right" style="display: none;">
				<form id="permissionFrm" action="{{ route('cms.securities.updateRolePermission') }}" method="post">
					<div class="main-header-row">
						<div class="main-header-column">{{ __("Access right") }}</div>
						@foreach ($roles as $role)
							<div class="main-header-column">{{ $role->access_level }}</div>
						@endforeach
					</div>
					<div class="main-header-row mb-0">
						<div class="main-header-column"></div>
						@foreach ($roles as $role)
							<div class="main-header-column">{{ $role->display_name }}</div>
						@endforeach
					</div>
					@foreach ($permissionGroups as $permissionGroup)
						<div class="group-row">
							<div class="group-column">{{ $permissionGroup->name }}</div>
						</div>
						@foreach ($permissionGroup->permissions as $permission)
							<div class="permission-row">
								<div class="permission-column">{{ $permission->display_name }}</div>
								@foreach ($roles as $role)
									<div class="permission-column">
										<div class="custom-radio-checkbox">
											<input type="checkbox" name="role_permissions[]" id="permission-{{ $role->id }}-{{ $permission->id }}" value="{{ $role->id }}-{{ $permission->id }}" {{ $role->rolePermissions->where('permission_id', $permission->id)->first() ? 'checked' : '' }}>
											<label for="permission-{{ $role->id }}-{{ $permission->id }}">
											</label>
										</div>
									</div>
								@endforeach
							</div>
						@endforeach
					@endforeach
					{{-- <table id="security-group-table__list" class="">
						<thead>
							<tr>
								<td>Access right</td>
								<td>Administrator</td>
								<td>Manager</td>
								<td>User</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>IT Personnel</td>
								<td>Numstation Manager</td>
								<td>Numstation Staff</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>CMS</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>Manage Company Settings</td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
							</tr>
							<tr>
								<td>View Company Dashboard</td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
							</tr>
							<tr>
								<td>Manage Client Company Subscription</td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
							</tr>
							<tr>
								<td>Client Company</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>Manage Company Settings</td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
								<td><input type="checkbox"></td>
							</tr>
						</tbody>
					</table> --}}
					<div class="text-center">
						<div class="flex button-group">
							<button type="submit" class="btn primary-button">{{ __("Save") }}</button>
							<button type="reset" class="btn btn-error">{{ __("Reset") }}</button>
						</div>
					</div>
				</form>
			</div>
		@endif
	</div>

@endsection

@section('script')

<script>
	$(document).ready( function () {
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
		
	    var groupListTable = $("#groupListTable").DataTable({
			processing: true,
			serverSide: true,
			ajax: {
				url: '{{ route("cms.securities.groupListTable") }}',
				type: 'post',
				"dataSrc": function ( json ) {
					for (var i = 0; i < json.data.length; i++) {
						$.each( json.data[i], function( key, value ) {
							json.data[i][key] = value ? value : '-';
						});
					}

					return json.data;
				}    
			},
			columns: [
				{data: 'access_level', name: 'access_level'},
				{data: 'display_name', name: 'display_name'},
				{data: 'status', name: 'status'},
				{data: 'actions', name: 'actions', searchable: false, sortable: false}
			],
			order: [[0, "asc"]],
			searchDelay: 500,
		    "language": {
				"paginate": {
					"next": ">",         // Text for the "Next" page button
					"previous": "<"  // Text for the "Previous" page button
				},
      			"emptyTable": '{{ __("No data available in table") }}'
				// Add more text customizations if needed
			}
		});

		$(document).on('click', '.suspend-role', function(e) {
			var action = $(this).attr('data-action');

			if (action) {
				Swal.fire({
					title: '{{ __("Are you sure?") }}',
					text: '{{ __("You would not be able to revert this!") }}',
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: '{{ __("Yes") }}',
					cancelButtonText: '{{ __("Cancel") }}'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: action,
							type: "post",
							data: {},
							dataType: 'json',
							success:function(data) {
								if (data.success) {
									$('#validationModal').modal('show');
									$('#validationModal .error-message').html(data.message);

									groupListTable.ajax.reload();
								}
							},
							error: function(data) {
								var errors = data.responseJSON.errors;
								var errorMessage = '<ul>';
								$.each(errors, function(index, error) {
									console.log(error);
									errorMessage += '<li>' + error[0] + '</li>';
								});
								errorMessage += '</ul>';

								$('#validationModal .error-message').html(errorMessage);
								$('#validationModal').modal('show');
							}
						});
					}
				});
			}
		});

		$(document).on('click', '.activate-role', function(e) {
			var action = $(this).attr('data-action');

			if (action) {
				Swal.fire({
					title: '{{ __("Are you sure?") }}',
					text: '{{ __("You would not be able to revert this!") }}',
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: '{{ __("Yes") }}',
					cancelButtonText: '{{ __("Cancel") }}'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: action,
							type: "post",
							data: {},
							dataType: 'json',
							success:function(data) {
								if (data.success) {
									$('#validationModal').modal('show');
									$('#validationModal .error-message').html(data.message);

									groupListTable.ajax.reload();
								}
							},
							error: function(data) {
								var errors = data.responseJSON.errors;
								var errorMessage = '<ul>';
								$.each(errors, function(index, error) {
									console.log(error);
									errorMessage += '<li>' + error[0] + '</li>';
								});
								errorMessage += '</ul>';

								$('#validationModal .error-message').html(errorMessage);
								$('#validationModal').modal('show');
							}
						});
					}
				});
			}
		});

		$('#permissionFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							popToast('success', data.message);
						}
						else {
							popToast('danger', data.message);
						}
					},
					error: function(data) {
						var errors = data.responseJSON.errors;
						$.each(errors, function(index, error) {
							popToast('danger', errors[0]);
							return false;
						});

						button.removeAttr('disabled');
						button.html(buttonHtml);
					}
				});
			}
		});

		$(document).on('click', '.view-edit-action', function(e) {
			var type = $(this).attr('data-type');

			if (type == 'view') {
				$('#permissionFrm input[name="role_permissions[]"]').attr('disabled', 'disabled');
			}
			else {
				$('#permissionFrm input[name="role_permissions[]"]').removeAttr('disabled');
			}

			$('.js-tab-navigate[data-id="#group-access-right"]').click();
		});

	    $(".js-side-nav").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.side-nav-tabs').next().find('.js-content-tab').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.side-nav-tabs').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });

	    $(".js-tab-navigate").click(function(e){
	    	e.preventDefault();
	    	var id = jQuery(this).data('id');
	    	jQuery(this).closest('.tabs-navigation').next().find('.tabs-content-item').hide();
	    	jQuery(id).show();
	    	jQuery(this).closest('.tabs-navigation').find('li').removeClass('active');
	    	jQuery(this).parent().addClass('active');
	    });
	} );
</script>

@endsection