@extends ('Layouts.Application')

@section ('MainContent')

<style>
	.vcenter {
		vertical-align: middle !important;
	}
</style>

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Employees</h3>
			</div>
			<div class="panel-body">
				@include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')

				@if (\App\Models\Permission::checkLinkPermission('EmployeeController', 'Settings', 'create'))
					<a class="btn btn-primary btn-xs" href="{{ route('LoggedIn.Settings.Employee.Create') }}">
						<i class="fa fa-plus-circle"></i> Add New
					</a>
				@endif

				<form class="form-inline" id='employee_view_form'>
					@csrf

					<div class="form-group form-group-sm">
						@include (
								'includes.branch_shift_version_names',
								['labelColWidth' => 4, 'fieldColWidth' => 8, 'required' => true]
						)
					</div>

					<div class="form-group">
						<button class="btn btn-primary btn-sm" type="button" id="view_submit">
							<i class="fa fa-list"></i> View Employee
						</button>

						<button type="button" class="btn btn-primary btn-sm" id="PrintBranchEmployees">
							<i class="fa fa-print"> Print</i>
						</button>
					</div>
				</form>
			</div>

			<div class="table-responsive">
				<table class="table table-striped table-bordered table-hover" id="employees-table"></table>
			</div>
		</div>
	</div>
</div>

@if (\App\Models\Permission::checkLinkPermission('EmployeeController', 'Settings', 'edit'))
	<script>
		var canEditEmployee = true;
	</script>
@endif

@if (\App\Models\Permission::checkLinkPermission('EmployeeController', 'Settings', 'delete'))
	<script>
		var canDeleteEmployee = true;
	</script>
@endif


<script language="JavaScript" type="text/javascript">
function checkDelete() {
	return confirm('Are you sure?');
}

$(document).ready(function () {
	var csrf_token = @json(csrf_token());
	var dataSet = @json($employees);

	let columns = [
		{
			title: "Sl",
			className: 'vcenter',
			render: function (data, type, row, meta) {
				return meta.row + meta.settings._iDisplayStart + 1;
			}
		},
		{
			title: "Employee ID",
			data: "username",
			className: 'vcenter'
		},
		{
			title: "Full Name",
			data: "full_name",
			className: 'vcenter'
		},
		{
			title: "Contact No",
			data: "phone_no",
			className: 'vcenter'
		},
		{
			title: "Branch-Shift-Version",
			data: "branch_access",
			render: function (data) {
				if (data) {
					var branch_and_versions = '';

					data.map(function(value) {
						branch_and_versions += "<p>" + value.branch_and_version_name + "</p>";
					});

					return branch_and_versions;
				}
			}
		},
		{
			title: "Status",
			data: "is_active",
			className: 'vcenter',
			render: function (data) {
				return data == 1 ? '<span class="label label-success">Active</span>' : '<span class="label label-danger">Inactive</span>';
			}
		}
	];

	if (canEditEmployee) {
		columns.push({
			title: "Link",
			data: "user_id",
			className: 'vcenter',
			render: function (data) {
				return '<a class="btn btn-primary btn-sm" href="' + baseURL + '/!/Settings/Employee/'
					+ data + '/edit"><i class="fa fa-pencil-square-o"></i> Edit</a><a class="btn btn-primary btn-sm" href="'
					+ baseURL + '/!/Settings/Employee/' + data + '/profile" target="_blank"><i class="fa fa-user"></i> Profile</a>';
			}
		});
	}

	if (canDeleteEmployee) {
		columns.push({
			title: "Action",
			data: "user_id",
			className: 'vcenter',
			render: function (data) {
				return '<form role="form" method="POST" class="form-horizontal" action="' + baseURL
					+ '/!/Settings/Employee/' + data + '" onclick="return checkDelete()">\
				<input type="hidden" name="_method" value="DELETE">\
				<input type="hidden" name="_token" value="' + csrf_token + '">\
				<input type="hidden" name="id" value="' + data + '">\
				<button type="submit" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i> Delete</button>\
				</form>';
			}
		});
	}

	$("#employees-table").DataTable({
		data: dataSet,
		columns: columns
	});

	$(document).on('click', '#PrintBranchEmployees', function() {
		var branch_and_version = $('#branch_and_version').val();

		if (branch_and_version) {
			window.open(baseURL + '/!/Settings/Employee/print/' + branch_and_version);
		}
	});

	$(document).on('click', '#view_submit', function () {
		$.ajax({
			url: baseURL + '/!/Settings/Employee/view',
			type: 'POST',
			data: $('#employee_view_form').serialize(),
			success: function (response) {
				if (response.length > 0) {
					$('#employees-table').dataTable().fnClearTable();
					$('#employees-table').dataTable().fnAddData(response);
				} else {
					$('#employees-table').dataTable().fnClearTable();
				}
			}
		});
	});
});
</script>

@endsection