@extends('admin.admin_dashboard')
@section('content')
			

     <section class="pc-container">
      <div class="pc-content">
        <!-- [ breadcrumb ] start -->
        <div class="page-header">
          <div class="page-block">
            <div class="row align-items-center"> 
              <div class="col-md-12">
                <div class="page-header-title">
                  <h2 class="mb-0">Dashboard</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- [ breadcrumb ] end -->
<div class="row">
          <!-- [ sample-page ] start -->
        
          <div class="col-lg-2 col-md-6">
            <div class="card">
              <div class="card-body" style="background-color: #FED8B1"> 
          <a href="{{ route('dashboard')}}" class="pc-link">
                <div class="row align-items-center">
                  <div class="col-8">
                    <h3 class="mb-1"></h3>
                    <p class="text-muted mb-0">Proyectos</p>
                  </div>
                  <div class="col-4 text-end">
                    <i class="ti ti-calendar-event text-danger f-36"></i>
                  </div>
                </div>
              </a>
              </div>
            </div>
          </div>


          <div class="col-lg-2 col-md-6">
            <div class="card">
              <div class="card-body">
                <a href="{{ route('dashboard_projects')}}" class="pc-link"> 

                <div class="row align-items-center">
                  <div class="col-8">
                    <h3 class="mb-1"></h3>
                    <p class="text-muted mb-0">Pendientes por aprobar</p>
                  </div>
                  <div class="col-4 text-end">
                    <i class="ti ti-file-text text-success f-36"></i>
                  </div>
                </div>
              </a>
              </div>
            </div>
          </div>


          <div class="col-lg-2 col-md-6">
            <div class="card">
              <div class="card-body">
                <a href="{{ route('dashboard_graficas')}}" class="pc-link"> 

                <div class="row align-items-center">
                  <div class="col-8">
                    <h3 class="mb-1"></h3>
                    <p class="text-muted mb-0">Gráficas</p>
                  </div>
                  <div class="col-4 text-end">
                    <i class="ti ti-file-text text-success f-36"></i>
                  </div>
                </div>
              </a>
              </div>
            </div>
          </div>
       
       
 


    </div>


        <div class="row">

                    <div class="col-xl-12 col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="d-flex align-items-center justify-content-between mb-3"> 
                  <h5 class="mb-0">Gráficas</h5> 
                </div>
                <div class="chart-container">
    <h2>Gráfica Anual de Levantamientos y Cotizaciones</h2>
    <canvas id="graficaAnual"></canvas>
  </div>


              </div>
            </div>
          </div>

   


          <!-- DOM/Jquery table start -->
          <div class="col-sm-4">
            <div class="card"> 
              <div class="card-body"> 
                   <div class="chart-container-pie">
    <h2>Levantamiento</h2>
    <canvas id="graficaPie"></canvas>
  </div>

     </div>
            </div>
          </div>


                 <!-- DOM/Jquery table start -->
          <div class="col-sm-4">
            <div class="card"> 
              <div class="card-body"> 
                   <div class="chart-container-pie-2">
    <h2>Cotizaciones</h2>
    <canvas id="graficaPie_2"></canvas>
  </div>

     </div>
            </div>
          </div>

                <!-- DOM/Jquery table start -->
          <div class="col-sm-4">
            <div class="card"> 
              <div class="card-body"> 
                   <div class="chart-container-pie-2">
    <h2>Requisiciones</h2>
    <canvas id="graficaPie_3"></canvas>
  </div>

     </div>
            </div>
          </div>
 
 
 </div>
</div>
</section>

          <!-- DOM/Jquery table end -->
<!--main--> 

    <!-- datatable Js --> 
   <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f8f9fa;
    }
    .chart-container {
      width: 100%;
      max-width: 1000px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    h2 {
      text-align: center;
      color: #333;
    }

    .chart-container-pie {
      width: 90%;
      max-width: 500px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .chart-container-pie-2 {
      width: 90%;
      max-width: 500px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
  </style>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="{{ URL::asset('js/plugins/jquery.dataTables.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/dataTables.bootstrap5.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/dataTables.responsive.min.js')}}"></script>
    <script src="{{ URL::asset('js/plugins/responsive.bootstrap5.min.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

      <script>
    const ctx = document.getElementById('graficaAnual').getContext('2d');
    const graficaAnual = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [
          'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
          'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
        ],
        datasets: [
          {
            label: 'Levantamientos',
            data: [12, 19, 14, 25, 22, 30, 28, 24, 20, 18, 15, 10],
            backgroundColor: 'rgba(54, 162, 235, 0.7)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          },
          {
            label: 'Cotizaciones',
            data: [8, 15, 10, 20, 18, 25, 26, 22, 19, 17, 13, 9],
            backgroundColor: 'rgba(255, 159, 64, 0.7)',
            borderColor: 'rgba(255, 159, 64, 1)',
            borderWidth: 1
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: 'Cantidad'
            }
          },
          x: {
            title: {
              display: true,
              text: 'Meses'
            }
          }
        },
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Comparativa Anual 2025'
          }
        }
      }
    });

     const ctx_pie = document.getElementById('graficaPie').getContext('2d');
    const graficaPie = new Chart(ctx_pie, {
      type: 'pie',
      data: {
        labels: ['Aprobados', 'No Aprobados'],
        datasets: [{
          label: 'Levantamientos',
          data: [65, 35], // 🔹 Ajusta estos valores según tus datos reales
          backgroundColor: [
            'rgba(75, 192, 192, 0.8)',   // Verde-azulado
            'rgba(255, 99, 132, 0.8)'    // Rojo
          ],
          borderColor: [
            'rgba(75, 192, 192, 1)',
            'rgba(255, 99, 132, 1)'
          ],
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'bottom'
          },
          title: {
            display: true,
            text: 'Distribución de Levantamientos'
          }
        }
      }
    });


     const ctx_pie_2 = document.getElementById('graficaPie_2').getContext('2d');
    const graficaPie_2 = new Chart(ctx_pie_2 , {
      type: 'pie',
      data: {
        labels: ['Aprobadas', 'No Aprobadas'],
        datasets: [{
          label: 'Cotizaciones',
          data: [80, 20], // 🔹 Ajusta estos valores según tus datos reales
          backgroundColor: [
            'rgba(75, 192, 192, 0.8)',   // Verde-azulado
            'rgba(255, 99, 132, 0.8)'    // Rojo
          ],
          borderColor: [
            'rgba(75, 192, 192, 1)',
            'rgba(255, 99, 132, 1)'
          ],
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'bottom'
          },
          title: {
            display: true,
            text: 'Distribución de Cotizaciones'
          }
        }
      }
    });

     const ctx_pie_3 = document.getElementById('graficaPie_3').getContext('2d');
    const graficaPie_3 = new Chart(ctx_pie_3 , {
      type: 'pie',
      data: {
        labels: ['Aprobadas', 'No Aprobadas'],
        datasets: [{
          label: 'Requisiciones',
          data: [90, 10], // 🔹 Ajusta estos valores según tus datos reales
          backgroundColor: [
            'rgba(75, 192, 192, 0.8)',   // Verde-azulado
            'rgba(255, 99, 132, 0.8)'    // Rojo
          ],
          borderColor: [
            'rgba(75, 192, 192, 1)',
            'rgba(255, 99, 132, 1)'
          ],
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'bottom'
          },
          title: {
            display: true,
            text: 'Distribución de Requisiciones'
          }
        }
      }
    });
  </script>

@endsection