@extends('layouts.admin')

@section('content')
<div class="card">
  <div>
	<div class="manageratetb">
	  <table class="table table-bordered" id="customfuelsurcharges-table">
		<thead>
            <tr>
				<th>Cost From</th>
				<th>Cost To</th>
				<th>Charge</th>
				<th>Actions</th>
            </tr>
		</thead>
		<tbody>
		</tbody>
	  </table>
	</div>
  </div>
</div>
<div style="margin-left:0px;" class="newcontbtn">
    {{ csrf_field() }}
	<input type="button" value="Add" name="Add" id="add-rate" class="btn btn-sm btn-danger"></input>
	<input type="button" value="Back" name="Back" class="btn btn-sm btn-danger" onclick="location.href='{{ url('admin/customfuelsurcharge/'.$customFuelSurcharge->id.'/edit') }}';"></input>
	<input type="text" name="extend-upto" id="extend-upto" placeholder="Extend Upto" class="extend-upto"></input>
	<input type="button" value="Preview" name="Preview" id="extend-preview" class="btn btn-sm btn-danger"></input>
	<input type="button" value="Save" name="Save" id="extend-save" class="btn btn-sm btn-danger"></input>
</div>
<!-- Rate Modal -->
<div class="modal fade addRateModal" id="addRateModal" role="dialog">
	<div class="modal-dialog">
	<!-- Modal content-->
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal">&times;</button>
		  <h4 class="modal-title firstTime" id="rateModalTitle"></h4>
		</div>
		<form class="form-floating form-validate form-ajax" id="rateform" name="rateform">
		<div class="modal-body">
			  <div class="col-md-12">
					<fieldset>
						<div class="form-group">
							<label for="cost_from" class="control-label">Cost From</label>
								<input type="text" class="form-control" name="cost_from" id="cost_from" data-validation="number" data-validation-allowing="float">
						</div>
						<div class="form-group">
							<label for="cost_to" class="control-label">Cost To</label>
								<input type="text" class="form-control" name="cost_to" id="cost_to" data-validation="number" data-validation-allowing="float">
						</div>
						<div class="form-group">
							<label for="charge" class="control-label">Charge</label>
								<input type="text" class="form-control" name="charge" id="charge" data-validation="number" data-validation-allowing="float">
						</div>
					</fieldset>
			  </div>
		  <div class="clearfix"></div>
		</div>
		<div class="modal-footer firstTime_footer">
		  {{ csrf_field() }}
		  <input type="hidden" name="id" id="id" class="hidden-field" value=""></input>
		  <input type="hidden" name="custom_fuel_surcharge_id" id="custom_fuel_surcharge_id" value="{{ $customFuelSurcharge->id }}"></input>
		  <input class="btn btn-sm btn-danger" type="submit" name="Save" value="Save" id="rate-save"></input>
		</div>
		</form>
	  </div>  
	</div>
</div>
<!--------->
<!-- Preview Table Modal -->
<div class="modal fade" id="previewTableModal" role="dialog">
	<div class="modal-dialog">
	<!-- Modal content-->
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal">&times;</button>
		  <h4 class="modal-title firstTime">Preview Table</h4>
		</div>
		<div class="modal-body">
			  <div class="col-md-12">
					<div id="previewtablehtml">
					</div>
			  </div>
		  <div class="clearfix"></div>
		</div>
	  </div>  
	</div>
</div>
<!--------->
<style>
.manageratetb table th{
	padding-right:5px !important;
	font-size: 10px;
}
</style>
@endsection


@section('scripts')
<script>
$(function() {
	
	function renderZeroValue(value)
	{
		if(value.charAt(0) == '.'){
			return '0'+value;
		}
		
		return value;
	}
    var customfuelsurchargestable = $('#customfuelsurcharges-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{!! route('admin.customfuelsurcharge.anycustomfuelsurcharges', $customFuelSurcharge->id) !!}", 
        columns: [
			{ data: 'cost_from', name: 'cost_from', "render": function ( data, type, row ) { return renderZeroValue(data); } },
			{ data: 'cost_to', name: 'cost_to', "render": function ( data, type, row ) { return renderZeroValue(data); } },
			{ data: 'charge', name: 'charge', "render": function ( data, type, row ) { return renderZeroValue(data); } },
			{data: 'actions', name: 'actions', orderable: false, searchable: false},
        ]
    });
	
	$('body').on('click', '.del-row', function () {
		var clickedRow = $(this);
		bootbox.confirm("Are you sure you want to delete?", function(result) {
			if(result){
				showLoader();
				$.ajax({
					type: 'POST',
					url:  '{!! url("admin/customfuelsurcharge/rate") !!}/'+clickedRow.data('id'),
					data: {id: clickedRow.data('id'), _token: $("input[name='_token']").val(), _method: 'DELETE'},
					success: function (data) {
						hideLoader();
						toastr.success('Rate deleted successfully.');
						customfuelsurchargestable.row( clickedRow.parents('tr') ).remove().draw();						
					}
				});
			}
		});
	});
	
	$('body').on('click', '.edit-row', function () {
		var clickedRow = $(this);
		showLoader();
		
		$.get('{!! url("admin/customfuelsurcharge/getrate") !!}/'+clickedRow.data('id'),
		function(data) {
			hideLoader();
			$('#rateModalTitle').html('Edit Rate');
			
			$.each(data, function( index, value ) {
				if($('#'+index).length){
					 if($('#'+index).is("input")){
						  if($('#'+index).attr("type") == 'text'){
							  if(value !== ''){
								  if(value.charAt(0) == '.'){
									value = '0'+value;
								  }
								  $('#'+index).val(value).parents('.form-group').addClass('filled');
							  }
						  }
						  else if($('#'+index).attr("type") == 'hidden'){
							  if(value){
								  $('#'+index).val(value);
							  }
						  }
					 }
					 else if($('#'+index).is("select")){
						  if(value){
							  $('#'+index).val(value);
							  if($('#'+index).hasClass("select2")){
								  $('#'+index).trigger('change');
							  }
						  }				 
					 }
				}
			});
			$('#addRateModal').modal('show');
		},
		"json");
	});
	
	$('body').on('click', '#add-rate', function () {
		$('#rateModalTitle').html('Add Rate');
		$('#addRateModal').modal('show');
	});
	
	$('#addRateModal').on('hidden.bs.modal', function (e) {
		resetForm($('#rateform'));
	});
	
	$('#rateform').on("formSubmitSuccess", function( event, form, requestType ) {
		
			var formData = $('#rateform').serialize();
			$('#addRateModal').modal('hide');
			showLoader();
			
			$.ajax({
				type: 'POST',
                url:  '{!! url("admin/customfuelsurcharge/saverate") !!}',
				data: formData,
                dataType: 'json',
                success: function (data) {
					hideLoader();
					toastr.success(data.message);
					customfuelsurchargestable.draw();
				}
			});
	});
	
	$('body').on('click', '#extend-preview', function () {
		if((isNaN($('#extend-upto').val())) || (!$('#extend-upto').val()))
		{
			toastr.error('Please enter valid extend upto value.');
		}
		else if((customfuelsurchargestable.data().count()) < 2){
			toastr.error('Please enter more rates.');
		}
		else{
			showLoader();
			
			$.ajax({
				type: 'POST',
                url:  '{!! url("admin/customfuelsurcharge/extenduptotable/".$customFuelSurcharge->id) !!}',
				data: {extendupto:$('#extend-upto').val(), _token: $("input[name='_token']").val()},
                dataType: 'json',
                success: function (data) {
					hideLoader();
					if(data.status == 'success'){
						$('#previewtablehtml').html(data.table);
						$('#previewTableModal').modal('show');
					}
					else{
						toastr.error(data.message);
					}
				}
			});
		}
	});
	
	$('body').on('click', '#extend-save', function () {
		if((isNaN($('#extend-upto').val())) || (!$('#extend-upto').val()))
		{
			toastr.error('Please enter valid extend upto value.');
		}
		else if((customfuelsurchargestable.data().count()) < 2){
			toastr.error('Please enter more rates.');
		}
		else{
			showLoader();
			
			$.ajax({
				type: 'POST',
                url:  '{!! url("admin/customfuelsurcharge/extenduptotablesave/".$customFuelSurcharge->id) !!}',
				data: {extendupto:$('#extend-upto').val(), _token: $("input[name='_token']").val()},
                dataType: 'json',
                success: function (data) {
					hideLoader();
					if(data.status == 'success'){
						$('#extend-upto').val('');
						toastr.success(data.message);
						customfuelsurchargestable.draw();
					}
					else{
						toastr.error(data.message);
					}
				}
			});
		}
	});
	
	$('.modalselect').select2({ dropdownParent: $("#addRateModal") });
});
</script>
<script>
</script>
<style>
.modalselect{
	width:538px;
}

</style>
@endsection