@extends('layouts.admin')

@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">
@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"></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"></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"></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" style="width: {{$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" style="width: {{$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" style="width: {{$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" style="width: {{$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" style="width: {{$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" style="width: {{$tv}}%">{{$tv}}%</div>
              </div>
          </div>
        </div>  
    </div>
            

    <div class="row">

      @if(Auth::user()->profile_id == 1)
        
        <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 style="width:200px;" class="text-center">Eje</th>
                  <th style="width:80px;" class="text-center">Nro</th>
                  <th style="width:300px;" class="text-center">Medida</th>
                  <th style="width:400px;" class="text-center">Descripción</th>
                  <th style="width:100px;" class="text-center">Tipo</th>
                  <th style="width:100px;" class="text-center">Responsable</th>
                  <th style="width:100px;" class="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 style="width:200px;" class="text-center">Eje</th>
                  <th style="width:80px;" class="text-center">Nro</th>
                  <th style="width:300px;" class="text-center">Medida</th>
                  <th style="width:400px;" class="text-center">Descripción</th>
                  <th style="width:100px;" class="text-center">Tipo</th>
                  <th style="width:100px;" class="text-center">Responsable</th>
                  <th style="width:100px;" class="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')
      Chart.defaults.global.legend.position = "bottom";
      Chart.defaults.global.defaultFontSize = 14;

      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
              labels: ["Medidas Completadas", "Total de medidas legislativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [, 210],
                  backgroundColor: [
                      '#193475',
                      '#c4cfe8',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
              labels: {
                      fontFamily: 'Roboto',
                      boxWidth: 0,
                      fontSize: 16,
                      fontColor: '#FF6E6E'
                  },
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });

      var ctx = document.getElementById("myChart2");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas gestión"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [25, 210],
                  backgroundColor: [
                      '#186bb1',
                      '#c7d7e2',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });
      var ctx = document.getElementById("myChart3");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas administrativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [, 210],
                  backgroundColor: [
                      '#44b9f3',
                      '#cfe1e5',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });

      var ctx = document.getElementById("myChart4");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
              labels: ["Medidas Completadas", "Total de medidas legislativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#2e73a6',
                      '#97b9d3',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
              labels: {
                      fontFamily: 'Roboto',
                      boxWidth: 0,
                      fontSize: 16,
                      fontColor: '#FF6E6E'
                  },
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });

      var ctx = document.getElementById("myChart5");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas gestión"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#c24d7b',
                      '#e1a6bd',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });
      var ctx = document.getElementById("myChart6");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas administrativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#e29332',
                      '#f1c999',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });

      var ctx = document.getElementById("myChart7");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
              labels: ["Medidas Completadas", "Total de medidas legislativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#714387',
                      '#b8a1c3',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
              labels: {
                      fontFamily: 'Roboto',
                      boxWidth: 0,
                      fontSize: 16,
                      fontColor: '#FF6E6E'
                  },
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });

      var ctx = document.getElementById("myChart8");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas gestión"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#118060',
                      '#88c0b0',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });
      var ctx = document.getElementById("myChart9");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas administrativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#414042',
                      '#838185',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });

      var ctx = document.getElementById("myChart10");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
              labels: ["Medidas Completadas", "Total de medidas legislativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#c24d7b',
                      '#e1a6bd',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
              labels: {
                      fontFamily: 'Roboto',
                      boxWidth: 0,
                      fontSize: 16,
                      fontColor: '#FF6E6E'
                  },
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });

      var ctx = document.getElementById("myChart11");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas gestión"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#714387',
                      '#b8a1c3',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });
      var ctx = document.getElementById("myChart12");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas administrativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [5, 3],
                  backgroundColor: [
                      '#c24d7b',
                      '#e1a6bd',
                  ],
                  borderWidth: 0
              }]
          },
          options: {
            tooltips: false,
            legend: {
                  display: false
                  },
              cutoutPercentage: 50,
              rotation: 1 * Math.PI,
              circumference: 1 * Math.PI
          }
      });
@endsection