<template>
  <div>
    <div class="flex justify-center mt-16">
      <div>
        <div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
          <MalioInputText
            label="Nom du client (Entreprise)"
          />
          <MalioInputText
            label="Nom du contact principal"
          />
          <MalioInputText
            label="Prénom du contact principal"
          />
          <MalioSelectCheckbox
            v-model="multiselectValue"
            label="Catégorie"
            :options="[
              {label: 'Catégorie 1', value: 'Catégorie 1'},
              {label: 'Catégorie 2', value: 'Catégorie 2'}
            ]"
          />
          <MalioInputPhone
            v-for="(_, index) in phones"
            :key="index"
            v-model="phones[index]"
            label="Téléphone"
            add-icon-name="mdi:plus"
            :addable="phones.length === 1"
            @add="addPhoneInput"
          />
          <MalioInputEmail
            label="Email"
          />
          <MalioSelect
            v-model="distributeur"
            value=""
            label="Distributeur / Courtier"
            :options="[
              {label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
              {label: 'Distributeur', value: 'Distributeur'},
              {label: 'Courtier', value: 'Courtier'},
            ]"
          />
          <MalioSelect
            v-model="nomCourtier"
            value=""
            label="Nom du courtier"
            :options="[
              {label: 'Nom 1', value: 'Nom 1'}
            ]"
          />
          <MalioSelect
            v-model="nomDistributeur"
            value=""
            label="Nom du distributeur"
            :options="[
              {label: 'Nom 1', value: 'Nom 1'}
            ]"
          />
          <MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
        </div>
        <div class="mt-16 flex justify-center">
          <MalioButton label="Valider" variant="primary"/>
        </div>
      </div>
    </div>
  </div>
</template>

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

const multiselectValue = ref<Array<string | number>>([])
const distributeur = ref<string>('')
const phones = ref<string[]>([''])
const nomDistributeur = ref<string>('')
const nomCourtier = ref<string>('')

function addPhoneInput() {
  phones.value.push('')
}
</script>
