<template>
  <div v-if="visible" class="modal modal-open">
    <div class="modal-box max-w-md">
      <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
      <form @submit.prevent="emit('submit')" class="space-y-4">
        <div class="form-control">
          <label class="label">
            <span class="label-text">Nom du site</span>
          </label>
          <input
            v-model="form.name"
            type="text"
            placeholder="Ex: Usine principale"
            class="input input-bordered"
            required
          />
        </div>

        <div class="grid grid-cols-1 gap-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Nom du contact</span>
            </label>
            <input
              v-model="form.contactName"
              type="text"
              placeholder="Nom et prénom"
              class="input input-bordered"
              required
            />
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">Téléphone</span>
            </label>
            <input
              v-model="form.contactPhone"
              type="tel"
              placeholder="Ex: 06 00 00 00 00"
              class="input input-bordered"
              required
            />
          </div>

          <div class="form-control">
            <label class="label">
              <span class="label-text">Adresse</span>
            </label>
            <input
              v-model="form.contactAddress"
              type="text"
              placeholder="Adresse complète"
              class="input input-bordered"
              required
            />
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Code postal</span>
              </label>
              <input
                v-model="form.contactPostalCode"
                type="text"
                placeholder="Code postal"
                class="input input-bordered"
                required
              />
            </div>

            <div class="form-control">
              <label class="label">
                <span class="label-text">Ville</span>
              </label>
              <input
                v-model="form.contactCity"
                type="text"
                placeholder="Ville"
                class="input input-bordered"
                required
              />
            </div>
          </div>
        </div>

        <div class="modal-action">
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
          <button type="submit" class="btn btn-primary">
            Créer le site
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { toRefs } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  site: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close', 'submit'])

const form = toRefs(props.site)
</script>
