<?= $this->extend('layouts/admin') ?>

<?= $this->section('admin_content') ?>
<div class="grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-8 mb-8 items-start">
  
  <!-- Upload Form Card -->
  <div class="bg-white border border-gold/15 rounded-2xl p-6 shadow-sm">
    <h2 class="text-base font-bold text-charcoal mb-5 flex items-center gap-2">
      <i data-lucide="upload-cloud" class="w-5 h-5 text-saffron"></i>
      Upload New Gallery Image
    </h2>
    <form action="<?= base_url('admin/gallery/upload') ?>" method="POST" enctype="multipart/form-data" class="flex flex-col gap-4">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-[0.8rem] uppercase font-semibold text-charcoal-light mb-1.5 tracking-wider">Image Title</label>
          <input 
            type="text" 
            name="title" 
            required 
            placeholder="e.g. Wedding Mandap Setup" 
            class="w-full px-4 py-2.5 border border-gold/25 focus:border-saffron rounded-xl outline-none focus:ring-2 focus:ring-saffron-light/20 text-sm transition-all duration-200"
          />
        </div>
        <div>
          <label class="block text-[0.8rem] uppercase font-semibold text-charcoal-light mb-1.5 tracking-wider">Category</label>
          <select 
            name="category" 
            required 
            class="w-full px-4 py-2.5 border border-gold/25 focus:border-saffron bg-white rounded-xl outline-none focus:ring-2 focus:ring-saffron-light/20 text-sm transition-all duration-200"
          >
            <option value="Decor">Decor</option>
            <option value="Catering">Catering</option>
            <option value="Ceremonies">Ceremonies</option>
          </select>
        </div>
      </div>

      <div>
        <label class="block text-[0.8rem] uppercase font-semibold text-charcoal-light mb-1.5 tracking-wider">Select Image File</label>
        <div class="border-2 border-dashed border-gold/20 rounded-xl p-6 hover:border-gold/50 transition-colors bg-gold-light/5 text-center flex flex-col items-center justify-center gap-2 cursor-pointer" id="file-dropzone" style="position:relative; overflow:hidden;">
          <i data-lucide="image" class="w-8 h-8 text-gold pointer-events-none"></i>
          <span class="text-xs font-semibold text-charcoal-light pointer-events-none" id="file-name-text">Click to choose image or drag &amp; drop</span>
          <span class="text-[10px] text-charcoal-muted pointer-events-none">PNG, JPG, JPEG, WEBP up to 4MB</span>
          <input 
            type="file" 
            name="image" 
            id="image-file-input"
            required 
            accept="image/*" 
            style="position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:1;"
          />
        </div>
      </div>

      <button type="submit" class="inline-flex items-center justify-center gap-2 bg-saffron hover:bg-saffron-dark text-white py-3 rounded-xl font-medium text-sm tracking-wide shadow-[0_4px_10px_rgba(227,30,36,0.15)] hover:-translate-y-0.5 mt-2 transition-all duration-300">
        <i data-lucide="plus" class="w-4 h-4"></i>
        Add to Gallery
      </button>
    </form>
  </div>

  <!-- Info / Guidelines Card -->
  <div class="bg-white border border-gold/15 rounded-2xl p-6 shadow-sm flex flex-col gap-4">
    <h2 class="text-base font-bold text-charcoal flex items-center gap-2">
      <i data-lucide="info" class="w-5 h-5 text-gold"></i>
      Upload Guidelines
    </h2>
    <ul class="text-xs text-charcoal-light space-y-3 font-light leading-relaxed">
      <li class="flex items-start gap-2.5">
        <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
        <span><strong>Standard Dimension:</strong> For optimal rendering across the event gallery, use images with a landscape aspect ratio of 4:3 or 16:9.</span>
      </li>
      <li class="flex items-start gap-2.5">
        <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
        <span><strong>Size Limit:</strong> Files must be under 4MB. Large files will slow down page loading speeds for visitors.</span>
      </li>
      <li class="flex items-start gap-2.5">
        <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0"></i>
        <span><strong>Dynamic Categories:</strong> Select appropriate categories (Decor, Catering, Ceremonies) to ensure images appear under the correct gallery filters.</span>
      </li>
    </ul>
  </div>

</div>

<!-- Gallery Grid -->
<div class="bg-white border border-gold/15 rounded-2xl p-6 shadow-sm">
  <h2 class="text-base font-bold text-charcoal mb-6 flex items-center gap-2">
    <i data-lucide="images" class="w-5 h-5 text-saffron"></i>
    Gallery Collection
  </h2>

  <?php if (empty($items)): ?>
    <div class="text-center py-12 text-charcoal-muted font-light text-sm">
      No images uploaded to the gallery yet.
    </div>
  <?php else: ?>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <?php foreach ($items as $item): ?>
        <div class="bg-gold-light/10 border border-gold/10 hover:border-gold/30 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 flex flex-col">
          <!-- Thumbnail Image -->
          <div class="aspect-[4/3] w-full overflow-hidden bg-[#faf7f2] rounded-t-xl relative">
            <img 
              src="<?= esc($item['image_path']) ?>" 
              alt="<?= esc($item['title']) ?>" 
              class="w-full h-full object-cover transition-transform duration-300"
              onerror="this.src='<?= base_url('images/placeholder.png') ?>'; this.onerror=null;"
            />
            <!-- Category Tag -->
            <span class="absolute top-3 left-3 px-2 py-0.5 text-[10px] font-bold rounded bg-charcoal/80 text-gold backdrop-blur-sm tracking-wide uppercase">
              <?= esc($item['category']) ?>
            </span>
          </div>

          <!-- Description and Delete Action -->
          <div class="p-4 flex flex-col justify-between gap-3 flex-grow">
            <div>
              <h3 class="font-semibold text-charcoal text-sm truncate" title="<?= esc($item['title']) ?>">
                <?= esc($item['title']) ?>
              </h3>
              <p class="text-[10px] text-charcoal-muted mt-1 font-light flex items-center gap-1">
                <i data-lucide="calendar" class="w-3 h-3"></i>
                Uploaded: <?= date('d M Y', strtotime($item['created_at'])) ?>
              </p>
            </div>

            <div class="flex justify-end pt-2 border-t border-gold/10" style="position:relative; z-index:10;">
              <button 
                type="button"
                onclick="deleteGalleryImage(<?= (int)$item['id'] ?>, '<?= base_url('admin/gallery/delete/' . (int)$item['id']) ?>')"
                style="cursor:pointer; pointer-events:auto;"
                class="text-red-500 hover:text-white hover:bg-red-500 border border-red-200 hover:border-red-500 px-3 py-1.5 rounded-lg text-xs font-medium flex items-center gap-1 transition-all"
              >
                <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                Delete
              </button>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>
<?= $this->endSection() ?>

<?= $this->section('admin_scripts') ?>
<script>
  // Delete gallery image via JS-driven form submission
  function deleteGalleryImage(id, url) {
    if (!confirm('Are you sure you want to delete this image? This cannot be undone.')) {
      return;
    }
    var form = document.createElement('form');
    form.method = 'POST';
    form.action = url;
    form.style.display = 'none';
    document.body.appendChild(form);
    form.submit();
  }

  // Show filename in upload zone when selected
  document.addEventListener('DOMContentLoaded', function() {
    var fileInput = document.getElementById('image-file-input');
    var fileNameText = document.getElementById('file-name-text');
    
    if (fileInput) {
      fileInput.addEventListener('change', function() {
        if (fileInput.files.length > 0) {
          fileNameText.textContent = fileInput.files[0].name;
          fileNameText.style.color = '#e31e24';
          fileNameText.style.fontWeight = 'bold';
        } else {
          fileNameText.textContent = 'Click to choose image or drag & drop';
          fileNameText.style.color = '';
          fileNameText.style.fontWeight = '';
        }
      });
    }
  });
</script>
<?= $this->endSection() ?>
