@extends('panel.layouts.app')
@section('page-title')
<title>
{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Home</title>
@stop
@section('content')
<div class="content-wrapper">
  <div class="row">
    {{ Form::open(["url"=>route('print.account.receipt.admin'),"method"=>"POST","target"=>"_blank"]) }}
    {{ Form::hidden('receips-ids','',['id'=>'receips-ids']) }}
    {{ Form::close() }}

    {{ Form::open(["url"=>route('print.account.carrier.receipt.admin'),"method"=>"POST","target"=>"_blank"]) }}
    {{ Form::hidden('carrier-receipt-ids','',['id'=>'carrier-receipt-ids']) }}
    {{ Form::hidden('carrier-id','',['id'=>'carrier-id']) }}
    {{ Form::hidden('carrier-name','',['id'=>'carrier-name']) }}
    {{ Form::close() }}

    {{ Form::open(["url"=>route('admin.branch.dashboard'),"method"=>"POST","target"=>"_blank"]) }}
    {{ Form::hidden('branch_id','',['id'=>'branch_id']) }}
    {{ Form::close() }}

    <div class="col-md-1"></div>
    <div class="col-md-10">
      {{-- <section class="content-header">
        <h1>{{$today}}</h1>
      </section> --}}
      <section class="content">
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <section class="content-header" style="padding-top: 0px !important">
                <h1 style="padding-bottom: 15px">{{$today}}</h1>
              </section>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="info-box">
                  <span class="info-box-icon bg-aqua"><i class="fa fa-gift"></i></span>
                  <div class="info-box-content">
                    <span class="info-box-text">Parcels</span>
                    <span class="info-box-number">{{$total_today_parcel}} / {{$total_month_parcel}}</span>
                  </div>
                </div>
              </div>
              <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="info-box">
                  <span class="info-box-icon bg-red"><i class="fa fa-inr"></i></span>
                  <div class="info-box-content">
                    <span class="info-box-text">Sales</span>
                    <span class="info-box-number">{{number_format($total_today_booking, 2)}} / {{number_format($total_month_booking, 2)}}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="">
              <div class="box box-warning">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">Sales and Bookings - Today</h3>
                  <div class="box-tools pull-right">
                    <span class="label label-default"> Booking</span>
                    <span class="label label-success"> Sales</span>
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <canvas id="barChart" style="height:230px"></canvas>
                  </div>
                </div>
              </div>
            </div>

            <div class="">
              <div class="box box-warning">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">Sales All Branches - Month</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <canvas id="lineChart" style="height:250px"></canvas>
                  </div>
                </div>
              </div>
            </div>

            @foreach($branches as $branch)
            <div>
              <div class="box box-warning">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">{{$branch['name']}} <button type="button" class="btn btn-box-tool show-tooltip" data-toggle="tooltip" title="Dashboard" onclick="branchdashboard(this)" data-id="{{$branch['id']}}"><i class="fa fa-arrow-circle-right fa-lg"></i></button></h3>
                  <div class="box-tools pull-right">
                    <span class="label label-primary"> Sales</span>
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                    <canvas id="areaChart_{{$branch['id']}}" style="height:250px"></canvas>
                  </div>
                </div>
                <div class="box-footer">
                  <div class="row">
                    <div class="col-sm-3 col-xs-6">
                      <div class="description-block border-right">
                        <h5 class="description-header">{{$branch['today_branch_parcel']}}</h5>
                        <span class="description-text">TODAY PARCELS</span>
                      </div>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                      <div class="description-block border-right">
                        <h5 class="description-header">{{$branch['month_branch_parcel']}}</h5>
                        <span class="description-text">THIS MONTH PARCELS</span>
                      </div>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                      <div class="description-block border-right">
                        <h5 class="description-header">{{number_format($branch['today_branch_booking'], 2)}}</h5>
                        <span class="description-text">TODAY SALES</span>
                      </div>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                      <div class="description-block">
                        <h5 class="description-header">{{number_format($branch['month_branch_booking'], 2)}}</h5>
                        <span class="description-text">THIS MONTH SALES</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            @endforeach

          </div>
          <div class="col-md-6">
            <div class="box box-primary">
              <div class="box-body">
                <div class="row">
                  <div class="col-md-8">
                    <label><b>PARCELS</b></label>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      {{ Form::select( 'branch', $all_branch, '0', [ "class" => "form-control", "id" => "branch", "onchange" => "branchChange()"] ) }}
                    </div>
                  </div>
                </div>
                <ul class="consignment-list products-list product-list-in-box">
                  <li class="item" style="padding-top: 0px !important;">
                    <input type="text" id="keyword" onkeyup="searchParcels()" class="form-control" placeholder="Search">
                  </li>
                </ul>
                <div class="height-6 infinite-scroll">
                  <ul class="consignment-list products-list product-list-in-box">
                    @forelse($parcles as $parcel)
                    @include('superadmin.dashboard.parcel_item',[$parcel])
                    @empty
                    <li class="item no-parcel-item text-center">No records found.</li>
                    @endforelse
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="col-md-1"></div>
  </div>
</div>
@stop
@section('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="{{ laracore_assets('plugins/morris/morris.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/flot/jquery.flot.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/flot/jquery.flot.resize.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/flot/jquery.flot.pie.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/flot/jquery.flot.categories.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/chartjs/Chart.min.js') }}"></script>
<script type="text/javascript">
  var page = 1;
  var lastScrollTop = 0;
  var stopScroll = false;
  $(window).scroll(function() {
    var st = $(this).scrollTop();
    if (st > lastScrollTop){
      if($(window).scrollTop() + $(window).height() >= $(document).height() && !stopScroll) {
        page++;
        loadMoreData();
      }
    }
  });

  function loadMoreData(status){
    status = status || 'null';
    var keyword = $('#keyword').val();
    var branch = $('#branch').val();
    $.ajax({
      url: '?page=' + page,
      type: "GET",
      data: {'keyword':keyword, 'status':status, 'branch':branch},
    })
    .done(function(data){
      if(data.html == ""){
        stopScroll = true;
        return;
      }
      $(".consignment-list:eq(1)").append(data.html);
    })
  }

  function searchParcels(){
    delay(function(){
      var keyword = $('#keyword').val();
      page = 1;
      if(keyword == ''){
        stopScroll = false;
        $(".consignment-list:eq(1)").html('');
        loadMoreData();
        return;
      }
      $.ajax({
        url: '?page=' + page,
        type: "GET",
        data: {'keyword':keyword},
      })
      .done(function(data){
        if(data.html == ""){
          $(".consignment-list:eq(1)").html('<li class="item text-center">No records found.</li>');
          return;
        }
        $(".consignment-list:eq(1)").html(data.html);
      })
    },200);
  }

  function branchChange(){
    delay(function(){
      var branch = $('#branch').val();
      page = 1;
      if(branch == ''){
        stopScroll = false;
        $(".consignment-list:eq(1)").html('');
        loadMoreData();
        return;
      }
      $.ajax({
        url: '?page=' + page,
        type: "GET",
        data: {'branch':branch},
      })
      .done(function(data){
        if(data.html == ""){
          $(".consignment-list:eq(1)").html('<li class="item text-center">No records found.</li>');
          return;
        }
        $(".consignment-list:eq(1)").html(data.html);
      })
    },200);
  }

  function printAccountReceipt(element){
    var Id = $(element).attr('data-id');
    $('#receips-ids').val(Id).parents('form').submit();
  }

  function printAccountCarrierReceipt(element){
    var Id = $(element).attr('data-id');
    var CarrierId = $(element).attr('carrier-id');
    var CarrierName = $(element).attr('carrier-name');
    $('#carrier-id').val(CarrierId)
    $('#carrier-name').val(CarrierName)
    $('#carrier-receipt-ids').val(Id).parents('form').submit(); 
  }

  function branchdashboard(element){
    var branch_id = $(element).attr('data-id');
    $('#branch_id').val(branch_id).parents('form').submit();
  }
</script>
<script>
  $(function () {
    var branch_name = '{!! json_encode(@$branch_name_arr) !!}';
    var today_collection = '{!! json_encode(@$today_collection_arr) !!}';
    var total_booking = '{!! json_encode(@$total_booking_arr) !!}';
    var day_data = '{!! json_encode(@$day_arr) !!}';
    var day_amount_data = '{!! json_encode(@$day_amount_arr) !!}';
    
    var branches = '{!! json_encode(@$branches) !!}';

    var barChartData = {
      labels  : JSON.parse(branch_name),
      datasets: [
      {
        label               : 'Collection',
        fillColor           : 'rgba(210, 214, 222, 1)',
        strokeColor         : 'rgba(210, 214, 222, 1)',
        pointColor          : 'rgba(210, 214, 222, 1)',
        pointStrokeColor    : '#c1c7d1',
        pointHighlightFill  : '#fff',
        pointHighlightStroke: 'rgba(220,220,220,1)',
        data                : JSON.parse(today_collection)
      },
      {
        label               : 'Booking',
        fillColor           : 'rgba(60,141,188,0.9)',
        strokeColor         : 'rgba(60,141,188,0.8)',
        pointColor          : '#3b8bba',
        pointStrokeColor    : 'rgba(60,141,188,1)',
        pointHighlightFill  : '#fff',
        pointHighlightStroke: 'rgba(60,141,188,1)',
        data                : JSON.parse(total_booking)
      }
      ]
    }

    var barChartCanvas                   = $('#barChart').get(0).getContext('2d')
    var barChart                         = new Chart(barChartCanvas)
    var barChartData                     = barChartData
    barChartData.datasets[1].fillColor   = '#00a65a'
    barChartData.datasets[1].strokeColor = '#00a65a'
    barChartData.datasets[1].pointColor  = '#00a65a'
    var barChartOptions                  = {
      scaleBeginAtZero        : true,
      scaleShowGridLines      : true,
      scaleGridLineColor      : 'rgba(0,0,0,.05)',
      scaleGridLineWidth      : 1,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines  : true,
      barShowStroke           : true,
      barStrokeWidth          : 2,
      barValueSpacing         : 5,
      barDatasetSpacing       : 1,
      legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
      responsive              : true,
      maintainAspectRatio     : true
    }

    barChartOptions.datasetFill = false
    barChart.Bar(barChartData, barChartOptions);


    var lineChartData = {
      labels: JSON.parse(day_data),
      datasets: [
      {
        label: "Digital Goods",
        fillColor: "rgba(60,141,188,0.9)",
        strokeColor: "rgba(60,141,188,0.8)",
        pointColor: "#3b8bba",
        pointStrokeColor: "rgba(60,141,188,1)",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(60,141,188,1)",
        data: JSON.parse(day_amount_data)
      }
      ]
    };

    var lineChartOptions = {
      showScale: true,
      scaleShowGridLines: false,
      scaleGridLineColor: "rgba(0,0,0,.05)",
      scaleGridLineWidth: 1,
      scaleShowHorizontalLines: true,
      scaleShowVerticalLines: true,
      bezierCurve: true,
      bezierCurveTension: 0.3,
      pointDot: false,
      pointDotRadius: 4,
      pointDotStrokeWidth: 1,
      pointHitDetectionRadius: 20,
      datasetStroke: true,
      datasetStrokeWidth: 2,
      datasetFill: true,
      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
      maintainAspectRatio: true,
      responsive: true
    };

    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
    var lineChart = new Chart(lineChartCanvas);
    var lineChartOptions = lineChartOptions;
    lineChartOptions.datasetFill = false;
    lineChart.Line(lineChartData, lineChartOptions);

    $.each(JSON.parse(branches), function( index, value ) {
      var areaChartCanvas = $('#areaChart_'+value.id).get(0).getContext('2d')
      var areaChart       = new Chart(areaChartCanvas)

      var areaChartData = {
        labels: JSON.parse(JSON.stringify(value.branch_month_arr)),
        datasets: [
        {
          label               : 'Digital Goods',
          fillColor           : 'rgba(60,141,188,0.9)',
          strokeColor         : 'rgba(60,141,188,0.8)',
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : JSON.parse(JSON.stringify(value.branch_month_amount_arr))
        }
        ]
      }

      var areaChartOptions = {
        showScale               : true,
        scaleShowGridLines      : false,
        scaleGridLineColor      : 'rgba(0,0,0,.05)',
        scaleGridLineWidth      : 1,
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines  : true,
        bezierCurve             : true,
        bezierCurveTension      : 0.3,
        pointDot                : false,
        pointDotRadius          : 4,
        pointDotStrokeWidth     : 1,
        pointHitDetectionRadius : 20,
        datasetStroke           : true,
        datasetStrokeWidth      : 2,
        datasetFill             : true,
        legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
        maintainAspectRatio     : true,
        responsive              : true
      }

      areaChart.Line(areaChartData, areaChartOptions)
    });

  })
</script>
@stop