@extends('layouts.jefa')

@section('css')
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
  <link href="assets/css/dashboard.css')" rel="stylesheet">
    <link href="assets/css/gestionintegridad.css" rel="stylesheet">
@endsection

@section('content')

<div class="container-fluid">


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

      
        <!-- 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($casos == 0)
                        <tr>
                          <td>
                            <div class="d-flex px-2 py-0">
                              
                              <div class="d-flex flex-column justify-content-center">
                                <h6 class="mb-0 text-sm">No hay denuncias registradas.</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($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">
            <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">Denuncias Ingresadas</h5>
                      </div>
                    </div>
          
                    <div class="col-4 text-end">
                    <h5 class="mb-0 text-end me-1 text-blue nro-ros"> {{$last_denunciations}} <i class="material-icons">how_to_vote</i></h5>   
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        
          <div class="row mt-4">
            <div class="col-12 col-md-6">
              <div class="card">
                <div class="card-body text-center">
                  <h2 class="text-gradient text-primary"><span id="status1" countto="{{$respondidas}}">{{$respondidas}} <i class="material-icons">fact_check</i></span> </h2>
                  <h6 class="mb-0 font-weight-bolder">Denuncias respondidas</h6>
                  <!-- <p class="opacity-8 mb-0 text-sm">Temperature</p> -->
                </div>
              </div>
            </div>

            <div class="col-12 col-md-6">
              <div class="card">
                <div class="card-body text-center">
                  <h2 class="text-gradient text-blue"><span id="status1" countto="{{$proceso}}">{{$proceso}} <i class="material-icons">autorenew</i></span></h2>
                  <h6 class="mb-0 font-weight-bolder">Denuncias en proceso</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 denuncias</h4>
            </div>
            <div class="card-body table-responsive">
              <table class="table table-hover" id="table01">
                <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($denuncias as $denuncia)
                  <tr>
                    <td>
                      @foreach($denuncia->cases as $case)  
                      {{ $case->name }},  
                      @endforeach
                    </td>
                    <td>{{ \Carbon\Carbon::parse($denuncia->created_at)->format('d/m/Y')}}</td>
                    <td>
                    @forelse($denuncia->register as $estado) 
                      @if($denuncia->id == $estado->denunciation_id) 
                        {{$estado->estado}}
                      @endif

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

    </div>

@endsection

@section('script')
  <script>

  var labels =  {{ Js::from($labels) }};

  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)}};

  const ctx = document.getElementById('myChart');

  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, 176,1)',

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

  </script>

@endsection