@props([
  'id','name','preview','required',
  'maxSize','maxDuration','label','helper'
])

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

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

    {{-- instructions --}}
    <div id="info_{{ $id }}" class="dz-info">
      <i class="bi bi-cloud-upload" style="font-size:2rem; color:#777;"></i>
      <div class="dz-text">Drop or Click to Upload Video</div>
      <small class="dz-size text-muted">
        Max {{ round($maxSize/1024,1) }} MB, {{ $maxDuration }} s
      </small>
      @if($helper)
        <div class="dz-helper" style="font-size:12px; color:#888;">{{ $helper }}</div>
      @endif
    </div>

    {{-- video preview --}}
    <video
      id="preview_{{ $id }}"
      class="dz-preview"
      controls
      src="{{ $preview ?? '' }}"
      style="opacity:{{ $preview?1:0 }}"
    ></video>

    {{-- metadata --}}
    <div id="meta_{{ $id }}" class="dz-meta">
      <span id="duration_{{ $id }}">--:--</span> |
      <span id="size_{{ $id }}">-- MB</span>
    </div>

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

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

@once
<style>
  .dropzone-video-wrapper {
    position: relative;
    width: 100%; max-width: 480px; height: 270px;
    border: 2px dashed #ccc; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer;
  }
  .dropzone-video-wrapper.dropzone-hover {
    border-color: #5F2DEE;
    background: #f5f2ff;
  }
  .dz-info {
    position: absolute; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
  }
  .dz-text { font-size: 16px; color: #777; margin-top:4px; }
  .dz-size { font-size: 13px; color: #5F2DEE; margin-top:4px; }
  .dz-helper { margin-top:4px; }
  .dz-preview {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; transition: opacity .3s;
    z-index: 2;
  }
  .dz-meta {
    position: absolute; bottom: 8px; left: 8px;
    background: rgba(0,0,0,0.6); color: #fff;
    padding: 4px 8px; border-radius: 4px; font-size: 12px;
    display: none; z-index: 3;
  }
  .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: 4; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function(){
  const wrap     = document.getElementById('{{ $id }}');
  const info     = document.getElementById('info_{{ $id }}');
  const preview  = document.getElementById('preview_{{ $id }}');
  const meta     = document.getElementById('meta_{{ $id }}');
  const durSpan  = document.getElementById('duration_{{ $id }}');
  const sizeSpan = document.getElementById('size_{{ $id }}');
  const remove   = document.getElementById('remove_{{ $id }}');
  const input    = document.getElementById('input_{{ $id }}');
  const oldInp   = document.getElementById('old_{{ $id }}');
  const maxKB    = {{ $maxSize }};
  const maxSec   = {{ $maxDuration }};
  const isReq    = wrap.dataset.required==='1';

  // show remove/meta if initial preview
  if (preview.src && parseFloat(preview.style.opacity)===1) {
    remove.style.display = 'block';
    meta.style.display   = 'block';
    // set metadata from URL not possible, so leave --:-- and --MB
    info.style.display   = 'none';
  }

  // click to select
  wrap.addEventListener('click', ()=> input.click());

  // handle file
  input.addEventListener('change', function(){
    const file = this.files[0];
    if (!file || !file.type.startsWith('video/')) {
      promptify({
            icon:'warning',
            text:`Only video files allowed.`,
        });
      return;
    }
    const sizeKB = Math.round(file.size/1024);
    if (sizeKB>maxKB) {
      promptify({
            icon:'warning',
            text:`File too large (${(sizeKB/1024).toFixed(1)}MB), max ${(maxKB/1024).toFixed(1)}MB.`,
        });
      this.value=''; return;
    }
    const url = URL.createObjectURL(file);
    preview.src = url;
    preview.style.opacity = 1;
    info.style.display = 'none';
    remove.style.display = 'block';

    preview.onloadedmetadata = function(){
      const sec = Math.floor(preview.duration);
      if (sec>maxSec) {
        promptify({
            icon:'warning',
            text: `Video too long (${sec}s), max ${maxSec}s.`,
        });
        remove.click();
        return;
      }
      const m = String(Math.floor(sec/60)).padStart(2,'0'),
            s = String(sec%60).padStart(2,'0');
      durSpan.textContent = `${m}:${s}`;
      sizeSpan.textContent= `${(sizeKB/1024).toFixed(1)} MB`;
      meta.style.display = 'block';
      if (oldInp) { oldInp.value=''; oldInp.disabled=true; }
    };
  });

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

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

  // enforce required
  if (isReq) {
    document.addEventListener('submit', 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 select a value for ' + label,
        });
      }
    });
  }
});
</script>
@endonce