@extends('layouts.main')

@section('title', 'GLESEC Member Portal')

@section('breadcrumb')
  <div class="row">
    <div class="col-sm-12">
      <div class="page-title-box">
        <h4 class="page-title">Accounting Dashboard</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Accounting Dashboard</li>
        </ol>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <div class="content-body">
    <section class="dashboards-skeleton">
      <div class="row">
        <div class="col-md-6 col-xs-12">
          <div class="portlet">
            <!-- /primary heading -->
            <div class="portlet-heading">
              <h3 class="portlet-title text-dark">
                Monthly Indicators
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              {!! Form::open(['route' => ['accounting_dashboard'], 'method' => 'get']) !!}
              <div class="row" style="padding-left:15px;padding-right:15px;">
                <div class="col-sm-3">
                  <div class="form-group" style="margin-bottom:0px;">
                    {!! Form::select('month', \App\Models\Timeoff::$month, date('m'), ['class' => 'form-control', 'placeholder' => 'All Months']) !!}
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group" style="margin-bottom:0px;">
                    {!! Form::text('year', date('Y'), ['class' => 'form-control', 'id' => 'end_date']) !!}
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group" style="margin-bottom:0px;">
                    <a href="/accounting-dashboard" class="btn btn-danger waves-effect">Reset</a>
                    {!! Form::submit('Submit', ['class' => 'btn btn-primary']) !!}
                  </div>
                </div>
              </div>


              {!! Form::close() !!}
              <div class="portlet-body">
                <div id="element222">
                  @include('CRU.accounting_table')
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-xs-12">
          <div class="portlet">
            <!-- /primary heading -->
            <div class="portlet-heading">
              <h3 class="portlet-title text-dark">
                Performance Over Time
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              <div class="portlet-body">
                <div id="element2223" style="min-height:179px;">
                  <table class="table table-striped add-edit-table dataTable no-footer"
                         id="accounts-table">
                    <tbody>
                    <tr>
                      <td># of Cases Over Time</td>
                      <td>{{$center_time['cases_count']}}</td>
                    </tr>
                    <tr>
                      <td>Hours of Retainer</td>
                      <td>
                        {{$rhours}}h.
                      </td>
                    </tr>
                    <tr>
                      <td>Hours Consumed Over Time</td>
                      <td>
                        @if($center_time['total_hours']-$rhours>0)
                          {{$center_time['total_hours']-$rhours}}h.
                        @else
                          0h.
                        @endif
                      </td>
                    </tr>

                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
    <section class="dashboards-skeleton m-t-15">
      <div class="row">
        <!-- Row 1 -->
        <div class="col-md-6 col-xs-12">
          <div class="portlet">
            <!-- /primary heading -->
            <div class="portlet-heading">
              <h3 class="portlet-title text-dark">
                Contracted Retainer Value and Actual Cost Invoiced - 6 months
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              <div class="portlet-body">
                <div id="element1" class="ct-chart ct-golden-section"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-xs-12">
          <div class="portlet">
            <!-- /primary heading -->
            <div class="portlet-heading">
              <h3 class="portlet-title text-dark">
                Potential Savings Cost - 6 months
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              <div class="portlet-body">
                <div id="element2" class="ct-chart ct-golden-section"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="dashboards-skeleton m-t-15">
      <div class="row">

        <div class="col-md-12 col-xs-12">
          <div class="portlet">
            <div class="portlet-heading">
              <h3 class="portlet-title text-dark">
                Average Time of Resolution : {{ number_format((float) $total_time_av, 2, '.', '') }} h.
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              <div class="portlet-body">
                <div id="element2223" class="cases_lst_dshb">
                  <table class="table table-striped add-edit-table dataTable no-footer" id="accounts-table">
                    <thead>
                    <tr>
                      <th>Sub-type of Case</th>
                      <th>Hours</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($subTypes as $subtype)
                      @if($subtype->caseTime > 0)
                        <tr>
                          <td>{{ $subtype->name }}</td>
                          <td>{{ number_format((float) $subtype->caseTime, 2, '.', '') }}h.</td>
                        </tr>
                      @endif
                    @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>
  <style>
    .card-widgets {
      display: none;
    }
  </style>
@endsection

@section('scripts')
  <script type="text/javascript">
    var lbl = [];
    var lbl2 = [];
    var lbl3 = [];
    var lbl4 = {!!json_encode($graph)!!};
    var m = {!!$m!!};
    var info = {!!($table_data['retainer_costs']) ? $table_data['retainer_costs'] : 0!!};
    var info2 = {!!($table_data['consulting_costs']) ? $table_data['consulting_costs'] : 0!!};
    $("#element1").empty();

    $.each(lbl4, function (i, e) {
      var res = e.invoice_date.replace(" 00:00:00", "T00:00:00Z");
      var d = new Date(res);

      lbl.push(months[d.getMonth()]);
      lbl2.push(+e.retainer_costs);
      lbl3.push(+e.consulting_costs);
    });

    var chart = new Chartist.Line('#element1', {
      labels: lbl,
      series: [
        lbl2,
        lbl3,
      ],

    }, {
      chartPadding: {
        top: 40,
        right: 0,
        bottom: 30,
        left: 20
      },
      axisY: {
        onlyInteger: true
      },
      plugins: [
        Chartist.plugins.tooltip({
          transformTooltipTextFnc: function (tooltip) {
            return '$' + tooltip;
          }
        }),
        Chartist.plugins.legend({
          legendNames: ['Retainer Cost', 'Actual Cost'],
        }),
        Chartist.plugins.ctAxisTitle({
          axisX: {
            axisTitle: 'Months',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 50
            },
            textAnchor: 'middle'
          },
          axisY: {
            onlyInteger: true,
            axisTitle: 'Cost',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 0
            },
            textAnchor: 'middle',
            flipTitle: false
          }
        })
      ]
    });
  </script>

  <script type="text/javascript">
    var lbl = [];
    var lbl2 = [];
    var lbl3 = [];
    var lbl4 = {!!json_encode($graph) !!};
    var m = {!!$m!!};
    var info = {!!($table_data['retainer_costs']) ? $table_data['retainer_costs'] : 0!!};
    var info2 = {!!($table_data['consulting_costs']) ? $table_data['consulting_costs'] : 0!!};
    var svga = [];
    $("#element1").empty();
    $.each(lbl4, function (i, e) {
      var res = e.invoice_date.replace(" 00:00:00", "T00:00:00Z");
      var d = new Date(res);

      lbl.push(months[d.getMonth()]);
      if ((e.consulting_costs - e.retainer_costs) > 0) {
        svga.push(Math.round((e.consulting_costs - e.retainer_costs) * 100) / 100);
      } else {
        svga.push(0);
      }
    });

    var chart = new Chartist.Line('#element2', {
      labels: lbl,
      series: [
        svga,
      ],

    }, {
      chartPadding: {
        top: 40,
        right: 0,
        bottom: 30,
        left: 20
      },
      axisY: {
        onlyInteger: true
      },
      plugins: [
        Chartist.plugins.tooltip({
          transformTooltipTextFnc: function (tooltip) {
            return '$' + tooltip;
          }
        }),
        Chartist.plugins.legend({
          legendNames: ['Potential Savings Cost'],
        }),
        Chartist.plugins.ctAxisTitle({
          axisX: {
            axisTitle: 'Months',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 50
            },
            textAnchor: 'middle'
          },
          axisY: {
            onlyInteger: true,
            axisTitle: 'Cost',
            axisClass: 'ct-axis-title',
            offset: {
              x: 0,
              y: 0
            },
            textAnchor: 'middle',
            flipTitle: false
          }
        })
      ]
    });
  </script>
@endsection