@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('header')
Dashboard
@endsection

<style type="text/css">
	th, td {
		font-size: 13px;
	}
	.label-format {
		padding-top: 13px !important;
	}
	table.dataTable thead > tr > th {
		padding-right: 5px !important;
	}
	.btn-group>.btn+.dropdown-toggle {
        padding-bottom: 9px;
        padding-top: 7px;
    }
</style>

@section('body')
<div class="row" style="padding-left:5px; padding-right:5px">
	<div class="box-header with-border">
	  	<h3 class="box-title">Other Settings</h3>
	  	<div class="box-tools">
			<div class="btn-group">
                <button type="button" class="btn btn-default btn-sm btn-flat" id="septage-acct-status" data-filter="active">Septage Status</button>
                <button type="button" class="btn btn-default btn-sm btn-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="fa fa-fw fa-filter"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="toggle-filter-acct-status" data-filter="active"><a href="#">Actived</a></li>
					<li class="toggle-filter-acct-status" data-filter="disconnected"><a href="#">Deactivated</a></li>
					<li class="toggle-filter-acct-status" data-filter="all"><a href="#">All</a></li>
                </ul>
			</div>
			
			<div class="btn-group">
                <button type="button" class="btn btn-default btn-sm btn-flat" id="with-septic" data-filter="active">W/ Septic Tank</button>
                <button type="button" class="btn btn-default btn-sm btn-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="fa fa-fw fa-filter"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="toggle-filter-acct-status" data-filter="active"><a href="#">Yes</a></li>
					<li class="toggle-filter-acct-status" data-filter="disconnected"><a href="#">No</a></li>
					<li class="toggle-filter-acct-status" data-filter="all"><a href="#">All</a></li>
                </ul>
			</div>

			<div class="btn-group">
                <button type="button" class="btn btn-default btn-sm btn-flat" id="select-book" data-filter="active">Book</button>
                <button type="button" class="btn btn-default btn-sm btn-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="fa fa-fw fa-filter"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li class="toggle-filter-acct-status" data-filter="all"><a href="#">All</a></li>
                    <li class="toggle-filter-acct-status" data-filter="active"><a href="#">Yes</a></li>
                    <li class="toggle-filter-acct-status" data-filter="disconnected"><a href="#">No</a></li>
                </ul>
			</div>
		
	  	</div>
	</div>
</div>
<div class="box box-info">
	<div class="box-body">
  		<div class="row">
    		<div class="col-xs-12">
      			<table class="table table-condensed table-hover others__tbl-others" id="table-others" style="width:100%">
                    <thead class="table-header-bg">
                        <tr class="info">
                        	<th width="5%">BOOK</th>
                            <th width="2%">SEQ.</th>
                            <th width="2%">CLASS</th>
                            <th width="8%">ACCOUNT NO.</th>
                            <th width="10%">CUSTOMER NAME</th>
                            <th width="16%">SERVICE ADDRESS</th>
                            {{-- <th width="5%">METER NO.</th> --}}
                            <th width="9%" style="text-align: center;">METER CHARGES</th>
                            <th width="9%" style="text-align: center;">FRANCHISE TAX %</th>
                            <th width="8%" style="text-align: center; padding-left: 15px;">SEPTAGE FEE</th>
                            <th width="8%" style="text-align: center; padding-left: 15px;">W/ SEPTIC TANK</th>
                            <th width="3%">ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
                	
            		</tbody>
                </table>
    		</div>
	  	</div>
	</div>
</div>

{{-- @include('administrator.other-settings._datatable') --}}
@endsection

@section('scripts')
<script type="text/javascript">
	$(document).ready(function(){

		$('#btn-refresh').on('click', function(){
			location.reload(true);
		});

		// Added April 30


		$("#septage-acct-status").on('change', function(){
			var result = $('#septage-acct-status').val();
			alert(result);
		});

		function filterAccounts(){
		};

		//------------ For Testing ------------------//

		$.ajax({
			url  : $app_url + '/csr/other-settings/load-cust',
			type : 'get',
			data : {

			},
			success : function(response){
				// check if has results
				// console.log(response);

				$('#table-others').DataTable().destroy();
				var table = $('table.others__tbl-others > tbody');
				table.empty();

				$('#table-others').DataTable( {
					"processing": true,
					"dom"       : 'tfp',
					"deferRender": true,
					"deferLoading": 10,
					"data"      : response,
					createdRow: function (row, data, dataIndex) {
						$(row).attr('data-id', data.others_id);
					},
					// createdRow: function (row, data, dataIndex) {
					// 	$(row).attr('data-id', data.others_id);
					// },
					"columns": [
						{ "data" : "book", orderable:false, className:"text-center" },
						{ "data" : "sequence", orderable:false, className:"text-center" },
						{ "data" : "class", orderable:false, className:"text-center" },
						{ "data" : "acct_number", orderable:false, className:"text-center" },
						{ "data" : "cust_name", orderable:false, className:"text-uppercase" },
						{ "data" : "address", orderable:false, className:"text-uppercase" },
						{ "data" : "meter_charges", orderable:false, className:"text-center" },
						{ "data" : "franchise_tax", orderable:false, className:"text-center" },
						{ 
							"data" : "has_septage",
							className:"text-center others__status label-format",
							orderable : false,
							render : function(data, type, row){
								// data == 1 ? '<label class="label label-success">Active</label>' : '<label class="label label-danger">Deactivated</label>';
								if( data === 1 ){
									return '<label class="label label-success">Active</label>';
								} else {
									return '<label class="label label-danger">Deactivated</label>';
								}
							}
						},
						{ 
							"data" : "with_septic",
							className:"text-center others__septic label-format",
							orderable : false,
							render : function(data, type, row){
								// data == 1 ? '<label class="label label-success">Yes</label>' : '<label class="label label-danger">No</label>';
								if( data === 1 ){
									return '<label class="label label-success">Yes</label>';
								} else {
									return '<label class="label label-danger">No</label>';
								}
							} 
						},
						{
							orderable: false,
							className:"text-center",
							render: function (data, type, row) {
								return '<button class="btn btn-sm btn-warning others_btn-edit" id=""><i class="fa fa-fw fa-pencil"></i> Edit</button>';
							},	
						},
					],
					"columnDefs": [
							{ targets : 0, "width" 	 : "3%" },
							{ targets : 1, "width"   : "2%" },
							{ targets : 2, "width"   : "2%" },
							{ targets : 3, "width"   : "10%" },
							{ targets : 4, "width"   : "15%" },
							{ targets : 5, "width"   : "18%" },
							{ targets : 6, "width"   : "12%" },
							{ targets : 7, "width"   : "12%" },
							{ targets : 8, "width"   : "10%" },
							{ targets : 9, "width"   : "13%" },
							{ targets : 10, "width"   : "3%" }
					]
				} );

				$('div.dataTables_filter input').prop('placeholder', 'Search');
				$('#table-others_filter').css('float', 'left');
				$('#table-others > thead > tr').find('th:eq(0)').removeClass('sorting_asc').removeClass('sorting_disabled');

				$(document).on("click",".others_btn-edit", function(){
					var $row = $(this).closest('tr');
					// alert($row.data('others-id'));
					$.confirm({
						title: 'Customer Other Charges',
						content: function () {
							var self = this;
							return $.ajax({
								url      : $app_url+'/csr/other-settings/edit-others',
								data     : {
									id : $row.data('id')
								},
								dataType : 'html',
								method   : 'get'
							}).done(function (response) {
								self.setContent(response);
								$('.jconfirm-content').addClass('page-body');
								console.log(response);
							}).fail(function(){
								self.setContent('Something went wrong.');
							});
						},
						type: 'blue',
						typeAnimated: true,
						draggable   : true,
						columnClass : 'col-md-12',
						buttons: {
							Update: {
								text: 'Update',
								btnClass: 'btn-success',
								action: function(){

									var $amt_m_charges 	= $("#input_m_charges").val();
									var $pct_f_tax 		= $("#input_f_tax").val();
									var $septage 		= $("#others_chkbx").val();
									var $septic_tank 	= $("#sep_tank_chkbx").val();
									var $id				=  $row.data('id');
									// alert($id);

									var $data = {
										id 					: $id,
										amt_meter_charges 	: $amt_m_charges,
										pct_franchise_tax 	: $pct_f_tax,
										has_septage_fee 	: $septage,
										with_septic_tank 	: $septic_tank
									}

									// console.log($data.has_septage_fee);

									$.ajax({
										url 	: $app_url + "/csr/other-settings/update-others",
										type 	: "POST",
										data 	: JSON.stringify($data),
										success : function(response){
											// console.log(response);
											//  $row.find("td:first").prev().empty();
											//// textOfTd = $row.find(".others__status").html();
											// alert(response)
											// alert('test');

											// $.each(response, function(index){
											// 	var $sample = response[index];

											// });
											
											if($data.has_septage_fee == 1){
												$row.find(".others__status").html('<label class="label label-success">Active</label>');
											} else {
												$row.find(".others__status").html('<label class="label label-danger">Deactivated</label>');
											}

											if($data.with_septic_tank == 1){
												$row.find(".others__septic").html('<label class="label label-success">Yes</label>');
											} else {
												$row.find(".others__septic").html('<label class="label label-danger">No</label>');
											}



											// console.log();
											
										},
										error : function(){
											console.log("error fetching");
										}
									});
								}
							},
							close: function () { 	
							}
						},
						onContentReady : function(){
							var $chkbx_status = $('#others_chkbx').val();
							$chkbx_status == 1 ? $('#others_chkbx').attr('checked', true) : $('#others_chkbx').attr('checked', false) ;

							//Check if checkbox on change
							$('#others_chkbx').on('change', function(){
								if($('#others_chkbx').is(':checked')){
									$('#others_chkbx').val(1);
								} else {
									$.confirm({
										title 		: 'Deactivate Other Charges',
										content 	: 'Deactivate other charges on this account?',
										type 		: 'red',
										typeAnimated: true,
										draggable 	: true,
										icon: 'fa fa-warning',
										buttons 	: {
														Deactivate: {
														text: '<i class="fa fa-ban"></i> Deactivate',
														btnClass: 'btn-red',
														action: function(){
																$('#others_chkbx').val(0);
																$('#cust_table tbody > tr').each(function() {
																	var $stat = $(this).find("td:first").prev().empty();
																	$(this).find("td:first").html('<label class="label label-danger">Deactivated</label>');   
																});
															}
														},
														// close: function () {
														// }
										}
									});
								}
								if(!$('#others_chkbx').is(':checked')){
									$('#others_chkbx').val(0);
								} else {
									$.confirm({
										title 		: 'Activate Other Charges',
										content 	: 'Activate other charges on this account?',
										type 		: 'green',
										typeAnimated: true,
										draggable 	: true,
										icon		: 'fa fa-check-circle',
										buttons 	: {
														Activate: {
														text: '<i class="fa fa-check"></i> Activate',
														btnClass: 'btn-success',
														action: function(){
															$('#others_chkbx').val(1);
															// alert($('#others_chkbx').val());
															$('#cust_table tbody > tr').each(function() {
																	var $stat = $(this).find("td:first").prev().empty();
																	$(this).find("td:first").html('<label class="label label-success">Active</label>');   
																});
															}
														},
														// close: function () {	
														// }
										}
									});
								}
							});

							// ----------------------------------------------------------------------------------------------------------------- //

							var $chkbx_sep_tank = $('#sep_tank_chkbx').val();
							$chkbx_sep_tank == 1 ? $('#sep_tank_chkbx').attr('checked', true) : $('#sep_tank_chkbx').attr('checked', false) ;

							$('#sep_tank_chkbx').on('change', function(){
								if($('#sep_tank_chkbx').is(':checked')){
									$('#sep_tank_chkbx').val(1);
								} else {
									$.confirm({
										title 		: 'Septic Tank',
										content 	: "This account doesn't have septic tank?",
										type 		: 'red',
										typeAnimated: true,
										draggable 	: true,
										icon: 'fa fa-warning',
										buttons 	: {
														Deactivate: {
														text: '<i class="fa fa-ban"></i> Deactivate',
														btnClass: 'btn-red',
														action: function(){
																$('sep_tank_chkbx').val(0);
													//         	$('#cust_table tbody > tr').each(function() {
																//     var $stat = $(this).find("td.").prev().empty();
																//     $(this).find("td:first").html('<label class="label label-danger">Deactivated</label>');   
																// });
																// alert('test');
															}
														},
														// close: function () {
														// }
										}
									});
								}

								if(!$('#sep_tank_chkbx').is(':checked')){
									$('#sep_tank_chkbx').val(0);
								} else {
									$.confirm({
										title 		: 'Activate Septic Tank',
										content 	: 'Activate Septic Tank on this account?',
										type 		: 'green',
										typeAnimated: true,
										draggable 	: true,
										icon		: 'fa fa-check-circle',
										buttons 	: {
														Activate: {
														text: '<i class="fa fa-check"></i> Activate',
														btnClass: 'btn-success',
														action: function(){
															$('#sep_tank_chkbx').val(1);
													//        	// alert($('#others_chkbx').val());
													//        	$('#cust_table tbody > tr').each(function() {
																//     var $stat = $(this).find("td:first").prev().empty();
																//     $(this).find("td:first").html('<label class="label label-success">Active</label>');   
																// });
													//        	}
																// alert('test');
															},
														// close: function () {	
														// }
														}
										}
									});
								
								}
								
							});


						}
					}); // End of confirm box

					/* ---------------------------------------------- */
				});
			}, // End of Ajax Success
			error : function(xhr){  					
			},
			beforeSend : function(){
				showBoxLoadingState();
			},
			complete : function(){ 
				removeBoxLoadingState();
			}
		}); // End of ajax load customer

		//-------------------------------------------//

		// getCustomers();

		// function getCustomers(){
		// 	$.ajax({
	    //         url  : $app_url + '/administrator/other-settings/load-cust',
	    //         type : 'get',
	    //         data : {
	              
	    //         },
	    //         success : function(response){
	    //         	$('.others__tbl-others').DataTable().destroy();
		// 			var table = $('table.others__tbl-others > tbody');
		// 			table.empty();

		// 			$.each(response, function(index){
		// 				var $others_data = response[index];

		// 				// Check if has septage fee
		// 				var $status = $others_data.hsf == 1 ? '<label class="label label-success">Active</label>' : '<label class="label label-danger">Deactivated</label>';

		// 				var $has_sep_tank = $others_data.wst == 1 ? '<label class="label label-success">Yes</label>' : '<label class="label label-danger">No</label>';

		// 				table.append("<tr data-others-id="+ $others_data.others_id +">" 
		// 				+ "<td>" + $others_data.code + "</td>"
		// 				+ "<td>" + $others_data.sequence + "</td>"
		// 				+ "<td>" + $others_data.class + "</td>"
		// 				+ "<td>" + $others_data.acct_number + "</td>"
		// 				+ "<td>" + $others_data.cust_name.toUpperCase() + "</td>"
		// 				+ "<td>" + $others_data.address.toUpperCase() + "</td>"
		// 				// + "<td style='padding-left: 22px;'>" + $others_data.meter_no + "</td>"
		// 				+ "<td style='text-align: center;'>" + $others_data.amt_meter_charges + "</td>"
		// 				+ "<td style='text-align: center;'>" + $others_data.pct_franchise_tax + "</td>"
		// 				+ "<td style='text-align: center;' class='others__status'>" + $status + "</td>"
		// 				+ "<td style='text-align: center;'>" + $has_sep_tank + "</td>"
		// 				+ "<td>" + '<button class="btn btn-flat btn-default others_btn-edit" id=""><i class="fa fa-fw fa-pencil"></i></button>' + "</td>"
		// 				+ "</tr>");
		// 			});

		// 			$('table.others__tbl-others').DataTable({
		// 		        "deferRender" 	: true,
		// 		        "processing"  	: true,
		// 		        "paging"		: true,
		// 	        	"bSort"     	: false,   
		// 	        });

		// 	        $('div.dataTables_filter input').prop('placeholder', 'Search');

		// 			/*
		// 			*	Edit Customer Other Charges
		// 			*	Button on click will call modal
		// 			*/ 

		// 			// $("button.others_btn-edit").on('click', function(){
		// 			$(document).on("click",".others_btn-edit", function(){
		// 				var $row = $(this).closest('tr');
		// 				// alert($row.data('others-id'));
		// 				$.confirm({
		// 				    title: 'Customer Other Charges',
		// 				    content: function () {
		// 			            var self = this;
		// 			            return $.ajax({
		// 			                url      : $app_url+'/administrator/other-settings/edit-others',
		// 			                data     : {
		// 			                	id : $row.data('others-id')
		// 			                },
		// 			                dataType : 'html',
		// 			                method   : 'get'
		// 			            }).done(function (response) {
		// 			                self.setContent(response);
		// 			                $('.jconfirm-content').addClass('page-body');
		// 			                console.log(response);
		// 			            }).fail(function(){
		// 			                self.setContent('Something went wrong.');
		// 			            });
		// 		        	},
		// 				    type: 'blue',
		// 				    typeAnimated: true,
		// 				    draggable   : true,
		// 	    			columnClass : 'col-md-12',
		// 				    buttons: {
		// 				        Update: {
		// 				            text: 'Update',
		// 				            btnClass: 'btn-success',
		// 				            action: function(){

		// 				            	var $amt_m_charges 	= $("#input_m_charges").val();
		// 				            	var $pct_f_tax 		= $("#input_f_tax").val();
		// 				            	var $septage 		= $("#others_chkbx").val();
		// 				            	var $septic_tank 	= $("#sep_tank_chkbx").val();
		// 				            	var $id				=  $row.data('others-id');
		// 				            	// alert($septage);

		// 				            	var $data = {
		// 				            		id 					: $id,
		// 				            		amt_meter_charges 	: $amt_m_charges,
		// 				            		pct_franchise_tax 	: $pct_f_tax,
		// 				            		has_septage_fee 	: $septage,
		// 				            		with_septic_tank 	: $septic_tank
		// 				            	}

		// 				            	console.log($data);

		// 				            	$.ajax({
		// 									url 	: $app_url + "/administrator/other-settings/update-others",
		// 									type 	: "POST",
		// 									data 	: JSON.stringify($data),
		// 									success : function(response){
		// 										console.log(response);
		// 										// $row.find("td:first").prev().empty();
		// 										// textOfTd = $row.find(".others__status").html();
		// 										// alert(textOfTd);
		// 									},
		// 									error : function(){
		// 										console.log("error fetching");
		// 									}
		// 								});
		// 				            }
		// 				        },
		// 				        close: function () { 	
		// 				        }
		// 				    },
		// 				    onContentReady : function(){
		// 				    	var $chkbx_status = $('#others_chkbx').val();
		// 				    	$chkbx_status == 1 ? $('#others_chkbx').attr('checked', true) : $('#others_chkbx').attr('checked', false) ;

		// 				    	//Check if checkbox on change
		// 				    	$('#others_chkbx').on('change', function(){
		// 				    		if($('#others_chkbx').is(':checked')){
		// 				    			$('#others_chkbx').val(1);
		// 				    		} else {
		// 				    			$.confirm({
		// 								    title 		: 'Deactivate Other Charges',
		// 								    content 	: 'Deactivate other charges on this account?',
		// 								    type 		: 'red',
		// 								    typeAnimated: true,
		// 								    draggable 	: true,
		// 								    icon: 'fa fa-warning',
		// 								    buttons 	: {
		// 										        	Deactivate: {
		// 										            text: '<i class="fa fa-ban"></i> Deactivate',
		// 										            btnClass: 'btn-red',
		// 										            action: function(){
		// 											            	$('#others_chkbx').val(0);
		// 											            	$('#cust_table tbody > tr').each(function() {
		// 															    var $stat = $(this).find("td:first").prev().empty();
		// 															    $(this).find("td:first").html('<label class="label label-danger">Deactivated</label>');   
		// 															});
		// 										            	}
		// 								        			},
		// 											        // close: function () {
		// 											        // }
		// 								    }
		// 								});
		// 				    		}
		// 				    		if(!$('#others_chkbx').is(':checked')){
		// 				    			$('#others_chkbx').val(0);
		// 				    		} else {
		// 				    			$.confirm({
		// 								    title 		: 'Activate Other Charges',
		// 								    content 	: 'Activate other charges on this account?',
		// 								    type 		: 'green',
		// 								    typeAnimated: true,
		// 								    draggable 	: true,
		// 								    icon		: 'fa fa-check-circle',
		// 								    buttons 	: {
		// 										        	Activate: {
		// 										            text: '<i class="fa fa-check"></i> Activate',
		// 										            btnClass: 'btn-success',
		// 										            action: function(){
		// 										            	$('#others_chkbx').val(1);
		// 										            	// alert($('#others_chkbx').val());
		// 										            	$('#cust_table tbody > tr').each(function() {
		// 															    var $stat = $(this).find("td:first").prev().empty();
		// 															    $(this).find("td:first").html('<label class="label label-success">Active</label>');   
		// 															});
		// 										            	}
		// 								        			},
		// 											        // close: function () {	
		// 											        // }
		// 								    }
		// 								});
		// 				    		}
		// 				    	});

		// 				    	// ----------------------------------------------------------------------------------------------------------------- //

		// 				    	var $chkbx_sep_tank = $('#sep_tank_chkbx').val();
		// 				    	$chkbx_sep_tank == 1 ? $('#sep_tank_chkbx').attr('checked', true) : $('#sep_tank_chkbx').attr('checked', false) ;

		// 				    	$('#sep_tank_chkbx').on('change', function(){
		// 				    		if($('#sep_tank_chkbx').is(':checked')){
		// 				    			$('#sep_tank_chkbx').val(1);
		// 				    		} else {
		// 				    			$.confirm({
		// 								    title 		: 'Septic Tank',
		// 								    content 	: "This account doesn't have septic tank?",
		// 								    type 		: 'red',
		// 								    typeAnimated: true,
		// 								    draggable 	: true,
		// 								    icon: 'fa fa-warning',
		// 								    buttons 	: {
		// 										        	Deactivate: {
		// 										            text: '<i class="fa fa-ban"></i> Deactivate',
		// 										            btnClass: 'btn-red',
		// 										            action: function(){
		// 											            	$('sep_tank_chkbx').val(0);
		// 											    //         	$('#cust_table tbody > tr').each(function() {
		// 															//     var $stat = $(this).find("td.").prev().empty();
		// 															//     $(this).find("td:first").html('<label class="label label-danger">Deactivated</label>');   
		// 															// });
		// 															// alert('test');
		// 										            	}
		// 								        			},
		// 											        // close: function () {
		// 											        // }
		// 								    }
		// 								});
		// 				    		}

		// 				    		if(!$('#sep_tank_chkbx').is(':checked')){
		// 				    			$('#sep_tank_chkbx').val(0);
		// 				    		} else {
		// 				    			$.confirm({
		// 								    title 		: 'Activate Septic Tank',
		// 								    content 	: 'Activate Septic Tank on this account?',
		// 								    type 		: 'green',
		// 								    typeAnimated: true,
		// 								    draggable 	: true,
		// 								    icon		: 'fa fa-check-circle',
		// 								    buttons 	: {
		// 										        	Activate: {
		// 										            text: '<i class="fa fa-check"></i> Activate',
		// 										            btnClass: 'btn-success',
		// 										            action: function(){
		// 										            	$('#sep_tank_chkbx').val(1);
		// 										     //        	// alert($('#others_chkbx').val());
		// 										     //        	$('#cust_table tbody > tr').each(function() {
		// 															//     var $stat = $(this).find("td:first").prev().empty();
		// 															//     $(this).find("td:first").html('<label class="label label-success">Active</label>');   
		// 															// });
		// 										     //        	}
		// 										     				// alert('test');
		// 								        				},
		// 											        // close: function () {	
		// 											        // }
		// 								    				}
		// 									}
		// 								});
						    		
		// 				    		}
						    		
		// 				    	});


		// 				    }
		// 				}); // End of confirm box

		// 				/* ---------------------------------------------- */



		// 			});
	    //         },
	    //         error : function(){

	    //         },
	    //     }); // End of getCustomers() Ajax call
		// } // End of getCustomers() 
	}); // End of script
</script>
@endsection