<template>
  <div class="flex gap-8" style="height: calc(100vh - 100px)">
    <MalioSidebar
      v-model="collapsed1"
      :sections="sectionsShort"
    >
      <template #logo>
        <img src="/LOGO_MALIO.png" alt="Malio" />
      </template>
      <template #logo-collapsed>
        <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
      </template>
    </MalioSidebar>

    <MalioSidebar
      v-model="collapsed2"
      :sections="sectionsLong"
    >
      <template #logo>
        <img src="/LOGO_MALIO.png" alt="Malio" />
      </template>
      <template #logo-collapsed>
        <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
      </template>
    </MalioSidebar>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const collapsed1 = ref(false)
const collapsed2 = ref(false)

const sectionsShort = [
  {
    label: 'LOGISTIQUE / TRANSPORT',
    icon: 'mdi:truck-delivery',
    items: [
      {label: 'Réception / Expédition', to: '/reception'},
      {label: 'Validation expédition', to: '/validation'},
    ],
  },
  {
    label: 'COMMERCIAL',
    icon: 'mdi:handshake',
    items: [
      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
      {label: 'Répertoire clients', to: '/clients'},
    ],
  },
]

const sectionsLong = [
  {
    label: 'LOGISTIQUE / TRANSPORT',
    icon: 'mdi:truck-delivery',
    items: [
      {label: 'Réception / Expédition', to: '/reception'},
      {label: 'Validation expédition', to: '/validation'},
      {label: 'Voyage', to: '/voyage'},
      {label: 'Ticket de pesée', to: '/pesee'},
      {label: 'Bon de réception', to: '/bon-reception'},
      {label: "Bon d'expédition", to: '/bon-expedition'},
    ],
  },
  {
    label: 'USINE / PRODUCTION',
    icon: 'mdi:factory',
    items: [
      {label: 'Fabrication en cours', to: '/fabrication'},
      {label: 'Liste des fabrications', to: '/fabrications'},
    ],
  },
  {
    label: 'COMMERCIAL',
    icon: 'mdi:handshake',
    items: [
      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
      {label: 'Compagnie fournisseurs', to: '/compagnie-fournisseurs'},
      {label: 'Répertoire clients', to: '/clients'},
      {label: 'Contrats en cours', to: '/contrats'},
      {label: 'Commissions Clients', to: '/commissions'},
      {label: 'Attribution expédition', to: '/attribution'},
    ],
  },
  {
    label: 'PRIX',
    icon: 'mdi:tag',
    items: [
      {label: "Prix d'achat/vente", to: '/prix-achat'},
      {label: "Prix d'achat spécifiques", to: '/prix-specifiques'},
      {label: 'Prix de ventes clients', to: '/prix-vente'},
    ],
  },
  {
    label: 'FACTURATION',
    icon: 'mdi:receipt',
    items: [
      {label: 'Expéditions à facturer', to: '/expeditions-facturer'},
      {label: 'Factures', to: '/factures'},
    ],
  },
  {
    label: 'TECHNIQUE',
    icon: 'mdi:cog',
    items: [
      {label: 'Répertoire prestataires', to: '/prestataires'},
      {label: 'Répertoire transporteurs', to: '/transporteurs'},
    ],
  },
  {
    label: 'SUIVI HEURES',
    icon: 'mdi:clock-outline',
    items: [
      {label: 'Heure Usine', to: '/heure-usine'},
      {label: 'Heure Extras', to: '/heure-extras'},
      {label: 'Heure Ferme', to: '/heure-ferme'},
    ],
  },
  {
    label: 'ADMINISTRATION',
    icon: 'mdi:shield-account',
    items: [
      {label: 'Catalogue produits', to: '/catalogue'},
      {label: 'Éditer étiquettes', to: '/etiquettes'},
      {label: 'Organisation catégorie', to: '/organisation'},
    ],
  },
]
</script>
