@extends('layouts.app')

 
@section('header')
         <!-- Title Tag -->
    <title>Welcome</title>
    <link rel="stylesheet" href={{asset("/assets/plugins/morris/morris.css")}}>
    <link rel="stylesheet" href={{asset("/assets/css/chartist.min.css")}}>
   	<link rel="stylesheet" href={{asset("/assets/css/dashboard.css")}}>
   	
   	<link rel="stylesheet" href={{asset("/assets/plugins/jqwidgets/styles/jqx.base.css")}} type="text/css" />
   	<link rel="stylesheet" href={{asset("/assets/plugins/jqwidgets/styles/jqx.shinyblack.css")}} type="text/css" />
   	
    <style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
@endsection

@section('pageTitle')

	Dashboard

@endsection

@section('content')

        <!-- \\ Begin Banner Section \\ -->
        <div class="Banner_sec" id="dashboardhome">
            <!--  \\ Begin banner Side -->
            <div class="bannerside" id="bannerside1">
	            <div class="Center2">
                    <!--  \\ Begin Left Side -->
                    <div class="leftside2">
    					
           
                        <h3>Tranzactii<span>in perioada</span></h3>
                        <br>
                        <div id="period">
                        <div id="datefrom"></div> - 
                        <div id="dateto"></div>
                       -  
                        <select class="" id="group" name="group">
                                <option value="0">Day</option>
                                <option value="1" selected>Week</option>
                                <option value="2">Month</option>
                                       
                            </select>
                        
                        
                        </div>
                        <br>
                        
                        <div class="">
                            <p class="mylabel">Bank account</p>
                            <select class="" id="bankaccountf" name="bankaccountf">
                                <option value=""></option>
                                    @foreach($accounts as $acc) 
                                        <option value="{{$acc->BankAccountId}}" >{{$acc->AccountOwner}} - {{$acc->Bank}} - {{$acc->IBAN}} - {{$acc->Symbol}}</option>
                                    @endforeach   
                            </select>
                        </div>
                        
                        <a class="mybutton" href="#" onclick="FilterTransaction()">Filtreaza</a>
                        <a class="mybutton" href="/Transactions">Vezi toate tranzactiile</a>
                        
                    </div>                        								
                    <!--  // End Left Side // -->
                    <!--  \\ Begin Right Side -->
                    <div id="pie11"  class="rightside">
                    		
                    		<canvas id="canvas"></canvas>
                    	
            	                                                                
                    </div>
                    <!--  // End Right Side // -->
	            </div>
	            
            </div>
            
            <!--  // End banner Side // -->
            
            
            <!--  \\ Begin banner Side -->
            <div class="bannerside" id="bannerside2">
	            <div class="Center2">
                    <!--  \\ Begin Left Side -->
                    <div class="leftside2">
                        <h3>Venituri<span>in perioada</span></h3>
                  
                      
                    </div>                        								
                    <!--  // End Left Side // -->
                    <!--  \\ Begin Right Side -->
                    <div id="pie2" class="rightside">
                    		
            	                                                                
                    </div>
                    <!--  // End Right Side // -->
	            </div>
	            
            </div>
            
            <!--  // End banner Side // -->
            
            
            <!--  \\ Begin banner Side -->
            <div class="bannerside" id="bannerside3">
	            <div class="Center2">
                    <!--  \\ Begin Left Side -->
                    <div class="leftside2">
                        <h3>Cheltuieli<span>in perioada</span></h3>
                     
                        
                    </div>                        								
                    <!--  // End Left Side // -->
                    <!--  \\ Begin Right Side -->
                    <div id="pie3"  class="rightside">
                    		                                                      
                    </div>
                    
                    
                    <!--  // End Right Side // -->
	            </div>
	            
            </div>
            
            <!--  // End banner Side // -->
            
            
            <div class="clear"></div>
        </div>
        <!-- // End Banner Section // -->
         <div class="bgcolor"></div>	
        <!-- \\ Begin Container \\ -->
      
       

@endsection



@section('FinalScript')
   <!--Morris Chart-->

        <script src={{asset("/assets/pages/dashborad.js")}}></script>
        <script src={{asset("/assets/js/chartist.min.js")}}></script>
        <script src={{asset("/assets/plugins/chart.js/dist/Chart.min.js")}}></script>
        
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxcore.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxdata.js")}}></script> 
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxbuttons.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxscrollbar.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxmenu.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.js")}}></script>
        
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.edit.js")}}></script>  
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.selection.js")}}></script> 
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxlistbox.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxdropdownlist.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxcheckbox.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxcalendar.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxnumberinput.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxdatetimeinput.js")}}></script>
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/globalization/globalize.js")}}></script>
        
        <script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.grouping.js")}}></script>
   		<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.selection.js")}}></script> 
    	<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.sort.js")}}></script>
    	<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.columnsresize.js")}}></script>
    	<script type="text/javascript" src={{asset("/assets/plugins/jqwidgets/jqxgrid.aggregates.js")}}></script>
            	<!-- Resources -->
        <script src={{asset("/assets/plugins/@amcharts/amcharts4/core.js")}}></script>
        <script src={{asset("/assets/plugins/@amcharts/amcharts4/charts.js")}}></script>
        <script src={{asset("/assets/plugins/@amcharts/amcharts4/themes/animated.js")}}></script>
      
		<script type="text/javascript">


		


		
    </script>

 	<script>

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

 
	
	 function getTransactions(dates, cheltuieli, venituri, solduri){
		
		 	
		 var chartData = {
					labels: dates,
					datasets: [{
						type: 'line',
						label: 'Sold',
						borderColor: window.chartColors.blue,
						borderWidth: 2,
						fill: true,
						data: solduri
					}, {
						type: 'bar',
						label: 'Cheltuiala',
						backgroundColor: window.chartColors.red,
						data: cheltuieli,
						borderColor: window.chartColors.red,
						borderWidth: 2
					}, {
						type: 'bar',
						label: 'Venit',
						backgroundColor: window.chartColors.green,
						data: venituri
					}],
					

				};
		 

			if ( typeof window.myMixedChart !== 'undefined') 
				window.myMixedChart.destroy();
					
			var ctx = document.getElementById('canvas').getContext('2d');
			
				
			window.myMixedChart = new Chart(ctx, {
				type: 'bar',
				data: chartData,
				options: {
					responsive: true,
					title: {
						display: false,
						text: 'Chart.js Combo Bar Line Chart'
					},
					tooltips: {
						mode: 'index',
						intersect: true
					},
					legend: {
			            labels: {
			                fontColor: "white",
			               
			            }
			        },
			        scales: {
			            yAxes: [{
			                ticks: {
			                    fontColor: "white",
			               
			                }
			            }],
			            xAxes: [{
			                ticks: {
			                    fontColor: "white",
			               
			                }
			            }]
			        }
				}
			});			

	}


	function getIncomes(data){
		$('#pie2').empty();	
		new Chartist.Bar('#pie2',data, {
              distributeSeries: true
            });
	}

	 function getExpenses(data){
			
		/* $('#pie3').empty();	
			new Chartist.Bar('#pie3',data, {
	              distributeSeries: true
	            });*/


		 var chartData = {
					labels: data.labels,
					datasets: [ {
						type: 'bar',
						label: 'Cheltuieli',
						backgroundColor: window.chartColors.red,
						data: data.series,
						borderColor: window.chartColors.red,
						borderWidth: 2
					}],
					

				};
		 

			if ( typeof window.myBarCheltuiala !== 'undefined') 
				window.myBarCheltuiala.destroy();
					
			var ctx2 = document.getElementById('canvas2').getContext('2d');
			
				
			window.myBarCheltuiala = new Chart(ctx2, {
				type: 'bar',
				data: chartData,
				options: {
					responsive: true,
					title: {
						display: false,
						text: 'Chart.js Combo Bar Line Chart'
					},
					tooltips: {
						mode: 'index',
						intersect: true
					},
					legend: {
			            labels: {
			                fontColor: "white",
			               
			            }
			        },
			        scales: {
			            yAxes: [{
			                ticks: {
			                    fontColor: "white",
			               
			                }
			            }],
			            xAxes: [{
			                ticks: {
			                    fontColor: "white",
			               
			                }
			            }]
			        }
				}
			});		
	}



	 function getExpenses2(data){
	
    	 am4core.ready(function() {
    
    	 // Themes begin
    	 am4core.useTheme(am4themes_animated);
    	 // Themes end
    
    	 // Create chart instance
    	 var chart = am4core.create("pie3", am4charts.XYChart);
    	 chart.scrollbarX = new am4core.Scrollbar();
    	 
    	 // Add data
    	 chart.data = data; 

    	 
    		   
    
    	 // Create axes
    	 var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    	 categoryAxis.dataFields.category = "Partner";
    	 categoryAxis.renderer.grid.template.location = 0;
    	 categoryAxis.renderer.minGridDistance = 30;
    	 categoryAxis.renderer.labels.template.horizontalCenter = "right";
    	 categoryAxis.renderer.labels.template.verticalCenter = "middle";
    	 categoryAxis.renderer.labels.template.rotation = 330;
    	 categoryAxis.renderer.labels.template.fill = am4core.color("#fff");
    	 
    	 categoryAxis.tooltip.disabled = true;
    	 categoryAxis.renderer.minHeight = 110;
    	 
    
    	 var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    	 valueAxis.renderer.minWidth = 50;
    	 valueAxis.renderer.labels.template.fill = am4core.color("#fff");
    
    	 // Create series
    	 var series = chart.series.push(new am4charts.ColumnSeries());
    	 series.sequencedInterpolation = true;
    	 series.dataFields.valueY = "Value";
    	 series.dataFields.categoryX = "Partner";
    	 series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
    	 series.columns.template.strokeWidth = 0;
    	 
    
    	 series.tooltip.pointerOrientation = "vertical";
    
    	 series.columns.template.column.cornerRadiusTopLeft = 10;
    	 series.columns.template.column.cornerRadiusTopRight = 10;
    	 series.columns.template.column.fillOpacity = 0.9;
    
    	 // on hover, make corner radiuses bigger
    	 var hoverState = series.columns.template.column.states.create("hover");
    	 hoverState.properties.cornerRadiusTopLeft = 0;
    	 hoverState.properties.cornerRadiusTopRight = 0;
    	 hoverState.properties.fillOpacity = 1;

    
    	 series.columns.template.adapter.add("fill", function(fill, target) {

        		if (target.dataItem.dataContext.IsFixed)
        			return  am4core.color("#bbbbbb");
        		else            			
        			return  am4core.color("#ee5555");
    	   //return   am4core.color("#776BD");// chart.colors.getIndex((1-target.dataItem.dataContext.IsFixed)*4);
    	 });
    
    	 // Cursor
    	 chart.cursor = new am4charts.XYCursor();
    
    	 }); // end am4core.ready()
    
    	 <!-- HTML -->
	 }

     
	function FilterTransaction(){

		var AccountId =  $('#bankaccountf').val();
		var From = moment($("#datefrom").jqxDateTimeInput('getDate')).format('YYYYMMDD');
		var To = moment($("#dateto").jqxDateTimeInput('getDate')).format('YYYYMMDD');
		var Group = $('#group').val();
                    
		
		 $.ajax({
             type: 'POST',

             url: "{{url('/ajaxgetaalltrasactions')}}",
             data: {AccountId: AccountId, From:From, To:To, Group:Group},
             error: function (xhr, ajaxOptions, thrownError) {
				
                 
             },
             success: function (data) {

				 var venituri = data[2].map(a => a.Venit)
				 var cheltuieli = data[2].map(a => a.Cheltuiala)
				 var solduri = data[2].map(a => a.Sold)
				 var dates = data[2].map(a => a.Data)
				 
            	 
            	// getExpenses(TranslateToChartData(data[0],  'Partner', 'Value'));

				 getExpenses2(data[0]);
            	 getIncomes(TranslateToChartData(data[1], 'Partner', 'Value'));
            	 getTransactions(dates, cheltuieli, venituri, solduri); 
            	 
            	  

             }
         });
      }




	function TranslateToChartData(vdata, vlabels, vSeries){

		 var data = {
				  labels: vdata.map(a => a[vlabels]),
					  
				  series: vdata.map(a => a[vSeries])
					  
				};

		return data;	
	}

	function getCurrentLink(){
		return 'dashboard';
	}

	$("#datefrom").jqxDateTimeInput({ width: '120px', height: '25px' });
	$("#dateto").jqxDateTimeInput({ width: '120px', height: '25px' });

	var date = new Date();
	var threeMonthsAgo = moment(date).subtract(2, 'months');
	$("#datefrom").jqxDateTimeInput('setDate', threeMonthsAgo.toDate());

	FilterTransaction();
	
 </script>
 


         
         
@endsection