<template>
    <div>
      <h1>Bild hochladen</h1>
      <form @submit.prevent="uploadImage">
        <div>
          <label for="title">Titel</label>
          <input type="text" id="title" v-model="title" />
        </div>
        <div>
          <label for="description">Beschreibung</label>
          <textarea id="description" v-model="description"></textarea>
        </div>
        <div>
          <label for="image">Bild</label>
          <input type="file" id="image" @change="onFileChange" />
        </div>
        <div>
          <label for="page">Seite</label>
          <select id="page" v-model="selectedPage">
            <option value="">Keine Seite</option>
            <option v-for="page in pages" :key="page.id" :value="page.id">{{ page.title }}</option>
          </select>
        </div>
        <button type="submit">Hochladen</button>
      </form>
  
      <div v-if="images.length">
        <h2>Hochgeladene Bilder</h2>
        <div v-for="image in images" :key="image.id" class="uploaded-image">
          <img :src="`/images/uploads/${image.filename}`" :alt="image.title" width="100" />
          <input type="text" v-model="image.title" @change="updateImage(image)" />
          <textarea v-model="image.description" @change="updateImage(image)"></textarea>
          <p>{{ formatDate(image.uploadDate) }} {{ formatTimeFromDate(image.uploadDate) }}</p>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from '../../axios';
  import { formatDate, formatTimeFromDate } from '@/utils/strings'
  
  export default {
    name: 'ImageUpload',
    data() {
      return {
        title: '',
        description: '',
        image: null,
        selectedPage: '',
        pages: [],
        images: []
      };
    },
    methods: {
      formatDate,
      formatTimeFromDate,
      onFileChange(e) {
        this.image = e.target.files[0];
      },
      async uploadImage() {
        const formData = new FormData();
        formData.append('title', this.title);
        formData.append('description', this.description);
        formData.append('image', this.image);
        formData.append('pageId', this.selectedPage);
  
        try {
          await axios.post('/image/', formData);
          this.fetchImages();
          this.resetForm();
        } catch (error) {
          console.error('Fehler beim Hochladen des Bildes:', error);
        }
      },
      async fetchImages() {
        try {
          const response = await axios.get('/image');
          this.images = response.data;
        } catch (error) {
          console.error('Fehler beim Abrufen der Bilder:', error);
        }
      },
      async fetchPages() {
        try {
          const response = await axios.get('/image/pages');
          this.pages = response.data;
        } catch (error) {
          console.error('Fehler beim Abrufen der Seiten:', error);
        }
      },
      async updateImage(image) {
        try {
          await axios.put(`/image/${image.id}`, {
            title: image.title,
            description: image.description
          });
          this.fetchImages();
        } catch (error) {
          console.error('Fehler beim Aktualisieren des Bildes:', error);
        }
      },
      resetForm() {
        this.title = '';
        this.description = '';
        this.image = null;
        this.selectedPage = '';
        document.getElementById('image').value = null;
      }
    },
    mounted() {
      this.fetchImages();
      this.fetchPages();
    }
  };
  </script>
  
  <style scoped>
  form div {
    margin-bottom: 10px;
  }
  .uploaded-image {
    display: inline-block;
    margin: 0 0 0.5em 0.5em;
    border: 1px solid #e0e0e0;
    padding: 10px;
  }
  .uploaded-image input,
  .uploaded-image textarea {
    width: 100%;
    margin: 5px 0;
  }
  </style>
  