<template>
  <div class="container mt-3">
    <div class="card">
      <div class="card-header bg-info text-white">Ajouter Produit</div>
      <div class="card-body">

        <!-- Lieu Stock -->
        <div class="mb-3">
          <label>Lieu de Stock :</label>
          <select class="form-control" v-model="idlieustock" @change="getcatebaylieux">
            <option value="">-- Choisir lieu --</option>
            <option v-for="l in lieux" :key="l.id" :value="l.id">{{ l.lieu }}</option>
          </select>
        </div>

        <!-- Catégorie -->
        <div class="mb-3">
          <label>Catégorie :</label>
          <select class="form-control" v-model="form.cat">
            <option value="">-- Choisir catégorie --</option>
            <option v-for="c in categories" :key="c.id" :value="c.id">{{ c.topcat }}</option>
          </select>
        </div>

        <!-- Nom -->
        <div class="mb-3">
          <label>Nom / Désignation :</label>
          <input type="text" class="form-control" v-model="form.nom" placeholder="Nom du produit">
        </div>

        <!-- Référence -->
        <div class="mb-3">
          <label>Référence :</label>
          <input type="text" class="form-control" v-model="form.ref" placeholder="Référence">
        </div>

        <!-- Couleur et Taille -->
        <div class="row">
          <div class="col-md-6 mb-3">
            <label>Couleur :</label>
            <select class="form-control" v-model="form.couleur">
              <option value="">-- Choisir couleur --</option>
              <option v-for="c in couleurs" :key="c.id" :value="c.id">{{ c.couleur }}</option>
            </select>
          </div>
          <div class="col-md-6 mb-3">
            <label>Taille :</label>
            <select class="form-control" v-model="form.taille">
              <option value="">-- Choisir taille --</option>
              <option v-for="t in tailles" :key="t.id" :value="t.id">{{ t.taille }}</option>
            </select>
          </div>
        </div>

        <!-- Prix et Quantité -->
        <div class="row">
          <div class="col-md-4 mb-3">
            <label>Prix Unitaire :</label>
            <input type="number" class="form-control" v-model="form.prixun">
          </div>
          <div class="col-md-4 mb-3">
            <label>Prix Vente :</label>
            <input type="number" class="form-control" v-model="form.prixvents">
          </div>
          <div class="col-md-4 mb-3">
            <label>Quantité :</label>
            <input type="number" class="form-control" v-model="form.qty">
          </div>
        </div>

        <!-- Image -->
        <div class="mb-3">
          <label>Image :</label>
          <input type="file" class="form-control" @change="handleImage">
        </div>

        <!-- Bouton Ajouter -->
        <button class="btn btn-success w-100" @click="submitForm">Ajouter Produit</button>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        nom: '',
        ref: '',
        cat: '',
        couleur: '',
        taille: '',
        prixun: '',
        prixvents: '',
        qty: '',
        image: null
      },
      idlieustock: '',
      lieux: [],
      categories: [],
      couleurs: [],
      tailles: []
    }
  },
  mounted() {
    this.getlieux();
    this.loadCouleurs();
    this.loadTailles();
  },
  methods: {
    getlieux() {
      axios.get("./api/lieustock").then(res => {
        this.lieux = res.data.lieustock;
        if (this.lieux.length > 0) {
          this.idlieustock = this.lieux[0].id;
          this.getcatebaylieux();
        }
      }).catch(err => console.error(err));
    },
    getcatebaylieux() {
      if (!this.idlieustock) return;
      axios.get("./api/topcatbyid/" + this.idlieustock)
        .then(res => this.categories = res.data.topcats)
        .catch(err => console.error(err));
    },


loadCouleurs() {
  axios.get("./api/coleur")
    .then(response => {
      console.log(response.data) // باش تتأكد
      this.couleurs = response.data.Couleur
    })
    .catch(error => {
      console.log(error.response ? error.response.data : error.message)
    })
},





  loadTailles() {
    axios.get('./api/taille')
      .then(res => {
        this.tailles = res.data.Taille; // majuscule
      })
      .catch(err => console.error(err));
  },
    
    handleImage(event) {
      this.form.image = event.target.files[0];
    },
    submitForm() {
      const formData = new FormData();
      formData.append('lieu', this.idlieustock);
      for (let key in this.form) {
        formData.append(key, this.form[key]);
      }

      axios.post('addproduit2', formData)
        .then(res => {
          alert('Produit ajouté avec succès !');
          this.resetForm();
           window.location.href = "http://localhost/multistock/public/produit";
        })
        .catch(err => {
          console.error(err);
          alert('Erreur lors de l\'ajout du produit.');
        });
    },
    resetForm() {
      this.form = {
        nom: '',
        ref: '',
        cat: '',
        couleur: '',
        taille: '',
        prixun: '',
        prixvents: '',
        qty: '',
        image: null
      };
      this.categories = [];
    }
  }
}
</script>
