@extends('adminlte::page')

@section('title', 'CCT Rentals Operaciones')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>

@section('content_header')
<div class="card-primary">
    <div class="card-header" style="background: #2874A6;">
        <h3 class="card-title">CCT Rentals Operaciones</h3>
    </div>
</div>
@stop

@section('content')

@foreach($projects as $project)
<div class="card card-primary">
  <div class="card-body">
    <div class="row">
      <div class="col-md-4 col-3">
        <a href="{{url('entry/'.$project->pjt_id)}}"> 
          {{$project->pjt_name}}<br>
          {{\Carbon\carbon::parse($project->pjt_date_start)->format('d-m-Y')}}
        </a>
      </div>
      <div class="col-md-8 col-9">
          <div id="chartPie{{ $project->pjt_id }}" style="height: 80px;"></div>
      </div>
    </div>
  </div>
</div>

<script>
$(function(){
    'use strict';

    /**************** PIE CHART ************/
    var pieData{{ $project->pjt_id }} = [
        {
            name: 'Avance',
            type: 'pie', 
            radius: '75%',
            center: ['50%', '50%'],
            // Aquí debes proporcionar tus datos específicos para cada gráfica
            data: [{"value":null,"name":"Incompleto"},{"value":null,"name":"Completo"}],
            label: {
                normal: {
                    fontFamily: 'Roboto, sans-serif',
                    fontSize: 11
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            markLine: {
                lineStyle: {
                    normal: {
                        width: 1
                    }
                }
            }
        }
    ];

    var pieOption{{ $project->pjt_id }} = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            textStyle: {
                fontSize: 11,
                fontFamily: 'Roboto, sans-serif'
            }
        },
        // legend: {},
        series: pieData{{ $project->pjt_id }}
    };

    var pie{{ $project->pjt_id }} = document.getElementById('chartPie{{ $project->pjt_id }}');
    var pieChart{{ $project->pjt_id }} = echarts.init(pie{{ $project->pjt_id }});
    pieChart{{ $project->pjt_id }}.setOption(pieOption{{ $project->pjt_id }});
    /** making all charts responsive when resize **/
});
</script>
@endforeach
<div class="container">
  <div class='row float-center'>
  <a class="btn btn-app" href="/warehouse"><i class="fas fa-door-closed"></i></a>
  </div>
</div>

@stop

@section('css')

@stop