@extends('layouts.superadmin.app')
@section('styles')

@endsection

@section('content')
<div class="content_area superAdmin create_new_post">

  <!-- ================= BREADCRUMB ================= -->
  <nav class="crumbs">
    <a href="#">Dashboard</a><span class="sep">›</span>
    <a href="#">Post Management</a><span class="sep">›</span>
    <span class="current">Create New Post</span>
  </nav>

  <!-- ================= FORM ================= -->
  <div class="form-section">
    <div class="card-head">Create New Post</div>

    <div class="row g-4">

      <!-- left : fields -->
      <div class="col-lg-6">
        <div class="mb-3">
          <label class="f-label" for="postTitle">Post Title</label>
          <input class="f-input" id="postTitle" type="text" placeholder="Cricket League">
        </div>

        <div class="row g-3 mb-3">
          <div class="col-sm-6">
            <label class="f-label" for="eventName">Event Name</label>
            <select class="f-select" id="eventName">
              <option selected>Video</option>
              <option>Match Highlight</option>
              <option>Announcement</option>
              <option>Promo</option>
            </select>
          </div>
          <div class="col-sm-6">
            <label class="f-label" for="leagueAssoc">League Association</label>
            <select class="f-select" id="leagueAssoc">
              <option selected>Sponsor Event</option>
              <option>Premier Pro League</option>
              <option>Elite Legends 2024</option>
              <option>Underdog Cup</option>
            </select>
          </div>
        </div>

        <div>
          <label class="f-label" for="postDesc">Description</label>
          <textarea class="f-textarea" id="postDesc" style="min-height:150px;"
            placeholder="Write a short summary or caption..."></textarea>
        </div>
      </div>

      <!-- right : media dropzone -->
      <div class="col-lg-6">
        <label class="f-label">Media Content</label>
        <div class="dropzone" id="dropzone">
          <div class="dz-icon">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 16V8m0 0-3.5 3.5M12 8l3.5 3.5M6.6 19h10.8A4.6 4.6 0 0 0 18 9.9 6 6 0 0 0 6.3 11 4 4 0 0 0 6.6 19Z" />
            </svg>
          </div>
          <div class="dz-title">Drag &amp; Drop media here</div>
          <div class="dz-sub">MP4, PNG, JPG up to 20MB</div>
          <input type="file" id="fileInput" accept=".mp4,.png,.jpg,.jpeg" hidden>
        </div>
        <div id="fileInfo" class="dz-sub mt-2"></div>
      </div>

    </div>

    <div class="d-flex justify-content-end mt-4">
      <button class="btn-lime" type="button" style="padding:.65rem 1.8rem;">Create Post</button>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const dz = document.getElementById('dropzone');
  const fileIn = document.getElementById('fileInput');
  const fileInfo = document.getElementById('fileInfo');
  const MAX_MB = 20;

  /* click → file picker */
  dz.addEventListener('click', () => fileIn.click());

  /* drag states */
  ['dragenter', 'dragover'].forEach(ev =>
    dz.addEventListener(ev, e => { e.preventDefault(); dz.classList.add('dragover'); })
  );
  ['dragleave', 'drop'].forEach(ev =>
    dz.addEventListener(ev, e => { e.preventDefault(); dz.classList.remove('dragover'); })
  );

  /* drop + select handle */
  dz.addEventListener('drop', e => handleFile(e.dataTransfer.files[0]));
  fileIn.addEventListener('change', () => handleFile(fileIn.files[0]));

  function handleFile(file) {
    if (!file) return;

    const okTypes = ['video/mp4', 'image/png', 'image/jpeg'];
    if (!okTypes.includes(file.type)) {
      fileInfo.textContent = '❌ Sirf MP4, PNG ya JPG allowed hai.';
      fileInfo.style.color = 'var(--red)';
      return;
    }
    if (file.size > MAX_MB * 1024 * 1024) {
      fileInfo.textContent = `❌ File ${MAX_MB}MB se badi hai (${(file.size / 1024 / 1024).toFixed(1)}MB).`;
      fileInfo.style.color = 'var(--red)';
      return;
    }

    fileInfo.textContent = `✓ ${file.name} (${(file.size / 1024 / 1024).toFixed(1)}MB)`;
    fileInfo.style.color = 'var(--lime)';

    /* image ho toh preview dikhao */
    if (file.type.startsWith('image/')) {
      const reader = new FileReader();
      reader.onload = e => {
        dz.innerHTML = `<img class="dz-preview" src="${e.target.result}" alt="preview">
                      <div class="dz-sub mt-2">Click to replace</div>`;
      };
      reader.readAsDataURL(file);
    } else {
      dz.innerHTML = `<div class="dz-icon">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="m10 9 5 3-5 3V9ZM4 6h16v12H4V6Z"/></svg>
      </div>
      <div class="dz-title">${file.name}</div>
      <div class="dz-sub">Click to replace</div>`;
    }
  }
</script>
@endsection

@section('scripts')

@endsection