<!--
Carrousel de la page d'accueil
-->
<template>
  <v-carousel
    ref="carousel"
    v-model="activeIndex"
    :show-arrows="false"
    :hide-delimiter-background="true"
    :show-delimiters="false"
    :touch="true"
    :height="lgAndUp ? 500 : 800"
    :interval="5000"
  >
    <v-carousel-item
      v-for="(item, index) in carouselItems"
      :key="index"
    >
      <v-row>
        <!-- Partie description (logo, description, bouton 'en savoir plus') -->
        <v-col cols="12" lg="6" class="col presentation">
          <v-img
            :src="item.logo"
            :alt="item.alt"
            class="logo"
          />

          <p class="description" v-html="mdAndUp ? item.description : item.descriptionSm" />

          <v-row class="align-start pl-4">
            <v-btn
              :to="item.link"
              append-icon="fas fa-arrow-right"
              :class="['learn-more-btn', item.buttonClass]"
            >
              En savoir plus
            </v-btn>
          </v-row>
        </v-col>

        <!-- Partie Illustration -->
        <v-col cols="12" lg="6" class="col illustration">
          <v-row>
            <div
              class="background-rectangle"
              :style="{ backgroundColor: item.color }"
            />

            <v-card class="card" elevation="5">
              <v-img
                class="profile-image"
                :src="item.avatar"
                alt="Profile Image"
                contain
                rounded
              />
              <v-card-text>
                <v-card-title class="name">
                  {{ item.name }}

                  <p class="school">
                    {{ item.school }}
                  </p>
                </v-card-title>

                <p class="status">
                  {{ item.status }}
                </p>
              </v-card-text>
            </v-card>

            <v-img
              :src="item.image"
              class="image"
            />
          </v-row>
        </v-col>
      </v-row>
    </v-carousel-item>

    <div class="custom-controls">
      <!--suppress JSUnusedLocalSymbols -->
      <div
        v-for="(_, index) in carouselItems"
        :key="index"
        :class="{ 'active-control': index === activeIndex }"
        @click="setActiveIndex(index)"
      />
    </div>
  </v-carousel>
</template>

<script setup lang="ts">

import { useDisplay } from "vuetify";
import type { CarouselItem } from "~/types/interface";
const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();

// Index de la slide active
let activeIndex: Ref<number> = ref(0);

const setActiveIndex = (index: number) => {
  activeIndex.value = index;
};

const carouselItems: Ref<Array<CarouselItem>> = ref([
  {
    logo: "/images/logo/logiciels/School-noir.png",
    logoAlt: "Logo Opentalent School - logiciel de gestion et de communication pour les établissements d’enseignement artistique",
    description:
      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.<br> Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
    descriptionSm:
      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.",
    buttonClass: "btn-school",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
    imageAlt: "Jeune élève de batterie",
    color: "rgba(32, 147, 190, 0.4)",
    link: "/opentalent_school",
    name: "Cindy Blanchard",
    school: "Conservatoire de Musique",
    status: "élève",
    avatar: "/images/carousel/school/avatar.png",
    avatarAlt: "Photo de profil d’une jeune fille",
  },
  {
    logo: "/images/logo/logiciels/Artist-noir.png",
    logoAlt: "Logo Opentalent Artist - logiciel de gestion et de communication pour les orchestres, les chorales, les compagnies artistiques et troupes",
    description:
      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. <br> Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion.",
    descriptionSm:
      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque.",
    buttonClass: "btn-artist",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
    imageAlt: "Homme jouant du banjo",
    color: "rgba(250, 194, 10, 0.4)",
    link: "opentalent_artist",
    name: "Thierry Dupont ",
    school: "Orchestre d’harmonie",
    status: "Admin",
    avatar: "/images/carousel/artist/avatar.png",
    avatarAlt: "Photo de profil d’un homme jouant du banjo",
  },
  {
    logo: "/images/logo/logiciels/Manager-noir.png",
    logoAlt: "Logo Opentalent Manager - logiciel de gestion et de communication pour les fédérations, les confédérations et les collectivités",
    description:
      "La solution de mise en réseau des organisations culturelles.<br> Fédérations, confédérations et collectivités, utilisez une solution collaborative innovante et unique spécialement développée pour les réseaux culturels.",
    descriptionSm:
      "La solution de mise en réseau des organisations culturelles, telles que les fédérations, confédérations et collectivités.",
    buttonClass: "btn-manager",
    image:
      "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
    imageAlt: "Un homme en costard et une femme tailleur souriant",
    color: "rgba(216, 5, 11, 0.4)",
    link: "opentalent_manager",
    name: "Marie Voisin",
    school: "Réseau d'organisations culturelles ",
    status: "ADMIN",
    avatar: "/images/carousel/manager/avatar.png",
    avatarAlt: "Photo de profil d’une femme en tailleur",
  },
]);
</script>

<style scoped lang="scss">

/* ============= CAROUSEL ===============  */
:deep(.v-carousel__controls) {
  display: none;
}

.custom-controls {
  position: absolute;
  top: 50%;
  right: 1vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1vh;

  div {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--neutral-color-alt-strong);
    cursor: pointer;
    margin-bottom: 0.5rem;
  }

  .active-control {
    background-color: var(--on-neutral-color);
    margin-right: 2rem;
  }
}

/* ============= Colonne gauche - Description ===============  */
.col.presentation {
  .logo {
    width: 20rem;
    margin-top: 10px;
    margin-left: 6rem;

    @media (max-width: 600px) {
      width: 15rem;
      margin-left: 1rem;
    }
  }

  .description {
    text-align: justify;
    margin-top: 8px;
    margin-left: 7rem;
    width: 25vw;
    margin-bottom: 1rem;
  }

  .learn-more-btn {
    display: flex;
    align-items: center;
    margin-top: 16px;
    border-radius: 0.5rem;
    padding: 15px;
    gap: 9px;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 15px;
    width: 10rem;
    height: 2.5rem;
    margin-left: 7rem;

    @media (max-width: 600px) {
      width: 80%;
      margin: 15px auto;
    }
  }

  .learn-more-btn :deep(.v-btn__append) {
    color: var(--on-neutral-color);
    margin-left: 0;
  }

  .btn-school {
    background: var(--school-color-light);
  }

  .btn-artist {
    background: var(--artist-color-light);
  }

  .btn-manager {
    background: var(--manager-color-light);
  }

  @media (max-width: 1280px) {
    padding-bottom: 48px;
    min-height: 50%;

    .description {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

/* ============= Colonne droite - Illustration ===============  */
.col.illustration {
  .card {
    position: relative;
    left: 10%;
    height: 100%;
    width: 27%;
    border-radius: 1rem;
    margin-top: 1rem;
  }

  .profile-image {
    width: 100%;
    height: 12vh;
  }

  .name {
    text-align: center;
    font-size: 0.9rem;
    white-space: normal;
    padding: 0 !important;
  }

  .school, .status {
    text-align: center;
    white-space: normal;
  }

  .school {
    color: var(--on-neutral-color-light);
    font-weight: normal !important;
    font-size: 0.8rem !important;
    margin-top: 0.2px;
    line-height: 1rem !important;
  }

  .status {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--on-neutral-color);
    font-size: 100%;
    margin-top: 0.8rem;
  }

  .background-rectangle {
    position: absolute;
    width: 70%;
    height: 20rem;
    left: 72%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 200px 0 0 15rem;
    z-index: -1;
  }

  .image {
    height: 35rem;
    right: 5rem;
  }

  @media (max-width: 1280px) {
    .background-rectangle {
      top: 60%;
      height: 14rem;
    }

    .image {
      height: 20rem;
      right: 0;
    }
  }
}
</style>
