<template>
  <AnchoredSection id="catalog">
    <LayoutContainer>
      <v-row class="background-block">
        <v-row class="center-90">
          <LayoutUISubTitle>
            Découvrez notre catalogue de formation
          </LayoutUISubTitle>

          <LayoutUITitle class="ml-8"> Catalogue </LayoutUITitle>
        </v-row>

        <v-row class="center-90 catalog">
          <v-col
            v-for="(course, index) in courses"
            :key="index"
            cols="12"
            lg="6"
          >
            <v-card class="mb-4">
              <v-card-text>
                <div class="title-card-container">
                  <span class="number-card">
                    {{ course.number }}
                  </span>

                  <h4>
                    {{ course.title }}
                  </h4>
                </div>

                <p class="details-card mb-6">
                  {{ course.description }}
                </p>

                <div class="objectives">
                  <h6 class="title-obj">Objectifs pédagogiques</h6>

                  <ul>
                    <li
                      v-for="(objective, objIndex) in course.objectives"
                      :key="objIndex"
                    >
                      {{ objective }}
                    </li>
                  </ul>
                </div>

                <div class="badge-time">Durée : {{ course.duration }}</div>

                <div class="program">
                  <h6 class="title-obj">Programme</h6>

                  <v-row>
                    <v-col
                      v-for="column in course.program"
                      :key="column.id"
                      cols="6"
                    >
                      <ul>
                        <li
                          v-for="(objective, objIndex) in column.objectives"
                          :key="objIndex"
                        >
                          {{ objective }}
                        </li>
                      </ul>
                    </v-col>
                  </v-row>
                </div>

                <div class="badge-time">
                  {{ course.price }}
                </div>

                <v-chip
                  class="chip-register"
                  :href="course.url"
                  target="_blank"
                >
                  Télécharger le programme de formation
                </v-chip>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
        <v-row class="center-90 font-weight-medium">
          <v-banner color="info" lines="one" :stacked="false">
            <v-icon icon="fas fa-circle-info" class="text-info mr-2" />
            Les formations dispensées par Opentalent sont soumises à la TVA à
            20%.
          </v-banner>
        </v-row>
      </v-row>
    </LayoutContainer>
  </AnchoredSection>
</template>

<script setup lang="ts">
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
import type { Training } from '~/types/interface'

const runtimeConfig = useRuntimeConfig()

const courses: Array<Training> = [
  {
    number: '01',
    title: 'Formation initiale',
    description:
      "Cette formation est destinée aux nouveaux utilisateurs. Elle est obligatoire lors de l'acquisition du logiciel. Elle est également utile lors d'un changement de personnel dans la structure. ",
    objectives: [
      'Ajuster la configuration du logiciel',
      'Gérer les élèves et leurs familles',
      'Générer des factures et faire le suivi des règlements',
      'Gérer le planning des cours',
      'Évaluer les élèves et générer des bulletins',
      'Communiquer avec les personnes du répertoire',
    ],
    duration: '14h',
    program: [
      {
        id: 1,
        objectives: [
          'Accès et interface',
          'Configuration',
          'Répertoire',
          'Agenda',
        ],
      },
      {
        id: 2,
        objectives: [
          'Parc matériel',
          'Suivi pédagogique',
          'Facturation',
          'Communication',
        ],
      },
    ],
    price: '2 072,40€ TTC (1 727,00€ HT)',
    url:
      runtimeConfig.public.fileStorageBaseUrl +
      '/Programme_de_formation/PF-School_2-jours.pdf',
  },
  {
    number: '02',
    title: 'Formation complémentaire',
    // imageUrl: "/images/opentalent_school_black.jpg",
    description:
      'Cette formation suppose d’avoir les connaissances de base sur le logiciel. Elle permet d’avoir une remise à niveau sur des fonctionnalités qui ont été incorrectement comprises / configurées, ou qui ont été récemment développées.',
    objectives: [
      'Ajuster la configuration du logiciel',
      'Gérer les élèves et leurs familles',
    ],
    duration: '7h',
    program: [
      {
        id: 1,
        objectives: ['Accès et interface', 'Configuration'],
      },
      {
        id: 2,
        objectives: ['Répertoire'],
      },
    ],
    price: '1 036,80€ TTC (864,00€ HT)',
    url:
      runtimeConfig.public.fileStorageBaseUrl +
      '/Programme_de_formation/PF-School_1-jour.pdf',
  },
  {
    number: '03',
    title: 'Formation Typo 3',
    // imageUrl: "/images/opentalent_school_black.jpg",
    description:
      "Cette formation est destinée aux nouveaux utilisateurs Typo3. Elle est optionnelle et permet d'aller plus loin dans la gestion du site internet intégré.",
    objectives: [
      'Gérer les pages et leur accessibilité',
      'Gérer le contenu des pages et leur accessibilité',
      'Configurer les options du site internet côté logiciel',
    ],
    duration: '7h',
    program: [
      {
        id: 1,
        objectives: ['Gestion des pages', 'Gestion des blocs'],
      },
      {
        id: 2,
        objectives: ['Configuration côté logiciel'],
      },
    ],
    price: '1 036,80€ TTC (864,00€ HT)',
    url:
      runtimeConfig.public.fileStorageBaseUrl +
      '/Programme_de_formation/PF-Typo3_1-jour.pdf',
  },
  {
    number: '04',
    title: 'Formation Métabase',
    // imageUrl: "/images/opentalent_school_black.jpg",
    description:
      'Cette formation est destinée aux utilisateurs de Métabase, qu’ils soient novices ou déjà familiers avec le logiciel. Elle est optionnelle et vise à approfondir la maîtrise des outils d’analyse de données afin de permettre une utilisation optimale des tableaux de bord et rapports personnalisés.',
    objectives: [
      'Savoir naviguer dans le logiciel et les données',
      'Savoir créer des questions et des tableaux de bord',
      'Savoir organiser et partager les résultats',
    ],
    duration: '14h',
    program: [
      {
        id: 1,
        objectives: [
          'Présentation de Métabase',
          'Questions',
          'Tableaux de bord',
          'Organisation',
        ],
      },
    ],
    price: '2 072,40€ TTC (1 727,00€ HT)',
    url:
      runtimeConfig.public.fileStorageBaseUrl +
      '/Programme_de_formation/PF-Metabase_2-jours.pdf',
  },
]
</script>

<style scoped lang="scss">
.background-block {
  background: var(--neutral-color-alt-light);
  padding: 4rem;
}

.catalog {
  @media (max-width: 600px) {
    padding: 0.5rem;
  }

  .v-card {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    max-width: 700px;
    margin: 0 auto;
  }

  .title-card-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-weight: 600;
    font-size: 1.2rem;
    width: 31rem;
    border-bottom: 1px solid var(--primary-color);
    padding: 1rem 0;

    .number-card {
      font-weight: 500;
      font-size: 1.3rem;
      color: var(--primary-color);
      margin-right: 1rem;
    }
  }

  .details-card {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1rem;
    color: var(--primary-color);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    height: 5rem;

    @media (max-width: 600px) {
      height: auto;
    }
  }

  .objectives,
  .program {
    justify-content: space-between;
    align-items: center;
    background: var(--secondary-color-light);
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    padding: 1rem 1rem 1rem 1.5rem;
    height: 13rem;

    h6 {
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
      color: var(--primary-color);
    }

    ul {
      margin-top: 0.5rem;
      font-weight: 300;
      font-size: 14px;
      line-height: 18px;
    }

    @media (max-width: 600px) {
      height: auto;
    }
  }

  .badge-time {
    color: var(--primary-color);
    background: var(--neutral-color);
    width: 100%;
    height: 36px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 12px;
    vertical-align: center;
    padding-top: 6px;
  }

  .chip-register {
    border-radius: 3rem;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 600px) {
      height: 42px;

      :deep(.v-chip__content) {
        max-width: 100%;
        overflow-wrap: break-word;
        white-space: break-spaces;
        text-align: center;
      }
    }
  }
}
</style>
