@extends('admin.employee_attendance')

@section('content')

	<div class="main-content">
		<div class="main-content-inner">
			<div class="breadcrumbs ace-save-state" id="breadcrumbs">
				<ul class="breadcrumb">
					<li>
						<a href="home">Dashboard</a>
					</li>
					<li class="active">Employee</li>
				</ul><!-- /.breadcrumb -->
			</div>

			<div class="page-content">
				<div class="row">
					
					<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12">
						<h3 class="header smaller lighter blue">Member List</h3>

						@if(Session::get('message'))
							<div class="alert alert-success text-center" role="alert">
								<strong>{{ Session::get('message') }}</strong>
							</div>
						@endif

						<div class="clearfix">
							<div class="pull-right tableTools-container">
								<a href="{{ route('employees.create') }}" class="btn btn-info box_show">
								<b>Add New <span class="glyphicon glyphicon-plus"></span></b>
								</a>
							</div>
						</div>
						<!-- /.box-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- div.dataTables_borderWrap -->
								<div class="table-container">
									@include('admin.employee.table')
								</div>
							</div>
						</div>
					</div>
				</div><!-- /.row -->
			</div><!-- /.page-content -->
		</div>

		<!--DATATABLE-->
		<script src="{{ URL::asset('assets/js/responsive.bootstrap.min.js') }}"></script>
		<script src="{{ URL::asset('assets/js/datatables.min.js') }}"></script>
		<!--script src="{{ URL::asset('assets/js/jquery.dataTables.min.js') }}"></script-->
		<script src="{{ URL::asset('assets/js/dataTables.bootstrap.min.js') }}"></script>
		<!--For Excel Make-->
		<script src="{{ URL::asset('assets/js/jszip.min.js') }}"></script>
		<!--For PDF Make-->
		<script src="{{ URL::asset('assets/js/pdfmake.min.js') }}"></script>
		<script src="{{ URL::asset('assets/js/vfs_fonts.js') }}"></script>
		<!--For Datatable Button-->
		<script src="{{ URL::asset('assets/js/dataTables.buttons.min.js') }}"></script>
		<script src="{{ URL::asset('assets/js/buttons.flash.min.js') }}"></script>
		<script src="{{ URL::asset('assets/js/buttons.html5.min.js') }}"></script>
		<script src="{{ URL::asset('assets/js/buttons.print.min.js') }}"></script>
		<!--End user buttons to control column visibility.-->
		<script src="{{ URL::asset('assets/js/buttons.colVis.min.js') }}"></script>
		<!--datatable js end-->

		<script type="text/javascript">

			window.setTimeout(function() {
				$(".alert").fadeTo(500, 0).slideUp(500, function(){
					$(this).remove();
				});
			}, 4000);

			//Ajax store
			$("#store-form").submit(function (e) {
				e.preventDefault();
				var post_url	= '{{ url("employees") }}';
				$.ajax({
					type: "POST",
					url: post_url,
					dataType: 'json',
					headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
					data:  $(this).serialize(),
					beforeSend: function() {
						$('.error-list').remove();
						$("#store-submit").prop("disabled", true);
						$("#store-submit").html('<i class="loading fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only loading-fallback">Loading...</span>');
					}, statusCode: {
						500: function() {
							$.notify({
								// options
								icon: 'fa fa-exclamation-triangle',
								title: '<strong>Error 500</strong>: <br>',
								message: 'An error occurred while sending data.'
							},{
								// settings
								type: "danger",
								allow_dismiss: true,
								newest_on_top: true,
								showProgressbar: false,
								placement: {
									from: "top",
									align: "right"
								},
								offset: 20,
								spacing: 10,
								z_index: 9999,
								delay: 5000,
								timer: 1000,
								mouse_over: "pause",
								animate: {
									enter: 'animated fadeInDown',
									exit: 'animated fadeOutUp'
								}
							});
						}
					}, success: function (data) {
						data.responseJSON;
						$.notify({
							// options
							icon: 'fa fa-check',
							title: '<strong>Success</strong>: <br>',
							message: data['msg']
						},{
							// settings
							type: "success",
							allow_dismiss: true,
							newest_on_top: true,
							showProgressbar: false,
							placement: {
								from: "top",
								align: "right"
							},
							offset: 20,
							spacing: 10,
							z_index: 9999,
							delay: 5000,
							timer: 1000,
							mouse_over: "pause",
							animate: {
								enter: 'animated fadeInDown',
								exit: 'animated fadeOutUp'
							}
						});
						$( "#store-emp_first_name" ).val('');
						$( "#store-emp_last_name" ).val('');
						$('#create-item').modal('toggle');
						// refresh data
						refreshTable();
					}, error :function(data) {
						$errors = data.responseJSON.errors;
						var id = '';
						for (var i in $errors) {
							id += "store-" + i;
							(function(){
								var error = $("<label for='" + id + "' class='error-list'>" + $errors[i] + "</label>");
								error.hide().fadeIn("slow");
								error.insertAfter('#' + id);
							})();
							id = '';
						}
					},
					complete: function(data) {
					$( ".loading" ).remove();
					$( ".loading-fallback" ).remove();
					$("#store-submit").text('Save');
					$("#store-submit").prop("disabled", false);
				}
			});
			});

			//ajax edit
			$(".table-container").on("click touchstart", ".edit-btn", function () {
				var elem 		= $(this);
				var id 			= elem.attr('data-areaid');
				var post_url	= '{{ url("employees") }}' + "/" + id;

				$.ajax({
					type: 'GET',
					url: 'employees/' + elem.attr('data-areaid') + '/edit',
					dataType: 'json',
					headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
					beforeSend: function() {
						$('#item-not-found').remove();
					},
					success: function (data) {
						$("#update_emp_first_name").val(data['emp_first_name']);
						$("#update_emp_last_name").val(data['emp_last_name']);
						$("#update_emp_email").val(data['emp_email']);
						$("#update_emp_email").val(data['emp_email']);
						$("#update_emp_designation").val(data['emp_designation']);
						$("#update_emp_contact").val(data['emp_contact']);
						$("#update_emp_contact").val(data['emp_contact']);
						$("#update_emp_address").val(data['emp_address']);
						$("#update_emp_join_date").val(data['emp_join_date']);
						$("#update_dept_id").val(data['dept_id']);
						$("#update_status").val(data['status']);
						$("#update-form").attr("action", post_url);
						$('#update-form').show();
					},
					error: function(data) {
						$.notify({
							// options
							icon: 'fa fa-exclamation-triangle',
							title: '<strong>Error</strong>: <br>',
							message: 'An error occurred while getting data.'
						},{
							// settings
							type: "danger",
							allow_dismiss: true,
							newest_on_top: true,
							showProgressbar: false,
							placement: {
								from: "top",
								align: "right"
							},
							offset: 20,
							spacing: 10,
							z_index: 9999,
							delay: 5000,
							timer: 1000,
							mouse_over: "pause",
							animate: {
								enter: 'animated fadeInDown',
								exit: 'animated fadeOutUp'
							}
						});
						$('#update-form').hide();
						(function(){
							var notFound = $('<div class="modal-body fade-text" id="item-not-found"><h1 class="text-center danger">☠</h1><h2 class="text-center">Item not found</h2></div>');
							notFound.insertAfter('#update-form');
						})();
					},
					complete:function(data) {
						$('#edit-loading-bar').hide();
					}
				});
			});

			//Ajax update
			$("#update-form").submit(function (e) {
				var CSRF_TOKEN  = $('meta[name="csrf-token"]').attr('content');
				var elem 		= $(this);
				var post_url	= elem.attr('action');
				e.preventDefault();

				$.ajax({
					type: "POST",
					url: post_url,
					dataType: 'json',
					//data:{_token: CSRF_TOKEN,  _method: 'PUT', val:elem.serialize()},
					data : $(this).serialize(),
					beforeSend: function() {
						$('.error-list').remove();
						$("#update-submit").prop("disabled", true);
						$("#update-submit").html('<i class="loading fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only loading-fallback">Loading...</span>');
					}, statusCode: {
						500: function() {
							$.notify({
								// options
								icon: 'fa fa-exclamation-triangle',
								title: '<strong>Error 500</strong>: <br>',
								message: 'An error occurred while sending data.'
							},{
								// settings
								type: "danger",
								allow_dismiss: true,
								newest_on_top: true,
								showProgressbar: false,
								placement: {
									from: "top",
									align: "right"
								},
								offset: 20,
								spacing: 10,
								z_index: 9999,
								delay: 5000,
								timer: 1000,
								mouse_over: "pause",
								animate: {
									enter: 'animated fadeInDown',
									exit: 'animated fadeOutUp'
								}
							});
						}
					}, success: function (data) {
						$success = data.responseJSON;
						$.notify({
							// options
							icon: 'fa fa-check',
							title: '<strong>Success</strong>: <br>',
							message: data['msg']
						},{
							// settings
							type: "success",
							allow_dismiss: true,
							newest_on_top: true,
							showProgressbar: false,
							placement: {
								from: "top",
								align: "right"
							},
							offset: 20,
							spacing: 10,
							z_index: 9999,
							delay: 5000,
							timer: 1000,
							mouse_over: "pause",
							animate: {
								enter: 'animated fadeInDown',
								exit: 'animated fadeOutUp'
							}
						});
						$("#area_name_"+ data['id']).text(data['area_name']);
						$("#area_code_"+ data['id']).text(data['area_code']);
						$("#district_name_"+ data['id']).text(data['district_name']);
						$('#edit-item').modal('toggle');
						// refresh data
						refreshTable();
					}, error: function(data) {
						$errors = data.responseJSON.errors;
						var id = '';
						for (var i in $errors) {
							id += "update_" + i;
							(function(){
								var error = $("<label for='" + id + "' class='error-list'>" + $errors[i] + "</label>");
								error.hide().fadeIn("slow");
								error.insertAfter('#' + id);
							})();
							id = '';
						}
					}, complete: function(data) {
						$( ".loading" ).remove();
						$( ".loading-fallback" ).remove();
						$("#update-submit").text('Update Item');
						$("#update-submit").prop("disabled", false);
					}
				});
			});

			// ajax destroy
			$('#destroy-item').on('hidden.bs.modal', function () {
				$('#item-not-found').remove();
				$('#remove-data').show();
			});

			$(".table-container").on("click touchstart", ".remove-btn", function () {
				$("#remove-id").val($(this).attr("value"));
			});

			$("#remove-form").submit(function (e) {
				e.preventDefault();
				var CSRF_TOKEN  = $('meta[name="csrf-token"]').attr('content');
				var post_url	= '{{ url("employees") }}';
				var msg         = $('#msg');
				var aid			= $("#remove-id").val();

				$.ajax({

					type:'POST',
					dataType:'json',
					data:{_token: CSRF_TOKEN, _method: 'DELETE'},
					url: post_url + "/" + aid,
					beforeSend: function() {
						$('#item-not-found').remove();
						$('#destroy-loading-bar').show();
					},
					success: function (data) {
						$success = data.responseJSON;
						$.notify({
							// options
							icon: 'fa fa-check',
							title: '<strong>Success</strong>: <br>',
							message: data['msg']
						},{
							// settings
							type: "success",
							allow_dismiss: true,
							newest_on_top: true,
							showProgressbar: false,
							placement: {
								from: "top",
								align: "right"
							},
							offset: 20,
							spacing: 10,
							z_index: 9999,
							delay: 5000,
							timer: 1000,
							mouse_over: "pause",
							animate: {
								enter: 'animated fadeInDown',
								exit: 'animated fadeOutUp'
							}
						});
						$('#destroy-item').modal('toggle');
						// refresh data
						refreshTable();
					},
					error: function(data) {
						$.notify({
							// options
							icon: 'fa fa-exclamation-triangle',
							title: '<strong>Error</strong>: <br>',
							message: 'An error occurred while getting data.'
						},{
							// settings
							type: "danger",
							allow_dismiss: true,
							newest_on_top: true,
							showProgressbar: false,
							placement: {
								from: "top",
								align: "right"
							},
							offset: 20,
							spacing: 10,
							z_index: 9999,
							delay: 5000,
							timer: 1000,
							mouse_over: "pause",
							animate: {
								enter: 'animated fadeInDown',
								exit: 'animated fadeOutUp'
							}
						});
						$('#remove-data').hide();
						(function(){
							var notFound = $('<div class="modal-body fade-text" id="item-not-found"><h1 class="text-center danger">☠</h1><h2 class="text-center">Item not found</h2></div>');
							notFound.insertAfter('#remove-data');
						})();
					},
					complete:function(data) {
						$('#destroy-loading-bar').hide();
					}
				});
			});

			// table refresh
			function refreshTable() {
				$('div.table-container').hide();
				$('#table-loader').hide();
				$('#table-loader').fadeIn();
				$('div.table-container').load('employeelist', function() {
					$('#table-loader').hide();
					$('div.table-container').fadeIn();
					$('#myTable').DataTable();
				});
			}
		</script>
	</div><!-- /.main-content -->

@endsection