<template>
  <div>
    <v-btn
      @click="scrollToBottom"
      color="#97bf0d"
      icon
      :style="'position:fixed;z-index:10000'"
      >Bas</v-btn
    >
    <div id="thiscomp">
      <v-img
        :style="'margin-top:50px'"
        class="mx-auto"
        :src="`src/assets/logo.jpg`"
        max-height="300"
        max-width="500"
        center
      ></v-img>
      <v-container>
        <form @submit="postData" :style="'margin-top:20px'">
          <v-dialog v-model="showSelected" width="600px">
            <v-card>
              <v-img
                :src="`src/assets/images_lhenaff/Base/desc/${descSelected}.jpg`"
                id="testimg"
                max-height="1000"
                max-width="1000"
              ></v-img>
              <v-card-actions>
                <v-btn color="green" block @click="showSelected = false"
                  >Retour</v-btn
                >
              </v-card-actions>
            </v-card>
          </v-dialog>
          <p v-html="messagePerso" :style="'margin-bottom:20px;'"></p>
          <v-row>
            <v-col cols="6" xs="3" sm="3" lg="3" v-if="!show['check']">
              <input
                v-model.lazy="commandes.name"
                :required="!show['check']"
                class="et"
                id="name"
                placeholder="Nom"
              />
            </v-col>
            <v-col cols="6" xs="3" sm="3" lg="1">
              <label
                >Pro :
                <input v-model="show['check']" type="checkbox" />
              </label>
            </v-col>
            <v-col cols="12" sm="3" lg="4" v-if="!show['check']">
              <input
                v-model="commandes.tel"
                label="tel"
                :required="!show['check']"
                class="et"
                type="tel"
                placeholder="Tel"
              />
            </v-col>
            <v-col cols="12" sm="3" xs="4" lg="4" v-if="!show['check']">
              <input
                v-model="commandes.email"
                type="email"
                class="et"
                placeholder="Email"
              />
            </v-col>
            <v-col cols="12" sm="3" lg="3" v-if="show['check']">
              <input
                placeholder="Identifiant"
                :required="show['check']"
                v-model="commandes.identifiant"
                label="identifiant"
                class="et"
              />
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="12" sm="3" lg="6" v-if="!show['check']">
              <select id="select" @change="setSelected($event)" required>
                <option value="">Choisir Point de vente :</option>
                <option
                  v-for="(option, index) in points_livraisons"
                  :key="index"
                  v-bind:value="points_livraisons.N_JOURS"
                >
                  {{ option.DESIGNATION }}
                </option>
              </select>
            </v-col>
            <v-col cols="12" sm="3" lg="2" v-if="commandes.pl || show['check']">
              <label id="labeldate"
                ><b>Choisir une date de livraison :</b></label
              >
            </v-col>
            <v-col cols="12" sm="3" lg="4" v-if="commandes.pl || show['check']">
              <Datepicker
                :style="customStyle"
                required
                v-model="commandes.datecomm"
                id="date_comm"
                :min-date="minDate"
                format="dd/MM/yyyy"
                :disabled-week-days="disabled"
                :enable-time-picker="false"
                :highlight-week-days="disabled"
                locale="fr"
                hide-offset-dates
              ></Datepicker>
            </v-col>
          </v-row>
          <v-container class="photos" fluid>
            <v-row no-gutters>
              <v-col
                v-for="(article, index) in articles"
                :key="index"
                cols="12"
                sm="6"
                lg="3"
              >
                <v-sheet class="ma-2 pa-2">
                  <v-card class="mx-auto" max-width="344">
                    <v-img
                      :src="`src/assets/images_lhenaff/Base/${index}.svg`"
                      aspect-ratio="1"
                      cover
                    ></v-img>
                    <v-card-actions class="ma0 pa0">
                      <v-btn
                        class="mx-auto"
                        :style="'font-size: 14px'"
                        color="#97bf0d"
                        small
                        flat
                        @click="showModal(index)"
                        >Descriptif</v-btn
                      >
                    </v-card-actions>
                    <v-card-text class="ma-1 pa-0">
                      <div v-for="(fields, n) in article" :key="n">
                        <v-row>
                          <v-col cols="8" sm="9" lg="7">
                            <p key="n" v-text="fields['DESIGNATION']"></p>
                          </v-col>
                          <v-col cols="2" sm="1" lg="3">
                            <input
                              class="inputQ"
                              v-model="fields['Q_COMM']"
                              type="number"
                              min="0"
                            />
                          </v-col>
                        </v-row>
                      </div>
                    </v-card-text>
                  </v-card>
                </v-sheet>
              </v-col>
            </v-row>
            <textarea
              v-model="commandes.commentaire"
              placeholder="Note"
              class="et"
            ></textarea>
          </v-container>
          <div class="errors">
            <p>{{ errors }}</p>
          </div>
          <v-layout align-center justify-center>
            <v-btn
              class="mx-auto"
              type="submit"
              id="submit"
              :style="'background-color:black;color:white;margin-top:50px'"
              :disabled="dejaenvoye"
            >
              Commander
            </v-btn>
          </v-layout>
          <div ref="testing"></div>
          <!-- <v-btn
      class="mr-4"
      @click="postData"
    >
      Validate
    </v-btn> -->
        </form>
      </v-container>
      <!-- <div class="d-flex child-flex">
        <v-img v-for="(articles, index) in articles" :key="index" :src="'src/assets/images lhenaff/base/'+articles+'.jpg'" min-width="100px"></v-img>
    </div> -->
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import axios from "../plugins/axios.js";
import Datepicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import { fr } from "date-fns/locale";
export default {
  components: {
    Datepicker,
  },
  data() {
    return {
      show: [],
      showSelected: false,
      descSelected: "",
      points_livraisons: {},
      commandes: {
        name: "",
        email: "",
        identifiant: "",
        datecomm: "",
        pl: "",
        commentaire: "",
      },
      articles: [],
      fr: fr,
      datelow: new Date(),
      disabled: [],
      messagePerso: "",
      dejaenvoye: false,
      minDate: new Date(Date.now() + 48 * 60 * 60 * 1000),
      customStyle: {
        "--vdp-bg-color": "#ff0000",
      },
      errors:"" ,
    };
  },
  created() {
    axios.get("/sanctum/csrf-cookie", {
      withCredentials: true,
    });
    axios
      .get(`/api/lhenaff/commande/articles`)
      .then((response) => {
        this.articles = response.data;
      })
      .catch((e) => {
        this.errors = e.response.data.message;
      });
    axios.get("/api/lhenaff/commande/pLivraison").then(
      (response) => {
        this.points_livraisons = response.data;
      },
      (err) => {
        this.error = err.response.data.message;
      }
    );
    axios
      .get(`/api/lhenaff/commande/messagePersoComm`)
      .then((response) => {
        // JSON responses are automatically parsed.
        this.messagePerso = response.data;
      })
      .catch((e) => {
        this.errors = e.response.data.message;
      });
  },
  methods: {
    showQ(articles) {
      this.show[articles] = true;
      document.getElementById("img" + articles).hidden = true;
    },
    postData(e) {
      var today = new Date();
      var dateJ2 = new Date(today);
      dateJ2.setDate(today.getDate() + 2); 
      var dateJ3 = new Date(today);
      dateJ3.setDate(today.getDate() + 3); 
      if((this.commandes.datecomm.getDate() === dateJ2.getDate() || dateJ3.getDay() === 0) && today.getHours() >= 21){
        console.log("test")
          this.errors ="Une commande pour si proche doit être passée avant 19h";
        }else 
        {
 this.dejaenvoye = true;
      axios
        .post("/api/lhenaff/commande/postCommande", {
          commande: this.commandes,
          articles: this.articles,
        })
        .then((result) => {
          this.$router.push({
            name: "recap",
            query: {
              test: result.data.ID_COMMANDE_ET,
            },
          });
        });
      e.preventDefault();
    }
  },
     
    setSelected(selected) {
      const string = this.points_livraisons.find(
        (element) => element.DESIGNATION == selected.target.value
      ).N_JOURS;
      if (string !== "") {
        this.disabled = string.split(",");
      }
      this.commandes.pl = selected.target.value;
      // this.njours = selected.target.value
    },
    showModal(index) {
      this.descSelected = index;
      this.showSelected = true;
    },
    scrollToBottom() {
      this.$refs["testing"].scrollIntoView({ behavior: "smooth" });
    },
  },
};
// eslint-disable-next-line
</script>
<style>
#thiscomp,
p {
  font-family: "Arial" !important;
}
p {
  height: 100%;
}
.inputQ {
  text-align: center;
  width: 50px;
  height: 100%;
  border: 1px solid #97bf0d;
  background-color: #f6f6f6;
  border-radius: 5px;
}
.et {
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  /* background-color: #f6f6f6; */
  width: 100%;
}
#select,
#date_comm {
  text-align: center;
  /* border-radius: 30px !important; */
  /* border: 1px solid grey; */
  width: 60%;
}
#select {
  text-align: center;

  border-radius: 5px !important;
  border: 1px solid #ddd;
}
#labeldate {
  text-align: right;
}
.dp__theme_light {
  --dp-background-color: #ffffff;
  --dp-text-color: #212121;
  --dp-hover-color: #f3f3f3;
  --dp-hover-text-color: #212121;
  --dp-hover-icon-color: #97bf0d;
  --dp-primary-color: #212121;
  --dp-primary-text-color: #97bf0d;
  --dp-secondary-color: grey; /*disabled day*/
  --dp-border-color: #97bf0d;
  --dp-menu-border-color: #ddd;
  --dp-border-color-hover: #aaaeb7;
  --dp-disabled-color: grey;
  --dp-scroll-bar-background: #f3f3f3;
  --dp-scroll-bar-color: #959595;
  --dp-success-color: #97bf0d;
  --dp-success-color-disabled: #a3d9b1;
  --dp-icon-color: #959595;
  --dp-danger-color: #ff6f60;
  --dp-highlight-color: rgba(25, 118, 210, 0.1);
}
.errors{
  color: #D8000C;
  background-color: #FFBABA;
  text-align: center;
}
</style>
