<template>
  <form @submit="UpdateCommande">
    <v-container>
      <div>
        <v-img
          :src="`src/assets/logo.jpg`"
          max-height="300"
          max-width="500"
          class="mx-auto"
          center
          :style="'margin-top:30px;margin-bottom:30px'"
        ></v-img>
        <p v-html="messagePerso" :style="'margin-bottom:20px;'"></p>
        <v-row>
          <v-col cols="6" sm="3" xs="3" lg="4" v-if="!commande.CODE_CLIENT">
            <input
              v-model="commande.NOM"
              class="et"
              placeholder="Nom"
              id="name"
            />
          </v-col>
          <v-col cols="6" sm="3" xs="3" lg="4" v-if="!commande.CODE_CLIENT">
            <input
              v-model="commande.POINT_LIVRAISON"
              placeholder="Point de livraison"
              class="et"
              id="name"
            />
          </v-col>
          <v-col cols="6" sm="3" xs="3" lg="4" v-if="commande.CODE_CLIENT">
            <input
              v-model="commande.CODE_CLIENT"
              placeholder="Email"
              class="et"
              id="name"
            />
          </v-col>
          <v-col cols="6" sm="3" xs="3" lg="4">
            <Datepicker
              v-model="commande.DATE_LIVRAISON"
              id="date_comm"
              format="dd/MM/yyyy"
              :enable-time-picker="false"
              readonly
            ></Datepicker>
          </v-col>
        </v-row>
        <div id="good" v-if="good"><p>Modifications ok</p></div>
        <v-container class="photos" fluid>
          <v-row no-gutters>
            <v-col
              v-for="(item, index) in commande['det']"
              :key="index"
              cols="12"
              sm="6"
              xs="12"
              lg="4"
            >
              <v-sheet class="ma-2 pa-2">
                <v-card
                  class="mx-auto"
                  max-width="400"
                  :id="item.ID_COMMANDE_DET"
                >
                  <v-card-title class="mx-auto"
                    ><v-row
                      ><v-col cols="6">{{ item.DESIGNATION }} </v-col></v-row
                    >
                    <v-row
                      ><v-col cols="6">
                        <input
                          v-model="item.Q"
                          class="et"
                          type="number"
                          min="0" /></v-col
                    ></v-row>
                  </v-card-title>
                  <v-card-actions>
                    <v-btn
                      color="#e65127"
                      @click="DeleteDet(item.ID_COMMANDE_DET)"
                      variant="outlined"
                      small
                      >Supprimer</v-btn
                    >
                    <v-btn
                      type="submit"
                      id="submit"
                      color="#97bf0d"
                      variant="outlined"
                      small
                      >valider la modification</v-btn
                    >
                  </v-card-actions>
                </v-card>
              </v-sheet>
            </v-col>
          </v-row>
        </v-container>
      </div>
      <v-layout align-center justify-center>
        <v-btn
          class="mx-auto"
          color="#e65127"
          flat
          :style="'color:white;'"
          @click="DeleteEt(commande.ID_COMMANDE_ET)"
          >Annuler commande</v-btn
        >
      </v-layout>
    </v-container>
    >
  </form>
</template>
<script>
import axios from "../plugins/axios.js";
import Datepicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
export default {
  components: {
    Datepicker,
  },
  data() {
    return {
      commande: [],
      good: false,
      messagePerso: "",
    };
  },
  created() {
    axios
      .get(`/api/lhenaff/commande/GetCommande/${this.$route.query.test}`)
      .then((response) => {
        // JSON responses are automatically parsed.
        this.commande = response.data;
      })
      .catch((e) => {
        this.errors.push(e);
      });
    axios
      .get(`/api/lhenaff/commande/messagePersoRecap`)
      .then((response) => {
        // JSON responses are automatically parsed.
        this.messagePerso = response.data;
      })
      .catch((e) => {
        this.errors.push(e);
      });
  },
  methods: {
    UpdateCommande(e) {
      axios
        .post("/api/lhenaff/commande/UpdateCommande", {
          commande: this.commande,
        }) // eslint-disable-next-line
        .then((result) => {
          this.good = true;
          setTimeout(() => {
            this.good = false;
          }, 2000);
        });
      e.preventDefault();
    },
    DeleteDet(id) {
      axios
        .post(`/api/lhenaff/commande/deleteDet/${id}`) // eslint-disable-next-line
        .then((result) => {
          document.getElementById(id).remove();
        });
    },
    DeleteEt(id) {
      axios
        .post(`/api/lhenaff/commande/deleteEt/${id}`) // eslint-disable-next-line
        .then((result) => {
          this.$router.push({
            name: "home",
          });
        });
    },
  },
};
</script>
<style scoped>
#good {
  margin-top: 20px;
  color: white;
  text-align: center;
  background-color: #97bf0d;
  border-radius: 30px;
}
</style>
