<template>
  <div class="background">
     <main>
      <video controls width="640">
        <source src="/videos/video.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <ContentDoc />
      <div id="app">
        <h2>Ajouter un nouvel article</h2>
        <form @submit.prevent="addArticle">
          <div>
            <label for="title">Titre :</label>
            <input type="text" id="title" v-model="newArticle.title" required />
          </div>
          <div>
            <label for="content">Contenu :</label>
            <textarea id="content" v-model="newArticle.content" required></textarea>
          </div>
          <button type="submit">Ajouter l'article</button>
        </form>

        <h2> Nouveaux Articles </h2>
        <!-- Liste des articles -->
        <div v-for="(article, index) in articles" :key="index" class="article">
          <h3>{{ article.title }}</h3>
          <p>{{ article.content }}</p>
          <button @click="editArticle(index)">Modifier</button>
          <button @click="deleteArticle(index)">Supprimer</button>
        </div>

        <!-- Formulaire de modification -->
        <div v-if="isEditing" class="edit-form">
          <h2>Modifier l'article</h2>
          <form @submit.prevent="updateArticle">
            <div>
              <label for="edit-title">Titre :</label>
              <input type="text" id="edit-title" v-model="currentArticle.title" required />
            </div>
            <div>
              <label for="edit-content">Contenu :</label>
              <textarea id="edit-content" v-model="currentArticle.content" required></textarea>
            </div>
            <button type="submit">Mettre à jour</button>
          </form>
        </div>
      </div>

      <section class="forum">
        <h2>Forum Public</h2>
        <!-- Forum content -->
        <div v-for="(post, index) in posts" :key="index" class="post">
          <p><strong>Article {{ post.articleNumber }}:</strong></p>
          <div class="actions">
            <button @click="upvote(index)">👍 {{ post.votes }}</button>
            <button @click="downvote(index)">👎</button>
          </div>
          <textarea v-model="replies[index]" placeholder="Commentaires..."></textarea>
          <button @click="addReply(index)">Commenter</button>
          <div v-if="post.replies.length > 0" class="replies">
            <h4>Commentaires :</h4>
            <ul class="no-spacing">
              <li v-for="(reply, rIndex) in post.replies" :key="rIndex">
                {{ reply.content }} - <em>{{ reply.date }}</em>
              </li>
            </ul>
          </div>
        </div>
      </section>
      <section class="signature">
  <h2>Signer la Charte</h2>
  <form @submit.prevent="submitSignature">
    <input v-model="name" placeholder="Nom complet" required />
    <input v-model="email" type="email" placeholder="Email" required />
    <textarea v-model="comment" placeholder="Ajouter un commentaire"></textarea>
    <button type="submit">Signer</button>
  </form>
  <p v-if="signatureSuccess">Merci pour votre signature, {{ name }} !</p>
  <div v-if="signatures.length">
    <h3>Signatures enregistrées :</h3>
    <ul>
      <li v-for="signature in signatures" :key="signature.email">
        <strong>{{ signature.name }}</strong> - {{ signature.comment }} - <em>{{ signature.date }}</em>
      </li>
    </ul>
  </div>
</section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newArticle: { title: "", content: "" },
      articles: [],
      isEditing: false,
      currentArticle: null,
      currentArticleIndex: null,
      posts: Array.from({ length: 20 }, (_, i) => ({
        articleNumber: i + 1,
        votes: 0,
        replies: [],
      })),
      replies: [],
      signatures: [], // Initialize signatures as an empty array
      signatureSuccess: false,
    };
  },
  methods: {
    addArticle() {
      if (this.newArticle.title && this.newArticle.content) {
        this.articles.push({ ...this.newArticle });
        this.newArticle.title = "";
        this.newArticle.content = "";
      } else {
        alert("Veuillez remplir tous les champs.");
      }
    },
    deleteArticle(index) {
      this.articles.splice(index, 1);
    },
    editArticle(index) {
      this.isEditing = true;
      this.currentArticleIndex = index;
      this.currentArticle = { ...this.articles[index] };
    },
    updateArticle() {
      if (this.currentArticle && this.currentArticle.title && this.currentArticle.content) {
        // Met à jour l'article dans la liste
        this.articles[this.currentArticleIndex] = { ...this.currentArticle };
        // Réinitialise les variables
        this.isEditing = false;
        this.currentArticle = null;
        this.currentArticleIndex = null;
      } else {
        alert("Veuillez remplir tous les champs avant de mettre à jour.");
      }
    },
    cancelEdit() {
      this.isEditing = false;
      this.currentArticle = null;
      this.currentArticleIndex = null;
    },
    upvote(index) {
      this.posts[index].votes++;
    },
    downvote(index) {
      this.posts[index].votes--;
    },
    addReply(index) {
      if (this.replies[index]?.trim()) {
        this.posts[index].replies.push({
          content: this.replies[index],
          date: new Date().toLocaleString(),
        });
        this.replies[index] = "";
      }
    },
    submitSignature() {
      if (this.name && this.email) {
        this.signatures.push({
          name: this.name,
          email: this.email,
          comment: this.comment,
          date: new Date().toLocaleString(),
        });
        this.signatureSuccess = true;

        // Clear the input fields after successful submission
        this.name = "";
        this.email = "";
        this.comment = "";
      } else {
        alert("Veuillez remplir tous les champs obligatoires !");
      }
    },
  },
};
</script>

<style scoped>
.article {
  margin-bottom: 20px;
  margin: 20px ;
}
.edit-form {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.post {
  border: 1px solid #F5F5F5;
  padding: 10px;
  margin-bottom: 10px;
}
.replies {
  margin-top: 10px;
}
.signature {
  margin: 20px 0;
}

/* Styles généraux */
.background {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #F5F5F5;
}

/* Section Forum */
.forum {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #474405;
  border-radius: 8px;
  background-color: #F5F5F5;
  margin-bottom: 5cm;
}

.forum h2 {
  font-size: 24px;
  color: #6A994E;
  margin-bottom: 15px;
}

.post {
  border: 1px solid#474405;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
  background-color: #F5F5F5;
}

.post p {
  font-size: 16px;
  color: #474405;
  margin: 0 0 10px;
}

.post .actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.post .actions button {
  background-color: #8B5E3C;
  color: #F5F5F5;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

.post .actions button:hover {
  background-color: #e6ee0d;
}

textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  font-size: 14px;
  border: 1px solid #474405;
  border-radius: 4px;
  resize: vertical;
}

button {
  background-color: #6A994E;
  color: #F5F5F5;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

/* Réponses */
.replies {
  margin-top: 15px;
  padding-left: 10px;
  border-left: 2px solid #8B5E3C;
}

.replies h4 {
margin-bottom: 5px;
  font-size: 18px;
  color: #474405;
}

.replies ul {
  padding-left: 15px;
}

.replies li {
  font-size: 14px;
  color: #8B5E3C;
  margin-bottom: 5px;
}

/* Section Signatures */
.signature {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #474405;
  border-radius: 8px;
  background-color: #F5F5F5;
  margin-bottom: 1cm;
}

.signature h2 {
  font-size: 24px;
  color: #6A994E;
  margin-bottom: 15px;
}

.signature form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signature input,
.signature textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #474405;
  border-radius: 4px;
  font-size: 14px;
}

.signature button {
  align-self: flex-start;
}

.signature ul {
  margin-top: 15px;
  list-style: none;
  padding: 0;
  
}
h3{
  color: #6A994E;
}

.signature ul li {
  font-size: 16px;
  color:#474405;
  padding: 5px 0;
  border-bottom: 1px solid #474405;
}

.signature ul li:last-child {
  border-bottom: none;
  
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #6A994E;
  margin-top: 4cm;
  border: 1px solid #474405;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 5cm;
 
}

label {
  display: block;
  margin-bottom: 5px;
  color: #474405;
  
}
input,
textarea {
  padding: 8px;
  margin-bottom: 10px;
  width: 100%;
  margin-top: 5px;
  font-size: 10px;
  resize: vertical;
 
  
}
button {
  padding: 10px 20px;
  background-color: #6A994E;
  color: white;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #218838;
}
form {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #474405;
  border-radius: 8px;
  background-color: #F5F5F5;
  margin-bottom: 1cm;
  
 }
 h3{
  color: #474405;
 }
 button {
  margin-right: 10px; /* Espace à droite du bouton */
}

/* Exemple spécifique pour le deuxième bouton */
button:last-child {
  margin-right: 0; /* Pas d'espace après le dernier bouton */
}
</style>


