@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">Units Consumption Report</h4>
        <ol class="breadcrumb float-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Units Consumption Report</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">
                Select Period and Service
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              {!! Form::open(['route' => ['accounting.unit_consumption_report.index'], 'method' => 'get', 'id' => 'filter_form']) !!}
              <div class="row" style="padding-left:15px; padding-right:15px;">
                <div class="col-sm-3">
                  <div class="form-group">
                    {!! Form::select('month', \App\Models\Timeoff::$month, request('month') ?? \Carbon\Carbon::now()->subMonth()->format('n'), ['class' => 'form-control', 'id' => 'filter_month']) !!}
                  </div>
                </div>
                <div class="col-sm-3">
                  <div class="form-group">
                    {!! Form::select('year', $filter_years, request('year') ?? date('Y'), ['class' => 'form-control', 'id' => 'filter_year']) !!}
                  </div>
                </div>
                <div class="col-sm-12">
                  <div class="form-group">
                    {!! Form::select('service_id', $services, null, ['class' => 'form-control', 'id' => 'filter_service']) !!}
                  </div>
                </div>
              </div>
              <div class="row" style="padding-left:15px; padding-right:15px;">
                <div class="col-sm-6">
                  <div class="form-group" style="margin-bottom:0px;">
                    <a href="{{ route('accounting.unit_consumption_report.index') }}" class="btn btn-danger waves-effect">Reset</a>
                    {!! Form::submit('Submit', ['class' => 'btn btn-primary']) !!}
                  </div>
                </div>
              </div>
              {!! Form::close() !!}
            </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">
                Monthly Indicators for {{ $data['service'] ? $data['service']['units'] : '-' }}
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              <div class="portlet-body">
                <div style="min-height:179px;">
                  @if($data['service'])
                    <table class="table table-striped add-edit-table dataTable no-footer" id="accounts-table">
                      <tbody>
                      <tr>
                        <td>Committed Level</td>
                        <td>{{ $data['service']['available_units'] }}</td>
                      </tr>
                      <tr>
                        <td>Actually Consumed</td>
                        <td>{{ $data['service']['consumed_units'] }}</td>
                      </tr>
                      <tr>
                        <td>Units Above Committed Level</td>
                        <td>{{ $data['service']['consumed_units_over'] }}</td>
                      </tr>
                      <tr>
                        <td>Billedd</td>
                        <td>$ {{ number_format($data['service']['to_bill']) }}</td>
                      </tr>
                      </tbody>
                    </table>
                  @else
                    <table class="table table-striped add-edit-table dataTable no-footer" id="accounts-table">
                      <tbody>
                      <tr style="background: none">
                        <td style="height: 100%; text-align: center; padding: 60px 0;">No Services</td>
                      </tr>
                      </tbody>
                    </table>
                  @endif
                </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">
                Committed Level and Actual Cost Invoice - 6 Months
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              <div class="portlet-body" style="overflow: visible">
                @if($data['chart']['labels'])
                  <div id="commited_level_and_actual_cost" class="ct-chart ct-golden-section" style="overflow: visible"></div>
                @else
                  <table class="table table-striped add-edit-table dataTable no-footer" id="accounts-table">
                    <tbody>
                    <tr style="background: none">
                      <td style="height: 100%; text-align: center; padding: 140px 0;">No Services</td>
                    </tr>
                    </tbody>
                  </table>
                @endif
              </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 Saving - 6 Months
              </h3>
              <div class="clearfix"></div>
            </div>
            <div id="portlet1" class="panel-collapse collapse show">
              <div class="portlet-body" style="overflow: visible">
                @if($data['chart']['labels'])
                  <div id="potential_saving" class="ct-chart ct-golden-section" style="overflow: visible;"></div>
                @else
                  <table class="table table-striped add-edit-table dataTable no-footer" id="accounts-table">
                    <tbody>
                    <tr style="background: none">
                      <td style="height: 100%; text-align: center; padding: 140px 0;">No Services</td>
                    </tr>
                    </tbody>
                  </table>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
@endsection

@section('scripts')
  <script type="text/javascript">
    function load_services() {
      $.ajax({
        url: '{{ route('accounting.unit_consumption_report.get_service_for_period') }}',
        data: $('#filter_form').serializeArray()
      }).done(function (res) {
        let filter_service = $('#filter_service');
        filter_service.empty();

        // Get the current selected option from the URL
        let params = new URLSearchParams(window.location.search);
        let currentSelectedOption = params.get('service_id');

        if (Object.keys(res).length) {
          $.each(res, function (id, name) {
            let option = $('<option>', { value: id, text: name });

            // If this option was selected before, mark it as selected
            if (id === currentSelectedOption) {
              option.attr('selected', 'selected');
            }

            filter_service.append(option);
          });
        } else {
          filter_service.append('<option>No Contracted Services For Selected Period</option>');
        }
      });
    }

    $(function () {
      $('#filter_month, #filter_year').on('change', function () {
        load_services();
      });
      setTimeout(function () {
        $('.portlet-heading .card-widgets').remove();
      }, 100);
    });

    @if($data['chart']['labels'])
    new Chartist.Line('#commited_level_and_actual_cost', {
      labels: {!! json_encode($data['chart']['labels']) !!},
      series: [
        {!! json_encode($data['chart']['unit_price']) . ',' .json_encode($data['chart']['unit_price_sum']) !!}
      ]
    }, {
      fullWidth: true,
      chartPadding: {
        right: 40
      },
      plugins: [
        Chartist.plugins.legend({
          legendNames: ['Committed Level Cost', 'Actually Consumed Units Cost'],
        }),
        Chartist.plugins.tooltip({
          currency: '$',
          appendToBody: true
        })
      ]
    });

    new Chartist.Line('#potential_saving', {
      labels: {!! json_encode($data['chart']['labels']) !!},
      series: [
        {!! json_encode($data['chart']['saving']) !!}
      ]
    }, {
      fullWidth: true,
      chartPadding: {
        right: 40
      },
      plugins: [
        Chartist.plugins.tooltip({
          currency: '$',
          appendToBody: true
        })
      ]
    });
    @endif
  </script>
  <style>
    .card-widgets {
      display: none;
    }
  </style>
@endsection