<template class="body">
  <v-container fluid>
    <!-- Cabeçalho da página -->
<v-row>
  <v-col cols="12" class="d-flex align-center">
    <v-img
      src="/logo3.png"
      max-width="40"
      class="mr-3"
      :elevation="0"
      :class="'clean-image'"
    ></v-img>
    <div class="text">
      <h3>Dashboard</h3>
      <p>Bem-vindo ao painel de controle</p>
    </div>
  </v-col>
</v-row>


    <!-- Cards de informações -->
    <v-row>
      <!-- Total de Clientes -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi-account-group</v-icon>
            Usuários
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ totalUsuarios }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- Total de Produtos -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi mdi-face-agent</v-icon>
            Agentes
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ totalAgentes }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- temperatura dos agentes -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title class="card-text justify-center mx-auto">
            <v-icon class="icon" left>mdi mdi-thermometer</v-icon>
            Temperatura
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ temperaturaAgente }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- Total de Vendas -->
      <v-col cols="12" md="3">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi mdi-bell-remove-outline</v-icon>
            Falha
          </v-card-title>
          <v-card-text>
            <v-row align="center">
              <v-col class="sub">
                <h2>{{ totalFalhas }}</h2>
              </v-col>
            </v-row>
          </v-card-text>
          <v-btn block class="button">Ver Logs...</v-btn>
        </v-card>
      </v-col>
    </v-row>

    <!-- Gráfico de Vendas por Categoria -->
    <v-row>
      <v-col cols="12" md="6">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi-chart-bar</v-icon>
            Vendas por Categoria
          </v-card-title>
          <v-card-subtitle>
            Gráfico das vendas por categoria de produto
          </v-card-subtitle>
          <v-card-text>
            <div>
              <apexchart type="bar" height="350" :options="chartOptions" :series="series" />
            </div>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- Gráfico de Vendas por Categoria -->
      <v-col cols="12" md="6">
        <v-card class="cards">
          <v-card-title>
            <v-icon class="icon" left>mdi-chart-bar</v-icon>
            Vendas por Categoria
          </v-card-title>
          <v-card-subtitle>
            Gráfico das vendas por categoria de produto
          </v-card-subtitle>
          <v-card-text>
            <div :style="chartContainerStyle">
              <apexchart type="line" height="350" :options="chartOptions" :series="series" />
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>   
  </v-container>

  <!-- Card de logs -->

  <v-col cols="12" md="12">
  <v-card class="cards">
    <v-card-item class="text">
      <v-card-title>
        <v-icon class="icon" left>mdi mdi-math-log</v-icon>
        Log dos Agentes
      </v-card-title>
    </v-card-item>

    <v-btn block class="button">Ver Logs...</v-btn>
  </v-card>
  </v-col> 


</template>

<script setup>
import { ref } from 'vue'
import VueApexCharts from 'vue3-apexcharts'

const totalUsuarios = ref(30)
const totalAgentes = ref(5)
const totalFalhas = ref(5)
const temperaturaAgente = ref(10)

// Dados de vendas por categoria de produto
const series = ref([
  {
    name: 'Vendas',
    data: [120, 200, 150, 180, 220], // Exemplo de dados de vendas por categoria
  }
])

// Configurações do gráfico
const chartOptions = ref({
  chart: {
    type: 'bar',
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '50%',
      endingShape: 'rounded',
      borderRadius: 20,
    },
  },
  dataLabels: {
    enabled: false,
  },
  xaxis: {
    categories: ['Eletrônicos', 'Roupas', 'Alimentos', 'Móveis', 'Brinquedos'], // Categorias de produtos
  },
  yaxis: {
    title: {
      text: 'Número de Vendas',
    },
  },
  fill: {
    type: 'gradient',
    gradient: {
      shade: 'dark',
      type: 'vertical',
      gradientToColors: ['#00eeef'],
      stops: [0, 50, 100],
    },
    opacity: 1,
  },
  tooltip: {
    y: {
      formatter: function (val) {
        return `${val} vendas`;
      },
    },
  },
});

// Aplicando estilos ao contêiner do gráfico


</script>

<script>
export default {
  components: {
    apexchart: VueApexCharts,
  },
}
</script>

<style scoped>

.fill-height {
  min-height: 95vh;
}

.cards {
  text-align: center;
  color: rgba(108,0,181);
  border-radius: 50px;
  background: linear-gradient(145deg, #eeeded, #ffffff);
  box-shadow:  20px 20px 60px #d9d9d9,
              -20px -20px 60px #ffffff;
}

.button {
  background-color: rgba(76, 202, 240, 0.336);
  color: #6c00b5;
}

.text {
  font-size: 18px;
  color: rgba(108,0,181);
}

.icon {
  color: rgba(108,0,181);
  font-size: 55px;
}

.sub {
  color: #4cc9f0;
  font-size: 20px;
}
</style>
