<template>
    <div class="inscription-page">
        <!-- ================== -->
        <!-- FILS D'ARIANE -->
        <!-- ================== -->
        <PageSection tone="" content-size="default" class="breadcrum_wp">
          <Breadcrumb/>
        </PageSection>

        <!-- ================== -->
        <!-- EN-TÊTE -->
        <!-- ================== -->
        <PageSection tone="jaune" content-size="default" class="theme_bandeau--grid">
          <SectionContent pad="xs" class="theme_bandeau--grid--left">
            <SectionTitle tone="invert" pad="">
              CANDIDATER À UN PROJET AVEC L'ORCHESTRE
            </SectionTitle>
            <DsHeading as="h3" tone="invert">
            </DsHeading>
          </SectionContent>


          <SectionContent pad="xs" class="theme_bandeau--grid--right">
            <DsText tone="invert" size="lg" class="theme_bandeau--grid--right--text" >
              Renseignez ce formulaire pour soumettre la candidature de votre établissement à un programme d'action culturelle de l'Orchestre national d'Île-de-France.
            </DsText>
          </SectionContent>
        </PageSection>

        <!-- ================== -->
        <!-- FORMULAIRE -->
        <!-- ================== -->
        <div class="programmer-orchestre-page text-on-surface">
          <!-- FORM -->
          <form class="space-y-6" @submit.prevent="submitQuoteRequest">
            <div class="px-4 md:px-8 lg:px-16 py-8 max-w-7xl mx-auto">
              <!-- SOUS-TITRE -->
              <section class="mb-8">
                <div class="flex items-center gap-4 mb-8">
                  <h3 class="text-2xl font-bold tracking-tight uppercase">Établissement scolaire</h3>
                  <div class="h-[2px] flex-1 bg-surface-container"></div>
                </div>
              </section>
              <!-- SOUS-TITRE QUESTIONS -->
              <section>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                      <label for="quote-etablissement" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Nom de l'établissement scolaire *
                      </label>
                      <input
                        id="quote-etablissement"
                        v-model.trim="quoteForm.schoolName"
                        type="text"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.schoolName" class="text-xs text-error">{{ quoteFormErrors.schoolName }}</p>
                    </div>
                    <div class="space-y-2">
                      <label for="quote-departement" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Département *
                      </label>
                      <select
                        id="quote-departement"
                        v-model="quoteForm.department"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                      >
                        <option value="">Choisir un département</option>
                        <option value="75">75 – Paris</option>
                        <option value="77">77 – Seine-et-Marne</option>
                        <option value="78">78 – Yvelines</option>
                        <option value="91">91 – Essonne</option>
                        <option value="92">92 – Hauts-de-Seine</option>
                        <option value="93">93 – Seine-Saint-Denis</option>
                        <option value="94">94 – Val-de-Marne</option>
                        <option value="95">95 – Val d’Oise</option>
                      </select>
                      <p v-if="quoteFormErrors.department" class="text-xs text-error">{{ quoteFormErrors.department }}</p>
                    </div>
                    <div class="space-y-2">
                      <label for="quote-ville" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Ville *
                      </label>
                      <input
                        id="quote-ville"
                        v-model.trim="quoteForm.city"
                        type="text"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.city" class="text-xs text-error">{{ quoteFormErrors.city }}</p>
                    </div>
                  </div>
              </section>

              <!-- SOUS-TITRE -->
              <section class="mb-8 mt-10">
                <div class="flex items-center gap-4 mb-8">
                  <h3 class="text-2xl font-bold tracking-tight uppercase">Enseignant coordinateur du projet</h3>
                  <div class="h-[2px] flex-1 bg-surface-container"></div>
                </div>
              </section>
              <!-- SOUS-TITRE QUESTIONS -->
              <section>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                      <label for="quote-name" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Nom et prénom *
                      </label>
                      <input
                        id="quote-name"
                        v-model.trim="quoteForm.coordinatorName"
                        type="text"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.coordinatorName" class="text-xs text-error">{{ quoteFormErrors.coordinatorName }}</p>
                    </div>

                    <div class="space-y-2">
                      <label for="quote-email" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Adresse mail *
                      </label>
                      <input
                        id="quote-email"
                        v-model.trim="quoteForm.email"
                        type="email"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.email" class="text-xs text-error">{{ quoteFormErrors.email }}</p>
                    </div>

                    <div class="space-y-2">
                      <label for="quote-phone" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Téléphone *
                      </label>
                      <input
                        id="quote-phone"
                        v-model.trim="quoteForm.phone"
                        type="tel"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.phone" class="text-xs text-error">{{ quoteFormErrors.phone }}</p>
                    </div>

                    <div class="space-y-2">
                      <label for="quote-discipline" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Discipline enseignée *
                      </label>
                      <input
                        id="quote-discipline"
                        v-model.trim="quoteForm.discipline"
                        type="text"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.discipline" class="text-xs text-error">{{ quoteFormErrors.discipline }}</p>
                    </div>

                    <div class="space-y-2">
                      <label for="quote-niveau" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Niveau de classe *
                      </label>
                      <input
                        id="quote-niveau"
                        v-model.trim="quoteForm.classLevel"
                        type="text"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.classLevel" class="text-xs text-error">{{ quoteFormErrors.classLevel }}</p>
                    </div>

                    <div class="space-y-2">
                      <label for="quote-nb_eleves" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Nombre probable d'élèves concernés *
                      </label>
                      <input
                        id="quote-nb_eleves"
                        v-model.trim="quoteForm.studentCount"
                        type="number"
                        min="1"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      >
                      <p v-if="quoteFormErrors.studentCount" class="text-xs text-error">{{ quoteFormErrors.studentCount }}</p>
                    </div>


                  </div>

              </section>

              <!-- SOUS-TITRE -->
              <section class="mb-8 mt-10">
                <div class="flex items-center gap-4 mb-8">
                  <h3 class="text-2xl font-bold tracking-tight uppercase">Souhaits de projet</h3>
                  <div class="h-[2px] flex-1 bg-surface-container"></div>
                </div>
              </section>
              <!-- SOUS-TITRE QUESTIONS -->
              <section>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    <div class="space-y-2">
                      <label for="quote-type_rencontre" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Concert-rencontre
                      </label>
                      <select
                        id="quote-type_rencontre"
                        v-model="quoteForm.concertRencontrePriority"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                      >
                        <option value="">Priorité</option>
                        <option value="concert_rencontre_priorite_0">non souhaité</option>
                        <option value="concert_rencontre_priorite_1">1</option>
                        <option value="concert_rencontre_priorite_2">2</option>
                        <option value="concert_rencontre_priorite_3">3</option>
                        <option value="concert_rencontre_priorite_4">4</option>
                      </select>
                    </div>
                    <div class="space-y-2">
                      <label for="quote-type_immersion" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Parcours Entrer dans la peau d'un professionnel du spectacle
                      </label>
                      <select
                        id="quote-type_immersion"
                        v-model="quoteForm.immersionPriority"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                      >
                        <option value="">Priorité</option>
                        <option value="immersion_0">non souhaité</option>
                        <option value="immersion_1">1</option>
                        <option value="immersion_2">2</option>
                        <option value="immersion_3">3</option>
                        <option value="immersion_4">4</option>
                      </select>
                    </div>
                    <div class="space-y-2">
                      <label for="quote-type_eac" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Parcours EAC
                      </label>
                      <select
                        id="quote-type_eac"
                        v-model="quoteForm.eacPriority"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                      >
                        <option value="">Priorité</option>
                        <option value="eac_0">non souhaité</option>
                        <option value="eac_1">1</option>
                        <option value="eac_2">2</option>
                        <option value="eac_3">3</option>
                        <option value="eac_4">4</option>
                      </select>
                    </div>
                    <!-- CONCERT COMMENTÉ POUR LE MOMENT ON NE LE PROPOSE PAS -->
                    <!-- <div class="space-y-2">
                      <label for="quote-type_commente" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Concert commenté
                      </label>
                      <select
                        id="quote-type_commente"
                        v-model="quoteForm.concertCommentePriority"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                      >
                        <option value="">Priorité</option>
                        <option value="concert_commente_0">non souhaité</option>
                        <option value="concert_commente_1">1</option>
                        <option value="concert_commente_2">2</option>
                        <option value="concert_commente_3">3</option>
                        <option value="concert_commente_4">4</option>
                      </select>
                    </div> -->
                  </div>

              </section>

              <!-- SOUS-TITRE -->
              <section class="mb-8 mt-10">
                <div class="flex items-center gap-4 mb-8">
                  <h3 class="text-2xl font-bold tracking-tight uppercase">Période souhaitée</h3>
                  <div class="h-[2px] flex-1 bg-surface-container"></div>
                </div>
              </section>
              <!-- SOUS-TITRE QUESTIONS -->
              <section>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                      <label for="quote-periode" class="block text-sm font-medium text-on-surface pl-[2px]">
                        Période souhaitée de déroulement du projet *
                      </label>
                      <textarea
                        id="quote-periode"
                        v-model.trim="quoteForm.projectPeriod"
                        rows="6"
                        class="w-full rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary"
                        placeholder=""
                      ></textarea>
                      <p v-if="quoteFormErrors.projectPeriod" class="text-xs text-error">{{ quoteFormErrors.projectPeriod }}</p>
                    </div>
                  </div>

              </section>

              <!-- ENVOYER LE FORMULAIRE -->
              <section class="mb-12 mt-12">
                <div v-if="quoteSubmitError" class="mb-8 rounded-xl border border-error/20 bg-error-container/20 px-4 py-3 text-sm text-error">
                  {{ quoteSubmitError }}
                </div>
                <div v-if="quoteSubmitSuccess" class="mb-8 rounded-xl border border-primary/20 bg-primary-container/40 px-4 py-3 text-sm text-on-surface">
                  <span v-if="quoteEmailsSent">Votre demande a bien été envoyée. Un email de confirmation vous a été adressé.</span>
                  <span v-else>Votre demande a bien été enregistrée et transmise à l’équipe de la médiation scolaire.</span>
                </div>
                <div v-if="quoteSubmitting" class="mb-8 rounded-xl border border-outline-variant/30 bg-white px-4 py-3 text-sm text-on-surface">
                  Envoi de votre demande en cours...
                </div>
                <div class="flex items-center gap-4">
                  <button
                    type="submit"
                    class="inline-flex items-center justify-center rounded-full bg-primary px-6 py-3 text-sm font-bold text-on-primary transition-colors hover:bg-primary-dim disabled:cursor-not-allowed disabled:opacity-60"
                    :disabled="quoteSubmitting"
                  >
                    {{ quoteSubmitting ? 'Envoi en cours...' : 'Envoyer la demande' }}
                  </button>
                  <p class="text-xs text-on-surface-variant">
                    L'équipe d'action culturelle de l'Ondif reviendra vers vous d'ici fin juin 2026 afin de vous informer de la suite donnée à votre candidature.
                    <br>
                    En soumettant ce formulaire, j’accepte que les informations saisies soient utilisées dans le cadre de cette demande.
                  </p>
                </div>
              </section>
            </div>
          </form>
        </div>





    </div>
</template>

<script setup>
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
  import DsText from '@root/design-system/primitives/DsText.vue'


  useHead({
    link: [
      {
        rel: 'preconnect',
        href: 'https://fonts.googleapis.com',
      },
      {
        rel: 'preconnect',
        href: 'https://fonts.gstatic.com',
        crossorigin: '',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap',
      },
    ],
  })

  //--------------------
  // RÉCUPÉRATION DES DONNÉES STRAPI
  //--------------------



  const quoteForm = reactive({
    schoolName: "",
    department: "",
    city: "",
    coordinatorName: "",
    email: "",
    phone: "",
    discipline: "",
    classLevel: "",
    studentCount: "",
    concertRencontrePriority: "",
    immersionPriority: "",
    eacPriority: "",
    concertCommentePriority: "",
    projectPeriod: "",
  })

  const quoteFormErrors = reactive({
    schoolName: "",
    department: "",
    city: "",
    coordinatorName: "",
    email: "",
    phone: "",
    discipline: "",
    classLevel: "",
    studentCount: "",
    projectPeriod: "",
  })

  const quoteSubmitting = ref(false)
  const quoteSubmitSuccess = ref(false)
  const quoteSubmitError = ref("")
  const quoteEmailsSent = ref(false)


  function resetQuoteFormErrors() {
    quoteFormErrors.schoolName = ""
    quoteFormErrors.department = ""
    quoteFormErrors.city = ""
    quoteFormErrors.coordinatorName = ""
    quoteFormErrors.email = ""
    quoteFormErrors.phone = ""
    quoteFormErrors.discipline = ""
    quoteFormErrors.classLevel = ""
    quoteFormErrors.studentCount = ""
    quoteFormErrors.projectPeriod = ""
  }

  function validateQuoteForm() {
    resetQuoteFormErrors()

    let isValid = true

    if (!quoteForm.schoolName) {
      quoteFormErrors.schoolName = "Le nom de l'établissement scolaire est obligatoire."
      isValid = false
    }

    if (!quoteForm.department) {
      quoteFormErrors.department = "Le département est obligatoire."
      isValid = false
    }

    if (!quoteForm.city) {
      quoteFormErrors.city = "La ville est obligatoire."
      isValid = false
    }

    if (!quoteForm.coordinatorName) {
      quoteFormErrors.coordinatorName = "Le nom et le prénom de l'enseignant coordinateur sont obligatoires."
      isValid = false
    }

    if (!quoteForm.email) {
      quoteFormErrors.email = "L’email est obligatoire."
      isValid = false
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(quoteForm.email)) {
      quoteFormErrors.email = "L’email n’est pas valide."
      isValid = false
    }

    if (!quoteForm.phone) {
      quoteFormErrors.phone = "Le téléphone est obligatoire."
      isValid = false
    }

    if (!quoteForm.discipline) {
      quoteFormErrors.discipline = "La discipline enseignée est obligatoire."
      isValid = false
    }

    if (!quoteForm.classLevel) {
      quoteFormErrors.classLevel = "Le niveau de classe est obligatoire."
      isValid = false
    }

    if (!quoteForm.studentCount) {
      quoteFormErrors.studentCount = "Le nombre probable d'élèves concernés est obligatoire."
      isValid = false
    } else if (Number(quoteForm.studentCount) <= 0) {
      quoteFormErrors.studentCount = "Le nombre d'élèves doit être supérieur à 0."
      isValid = false
    }

    if (!quoteForm.projectPeriod) {
      quoteFormErrors.projectPeriod = "La période souhaitée est obligatoire."
      isValid = false
    }

    return isValid
  }

  async function submitQuoteRequest() {
    quoteSubmitSuccess.value = false
    quoteSubmitError.value = ""
    quoteEmailsSent.value = false

    if (!validateQuoteForm()) {
      return
    }

    quoteSubmitting.value = true

    try {
      const response = await $fetch("/api/projet-lycee", {
        method: "POST",
        body: {
          schoolName: quoteForm.schoolName,
          department: quoteForm.department,
          city: quoteForm.city,
          coordinatorName: quoteForm.coordinatorName,
          email: quoteForm.email,
          phone: quoteForm.phone,
          discipline: quoteForm.discipline,
          classLevel: quoteForm.classLevel,
          studentCount: quoteForm.studentCount,
          concertRencontrePriority: quoteForm.concertRencontrePriority,
          immersionPriority: quoteForm.immersionPriority,
          eacPriority: quoteForm.eacPriority,
          concertCommentePriority: quoteForm.concertCommentePriority,
          projectPeriod: quoteForm.projectPeriod,
        },
      })

      quoteSubmitSuccess.value = true
      quoteEmailsSent.value = Boolean(response?.emailsSent)
      quoteForm.schoolName = ""
      quoteForm.department = ""
      quoteForm.city = ""
      quoteForm.coordinatorName = ""
      quoteForm.email = ""
      quoteForm.phone = ""
      quoteForm.discipline = ""
      quoteForm.classLevel = ""
      quoteForm.studentCount = ""
      quoteForm.concertRencontrePriority = ""
      quoteForm.immersionPriority = ""
      quoteForm.eacPriority = ""
      quoteForm.concertCommentePriority = ""
      quoteForm.projectPeriod = ""
      resetQuoteFormErrors()
    } catch (error) {
      quoteSubmitError.value = error?.data?.statusMessage || "L’envoi de la demande a échoué."
    } finally {
      quoteSubmitting.value = false
    }
  }


</script>

<style lang="scss">


  .breadcrum_wp {
    padding-top: 30px;
  }



// =======================
// SPÉCIFIQUE À CETTE PAGE
// =======================
.inscription-page {


  .fiche_description {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    > * {
      max-width: 640px;
      display: flex;
      flex-direction: column;
    }
  }


    .contact_spe_wp {
      background-color: var(--c-background-jaune-clair);
      margin-top: 50px;
      margin-bottom: 20px;
    }


}

</style>
