@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">

        <div class="col-lg-3 col-md-6 col-sm-6">
          <p class="total-measure d-flex align-items-end">Total de medidas: </p>  
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6">
          <div class="chart-container" >
              <canvas id="myChart"></canvas>
          </div>
          <div class="chart-box-info text-center">
            <p class="title mb-0">Avance Medidas Legislativas</p>
            <p class="porcentaje porcentaje2">%</p>
            <p class="total">Total: </p>
          </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="chart-container" >
              <canvas id="myChart2"></canvas>
          </div>
          <div class="chart-box-info text-center">
            <p class="title mb-0">Avance Medidas Gestión</p>
            <p class="porcentaje">%</p>
            <p class="total">Total: </p>
          </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-6">
          <div class="chart-container" >
              <canvas id="myChart3"></canvas>
          </div>
          <div class="chart-box-info text-center">
            <p class="title mb-0">Avance Medidas Administrativas</p>
            <p class="porcentaje porcentaje2">%</p>
            <p class="total">Total: </p>
          </div>
        </div>
    </div>
            

    <div class="row">

      <div class="container">
          <div class="row">
              @if (session('status'))
                  <div class="col-12 alert alert-success my-5">
                      {{ session('status') }}
                  </div>
              @endif

              <!-- <div class="col-12 alert alert-warning my-2 text-center">
                <p class="mb-0">Tienes actividades con observaciones para revisar.</p>
              </div> -->
          </div>
      </div>
        
        <div class="col-12 col-md-12">
          <div class="card">
            <div class="card-header ">
              <h4 class="card-title text-white">Medidas</h4>
              <p class="card-category text-white">Estado de las medidas a la fecha</p>
              
            </div>
            <div class="card-body table-responsive">
              <ul class="glosario">
                <li><div class="bg-gray mr-2">No iniciada</div></li>
                <li><div class="bg-purple mr-2">Borrador</div></li>
                <li><div class="bg-yellow mr-2">En revisión</div></li>
                <li><div class="bg-pink mr-2">Iteración</div></li>
                <li><div class="bg-green mr-2">Cumplidas</div></li>
              </ul>
              <table class="table table-hover" id="table01">
                <thead class="">
                  <th style="width:80px;" class="text-center">ID</th>
                  <th style="width:300px;" class="text-center">Medida</th>
                  <th style="width:500px;" class="text-center">Descripción</th>
                  <th style="width:100px;" class="text-center">Tipo de medida</th>
                  <th style="width:100px;" class="text-center">Actividades</th>
                  <th style="width:100px;" class="text-center">Cumplimiento</th>
                </thead>
                <tbody>
                
                @if(Auth::user()->profile_id == 2)
                  @foreach($fp_measures as $measures)
                    @if(Auth::user()->id == $measures->user_id) 
                      <tr>
                                                <td class="text-left">{{$measures->nro}}</td>
                        <td class="text-left">{{$measures->name}}</td>
                        <td class="text-left">{{$measures->description}}</td> 
                        <td class="text-left">{{$measures->type}}</td> 
                        <td class="text-center">
                            @forelse($measures->activity as $activity)
                                @if($measure_id == $activity->measure_id)
                                  @if($activity->is_active == 1)
                                                                          <a href="{{route('actividad.show', $activity->id )}}" class="">
                                        <span class="material-symbols-outlined ">person_play</span>
                                        @if($activity->status_id == 2)
                                        <span class="material-symbols-outlined text-yellow icon-notifications">notifications_active</span>
                                        @endif
                                      </a>
                                  @endif
                                @endif
                            @empty
                            @endforelse
                          
                        </td>
                        <td class="text-center">
                        {{$measures->cumplimiento}} %
                        </td>
                      </tr>
                    @endif
                  @endforeach
                @endif
                
                @if(Auth::user()->profile_id == 1)
                  @foreach($fp_measures as $measures)
                    <tr>
                                            <td class="text-left">{{$measures->nro}}</td>
                      <td class="text-left">{{$measures->name}}</td>
                      <td class="text-left">{{$measures->description}}</td> 
                      <td class="text-left">{{$measures->type}}</td> 
                      <td class="text-center">
                          @forelse($measures->activity as $activity)
                              @if($measure_id == $activity->measure_id)
                                @if($activity->is_active == 1)
                                                                      <a href="{{route('actividad.show', $activity->id )}}" class="">
                                      <span class="material-symbols-outlined ">person_play</span>
                                    </a>
                                @endif
                              @endif
                          @empty
                          @endforelse
                        
                      </td>
                      <td class="text-center">
                      {{$measures->cumplimiento}} %
                      </td>
                    </tr>
                  @endforeach
                @endif



                </tbody>
              </table>
            </div>
          </div>
        </div>
      </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: [, 100],
                  backgroundColor: [
                      '',
                      '',
                  ],
                  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: [, 100],
                  backgroundColor: [
                    '',
                    '',
                  ],
                  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("myChart3");
      var myChart = new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: ["Medidas Completadas", "Total de medidas administrativas"],
              datasets: [{
                  label: '% de cumplimiento',
                  data: [, 100],
                  backgroundColor: [
                    '',
                    '',
                  ],
                  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
          }
      });
@endsection