@extends('layouts.directivo')
@section('content')

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>




<div class="card "   >
  <div class="card-header" style="background-color:#8362B9  ;color:white">
     <i class="fa fa-folder" style="font-size:36px;color:white"></i> Estadísticas Cuentas Generales 
  </div>
  


  <div id="horas_div" style="min-width: 100%; height: 500px; margin: 0 auto"></div>

<div id="costos_div" style="min-width: 100%; height: 400px; margin: 0 auto"></div>

  <!--Table and divs that hold the pie charts-->
   
</div>

<script type="text/javascript">
  Highcharts.chart('horas_div', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Reporte De Horas'
    },    
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Horas Laboradas'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<b>{point.y:.1f} </b> Horas '
    },
    series: [{
        name: 'Population',
        data: [
                        
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});
</script>


<script type="text/javascript">
  Highcharts.chart('costos_div', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Reporte De Costos'
    },    
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total del Costo'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '<b>{point.y:.1f} </b> Horas '
    },
    series: [{
        name: 'Population',
        data: [
                        
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});
</script>

<br>
<div class="card "   >
  <div class="card-header" style="background-color:#8362B9  ;color:white">
     <i class="fa fa-folder" style="font-size:36px;color:white"></i> Estadísticas Cuentas Generales
  </div>
  
  <div class="card-body">
    <table class="table" id="tabla1">
      <thead>
        <tr>
          <th>Cuenta</th>
          <th>RFC</th>
          <!-- <th>Cuenta</th> -->
          <th>Proyecto</th>
          <th>Horas laboradas</th>
          <th>Costos</th>
              <th>Fecha</th>
        </tr>
      </thead>
      <tbody>
        @foreach($info as $ReporteE)
        <tr>
          <td>{{$ReporteE->nombre_opc}}</td>
          <td>{{$ReporteE->rfc}}</td>
          <td>{{$ReporteE->nombre_op}}</td>
          <td>{{$ReporteE->thoras}}</td>
          <td>{{$ReporteE->ucosto}}</td>
          <td>{{$ReporteE->fcreado}}</td>
        </tr> 
        @endforeach
        </tbody>
      </table>
  </div>
   
</div>
  @endsection