{% extends 'core/base/base.html' %}
{% load static %}

{% block content %}

<script src="{% static 'assets/js/simple-datatables.js' %}"></script>

<div class="panel mt-6">
    <div x-data="mediaManager()" tabindex="4" class="media-manager">
        <div>
          <input type="file" multiple @change="uploadFiles($event)" />
        </div>
        <div class="media-list grid grid-cols-4 gap-4 mt-4">
          <template x-for="media in medias" :key="media.id">
            <div class="media-item border p-2 rounded cursor-pointer" @click="selectMedia(media)">
              <img :src="media.url" alt="" class="w-full h-32 object-cover" />
              <div class="mt-1 text-sm" x-text="media.title || 'بدون عنوان'"></div>
            </div>
          </template>
        </div>
        <div x-show="selectedMedia" class="media-detail p-4 mt-4 border rounded">
          <h3>جزئیات تصویر</h3>
          <label>عنوان:</label>
          <input type="text" x-model="selectedMedia.title" @change="updateMedia(selectedMedia)" />
          <label>نام جایگزین:</label>
          <input type="text" x-model="selectedMedia.alt_text" @change="updateMedia(selectedMedia)" />
          <label>توضیح:</label>
          <textarea x-model="selectedMedia.caption" @change="updateMedia(selectedMedia)"></textarea>
        </div>
      </div>
      
      <script>
      function mediaManager(){
        return {
          medias: [],
          selectedMedia: null,
          init() {
            fetch('/media/list/').then(res => res.json()).then(data => {
              this.medias = data.medias;
            });
          },
          uploadFiles(event) {
            const files = event.target.files;
            const formData = new FormData();
            for(let i=0; i<files.length; i++){
              formData.append('files[]', files[i]);
            }
            fetch('/media/upload/', {
              method: 'POST',
              body: formData,
              headers: {'X-CSRFToken': getCookie('csrftoken')},
            }).then(res => res.json()).then(data => {
              this.medias = this.medias.concat(data.medias);
            });
          },
          selectMedia(media) {
            this.selectedMedia = {...media};
          },
          updateMedia(media) {
            // TODO: ارسال آپدیت عنوان و alt و کپشن به سرور (مثلاً با fetch)
          }
        }
      }
      
      function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for(let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
              break;
            }
          }
        }
        return cookieValue;
      }
      </script>
      
</div>


{% endblock %}