@extends('layouts/gnr_layout')
@section('title', '| List Branch Area')
@section('content')
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default" style="background-color:#708090;">
				<div class="panel-heading" style="padding-bottom:0px">
					<div class="panel-options">
						<a href="{{ route('setBranchAreas.create') }}" class="btn btn-info pull-right addViewBtn">
							<i class="glyphicon glyphicon-plus-sign addIcon"></i> 
							Add Branch Area
						</a>
					</div>

					<h1 align="center" style="font-family: Antiqua;letter-spacing: 2px"><font color="white">BRANCH AREA LIST</font></h1>
				</div>
				<div class="panel-body panelBodyView"> 
					<table class="table table-striped table-bordered" id="zoneListView">
						<thead>
							<tr>
								<th>SN#</th>
								<th>Organization</th>
								<th>Branch</th>
								<th>Code</th>
								{{-- <th>Branch area</th> --}}
								<th>Action</th>
		                    </tr>
		                    {{ csrf_field() }}
						</thead>
						<tbody>
														@foreach($branches as $branch)
								<tr>
									<td>{{ $SL }}</td>
									<td>{{ @$branch->company_name }}</td>
									<td>{{ $branch->branch_name }}</td>
									<td>{{ $branch->branchCode }}</td>
									{{-- <td>
										@foreach (json_decode($branch->branch_area) as $b_area)
											<span>{{$b_area}}</span>
										@endforeach
									</td> --}}
									
									<td>
										<a href="{{Route('setBranchAreas.edit',encrypt($branch->id))}}" class="showUpdateForm">
											<i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i>
										</a>
										{{-- <a href="javascript:;" class="deleteConfirmation" data-id="{{ $branch->id }}">
											<i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
										</a> --}}
									</td>
								</tr>
															@endforeach
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
@endsection

<div class="modal fade" id="delete-confirmation-modal">
	<div class="modal-dialog">
		<div class="modal-header" style="background-color:#000;color:#FFF;padding:10px 15px!important;">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h4 class="modal-title">Delete Confirmation</h4>
		</div>
		<div class="modal-content" style="border:none!important;padding:5px 30px!important;">
			<div class="modal-body" style="text-align:center">
				Are you sure to delete this item?
			</div>
		</div>
		<div class="modal-footer" style="background-color:#FFF;color:#FFF;">
			<div class="form-group hidden">
				<div class="col-sm-6 col-sm-offset-2">
					{!! Form::text('id', $value = null, ['class' => 'form-control', 'id' => 'id', 'type' => 'text', 'readonly']) !!}
				</div>
			</div>
			<button id="yesBtn" type="button" class="btn btn-info animated slideInRight" style="margin-bottom:0!important;" onclick="deleteData();">Yes</button>
			<button id="noBtn" type="button" class="btn btn-white animated slideInRight" data-dismiss="modal" style="margin-bottom:0!important;">No</button>
		</div>
	</div>
</div>
<div class="modal fade" id="assign-check-modal"></div>
<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
<script type="text/javascript">
	$(document).on('click', '.showUpdateForm', function() {
		if(hasAccess('updateZoneItem')) {
			//	CLEAR ALL THE CHECK SIGN FROM ALL CHECKBOXES.
			$(".modal-content .cbr-replaced .cbr-input").find('input').each(function() {
				$(this).parent('.cbr-input').parent().removeClass('cbr-checked');
			});

			$('#id').val($(this).data('id'));
			$('#name').val($(this).data('name'));
			$('#code').val($(this).data('code'));
			
			var areaIdStr = $(this).data('areaid');
			areaIdStr = areaIdStr.toString();
			
			var areaIdArr = areaIdStr.split(",");

			$(".modal-content .cbr-replaced .cbr-input").find('input').each(function() {
				var getAreaId = $(this).val();

				if(areaIdArr.indexOf(getAreaId)>-1==true) {
					$(this).parent('.cbr-input').parent().addClass('cbr-checked');
					$(this).attr('checked', 'checked');
				}
	    	});

			jQuery('#modal-wrapper').modal('show', {backdrop: 'static'});
		}
	});

	function updateData() {
		$.ajax({
			type: 'post',
			url: './updateZoneItem',
			data: $('form').serialize(),
			dataType: 'json',
			success: function(data) {
				if(data.errors) {
					if(data.errors['name'])
						toastr.warning(data.errors.name, null, opts);
					if(data.errors['code'])
						toastr.warning(data.errors.code, null, opts);
					if(data.errors['areaId'])
						toastr.warning(data.errors.areaId, null, opts);
				} else {
					$('#name').val('');
					$('#code').val('');
					$('#areaId').val('');
					$('.error').addClass('hidden');
					toastr.success(data.responseText, "Success!", opts);
					
					setTimeout(function(){
						window.location.href = '{{ url('viewZone/') }}';
					}, 6000);
				}
			},
			error: function(data) {
				alert(data.errors);
			}
		});
	}

	$(document).on('click', '.deleteConfirmation', function() {
		if(hasAccess('deleteZoneItem')) {
			$('#id').val($(this).data('id'));
			jQuery('#delete-confirmation-modal').modal('show', {backdrop: 'fade'});
		}
	});

	function deleteData() {
		var id = $("#id").val();
        var token = $("meta[name='csrf-token']").attr("content");
		$.ajax({
			url: "managementLevels/"+id,
			type: 'DELETE',
			data: {
				"id": id,
				"_token": token,
			},
			success: function (data){
				if(data.status == false){
					toastr.warning(data.title, null, toster());
				}
				if(data.status == true){
					toastr.success(data.title, null, toster());
					setTimeout(function(){
						{{-- window.location.href = "{{ Route('managementLevels.index') }}"; --}}
					}, 3000);
				}
			}
    	});
	}
	function toster(){
		var opts = {
				"closeButton": true,
				"debug": false,
				"positionClass": "toast-top-right",
				"onclick": null,
				"showDuration": "300",
				"hideDuration": "1000",
				"timeOut": "5000",
				"extendedTimeOut": "1000",
				"showEasing": "swing",
				"hideEasing": "linear",
				"showMethod": "fadeIn",
				
				"hideMethod": "fadeOut"
			};
			return opts;
		}

	function checkDuplicate(getAreaId) {

		//alert(getAreaId);

		$.ajax({
			type: 'post',
			url: './checkZoneAssignAvailability',
			data: {
			      '_token': $('input[name=_token]').val(),
			      'getAreaId': getAreaId
		    },
			dataType: 'json',
			success: function(data) {
				if(data.errors) {
					if(data.errors['name'])
						toastr.warning(data.errors.name, null, opts);
				} else if(data.alreadyAssign==1) {
					var getAssignCheckModalContent = $('#delete-confirmation-modal').html();
					$('#assign-check-modal').html(getAssignCheckModalContent).css('margin-top','100px');
					$('#assign-check-modal .modal-title').text(data.responseTitle);
					$('#assign-check-modal .modal-body').text(data.responseText);
					$('#assign-check-modal .modal-body').append('<p style="color:#000;">Are you sure to assign this area in this zone?</p>');
					
					$('#assign-check-modal .modal-footer #noBtn').addClass('assignNotPermitted');
					$('#assign-check-modal .modal-footer #yesBtn').addClass('assignPermitted');
					$('#assign-check-modal .modal-footer #yesBtn').removeAttr('onclick');
					$('#assign-check-modal .modal-footer #yesBtn').attr('data-dismiss', 'modal');

					jQuery('#assign-check-modal').modal('show', {backdrop: 'fade'});

					$('.assignNotPermitted').on('click', function(){
						//alert(getAreaId);
						
						$(".modal-content .cbr-replaced .cbr-input").find('input').each(function() {
							var searchAreaId = $(this).val();

							if(getAreaId==searchAreaId) {
								$(this).parent('.cbr-input').parent().removeClass('cbr-checked');
								$(this).removeAttr('checked');
							}
				    	});
					});

					$('.error').addClass('hidden');
					toastr.success(data.responseText, "Success!", opts);
				}
			},
			error: function(data) {
				alert(data.errors);
			}
		});
	}
</script>