<?php 
include "includes/header.php"; 
include "includes/Mdme-functions.php";
$mdme = getMdme_Payment_Report($db,'');
include_once "includes/pagepermission.php";
include_once "common/dpselect-functions.php";
//check permission - START
if(!($res_modm_prm)){
	header("Location:".admin_public_url."error.php");
}
else if(trim($res_modm_prm['ViewPrm'])=="0") {
	header("Location:".admin_public_url."error.php");
}
//check permission - END
$Srch_FilterOptions = array( array('ID' => 'customer_name', 'Name' => 'Customer Name'), array('ID' => 'bill_no', 'Name' => 'Bill No'));
?> 

<div class="wrapper">
    <div class="container">        
		<!-- Page-Title - START -->
        <div class="row">
            <div class="col-sm-5">										
                <h4 class="page-title"><?php echo $operation; ?> Customer Payment Details</h4>						
            </div>
        </div>


        <!-- Page-Title - END -->

        <div class="row">
			<div class="col-sm-12">
				<form id="jvalidate" name="frmReturn" role="form" class="form-horizontal" action="#" method="post" enctype="multipart/form-data" >
				
					<div class="card-box ">				
					<div class="row">
							<div class="col-sm-4">
							<div class="form-group">
									<label>Financial Year<span class="text-danger">*</span></label>							
									<select  name="financial_id" id="financial_id" class="form-control select2 jsrequired">
										<option value="">Select</option>
										<?php 
										$rslt_fy_list = $db->get_rsltset("select financial_id,f_start_date,f_end_date from m_financial_year order by f_start_date asc");
										$current_fy_id = '';
										
										foreach($rslt_fy_list as $r){
											$financial_year_label = date('Y',strtotime($r['f_start_date'])).'-'.date('Y',strtotime($r['f_end_date']));
											if($act=='update')
												$sel= ($res_ed['financial_id']==$r['financial_id'])?' selected="selected" ':'';
											else
												$sel= ($current_fy_id==$r['financial_id'])?' selected="selected" ':'selected="selected"';
										?>
										<option value="<?php echo $r['financial_id']; ?>" <?php echo $sel; ?>><?php echo $financial_year_label; ?></option>
										<?php	
										}
										?>
									</select>
								</div>
							</div>

							<div class="col-sm-4">
							<div class="form-group">
									<label>Select Company<span class="text-danger">*</span></label>							
                                    <select  name="sel_company" id="sel_company" class="form-control select2 jsrequired" <?php echo $disabled ; ?>>
										<option value="">Select</option>
										<?php 
										$rslt_list = $db->get_rsltset("select company_id AS Id,company_name AS Name from m_company where IsActive = '1' order by company_name asc");
										foreach($rslt_list as $r){
											$sel='';
											if($res_ed['company_id']==$r['Id'])
												$sel=' selected="selected" ';
										?>
										<option value="<?php echo $r['Id']; ?>" <?php echo $sel; ?>><?php echo $r['Name']; ?></option>
										<?php	
										}
										?>
									</select>
								</div>	
							</div>

							<div class="col-sm-4">
							<div class="form-group">
									<label>Select Customer<span class="text-danger">*</span></label>							
									<select name="sel_customer" id="sel_customer" class="form-control select2 jsrequired">
										<option value="">Select</option>
										<?php 
										$rslt_list = $db->get_rsltset("select m_customer.*, cus_id AS Id,cus_name AS Name from m_customer where IsActive = '1' order by cus_name asc");
										foreach($rslt_list as $r){
											$sel='';
											if($res_ed['cus_id']==$r['Id'])
												$sel=' selected="selected" ';
										?>
										<option value="<?php echo $r['Id']; ?>" <?php echo $sel; ?>><?php echo $r['Name']; ?></option>
										<?php	
										}
										?>
									</select>
									
								</div>	

							
							</div>
						<br/>
						<div class="col-sm-12 text-right"> <!-- Add 'text-right' class here -->
					<br/>
					<button class="btn btn-primary waves-effect waves-light pull-right" type="submit"><span id="Submit">Submit</span></button>
				</div>
						<div class="row">
							<div class="col-md-12">
								<div class="table-responsive challan-table">
									<table class="table table-bordered table-hover" id="tbl_payment_report">
										
								<tbody id="tbl_body_report_det">	
												
								</tbody>				
								
							</table>
						</div>
					</div>
					
				</form>
            </div>
        </div> <!-- end row -->	
		<div class="row">
            <div class="col-xs-12">
                <div class="card-box">                           
                    <div class="panel-body" style="display:none;"  id="pdf-iframe">
						<!-- <div id="chartdiv"></div> -->
						
						<div class ="row">
							<div id="chartContainer" style="height: 370px; width: 50%;"></div>
							<div id="loader_pie" style="position: relative; top: 140px;  display:none; ">
								<img src="https://i.imgur.com/fXUIBfi.gif" alt="Chart will Render Here..." style="height: 85px; width:107%;" />
							</div>
							<div id="chartDetails" style="height: 370px; width: 50%;"></div>
						</div>
						</br>
                        <iframe   src="../admin/customer_ledger_report.php?sel_customer=<?php echo $_REQUEST['sel_customer'];?>&financial_id=<?php echo $_REQUEST['financial_id'];?>&sel_company=<?php echo $_REQUEST['sel_company'];?> " width="100%" style="min-height: 768px;overflow-y: scroll;"></iframe>

                    </div>
                </div>
            </div>
        </div>

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<?php include "includes/footer.php";  ?> 
	 </div> <!-- container -->
</div> <!-- End wrapper -->

<?php include "includes/footer_script.php";  ?> 

<!-- Autocomplete -->
<script type="text/javascript" src="assets/plugins/autocomplete/jquery.autocomplete.min.js"></script>

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<script>

$(document).ready(function(){
   $(".select2").select2({
      width: '100%', 
   }); 
});



    $(function () {
        $('#jvalidate').submit(function (e) {
            e.preventDefault();

            // Get the selected values
            var financial_id = $('#financial_id').val();
            var sel_company = $('#sel_company').val();
            var sel_customer = $('#sel_customer').val();

            // Construct the URL for the iframe
            var iframeUrl = "../admin/customer_ledger_report.php?sel_customer=" + sel_customer + "&financial_id=" + financial_id + "&sel_company=" + sel_company;

            // Set the iframe source
            $('#pdf-iframe iframe').attr('src', iframeUrl);
			if (financial_id && sel_company && sel_customer) {
            // Show the iframe
            $('#pdf-iframe').show();
			displayPieChart(sel_company, sel_customer, financial_id);
			}

            return false;
        });
    });


	
function displayPieChart(sel_company, sel_customer, financial_id) {

	var financial_id = $('#financial_id').val();
            var sel_company = $('#sel_company').val();
            var sel_customer = $('#sel_customer').val();

			var requestData = {
							action: 'get_pie_chart',
							financial_id: financial_id,
							company_id: sel_company,
							customer_id: sel_customer
						};
	$.ajax({
        url: 'chart.php', // Specify the URL where you want to send the request
        method: 'POST', // Use POST method to send data
        data: requestData, // Send the requestData as JSON
        dataType: 'json', // Expect JSON response from the server
        success: function (responseData) {
            var dataPoints = responseData.dataPoints;
			var dataPoints_1 = responseData.dataPoints_1;
    console.log(dataPoints);

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	animationEnabled: true,
	title: {
		text: "Sales Report"
	},
	data: [{
		type: "pie",
		indexLabel: "{y}",
		yValueFormatString: "#,##0.00\"\"",
		indexLabelPlacement: "inside",
		indexLabelFontColor: "#36454F",
		indexLabelFontSize: 18,
		indexLabelFontWeight: "bolder",
		showInLegend: true,
		legendText: "{label}",
		dataPoints: dataPoints
	}]
});

	var legend = new CanvasJS.Chart("chartDetails", {
					theme: "light2",
					animationEnabled: true,
					title: {
						text: "Sales Count"
					},
					dataPointWidth: 20,
					axisY:{        
						title: "Count",
						gridThickness: 0
					},
					data: [{
						type: "column",
						indexLabel: "{y}",
						dataPoints: dataPoints_1

					}]
		});


		$('#loader_pie').show();

setTimeout(function () {
	
	$('#loader_pie').hide();


	$('#chartContainer').show();

	
	chart.render();
	legend.render();

}, 500);
	
 
}
	});
}



// function displayPieChart(sel_company, sel_customer, financial_id) {
//   // Create root element
//   var root = am5.Root.new("chartdiv");

//   // Set themes
//   root.setThemes([
//     am5themes_Animated.new(root)
//   ]);

//   // Create chart
//   var chart = root.container.children.push( 
//   am5percent.PieChart.new(root, {
//     layout: root.verticalLayout
//   }) 
// );

//   // Create series
//   var series = chart.series.push(
//     am5percent.PieSeries.new(root, {
//       valueField: "value",
//       categoryField: "category",
//       endAngle: 270,
//       labels: {
//         template: "{category}: {value.value}",
//         readerTitle: "Pie Chart Slice: {category}: {value.value}"
//       }
//     })
//   );

  
//   var legend = chart.children.push( 
//   am5.Legend.new(root, {
//     centerY: am5.percent(50),
//     y: am5.percent(50),
//     layout: root.verticalLayout
//   })
// );

// legend.data.setAll(series.dataItems);
//   // Retrieve data from JSON response and set it in the chart
//   $.ajax({
//     url: 'chart.php',
//     type: 'POST',
//     data: {
//       action: 'get_pie_chart',
//       company_id: sel_company,
//       financial_id: financial_id,
//       customer_id: sel_customer
//     },
//     dataType: 'json',
//     success: function (responseData) {
// 		var data = [];

// // Check if both credit and debit are null
// if (responseData.credit === null && responseData.debit === null) {
// 	// Show a whole pie with a value of 0
// 	data.push({
// 		category: "Debit",
// 		value: 0
// 	});
// } else {
// 	// Add credit and debit data if available
// 	if (responseData.credit !== null) {
// 		data.push({
// 			category: "Credit",
// 			value: parseFloat(responseData.credit)
// 		});
// 	}

// 	if (responseData.debit !== null) {
// 		data.push({
// 			category: "Debit",
// 			value: parseFloat(responseData.debit)
// 		});
// 	}
// }


// series.data.setAll([
//   { category: "Credit", value: parseFloat(responseData.credit) },
//   { category: "Debit", value: parseFloat(responseData.debit) },
//   // Add more data points as needed
// ]);


//       chart.update();
//     }
//   });
// }

</script>


<style>
#chartdiv {
  width: 50%;
  height: 500px;
}
</style>

