@extends('voyager::master')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="box box-green">
        
        <div class="box-header with-border">
          <h3 class="box-title">Estadísticas por usuario</h3>
          <h4 class="box-subtitle">Interacciones</h3>
        </div>
          
        <div class="box-body">
          <div class="table-responsive">
            <form class="form-edit-add form-horizontal" action="/admin/registros/interactions/stats" method="GET" enctype="multipart/form-data">
              <input type="hidden" value="user"  id="typeRequest" name="typeRequest">
              <div class="form-group col-sm-6">
                <label class="control-label col-sm-2">Desde:</label>
                <div class="col-sm-10">
                  <input type='date' name="startDate" id="dateStartDate" required/>
                </div>
              </div>
              
              <div class="form-group col-sm-6">
                <label class="control-label col-sm-2">Hasta:</label>
                <div class="col-sm-10">
                  <input type='date' name="endDate" id="dateEndDate" required/>
                </div>
              </div>
              
              <div class="form-group col-sm-6">
                <label class="control-label col-sm-2">Usuario:</label>
                <div class="col-sm-10">
                  <select class="form-control" id="selectUser" name="user" required>
                    @foreach($users as $user)
                      <option value="{{$user->id}}">{{$user->name}} ({{$user->role}})</option>
                    @endforeach
                  </select>
                </div>
              </div>

              <div class="col-sm-12">
                <div class="modal-footer">
                  <button type="submit" class="btn btn-info" id="">Enviar</button>
                  <button type="reset" class="btn btn-default" data-dismiss="modal">Limpiar</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  @if(count($interactions) == 0 && $startDate && $endDate)
    <h2>Sin resultados</h2>
  @endif

  @if(count($interactions))
    <div class="row">
      <div class="col-md-12">
          <div class="row">
            <div class="col-md-8">
              <div id="container-charts-column"></div>
            </div>
            <div class="col-md-4">
              <div id="container-charts-pie"></div>
            </div>
          </div>

        <br/>
        <div class="box box-red">
          <div class="box-header with-border">
            <h3 class="box-title">Listado de resultados</h3>
          </div>

          <div class="box-body">
            <div class="table-responsive">
              <table class="table no-margin">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Fecha</th>
                    <th>Interacción</th>
                    <th>Cantidad</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach ($interactions as $item)
                    <tr>
                      <td>{{ $loop->iteration }}</td>
                      <td>{{ DateTime::createFromFormat('Y-m-d', $item->date)->format('d-m-Y') }}</td>
                      <td>{{ $item->interaction }}</td>
                      <td>{{ $item->count }}</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  @endif
</div>

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    const formUser = document.getElementById('selectUser');
    const formStartDate = document.getElementById('dateStartDate');
    const formEndDate = document.getElementById('dateEndDate');
    const requestUser = {!! json_encode($userID) !!};
    const requestStartDate = {!! json_encode($startDate) !!};
    const requestEndDate = {!! json_encode($endDate) !!};
    const requestInteractions = {!! json_encode($interactions) !!};

    formUser.value = requestUser;
    formStartDate.value = requestStartDate;
    formEndDate.value = requestEndDate;

    const startDate = moment(requestStartDate);
    const endDate = moment(requestEndDate);

    if (requestInteractions && requestStartDate && requestEndDate) {
      Highcharts.chart('container-charts-column', {
        chart: {
          type: 'column'
        },
        title: {
          text: `Interacciones desde ${startDate.format('LL')} hasta ${endDate.format('LL')}`
        },
        xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
            month: '%e. %b',
            year: '%b'
          },
          title: {
            text: 'Fecha'
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Interacciones'
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        series: [{
          name: 'Correo',
          color: '#00a65a',
          data: requestInteractions.filter(i => i.interaction === 'Correo').map(i => [moment(i.date).valueOf(), i.count])
        }, {
          name: 'Llamada',
          color: '#f39c12',
          data: requestInteractions.filter(i => i.interaction === 'Llamada').map(i => [moment(i.date).valueOf(), i.count])
        }, {
          name: 'Presencial',
          color: '#0a4c95',
          data: requestInteractions.filter(i => i.interaction === 'Presencial').map(i => [moment(i.date).valueOf(), i.count])
        }, {
          name: 'Otros',
          color: '#ccc',
          data: requestInteractions.filter(i => i.interaction === 'Otros').map(i => [moment(i.date).valueOf(), i.count])
        }]
      });

      Highcharts.chart('container-charts-pie', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie'
        },
        title: {
          text: `Interacciones desde ${startDate.format('LL')} hasta ${endDate.format('LL')}`
        },
        tooltip: {
          pointFormat: '<b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '<b>{point.name}</b>: {point.percentage:.1f} %',
              style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
              }
            }
          }
        },
        series: [{
          name: 'Interacciones',
          data: [{
            name: 'Correo',
            color: '#00a65a',
            y: requestInteractions.filter(i => i.interaction === 'Correo').reduce((prev, curr) => prev + curr.count, 0),
          }, {
            name: 'Llamada',
            color: '#f39c12',
            y: requestInteractions.filter(i => i.interaction === 'Llamada').reduce((prev, curr) => prev + curr.count, 0)
          }, {
            name: 'Presencial',
            color: '#0a4c95',
            y: requestInteractions.filter(i => i.interaction === 'Presencial').reduce((prev, curr) => prev + curr.count, 0)
          }, {
            name: 'Otros',
            color: '#ccc',
            y: requestInteractions.filter(i => i.interaction === 'Otros').reduce((prev, curr) => prev + curr.count, 0)
          }]
        }]
      });
    }
  });
</script>

@stop