@props([
  'id','name','placeholder','preview','required',
  'sizeLabel','label','helper'
])

<div class="mb-3">
  <label class="form-label">{{ $label }}</label>

  <div
    id="{{ $id }}"
    class="dropzone-image-wrapper"
    data-required="{{ $required ? '1':'0' }}"
  >
    {{-- old value --}}
    @if($preview)
      <input type="hidden" name="old_{{ $name }}" id="old_{{ $id }}" value="{{ $preview }}">
    @endif

    {{-- instructions --}}
    <div id="info_{{ $id }}" class="dz-info">
      <img src="{{ asset($placeholder) }}" class="dz-icon" alt="">
      <div class="dz-text">Drop or Click to Upload</div>
      <div class="dz-size img-lable">{{ $sizeLabel }} <span class="text-muted">(Recommended)</span></div>
    </div>

    {{-- preview --}}
    <img
      id="preview_{{ $id }}"
      src="{{ $preview ?? '' }}"
      class="dz-preview"
      style="opacity: {{ $preview?1:0 }};"
      alt="preview"
    >

    {{-- remove --}}
    <button type="button" id="remove_{{ $id }}" class="dz-remove">&times;</button>

    {{-- file input --}}
    <input type="file" id="input_{{ $id }}" name="{{ $name }}" accept="image/*" class="d-none">
  </div>
</div>


<style>
  .dropzone-image-wrapper {
    position: relative;
    width: 100%; max-width: 300px; height: 200px;
    border: 2px dashed #ccc; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer;
  }
  .dropzone-image-wrapper.dropzone-hover {
    border-color: #5F2DEE;
    background: #f5f2ff;
  }
  .dz-info {
    position: absolute; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
  }
  .dz-icon { width: 60px; opacity: 0.7; margin-bottom: 8px; }
  .dz-text { font-size: 16px; color: #777; }
  .dz-size { font-size: 13px; color: #5F2DEE; margin-top: 4px; }
  .dz-preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .3s;
    z-index: 2;
  }
  .dz-remove {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%; background: #fff;
    color: #888; font-size: 18px; line-height: 1;
    display: none; z-index: 3; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function(){
  const wrapper = document.getElementById('{{ $id }}');
  const info    = document.getElementById('info_{{ $id }}');
  const preview = document.getElementById('preview_{{ $id }}');
  const remove  = document.getElementById('remove_{{ $id }}');
  const input   = document.getElementById('input_{{ $id }}');
  const oldInp  = document.getElementById('old_{{ $id }}');
  const isReq   = wrapper.dataset.required === '1';

  // show remove if initial preview exists
  if (preview.getAttribute('src') && parseFloat(preview.style.opacity) === 1) {
    remove.style.display = 'block';
    info.style.display   = 'none';
  }

  // click to open file dialog
  wrapper.addEventListener('click', () => input.click());

  // handle file selection
  input.addEventListener('change', function(){
    const file = this.files[0];
    if (!file || !file.type.startsWith('image/')) {
       promptify({
            icon:'warning',
            text: 'Only images allowed.',
        });
      return;
    }
    const reader = new FileReader();
    reader.onload = function(ev){
      preview.src = ev.target.result;
      preview.style.opacity = 1;
      info.style.display = 'none';
      remove.style.display = 'block';
      if (oldInp) {
        oldInp.value = '';
        oldInp.disabled = true;
      }
    };
    reader.readAsDataURL(file);
  });

  // drag & drop
  ['dragover','dragleave','drop'].forEach(evt => {
    wrapper.addEventListener(evt, function(e){
      e.preventDefault();
      wrapper.classList.toggle('dropzone-hover', evt === 'dragover');
      if (evt === 'drop') {
        input.files = e.dataTransfer.files;
        input.dispatchEvent(new Event('change'));
      }
    });
  });

  // remove preview
  remove.addEventListener('click', function(e){
    e.stopPropagation();
    preview.src = '';
    preview.style.opacity = 0;
    remove.style.display = 'none';
    info.style.display = 'flex';
    input.value = '';
    if (oldInp) {
      oldInp.value = '';
      oldInp.disabled = true;
    }
  });

  // enforce required on submit (global listener)
  if (isReq) {
         const form = wrapper.closest('form');

    if (form) {
      form.addEventListener('submit', function(e){
        const hasNew = input.files.length > 0;
        const hasOld = oldInp && !oldInp.disabled && oldInp.value;

        if (!hasNew && !hasOld) {
          e.preventDefault();
          e.stopImmediatePropagation();
          promptify({
              icon:'info',
              text: 'Please Choose {{ $label }}',
          });
        }
      });
    }
  }
});
</script>