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

<?= $this->section('content') ?>
<!-- Banner -->
<section class="page-banner relative">
  <div class="absolute inset-0 pointer-events-none opacity-15 overflow-hidden" id="kolam-banner-bg"></div>
  <div class="max-w-[1200px] mx-auto px-6">
    <h1 id="banner-title">Menu</h1>
    <p id="banner-subtitle">Choose Your Traditional Kerala Sadhya Package</p>
  </div>
</section>

<!-- Planner Section -->
<section class="py-24">
  <div class="max-w-[1200px] mx-auto px-6">

    <!-- Kolam Intro Decoration -->
    <div class="w-24 h-24 mx-auto mb-6 opacity-30" id="kolam-intro-deco"></div>

    <div class="text-center mb-16">
      <span id="section-subtitle" class="block text-saffron font-semibold tracking-[0.15em] uppercase text-[0.85rem] mb-2">Traditional Catering Planner</span>
      <h2 id="section-title" class="font-title text-[1.85rem] md:text-[2.8rem] text-charcoal mb-3">Select Your Traditional Specialties</h2>
      <p id="section-desc" class="text-[1.05rem] text-[#4a4a4a] max-w-[800px] mx-auto leading-relaxed">
        We bring South India's finest Brahmin and traditional catering to your family events. Select from our curated **Breakfast**, **Lunch (Sadhya)**, or **Reception** menus and request a quote.
      </p>
    </div>

    <!-- Full-width Packages Grid -->
    <div id="packages-view" class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8">
      <!-- Rendered via JS -->
    </div>

    <!-- Bottom Kolam Separator -->
    <div class="w-32 h-32 mx-auto mt-20 opacity-20" id="kolam-separator"></div>

  </div>
</section>

<!-- Quote Request Modal -->
<div id="modal-overlay" class="fixed inset-0 bg-black/50 z-[2000] hidden items-center justify-center p-4 backdrop-blur-sm">
  <div class="bg-white rounded-md max-w-lg w-full p-8 relative shadow-2xl border border-gold/20">
    <button id="modal-close" class="absolute top-4 right-4 text-charcoal-muted hover:text-charcoal cursor-pointer border-none bg-transparent">
      <i data-lucide="x" class="w-6 h-6"></i>
    </button>

    <!-- Form View -->
    <div id="modal-form-view">
      <h3 class="font-title text-[1.8rem] text-charcoal mb-2">Request Menu Quote</h3>
      <p class="text-[0.95rem] text-[#4a4a4a] mb-6" id="modal-description">
        Provide your details below to send your request.
      </p>
      <form id="modal-form" class="flex flex-col gap-4">
        <div>
          <label class="block text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 tracking-wider">Your Name</label>
          <input type="text" name="name" required placeholder="Enter full name"
            class="w-full px-4 py-2.5 border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-2 focus:ring-saffron-light transition-all" />
        </div>
        <div>
          <label class="block text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 tracking-wider">Email Address</label>
          <input type="email" name="email" required placeholder="name@example.com"
            class="w-full px-4 py-2.5 border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-2 focus:ring-saffron-light transition-all" />
        </div>
        <div>
          <label class="block text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 tracking-wider">Phone Number</label>
          <input type="tel" name="phone" required placeholder="10 digit mobile number"
            class="w-full px-4 py-2.5 border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-2 focus:ring-saffron-light transition-all" />
        </div>
        <div>
          <label class="block text-[0.85rem] uppercase font-semibold text-charcoal-light mb-1 tracking-wider">Event Date</label>
          <input type="date" name="eventDate" required
            class="w-full px-4 py-2.5 border border-gold/25 focus:border-saffron rounded-sm outline-none focus:ring-2 focus:ring-saffron-light transition-all" />
        </div>
        <button type="submit" class="inline-flex items-center justify-center gap-1 sm:gap-2 bg-saffron hover:bg-saffron-dark text-white px-2.5 py-2 sm:px-7 sm:py-3 rounded-full font-semibold text-[0.62rem] sm:text-[0.95rem] tracking-[0.05em] uppercase shadow-[0_4px_14px_rgba(227,30,36,0.3)] hover:-translate-y-0.5 mt-3 transition-all duration-400">
          Submit Quote Request
        </button>
      </form>
    </div>

    <!-- Success View -->
    <div id="modal-success-view" class="hidden text-center py-6 flex flex-col items-center justify-center gap-4">
      <i data-lucide="check-circle" class="w-16 h-16 text-[#2e7d32] animate-float"></i>
      <h3 class="font-title text-[1.8rem] text-[#2e7d32]">Inquiry Submitted!</h3>
      <p class="text-[0.95rem] text-[#4a4a4a] leading-relaxed">
        Pranam, <strong id="success-name">Name</strong>. Your request for <strong id="success-menu-type">Choice</strong> has been received. Our event coordinator will reach out to you on <strong id="success-phone">Phone</strong> with a final pricing quote.
      </p>
      <button id="modal-success-close" class="w-full inline-flex items-center justify-center gap-1 sm:gap-2 bg-transparent text-gold-dark hover:bg-gold-light hover:text-gold-dark border border-gold px-2.5 py-2 sm:px-7 sm:py-3 rounded-full font-medium text-[0.62rem] sm:text-[0.95rem] tracking-[0.05em] uppercase hover:-translate-y-0.5 transition-all duration-400">
        Close Window
      </button>
    </div>
  </div>
</div>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
  const kolamSVGString = `
    <svg viewBox="0 0 200 200" class="w-full h-full stroke-gold stroke-[1.2] fill-none">
      <g stroke-linecap="round" stroke-linejoin="round">
        <rect x="75" y="75" width="50" height="50" />
        <rect x="75" y="75" width="50" height="50" transform="rotate(45 100 100)" />
        <rect x="60" y="60" width="80" height="80" />
        <rect x="60" y="60" width="80" height="80" transform="rotate(45 100 100)" />
        <rect x="45" y="45" width="110" height="110" />
        <rect x="45" y="45" width="110" height="110" transform="rotate(45 100 100)" />
        <path d="M100 60 C85 45, 85 35, 100 20 C115 35, 115 45, 100 60 Z" />
        <path d="M100 140 C85 155, 85 165, 100 180 C115 165, 115 155, 100 140 Z" />
        <path d="M140 100 C155 85, 165 85, 180 100 C165 115, 155 115, 140 100 Z" />
        <path d="M60 100 C45 85, 35 85, 20 100 C35 115, 45 115, 60 100 Z" />
        <path d="M68 68 C50 50, 40 50, 30 68 C50 86, 50 86, 68 68" />
        <path d="M132 68 C150 50, 160 50, 170 68 C150 86, 150 86, 132 68" />
        <path d="M68 132 C50 150, 40 150, 30 132 C50 114, 50 114, 68 132" />
        <path d="M132 132 C150 150, 160 150, 170 132 C150 114, 150 114, 132 132" />
        <circle cx="100" cy="100" r="3" fill="#c99c33" />
        <circle cx="100" cy="40" r="2" fill="#c99c33" />
        <circle cx="100" cy="160" r="2" fill="#c99c33" />
        <circle cx="40" cy="100" r="2" fill="#c99c33" />
        <circle cx="160" cy="100" r="2" fill="#c99c33" />
        <circle cx="50" cy="50" r="1.5" fill="#c99c33" />
        <circle cx="150" cy="50" r="1.5" fill="#c99c33" />
        <circle cx="50" cy="150" r="1.5" fill="#c99c33" />
        <circle cx="150" cy="150" r="1.5" fill="#c99c33" />
      </g>
    </svg>
  `;

  document.getElementById('kolam-banner-bg').innerHTML = kolamSVGString;
  document.getElementById('kolam-intro-deco').innerHTML = kolamSVGString;
  document.getElementById('kolam-separator').innerHTML = kolamSVGString;

  const sadhyaPackages = <?= $sadhyaPackagesJson ?>;
  const packagesView   = document.getElementById('packages-view');

  // Track active category tab (defaults to Breakfast)
  let activeCategory = 'Breakfast';

  // Track which package the modal was opened for
  let activeModalPkgId = sadhyaPackages.length > 0 ? sadhyaPackages[0].id : null;

  // Function to switch category tabs
  window.switchCategory = (category) => {
    activeCategory = category;
    renderPackages();
  };

  // Render packages based on active category
  const renderPackages = () => {
    // Dynamic page title / description updates based on active category
    const bannerSubtitle = document.getElementById('banner-subtitle');
    const sectionTitle   = document.getElementById('section-title');
    const sectionDesc    = document.getElementById('section-desc');

    if (activeCategory === 'Breakfast') {
      if (bannerSubtitle) bannerSubtitle.textContent = "Premium Traditional Breakfast Packages";
      if (sectionTitle) sectionTitle.textContent = "Select Your Traditional Breakfast Menu";
      if (sectionDesc) sectionDesc.textContent = "Exquisite traditional tiffin combos and grand breakfast spreads.";
    } else if (activeCategory === 'Lunch') {
      if (bannerSubtitle) bannerSubtitle.textContent = "Traditional Kerala Sadhya Lunch Feasts";
      if (sectionTitle) sectionTitle.textContent = "Select Your Royal Kerala Sadhya Menu";
      if (sectionDesc) sectionDesc.textContent = "South India's finest catering tradition. Authentic multi-course Sadhya served on banana leaves.";
    } else if (activeCategory === 'Reception') {
      if (bannerSubtitle) bannerSubtitle.textContent = "Grand Celebration Reception Menus";
      if (sectionTitle) sectionTitle.textContent = "Select Your Celebrations Reception Menu";
      if (sectionDesc) sectionDesc.textContent = "Sattvik multi-cuisine spreads, Chinese counters, live stations and rich desserts.";
    }

    const filtered = sadhyaPackages.filter(pkg => (pkg.category || 'Lunch') === activeCategory);

    if (filtered.length === 0) {
      packagesView.innerHTML = `<div class="col-span-full text-center py-12 text-charcoal-muted font-light">No packages registered under this category yet.</div>`;
      return;
    }

    let html = '';
    filtered.forEach(pkg => {
      html += `
        <div class="package-card relative border border-gold/15 bg-white rounded-md p-8 overflow-hidden flex flex-col hover:-translate-y-1 hover:shadow-lg hover:border-gold/30 transition-all duration-400">

          <!-- Kolam Card Deco -->
          <div class="absolute inset-0 pointer-events-none opacity-5 flex items-center justify-center scale-75">
            ${kolamSVGString}
          </div>

          <!-- Header: name -->
          <div class="mb-4 relative z-10 flex justify-between items-start gap-4">
            <div>
              <h3 class="font-title text-[1.25rem] text-charcoal leading-tight">${pkg.name}</h3>
              <p class="text-[0.78rem] text-charcoal-muted mt-1">${pkg.items.length} items &bull; ${pkg.services.length} services</p>
            </div>
          </div>

          <!-- Description -->
          <p class="text-[0.85rem] text-charcoal-light font-light italic mb-5 relative z-10 h-10 line-clamp-2" title="${pkg.description}">
            "${pkg.description}"
          </p>

          <!-- Items list -->
          <div class="flex flex-col gap-1.5 relative z-10 flex-1">
            ${pkg.items.map(item => `
              <div class="flex items-center gap-2 text-[0.85rem] text-charcoal font-light">
                <i data-lucide="check" class="w-3.5 h-3.5 text-saffron flex-shrink-0"></i>
                <span>${item}</span>
              </div>
            `).join('')}

            <div class="my-3 border-b border-dashed border-gold/15"></div>

            ${pkg.services.map(svc => `
              <div class="flex items-center gap-2 text-[0.82rem] text-charcoal-muted italic">
                <i data-lucide="check" class="w-3.5 h-3.5 text-gold flex-shrink-0 opacity-60"></i>
                <span>${svc}</span>
              </div>
            `).join('')}
          </div>

          <!-- Request Quote button -->
          <button
            class="relative z-10 inline-flex items-center justify-center gap-1 sm:gap-2 bg-saffron hover:bg-saffron-dark text-white px-2.5 py-2 sm:px-6 sm:py-3 rounded-full font-semibold text-[0.62rem] sm:text-[0.88rem] tracking-[0.05em] uppercase shadow-[0_4px_14px_rgba(227,30,36,0.25)] hover:-translate-y-0.5 mt-7 w-full transition-all duration-300"
            onclick="openQuoteModal('${pkg.id}')"
          >
            <i data-lucide="calendar" class="w-3.5 h-3.5 sm:w-4 sm:h-4"></i>
            Request Quote
          </button>
        </div>
      `;
    });

    packagesView.innerHTML = html;
    lucide.createIcons();
  };

  // Modal logic
  const modalOverlay      = document.getElementById('modal-overlay');
  const modalClose        = document.getElementById('modal-close');
  const modalForm         = document.getElementById('modal-form');
  const modalFormView     = document.getElementById('modal-form-view');
  const modalSuccessView  = document.getElementById('modal-success-view');
  const modalDescription  = document.getElementById('modal-description');
  const successName       = document.getElementById('success-name');
  const successMenuType   = document.getElementById('success-menu-type');
  const successPhone      = document.getElementById('success-phone');
  const modalSuccessClose = document.getElementById('modal-success-close');

  window.openQuoteModal = (pkgId) => {
    activeModalPkgId = pkgId;
    const pkg = sadhyaPackages.find(p => p.id == pkgId);
    modalDescription.innerHTML = `Provide your details below to send your request for <strong>${pkg ? pkg.name : 'the selected package'}</strong> to our planner.`;
    modalOverlay.classList.remove('hidden');
    modalOverlay.classList.add('flex');
  };

  const closeQuoteModal = () => {
    modalOverlay.classList.remove('flex');
    modalOverlay.classList.add('hidden');
    modalForm.reset();
    modalSuccessView.classList.add('hidden');
    modalFormView.classList.remove('hidden');
  };

  modalClose.addEventListener('click', closeQuoteModal);
  modalSuccessClose.addEventListener('click', closeQuoteModal);
  modalOverlay.addEventListener('click', (e) => {
    if (e.target === modalOverlay) closeQuoteModal();
  });

  modalForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(modalForm);
    const pkg = sadhyaPackages.find(p => p.id == activeModalPkgId);
    const menuChoice = pkg ? pkg.name : 'Traditional Package';

    formData.append('eventType', 'Catering');
    formData.append('guests', '');
    formData.append('message', `Plan Type: Menu (${pkg ? (pkg.category || 'Lunch') : 'General'})\nSelected Package: ${menuChoice}`);

    fetch('<?= base_url('contact/submit') ?>', { method: 'POST', body: formData })
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          successName.textContent     = formData.get('name');
          successPhone.textContent    = formData.get('phone');
          successMenuType.textContent = menuChoice;
          modalFormView.classList.add('hidden');
          modalSuccessView.classList.remove('hidden');
          lucide.createIcons();
        } else {
          alert(data.message || 'Failed to submit. Please try again.');
        }
      })
      .catch(() => alert('Network error. Please try again.'));
  });

  // Run initial render and tab configuration
  const urlParams = new URLSearchParams(window.location.search);
  const catParam  = urlParams.get('category');
  
  // Map parameters to valid categories
  let startCategory = 'Breakfast';
  if (catParam === 'Lunch') startCategory = 'Lunch';
  else if (catParam === 'Reception') startCategory = 'Reception';
  
  switchCategory(startCategory);
</script>
<?= $this->endSection() ?>
