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

<?= $this->section('admin_content') ?>
<div class="grid grid-cols-1 lg:grid-cols-[1.3fr_0.7fr] gap-8 mb-8 items-start">
  
  <!-- Add/Edit Form Card -->
  <div class="bg-white border border-gold/15 rounded-2xl p-6 shadow-sm" id="form-card">
    <h2 class="text-base font-bold text-charcoal mb-5 flex items-center gap-2" id="form-card-title">
      <i data-lucide="plus-circle" class="w-5 h-5 text-saffron"></i>
      Add New Menu Package
    </h2>
    <form action="<?= base_url('admin/menu/save') ?>" method="POST" class="flex flex-col gap-4">
      <!-- Hidden ID input for editing -->
      <input type="hidden" name="id" id="form-package-id" value="">

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-[0.8rem] uppercase font-semibold text-charcoal-light mb-1.5 tracking-wider">Package Name</label>
          <input 
            type="text" 
            name="name" 
            id="form-package-name"
            required 
            placeholder="e.g. Maharaja Sadhya Feast" 
            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" 
            id="form-package-category"
            required 
            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 bg-white"
          >
            <option value="Breakfast">Breakfast</option>
            <option value="Lunch">Lunch</option>
            <option value="Reception">Reception</option>
          </select>
        </div>
        <div>
          <label class="block text-[0.8rem] uppercase font-semibold text-charcoal-light mb-1.5 tracking-wider">Price per Plate (Rs.)</label>
          <input 
            type="number" 
            name="price" 
            id="form-package-price"
            required 
            placeholder="e.g. 450" 
            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>

      <div>
        <label class="block text-[0.8rem] uppercase font-semibold text-charcoal-light mb-1.5 tracking-wider">Short Description</label>
        <textarea 
          name="description" 
          id="form-package-description"
          required 
          placeholder="Brief summary of the package style, catering theme..." 
          class="w-full h-20 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 resize-y transition-all duration-200"
        ></textarea>
      </div>

      <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">Menu Items (One per line)</label>
          <textarea 
            name="items" 
            id="form-package-items"
            required 
            placeholder="Masaala Vada&#10;Semiya Payasam&#10;Chitranna&#10;Pineapple Gojju..." 
            class="w-full h-40 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 resize-y font-mono transition-all duration-200"
          ></textarea>
        </div>
        <div>
          <label class="block text-[0.8rem] uppercase font-semibold text-charcoal-light mb-1.5 tracking-wider">Included Services (One per line)</label>
          <textarea 
            name="services" 
            id="form-package-services"
            placeholder="Banana Leaf Service&#10;Uniformed Servers&#10;Welcome Drink Counter&#10;Mineral Water Supply..." 
            class="w-full h-40 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 resize-y font-mono transition-all duration-200"
          ></textarea>
        </div>
      </div>

      <div class="flex gap-3 mt-2">
        <button type="submit" id="form-submit-btn" class="flex-grow 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 transition-all duration-300">
          <i data-lucide="plus" class="w-4 h-4"></i>
          Create Package
        </button>
        <button type="button" id="form-cancel-btn" onclick="cancelEdit()" class="hidden px-5 py-3 border border-gray-200 hover:bg-gray-50 rounded-xl text-charcoal-light text-sm font-semibold transition-all">
          Cancel
        </button>
      </div>
    </form>
  </div>

  <!-- 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>
      Form Rules
    </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>Newline Delimiter:</strong> Type each menu item or service on a new line. The system automatically converts them into an array list to render cleanly on the Menu page.</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>Price:</strong> Enter the base price per plate in Indian Rupees. The frontend calculator computes total event catering costs based on guest counts.</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 Updates:</strong> Any additions or modifications here will instantly reflect inside the Menu page on the live site.</span>
      </li>
    </ul>
  </div>

</div>

<!-- Packages List -->
<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="archive" class="w-5 h-5 text-saffron"></i>
    Current Menu Packages
  </h2>

  <?php if (empty($packages)): ?>
    <div class="text-center py-12 text-charcoal-muted font-light text-sm">
      No menu packages found. Click above to create one.
    </div>
  <?php else: ?>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <?php foreach ($packages as $pkg): 
        $itemsArr = json_decode($pkg['items'] ?? '[]');
        $servicesArr = json_decode($pkg['services'] ?? '[]');
      ?>
        <div class="bg-gold-light/10 border border-gold/10 hover:border-gold/30 rounded-2xl p-6 shadow-sm hover:shadow-md transition-all duration-300 flex flex-col justify-between gap-6">
          <div class="flex flex-col gap-4">
            <!-- Header -->
            <div class="flex justify-between items-start gap-4">
              <div>
                <div class="flex items-center gap-2 flex-wrap mb-1">
                  <h3 class="font-bold text-charcoal text-base leading-tight"><?= esc($pkg['name']) ?></h3>
                  <span class="text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-gold/10 text-gold-dark border border-gold/20 flex-shrink-0">
                    <?= esc($pkg['category'] ?? 'Lunch') ?>
                  </span>
                </div>
                <p class="text-xs text-charcoal-light font-light mt-1"><?= esc($pkg['description']) ?></p>
              </div>
              <span class="text-sm font-bold text-saffron bg-saffron-light/50 px-3 py-1 rounded-full border border-saffron/10 flex-shrink-0">
                Rs. <?= esc($pkg['price']) ?>/pl
              </span>
            </div>

            <!-- Grid Items / Services -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2 border-t border-gold/10 text-xs">
              <!-- Items -->
              <div>
                <h4 class="font-semibold text-charcoal mb-2 flex items-center gap-1.5 uppercase tracking-wider text-[10px]">
                  <i data-lucide="utensils" class="w-3.5 h-3.5 text-gold-dark"></i>
                  Menu Items (<?= count($itemsArr) ?>)
                </h4>
                <ul class="space-y-1.5 text-charcoal-light font-light">
                  <?php foreach (array_slice($itemsArr, 0, 8) as $item): ?>
                    <li class="flex items-center gap-1.5 truncate">
                      <i data-lucide="chevron-right" class="w-3 h-3 text-gold"></i>
                      <?= esc($item) ?>
                    </li>
                  <?php endforeach; ?>
                  <?php if (count($itemsArr) > 8): ?>
                    <li class="text-[10px] text-charcoal-muted italic pl-4">
                      + <?= count($itemsArr) - 8 ?> more items
                    </li>
                  <?php endif; ?>
                </ul>
              </div>

              <!-- Services -->
              <div>
                <h4 class="font-semibold text-charcoal mb-2 flex items-center gap-1.5 uppercase tracking-wider text-[10px]">
                  <i data-lucide="sparkles" class="w-3.5 h-3.5 text-saffron"></i>
                  Services (<?= count($servicesArr) ?>)
                </h4>
                <ul class="space-y-1.5 text-charcoal-light font-light">
                  <?php foreach (array_slice($servicesArr, 0, 8) as $service): ?>
                    <li class="flex items-center gap-1.5 truncate">
                      <i data-lucide="check" class="w-3 h-3 text-green-600"></i>
                      <?= esc($service) ?>
                    </li>
                  <?php endforeach; ?>
                  <?php if (count($servicesArr) > 8): ?>
                    <li class="text-[10px] text-charcoal-muted italic pl-4">
                      + <?= count($servicesArr) - 8 ?> more services
                    </li>
                  <?php endif; ?>
                </ul>
              </div>
            </div>
          </div>

          <!-- Actions Footer -->
          <div class="flex justify-end gap-3 pt-4 border-t border-gold/10">
            <!-- Edit Button -->
            <button 
              type="button" 
              onclick="editPackage(this)"
              data-package='<?= htmlspecialchars(json_encode($pkg), ENT_QUOTES, 'UTF-8') ?>'
              class="text-gold-dark hover:text-white hover:bg-gold border border-gold/30 hover:border-gold px-4 py-2 rounded-xl text-xs font-semibold flex items-center gap-1 transition-all"
            >
              <i data-lucide="edit" class="w-3.5 h-3.5"></i>
              Edit
            </button>
            
            <!-- Delete Form -->
            <form action="<?= base_url('admin/menu/delete/' . $pkg['id']) ?>" method="POST" onsubmit="return confirm('Are you sure you want to delete this menu package?');">
              <button type="submit" class="text-red-500 hover:text-white hover:bg-red-500 border border-red-200 hover:border-red-500 px-4 py-2 rounded-xl text-xs font-semibold flex items-center gap-1 transition-all">
                <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                Delete
              </button>
            </form>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>
<?= $this->endSection() ?>

<?= $this->section('admin_scripts') ?>
<script>
  function editPackage(btn) {
    const pkgData = JSON.parse(btn.getAttribute('data-package'));
    document.getElementById('form-package-id').value = pkgData.id;
    document.getElementById('form-package-name').value = pkgData.name;
    document.getElementById('form-package-category').value = pkgData.category || 'Lunch';
    document.getElementById('form-package-price').value = pkgData.price;
    document.getElementById('form-package-description').value = pkgData.description;
    
    // Items and services are JSON arrays (in the raw DB string or already encoded JSON objects)
    let items = [];
    let services = [];
    try {
      items = JSON.parse(pkgData.items || '[]');
    } catch(e) {
      items = [];
    }
    try {
      services = JSON.parse(pkgData.services || '[]');
    } catch(e) {
      services = [];
    }
    
    document.getElementById('form-package-items').value = items.join('\n');
    document.getElementById('form-package-services').value = services.join('\n');
    
    document.getElementById('form-card-title').textContent = 'Edit Menu Package: ' + pkgData.name;
    document.getElementById('form-submit-btn').innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Update Package';
    document.getElementById('form-cancel-btn').classList.remove('hidden');
    
    lucide.createIcons();
    
    // Scroll to form card
    document.getElementById('form-card').scrollIntoView({ behavior: 'smooth' });
  }

  function cancelEdit() {
    document.getElementById('form-package-id').value = '';
    document.getElementById('form-package-name').value = '';
    document.getElementById('form-package-category').value = 'Breakfast';
    document.getElementById('form-package-price').value = '';
    document.getElementById('form-package-description').value = '';
    document.getElementById('form-package-items').value = '';
    document.getElementById('form-package-services').value = '';
    
    document.getElementById('form-card-title').textContent = 'Add New Menu Package';
    document.getElementById('form-submit-btn').innerHTML = '<i data-lucide="plus" class="w-4 h-4"></i> Create Package';
    document.getElementById('form-cancel-btn').classList.add('hidden');
    
    lucide.createIcons();
  }
</script>
<?= $this->endSection() ?>
