<script setup>
  import segments from '../data/segments.json';
  import loadsType from '../data/loadsType.json';
  import BarChartStatistics from '../components/BarChartStatistics.vue';
  import DoughnutChartStatistics from '../components/DoughnutChartStatistics.vue';

</script>

<template>
  <h1 class="title my-4">Dashboard Administrativo</h1>
  <div class="container-dashboard">
    <div class="card-fixed card-dashboard">
      <h3>Total de cargas este mes</h3>
      <div class="main-info">
        35
        <div class="indicator-text" style="color: green;">
          <i class="fa-solid fa-arrow-up"></i>
          <!-- <i class="fa-solid fa-arrow-down"></i> -->
          23%
        </div>
      </div>
    </div>
    <!-- <ChartLoad/> -->
    <div class="card-fixed card-dashboard">
      <h3>Cargas activas</h3>
      <div class="card-chart">
        <DoughnutChartStatistics
          :data="['Published', 'Transit', 'Delivered', 'Published', 'Downloading', 'Loading']"
          :data-model="loadsType"
          target-find="name"
          target-label="status"
        /> 
      </div>
    </div>
    <div class="card-fixed card-dashboard">
      <h3>Segmentos más usados</h3>
      <div class="card-chart">
        <DoughnutChartStatistics 
          :data="['Agricola', 'Agricola', 'Cemento', 'Agricola', 'Intermoadal', 'Agricola']"
          :data-model="segments"
          target-find="name"
        />
      </div>
    </div>
  <!-- </div>
  <div class="container-dashboard"> -->
    <div class="card-fixed card-dashboard">
      <h3>Estados más usados</h3>
      <div class="card-chart">
        <BarChartStatistics 
          label="Ciuades"
          :data="['Yucatán', 'Guadalajara', 'Colima', 'Yucatán', 'Nuevo león', 'Yucatán', 'Guadalajara']"
        />
      </div>
    </div>
    <div class="card-fixed card-dashboard">
      <h3>Ciudades más usadas</h3>
      <div class="card-chart">
        <BarChartStatistics 
          label="Estados"
          :data="['Mérida', 'Guadalajara', 'Colima', 'Guadalajara', 'Monterrey', 'Izamal', 'Mérida']"
        />
      </div>
    </div>
    <div class="card-fixed card-dashboard">
      <h3>Tipo de transporte más usados</h3>
      <div class="card-chart">
        <BarChartStatistics 
          label="Vehiculos"
          :data="['FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'FULL', 'FULL / DOBLE REMOLQUE', 'Auto']"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
  .container-dashboard {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    /* gap: 1rem; */
  }

  .card-dashboard {
    width: 32%;
    /* margin: 8px 8px; */
    min-height: 300px;
    display: flex;
    flex-direction: column;
  }

  .card-chart {
    width: 100%;
    /* max-width: 333px; */
    display: flex;
    flex-direction: column;
  }

  .main-info{
    align-items: center;
    align-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto 0;
    padding: 0px;
    font-size: 7rem;
    font-weight: 900;
  }

  .indicator-text {
    font-size: 3rem;
  }
  .container-dashboard h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #323232;
  }

  @media (max-width: 1300px) {
    .card-dashboard {
      width: 48%;
    }
  }

  @media (max-width: 768px) {

    .container-dashboard {
      width: 100%;
      flex-direction: column;
      justify-content: center;
      flex-wrap: nowrap;
    }
    .card-dashboard {
      width: 100%;
    }
  }
</style>
