@extends('layouts.admin')

@section('css')
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endsection

@section('content')

<div class="container-fluid">

    <div class="row">

      @if(Auth::user()->profile_id == 1)
        @if (session('status'))
                <div class="col-12 alert alert-success mb-5">
                    {{ session('status') }}
                </div>
        @endif
      @endif

        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="chart-container" >
              <canvas id="myChart" 
              data-cumplimiento="{{ $cumplimedidas100 }}"
              data-total="{{ $cumplimiento }}" ></canvas>
              <div class="porcentaje text-center">{{$cumplimedidas100}} %</div>
          </div>
          <div class="chart-box-info text-center">
            <p class="title mb-0">Porcentaje de medidas cumplidas</p>
            <p class="total">Total: {{ $cumplimiento; }}</p>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6">
            <div class="chart-container" >
              <canvas id="myChart2" 
              data-promedio="{{ $promedioponderado }}"></canvas>
              <div class="porcentaje text-center"> %</div>
          </div>
          <div class="chart-box-info text-center">
            <p class="title mb-0">Porcentaje promedio de avance total</p>
            <p class="total"> </p>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="chart-container" >
              <canvas id="myChart3" 
              data-cumpli2="{{ $cumpli2 }}"
              data-total="{{ $cumplimiento50 }}"></canvas>
              <div class="porcentaje text-center">{{$cumpli2}} %</div>
          </div>
          <div class="chart-box-info text-center">
            <p class="title mb-0">Porcentaje de medidas con más de la mitad de avance</p>
            <p class="total">Total: {{$cumplimiento50}} </p>
          </div>
        </div>

        <h3 class="text-left text-blue col-12 mb-5">Avance por ejes</h3>

        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="chart-box-info text-left">
            <p class="title">Función Pública</p>
          </div>
          <div class="chart-container" >
              <div class="progress fp-progress" role="progressbar" aria-label="Función Pública Cumplimiento" aria-valuenow="25" aria-valuemin="0" aria-valuemax="70">
                <div class="progress-bar colorprogress-fp w-{{$fp}}" >{{$fp}}%</div>
              </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="chart-box-info text-left">
            <p class="title">Recursos Públicos</p>
          </div>
          <div class="chart-container" >
              <div class="progress rp-progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="{{$ejerpTotal}}%">
                <div class="progress-bar colorprogress-rp w-{{$rp}}" >{{$rp}}%</div>
              </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6">
          <div class="chart-box-info text-left">
            <p class="title">Transparencia</p>
          </div>
          <div class="chart-container" >
              <div class="progress tp-progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="{{$ejetpTotal}}">
                <div class="progress-bar colorprogress-tp w-{{$tp}}">{{$tp}}%</div>
              </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6 my-4">
          <div class="chart-box-info text-left">
            <p class="title">Política</p>
          </div>
          <div class="chart-container" >
              <div class="progress pl-progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="{{$ejeplTotal}}">
                <div class="progress-bar colorprogress-pl w-{{$pl}}" >{{$pl}}%</div>
              </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6 my-4">
          <div class="chart-box-info text-left">
            <p class="title">Sector Privado</p>
          </div>
          <div class="chart-container" >
              <div class="progress sp-progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="{{$ejespTotal}}">
                <div class="progress-bar colorprogress-sp w-{{$sp}}" >{{$sp}}%</div>
              </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-sm-6 my-4">
          <div class="chart-box-info text-left">
            <p class="title">Transversal</p>
          </div>
          <div class="chart-container" >
              <div class="progress tv-progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="{{$ejetvTotal}}">
                <div class="progress-bar colorprogress-tv w-{{$tv}}">{{$tv}}%</div>
              </div>
          </div>
        </div>  
    </div>
            

    <div class="row">

      @if(Auth::user()->profile_id == 1)

      <div class="col-12 text-end text-right my-5 btn-download">
        <a href="{{route('descarga')}}">Descarga el listado de medidas aquí <span class="material-symbols-outlined">export_notes</span></a>
      </div>


      <div class="col-12 text-end text-right my-5 btn-download">
        <a href="{{route('medidas.create')}}">Crear nueva medida <span class="material-symbols-outlined">export_notes</span></a>
      </div>


      
        
        <div class="col-12 col-md-12">
          <div class="card">
            <div class="card-header bg-pink2">
              <h4 class="card-title text-white">Medidas</h4>
              <p class="card-category text-white">Listado de medidas por eje</p>
            </div>
            <div class="card-body table-responsive">
              <table class="table table-hover" id="table01">
                <thead class="">
                  <th class="w-20 text-center">Eje</th>
                  <th class="w-20 text-center">Nro</th>
                  <th class="text-center">Medida</th>
                  <th class="w-80 text-center">Descripción</th>
                  <th class="w-20 text-center">Tipo</th>
                  <th class="w-20 text-center">Responsable</th>
                  <th class="w-100 text-center">Revisar</th>
                  <th>Prioridad</th>
                </thead>
                <tbody>
                @foreach($measures as $measure)
                                    <tr class="">
                    <td class="">{{$measure->axe->name}}</td>
                    <td class="">{{$measure->nro}}</td> 
                    <td class="">{{$measure->name}}</td>
                    <td class="">{{$measure->description}}</td>
                    <td class="">{{$measure->type}}</td>
                  
                    <td class="">{{$measure->user->name}} </td>
                  
                    <td class="text-center">
                      <a href="{{route('revision-medida', $measure->id)}}"><span class="material-symbols-outlined">search</span></a>

                      <a href="{{route('edicion-medida', $measure->id)}}"><span class="material-symbols-outlined">edit</span></a>
                      
                    </td>
                     
                      <td></td> 
                                      </tr>
                @endforeach  
                </tbody>
              </table>
            </div>
          </div>
        </div>
      @endif

      @if(Auth::user()->profile_id == 2)
        <div class="col-12 col-md-12">
          <div class="card">
            <div class="card-header bg-purple">
              <h4 class="card-title text-white">Medidas</h4>
              <p class="card-category text-white">Listado de medidas por eje</p>
            </div>
            <div class="card-body table-responsive">
              <table class="table table-hover" id="table01">
                <thead class="">
                  <th  class="w-200 text-center">Eje</th>
                  <th class="w-80 text-center">Nro</th>
                  <th class="w-300 text-center">Medida</th>
                  <th class="w-400 text-center">Descripción</th>
                  <th class="w-100 text-center">Tipo</th>
                  <th class="w-100 text-center">Responsable</th>
                  <th class="w-100 text-center">Cumplimiento</th>
                </thead>
                <tbody>
                @foreach($measures as $measure)
                  @if(Auth::user()->id == $measure->user_id)
                    <tr>
                      <td class="">{{$measure->axe->name}}</td>
                      <td class="">{{$measure->nro}}</td> 
                      <td class="">{{$measure->name}}</td>
                      <td class="">{{$measure->description}}</td>
                      <td class="">{{$measure->type}}</td>
                    
                      <td class="">{{$measure->user->name}} </td>
                    
                      <td class="">{{$measure->cumplimiento}}</td>
                    </tr>
                  @endif
                @endforeach  
                </tbody>
              </table>
            </div>
          </div>
        </div>
      @endif
      </div>
    </div>

@endsection

@section('charts')
  <script src="{{ asset('js/chart-config.js') }}"></script>
@endsection