@extends('layouts.default')

@section('title')
	@parent
	Графики прихода/расхода
@stop

@section('breadcrumbs')
	{{ Breadcrumbs::render('budget', $workProject) }}
@stop

@section('js')
  <script src="{{ asset('js/kmk-support.js') }}"></script>
  <script src="{{ asset('js/plugin/dygraphs/dygraph-combined.min.js') }}"></script>
  <script>	
    var m_names = ['Янв','Фев','Март','Апр','Май','Июнь','Июль','Авг','Сент','Окт','Нояб','Дек'];
    $.get(
      $('#curMonth').data('action'),
      { 'projectId': $('.project-id').data('project-id') },
      function(data) {
        var res = '';

        for (var key in data) {
          res += data[key]['date'] + ','+data[key]['sumDeb'] + ','+data[key]['sumCred'] +'\n';
         }

         new Dygraph('curMonth',
           res, 
           {
             legend: 'always',
             title: 'Текущий месяц',
             labels: [ "дата", "расход", "приход" ],
             drawPoints: true,
             showRangeSelector: true,
             colors:[
                      "#CC0000",
                      "#339933"
                    ],
             axisLabelFontSize:11,
             axes: {
                x: {
                    axisLabelFormatter: function(d, gran) {
                        var curr_month = m_names[d.getMonth()];
                        return curr_month + ',<br>' 
                        + Dygraph.zeropad(d.getDate());
                    }
                },
                y: {
                    axisLabelFormatter: function(d) {
                        return humanizeNumber(d);
                    }
                }
            }
           }
         );
      }
    );

    $.get(
      $('#currYear').data('action'),
      { 'projectId': $('.project-id').data('project-id') },
      function(data) {
        var res = '';

        for (var key in data) {
          res += data[key]['date'] + ','+data[key]['sumDeb'] + ','+data[key]['sumCred'] +'\n';
         }

         new Dygraph('currYear',
           res, 
           {
             legend: 'always',
             title: 'Текущий год',
             labels: [ "дата", "расход", "приход" ],
             drawPoints: true,
             showRangeSelector: true,
             colors:[
                      "#CC0000",
                      "#339933"
                    ],
             axisLabelFontSize:11,
             axes: {
                x: {
                    axisLabelFormatter: function(d, gran) {
                            var curr_month = m_names[d.getMonth()];
                            return curr_month + ',<br>' 
                            + Dygraph.zeropad(d.getDate());
                    }
                },
                y: {
                    axisLabelFormatter: function(d) {
                        
                        
                            return humanizeNumber(d);
                    }
                }
             }
           }
         );
      }
    );

	  var plot_3;
	  pageSetUp();
    var pagefunction = function() {

		var $chrt_border_color = "#efefef";   
		var color_green = '#339933',
        color_red = '#CC0000',
		    color_green_light = '#99CC99',
		    color_red_light = '#FF9999',
        now = new Date,
        year = now.getFullYear();

    $.get(
          $('#yearByMonth').data('action'),
          { 'projectId': $('.project-id').data('project-id') },
          function(data) {
            var cY = data.currYear,
                pY = data.prevYear;
            
            var data1 = []; // Текущий год приход
            var data2 = []; // Текущий год расход
            
            for (var key in cY) {
              data1.push([key, cY[key].sumCred*1]); // *1 - для конв. в число, строка не отображается во всплывающих подск. на графике
              data2.push([key, cY[key].sumDeb*1]); 
            }

            var data3 = []; // Прошлый год приход
            var data4 = []; // Прошлый год расход
            
            for (var key in pY) {
              data3.push([key, pY[key].sumCred*1]); 
              data4.push([key, pY[key].sumDeb*1]); 
            }

            var ds = new Array();

            ds.push({
              label: year+'г. Приход',
              data : data1,
              bars : {
                show : true,
                barWidth : 0.1,
                order : 1
              }
            });
            ds.push({
              label: year+'г. Расход',
              data : data2,
              bars : {
                show : true,
                barWidth : 0.1,
                order : 2
              }
            });
            ds.push({
              label: (year-1)+'г. Приход',
              data : data3,
              bars : {
                show : true,
                barWidth : 0.1,
                order : 3
              }
            });
            ds.push({
              label: (year-1)+'г. Расход',
              data : data4,
              bars : {
                show : true,
                barWidth : 0.1,
                order : 4
              }
            });

            //Display graph
            plot_3 = $.plot($("#yearByMonth"), ds, {
              legend: {
                position: "ne",
                show: true,
                container: $(".label-box")
              },
              colors : [color_green, color_red, color_green_light, color_red_light],
              grid : {
                show : true,
                hoverable : true,
                clickable : true,
                tickColor : $chrt_border_color,
                borderWidth : 1,
                borderColor : $chrt_border_color
              },
              tooltip : true,
              tooltipOpts : {
                content : "<span>%y</span>",
                defaultTheme : false
              },
              xaxis: {
                tickFormatter: function(v) {
                    return m_names[v-1];
                }
              },
              yaxis: {
                tickFormatter: function (v) {
                  return humanizeNumber(v);
                }
              }
            });
          }
    ); 
    
	};

	var pagedestroy = function(){
		
		//destroy flots
		plot_3.shutdown(); 
		plot_3 = null;

		if (debugState){
			root.console.log("✔ Flots destroyed");
		} 

	};

	loadScript("/js/plugin/flot/jquery.flot.cust.min.js", function(){
		loadScript("/js/plugin/flot/jquery.flot.resize.min.js", function(){
			loadScript("/js/plugin/flot/jquery.flot.fillbetween.min.js", function(){
				loadScript("/js/plugin/flot/jquery.flot.orderBar.min.js", function(){
					loadScript("/js/plugin/flot/jquery.flot.pie.min.js", function(){
						loadScript("/js/plugin/flot/jquery.flot.time.min.js", function(){
							loadScript("/js/plugin/flot/jquery.flot.tooltip.min.js", pagefunction);
						});
					});
				});
			});
		});
	});
  </script>
@stop

@section('content')
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				@include('budget/menu')
				<div class="panel-body">
          <section id="widget-grid" class="">
              <div class="row">
                @if (User::find(Auth::user()->id)->hasRole(Role::ROLE_BUDGET))
                <article class="col-sm-12 project-id" data-project-id="{{ $workProject->id }}">
                  
                  <div class="jarviswidget" id="curMonthWidget">
                    <header>
                      <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                      <h2>График прихода/расхода за текущий месяц</h2>
                    </header>
                    <div>
                      <div class="jarviswidget-editbox">
                        <input class="form-control" type="text">	
                      </div>
                      <div class="widget-body">
                        <div id="curMonth" style="width:100%; height:300px;" data-action="{{ action('BudgetController@getCurrMonthStat') }}"></div>
                      </div>
                    </div>
                  </div>

                  <div class="jarviswidget" id="currYearWidget">
                    <header>
                      <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                      <h2>График прихода/расхода за архивные месяцы текущего года</h2>				
                    </header>
                    <div>
                      <div class="jarviswidget-editbox">
                        <input class="form-control" type="text">	
                      </div>
                      <div class="widget-body">
                        <div id="currYear" style="width:100%; height:300px;" data-action="{{ action('BudgetController@getCurrYearStat') }}"></div>
                      </div>
                    </div>
                  </div>

                  <div class="jarviswidget" id="yearByMonthWidget" data-widget-editbutton="false">
                    <header>
                      <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                      <h2>Сравнение прихода/расхода за месяцы текущего года с аналогичными месяцами прошлого </h2>				
                    </header>
                    <div>
                      <div class="jarviswidget-editbox">
                      </div>
                      <p class="label-box"></p>
                      <div class="widget-body no-padding">
                        <div id="yearByMonth" class="chart" data-action="{{ action('BudgetController@getYearByMonth') }}"></div>
                      </div>
                    </div>
                  </div>

                </article>
                @endif
              </div>
          </section>
				</div>
			</div>
		</div>
	</div>
@stop