<template>
  <div>
    <DefaultHeaderPage title="Financeiro" :show-filter-icon="false" />

    <div class="row justify-end q-px-md q-mb-xs">
      <q-btn
        flat
        round
        :icon="showValues ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
        color="primary"
        @click="showValues = !showValues"
      >
        <q-tooltip anchor="center left" self="center right" :offset="[8, 0]">
          {{ showValues ? 'Ocultar valores' : 'Exibir valores' }}
        </q-tooltip>
      </q-btn>
    </div>

    <div class="row q-pa-md q-gutter-md">
      <FinancialCard
        title="Saldo Bancário"
        icon="mdi-bank-outline"
        :financial-value="0"
        description="Estável"
        :hide-values="!showValues"
      />
      <FinancialCard
        title="Receita do Mês"
        icon="mdi-cash-multiple"
        :financial-value="0"
        :percentage="0"
        description="Estável"
        :hide-values="!showValues"
      />
      <FinancialCard
        title="Despesas do Mês"
        icon="mdi-cash-multiple"
        :financial-value="0"
        :percentage="0"
        description="Estável"
        :hide-values="!showValues"
      />
    </div>

    <div class="row q-px-md q-gutter-md">
      <FinancialCard
        title="Contas a Pagar"
        icon="mdi-cash-minus"
        :financial-value="0"
        :integer="0"
        integer-label="pagamentos pendentes"
        :hide-values="!showValues"
        clickable
        @click="$router.push({ name: 'AccountsPayablePage' })"
      />
      <FinancialCard
        title="Contas a Receber"
        icon="mdi-cash-plus"
        :financial-value="0"
        :integer="0"
        integer-label="pagamentos pendentes"
        :hide-values="!showValues"
        clickable
        @click="$router.push({ name: 'AccountsReceivablePage' })"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import FinancialCard from "src/components/financial/FinancialCard.vue";

const STORAGE_KEY = "franchisee_financial_show_values";
const showValues = ref(localStorage.getItem(STORAGE_KEY) !== "false");

watch(showValues, (val) => localStorage.setItem(STORAGE_KEY, String(val)));
</script>
