{% load get_item %}
<form x-data="documentEditForm" method="post" enctype="multipart/form-data" class="w-full flex flex-col items-center justify-center gap-6">
  {% csrf_token %}
  <template x-for="(document, index) in documents" :key="index">
    <div x-data="{ open: true }" class="w-full outline outline-1 outline-offset-[-1px] outline-zinc-300 rounded-xl overflow-hidden">
      <div @click="open = !open" class="w-full flex items-center justify-between px-4 py-3 transition-all cursor-pointer">
        <div class="inline-flex justify-start items-center gap-1.5">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="32" rx="16" fill="#E5FFFF"/>
            <path d="M20 22.5C20.25 22.5 20.5 22.2812 20.5 22V13H18C17.4375 13 17 12.5625 17 12V9.5H12C11.7188 9.5 11.5 9.75 11.5 10V22C11.5 22.2812 11.7188 22.5 12 22.5H20ZM10 10C10 8.90625 10.875 8 12 8H17.1562C17.6875 8 18.1875 8.21875 18.5625 8.59375L21.4062 11.4375C21.7812 11.8125 22 12.3125 22 12.8438V22C22 23.125 21.0938 24 20 24H12C10.875 24 10 23.125 10 22V10Z" fill="#181F26"/>
          </svg>
          <div class="text-gray-900 text-sm font-medium">داکیومنت <span x-text="index + 1"></span></div>
        </div>
        <div class="flex flex-row items-center justify-end gap-6">
          <button type="button" @click="documents.splice(index, 1)" class="text-red-600 text-xs font-bold self-end mt-1">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="32" height="32" rx="16" fill="#FDE8E8"/>
              <path d="M14.7148 10.0625C14.6328 10.0625 14.5781 10.1172 14.5234 10.1719L14.0039 10.9375H17.9688L17.4492 10.1719C17.4219 10.1172 17.3398 10.0625 17.2578 10.0625H14.7148ZM19.5547 10.9375H19.9102H21.25H21.4688C21.8242 10.9375 22.125 11.2383 22.125 11.5938C22.125 11.9766 21.8242 12.25 21.4688 12.25H21.1406L20.4844 21.1367C20.4023 22.0664 19.6641 22.75 18.7344 22.75H13.2383C12.3086 22.75 11.5703 22.0664 11.4883 21.1367L10.832 12.25H10.5312C10.1484 12.25 9.875 11.9766 9.875 11.5938C9.875 11.2383 10.1484 10.9375 10.5312 10.9375H10.75H12.0625H12.418L13.4297 9.43359C13.7031 9.02344 14.1953 8.75 14.7148 8.75H17.2578C17.7773 8.75 18.2695 9.02344 18.543 9.43359L19.5547 10.9375ZM19.8281 12.25H12.1445L12.8008 21.0547C12.8281 21.2734 13.0195 21.4375 13.2383 21.4375H18.7344C18.9531 21.4375 19.1445 21.2734 19.1719 21.0547L19.8281 12.25Z" fill="#FF0000"/>
            </svg>
          </button>
          <svg :class="{ 'rotate-180': open }" class="w-5 h-5 text-slate-600 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </div>
      </div>
      <div x-show="open" x-collapse class="w-11/12 m-auto border-t-2 border-gray-200 py-4 bg-white flex flex-col gap-4">
        <div class="w-full">
          <label :for="'file_title_' + index" class="text-text1 text-sm bg-white px-1">عنوان فایل <span class="text-red-500">*</span></label>
          <input type="text" :id="'file_title_' + index" :name="'documents[' + index + '][file_title]'" placeholder="مثال: قرارداد همکاری" class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full placeholder:text-sm" required x-model="document.file_title">
        </div>
        <div class="w-full">
          <label :for="'file_desc_' + index" class="text-text1 text-sm bg-white px-1">توضیحات فایل <span class="text-red-500">*</span></label>
          <input type="text" :id="'file_desc_' + index" :name="'documents[' + index + '][file_desc]'" placeholder="مثال: توضیح مختصر درباره فایل" class="peer h-12 w-full px-3 mt-2 bg-transparent focus:border-pr-m transition-all duration-200 border-2 rounded-full placeholder:text-sm" required x-model="document.file_desc">
        </div>
        <div class="w-full flex flex-col items-start gap-1">
          <label :for="'file_' + index" class="text-text1 text-sm bg-white px-1">بارگذاری فایل <span class="text-red-500">*</span></label>
          <input type="file" :id="'file_' + index" :name="'documents[' + index + '][file]'" class="Dropify" x-bind:data-default-file="document.file_existing" :required="!document.file_existing">

          <template x-if="document.file_existing">
            <div class="text-xs mt-1 text-gray-600">فایل فعلی: <a :href="document.file_existing" target="_blank" class="text-blue-500 underline truncate max-w-xs" x-text="document.file_existing"></a></div>
          </template>
          <ul class="mt-2 list-disc pr-5">
            <li class="text-slate-400 text-xs font-normal pb-1">حداکثر حجم فایل ۴ مگابایت باشد.</li>
            <li class="text-slate-400 text-xs font-normal">فرمت‌های مجاز: jpg، jpeg، png</li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  <button type="button" @click="addDocument()" class="w-full mt-4 h-12 rounded-full bg-white border border-gray-900 text-gray-900 text-sm font-semibold flex flex-row items-center justify-center gap-2">
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M6.65625 0.71875V5.09375H11.0312C11.3867 5.09375 11.6875 5.39453 11.6875 5.75C11.6875 6.13281 11.3867 6.40625 11.0312 6.40625H6.65625V10.7812C6.65625 11.1641 6.35547 11.4375 6 11.4375C5.61719 11.4375 5.34375 11.1641 5.34375 10.7812V6.40625H0.96875C0.585938 6.40625 0.3125 6.13281 0.3125 5.75C0.3125 5.39453 0.585938 5.09375 0.96875 5.09375H5.34375V0.71875C5.34375 0.363281 5.61719 0.0625 6 0.0625C6.35547 0.0625 6.65625 0.363281 6.65625 0.71875Z" fill="#181F26"/>
    </svg>
    افزودن داکیومنت جدید
  </button>
  <div class="mt-10 flex flex-row items-center justify-center gap-2 absolute w-11/12 bottom-3">
    <button @click="activeModal = null" type="button" class="bg-white rounded-lg w-full h-14 flex items-center justify-center font-bold text-base text-blue1">انصراف</button>
    <input type="hidden" name="block_type" value="document">
    <input type="hidden" name="id" value="{{block.id}}">
    <input type="hidden" name="save_kind" value="update">
    <button type="submit" class="bg-pr-m w-full h-12 flex flex-row gap-2 rounded-full items-center justify-center">
      <span class="font-bold text-base text-black">ثبت نهایی</span>
    </button>
  </div>
</form>
<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('documentEditForm', () => ({
    documents: [
      {% for i in 50|range_filter %}
        {% with key_title=i|make_key:"file_title" %}
          {% with title=block.content|get_item:key_title %}
            {% if title %}
              {% with key_desc=i|make_key:"file_desc" %}
                {% with desc=block.content|get_item:key_desc %}
                  {% with key_file=i|make_key:"file" %}
                    {% with file=block.content|get_item:key_file %}
                      {
                        file_title: '{{ title|escapejs }}',
                        file_desc: '{{ desc|escapejs }}',
                        file_existing: '{{ file|escapejs }}'
                      },
                    {% endwith %}
                  {% endwith %}
                {% endwith %}
              {% endwith %}
            {% endif %}
          {% endwith %}
        {% endwith %}
      {% endfor %}
    ],
    init() {
      this.initDropify();
    },
    addDocument() {
      this.documents.push({});
      this.$nextTick(() => {
        this.initDropify();
      });
    },
    removeDocument(index) {
      this.documents.splice(index, 1);
    },
    initDropify() {
      setTimeout(() => {
        document.querySelectorAll('.Dropify').forEach(el => {
          if (!el.classList.contains('dropify-initialized')) {
            el.setAttribute('data-max-file-size', '4M');
            $(el).dropify({
              messages: {
                'default': 'فایل را انتخاب کنید',
                'replace': 'فایل را جایگزین کنید',
                'remove': 'حذف',
                'error': 'خطایی رخ داد.'
              },
              error: {
                'fileSize': 'حجم فایل بزرگ‌تر از ۴ مگابایت است.',
                'fileExtension': 'فرمت فایل مجاز نیست. فقط jpg، jpeg و png مجاز است.'
              }
            });
            el.classList.add('dropify-initialized');
          }
        });
      }, 50);
    }
  }));
});
</script>