@extends('layouts.jefa')

@section('content')

<div class="container-fluid">

    <div class="row">
      <h5 class="font-weight-bolder mb-0 text-blue">Consultas</h5>

        <div class="col-lg-6 col-md-6 col-sm-12 my-4 back-denuncia">
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-body p-3">
                  <div class="row">
                    <div class="col-8 my-auto">
                      <div class="numbers">
                        <p class="text-sm mb-0 text-capitalize font-weight-bold opacity-7"></p>
                        <h5 class="font-weight-bolder mb-0 title-ros">Consultas Ingresadas:</h5>
                      </div>
                    </div>
          
                    <div class="col-4 text-end">
                        <h5 class="mb-0 text-end me-1 text-blue nro-ros">{{$last_consultations}} <i class="material-icons">how_to_vote</i></h5> 
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-12 my-4 back-denuncia">
          <div class="row">
              <div class="col-12">
                <div class="card">
                  <div class="card-body p-3">
                    <div class="row">
                      <div class="col-8 my-auto">
                        <div class="numbers">
                          <p class="text-sm mb-0 text-capitalize font-weight-bold opacity-7"></p>
                          <h5 class="font-weight-bolder mb-0 title-ros">Operación Sospechosa ROS</h5>
                        </div>
                      </div>
            
                      <div class="col-4 text-end">
                          <h5 class="mb-0 text-end me-1 text-blue nro-ros">{{$countROS}}</h5>  
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        


        <!-- Información de denuncias -->
        <h5 class="font-weight-bolder mb-0 text-blue">Denuncias</h5>

        <div class="col-lg-7 col-md-6 col-sm-12 ms-auto my-4 back-denuncia">
        <!-- <div class="col-lg-6 ms-auto"> -->
          <div class="card">
            <div class="card-header pb-0 p-3">
              <div class="d-flex align-items-center">
                <h6 class="mb-0 subtitle">Denuncias por tipo <small>(año 2024)</small></h6>
              </div>
            </div>
        
            <div class="card-body p-3">
              <div class="row">
                <div class="col-7 text-center">
                  <div class="chart">
                    <canvas id="myChart" class="chart-canvas" height="197" width="214" style="display: block; box-sizing: border-box; height: 197px; width: 214.4px;"></canvas>
                  </div>
                  
                </div>
                
                <div class="col-5">
                  <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                      <tbody>
                      @if($caso1 > 0)
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-maltrato-laboral me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Maltrato Laboral</h6>
                              </div>
                            </div>
                          </td>
          
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso1}} </span>
                          </td>
                        </tr>

                        @endif
                        @if($caso2 > 0)
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-acoso-laboral me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Acoso laboral</h6>
                              </div>
                            </div>
                          </td>
                          
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso2}} </span>
                          </td>
                        </tr>
                        @endif
                        @if($caso3 > 0)
                        
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-acoso-sexual me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Acoso sexual</h6>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso3}} </span>
                          </td>
                        </tr>
                        @endif
                        @if($caso4 > 0)
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-discriminacion me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Discriminación</h6>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso4}} </span>
                          </td>
                        </tr>
                        @endif
                        @if($caso5 > 0)
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-igualidad-genero me-3"> </span>
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Hechos que atenten contra la igualdad de Género</h6>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso5}} </span>
                          </td>
                        </tr>
                        @endif
                        @if($caso6 > 0)

                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-probidad me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Faltas a la Probidad</h6>
                              </div>
                            </div>
                          </td>
          
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso6}} </span>
                          </td>
                        </tr>
                        @endif 
                        @if($caso7 > 0)

                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-soborno me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Cohecho / Soborno</h6>
                              </div>
                            </div>
                          </td>
                          
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso7}} </span>
                          </td>
                        </tr>

                        @endif
                        @if($caso8 > 0)
                        
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-conflicto-interes me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Conflicto de Interés</h6>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso8}} </span>
                          </td>
                        </tr>
                        @endif
                        @if($caso9 > 0)
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-informacion-reservada me-3"> </span>
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Información reservada</h6>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso9}} </span>
                          </td>
                        </tr>
                        @endif
                        @if($caso10 > 0)
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-trafico me-3"> </span>
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Tráfico de Influencias</h6>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso10}} </span>
                          </td>
                        </tr>
                        @endif 
                        @if($caso11 > 0)

                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              <span class="badge badge-maluso me-3"> </span>
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">Mal uso de bienes y recursos de la Institución</h6>
                              </div>
                            </div>
                          </td>
                          <td class="align-middle text-center text-sm">
                            <span class="text-xs font-weight-bold"> {{$caso11}} </span>
                          </td>
                        </tr>
                        @endif

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

        <!-- <div class="col-xl-6 ms-auto mt-xl-0 mt-4"> -->
        <div class="col-lg-5 col-md-6 col-sm-12 ms-auto my-4 back-denuncia">
          <div class="row mt-4">
            <div class="col-md-12">
              <div class="card">
                <div class="card-body text-center">
                  <h2 class="text-gradient text-primary"><span id="status1" countto="{{$last_denunciations}}">{{$last_denunciations}}</span></h2>
                  <h6 class="mb-0 font-weight-bolder">Denuncias Ingresadas</h6>
                  <!-- <p class="opacity-8 mb-0 text-sm">Temperature</p> -->
                </div>
              </div>
            </div>

            <!-- <div class="col-md-12 my-5">
              <div class="card box-card-line">
                <div class="chart">
                  <canvas id="chart-line" class="chart-canvas" height="197" width="214" style="display: block; box-sizing: border-box; height: 197px; width: 214.4px;"></canvas>
                </div>
              </div>
            </div> -->
          </div>
        </div>
    </div>
            

    <div class="row">
        
        <div class="col-12 col-md-12">
          <div class="card">
            <div class="card-header bg-purple">
              <h4 class="card-title text-white">Últimas consultas respondidas</h4>
            </div>
            <div class="card-body table-responsive">
              <table class="table table-hover" id="table01">
                <thead class="">
                  <th style="width:400px;" class="text-left">Nombre</th>
                  <th style="width:400px;" class="text-left">Fecha de ingreso</th>
                  <th style="width:100px;" class="text-left">Estado</th>
                  <th style="width:100px;" class="text-left">Ver consulta</th>
                </thead>
                <tbody>
                  @forelse($consultas as $consulta)
                  <tr>
                    <td>{{ $consulta->name }}</td>
                    <td>{{ \Carbon\Carbon::parse($consulta->created_at)->format('d/m/Y')}}</td>
                    <td>
                    
                    </td>
                    <td class="text-center"><a href="{{route('consultas.show', $consulta->id)}}">
                                  <i class="material-icons">search</i>
                                </a></td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>

          <div class="col-12 col-md-12 my-5">
          <div class="card">
            <div class="card-header bg-purple">
              <h4 class="card-title text-white">Últimas denuncias ROS</h4>
            </div>
            <div class="card-body table-responsive">
              <table class="table table-hover" id="table02">
                <thead class="">
                  <th style="width:400px;" class="text-left">Tipo de denuncia</th>
                  <th style="width:400px;" class="text-left">Fecha de ingreso</th>
                  <th style="width:100px;" class="text-left">Estado</th>
                  <th style="width:100px;" class="text-left">Ver denuncia</th>
                </thead>
                <tbody>
                  @forelse($denunciasRos as $ros)
                  <tr>
                    <td>{{ $ros->type_denunciation }}</td>
                    <td>{{ \Carbon\Carbon::parse($ros->created_at)->format('d/m/Y')}}</td>
                    <td>
                    @forelse($ros->response as $estado) 
                      @if($ros->id == $estado->ros_id) 
                        {{$estado->estado}}
                      @endif

                      @empty 
                       {{'Pendiente de revisión'}}
                    @endforelse
                    </td>
                    <td class="text-center">
                      <a href="{{route('ros.show', $ros->id)}}">
                        <i class="material-icons">search</i>
                      </a>
                    </td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>

        </div>
      </div>
    </div>

@endsection

@section('script')
  <script>

  var labels =  {{ Js::from($labels) }};
  const ctx = document.getElementById('myChart');

  var caso01 = {{Js::from($caso1)}};
  var caso02 = {{Js::from($caso2)}};
  var caso03 = {{Js::from($caso3)}};
  var caso04 = {{Js::from($caso4)}};
  var caso05 = {{Js::from($caso5)}};
  var caso06 = {{Js::from($caso6)}};
  var caso07 = {{Js::from($caso7)}};
  var caso08 = {{Js::from($caso8)}};
  var caso09 = {{Js::from($caso9)}};
  var caso10 = {{Js::from($caso10)}};
  var caso11 = {{Js::from($caso11)}};

  new Chart(ctx, {
    type: 'doughnut',
    data: {
      // labels: labels,
      datasets: [{
        label: '# de denuncias',
        data: [caso01, caso02, caso03, caso04, caso05, caso06,caso07, caso08, caso09, caso10, caso11],
        backgroundColor: [
            'rgb(159, 210, 201,1)',
            'rgb(255, 167, 38, 1)',
            'rgb(102, 187, 106,1)',
            'rgb(254, 213, 127,1)',
            
            'rgb(134, 228, 240, 1)',
            'rgb(228, 138, 244,1)',
            'rgb(209, 142, 205, 1)',
            'rgb(245, 227, 158,1)',

            'rgb(230, 173, 88, 1)',
            'rgb(201, 162, 208,1)',
            'rgb(153, 215, 223, 1)',
            // 'rgb(255, 229, 223,1)',

          ],
        lineWidth: 20,
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

  // var months = Utils.months({count: 7});
  // console.log(months);

  var rosmonth = {{Js::from($RosxMonths)}};
console.log(rosmonth);


  const ctx2 = document.getElementById('chart-line');
  new Chart(ctx2, {
    type: 'line',
    data: {
      labels: [rosmonth[0].months, rosmonth[1].months], //['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
      datasets: [{
        label: 'Denuncias por Operación sospechosa ROS',
        data: [rosmonth[0].total, rosmonth[1].total],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    },
  });
  
  const ctx3 = document.getElementById('chart-bar');
  new Chart(ctx3, {
    type: 'bar',
    data: {
      labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
      datasets: [{
        label: 'Comportamiento de consultas en el año',
        data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(201, 203, 207, 0.2)'
          ],
          borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
          ],
          borderWidth: 1
      }]
    }
  });

</script>
@endsection