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

<?= $this->section('admin_content') ?>
<!-- Statistics Cards -->
<div class="grid grid-cols-3 gap-3 md:gap-6 mb-6 md:mb-8">
  <!-- Card 1: Total Inquiries -->
  <div class="bg-white border border-gold/15 rounded-xl md:rounded-2xl p-3 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-between">
    <div class="flex flex-col gap-0.5 md:gap-1">
      <span class="text-[10px] md:text-xs font-semibold text-charcoal-muted uppercase tracking-wider">Total Inquiries</span>
      <span class="text-xl md:text-3xl font-bold text-charcoal"><?= $totalInquiries ?></span>
    </div>
    <div class="w-9 h-9 md:w-12 md:h-12 rounded-lg md:rounded-xl bg-saffron-light text-saffron flex items-center justify-center">
      <i data-lucide="mail" class="w-4 h-4 md:w-6 md:h-6"></i>
    </div>
  </div>

  <!-- Card 2: Gallery Images -->
  <div class="bg-white border border-gold/15 rounded-xl md:rounded-2xl p-3 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-between">
    <div class="flex flex-col gap-0.5 md:gap-1">
      <span class="text-[10px] md:text-xs font-semibold text-charcoal-muted uppercase tracking-wider">Gallery Images</span>
      <span class="text-xl md:text-3xl font-bold text-charcoal"><?= $totalImages ?></span>
    </div>
    <div class="w-9 h-9 md:w-12 md:h-12 rounded-lg md:rounded-xl bg-gold-light text-gold-dark flex items-center justify-center">
      <i data-lucide="image" class="w-4 h-4 md:w-6 md:h-6"></i>
    </div>
  </div>

  <!-- Card 3: Menu Packages -->
  <div class="bg-white border border-gold/15 rounded-xl md:rounded-2xl p-3 md:p-6 shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-between">
    <div class="flex flex-col gap-0.5 md:gap-1">
      <span class="text-[10px] md:text-xs font-semibold text-charcoal-muted uppercase tracking-wider">Menu Packages</span>
      <span class="text-xl md:text-3xl font-bold text-charcoal"><?= $totalPackages ?></span>
    </div>
    <div class="w-9 h-9 md:w-12 md:h-12 rounded-lg md:rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
      <i data-lucide="clipboard-list" class="w-4 h-4 md:w-6 md:h-6"></i>
    </div>
  </div>
</div>


<!-- Recent Inquiries Section -->
<div class="bg-white border border-gold/15 rounded-2xl shadow-sm overflow-hidden">
  <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gold-light/20">
    <h2 class="text-base font-bold text-charcoal flex items-center gap-2">
      <i data-lucide="mail-open" class="w-5 h-5 text-saffron"></i>
      Recent Inquiries
    </h2>
    <a href="<?= base_url('admin/inquiries') ?>" class="text-xs font-semibold text-saffron hover:underline flex items-center gap-1">
      View All Inquiries
      <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
    </a>
  </div>

  <div class="overflow-x-auto">
    <table class="w-full text-left border-collapse text-sm">
      <thead>
        <tr class="border-b border-gray-100 text-charcoal-muted font-semibold bg-gray-50/50">
          <th class="py-4 px-6">Customer</th>
          <th class="py-4 px-6">Event Date</th>
          <th class="py-4 px-6">Event Type</th>
          <th class="py-4 px-6">Guests</th>
          <th class="py-4 px-6">Message</th>
          <th class="py-4 px-6 text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        <?php if (empty($recentInquiries)): ?>
          <tr>
            <td colspan="6" class="py-8 px-6 text-center text-charcoal-muted font-light">
              No inquiries received yet.
            </td>
          </tr>
        <?php else: ?>
          <?php foreach ($recentInquiries as $inq): ?>
            <tr class="border-b border-gray-100 hover:bg-gray-50/35 transition-all duration-150">
              <td class="py-4 px-6">
                <div class="font-semibold text-charcoal"><?= esc($inq['name']) ?></div>
                <div class="text-xs text-charcoal-muted flex flex-col gap-0.5 mt-0.5">
                  <span class="flex items-center gap-1"><i data-lucide="phone" class="w-3 h-3"></i> <?= esc($inq['phone']) ?></span>
                  <span class="flex items-center gap-1"><i data-lucide="mail" class="w-3 h-3"></i> <?= esc($inq['email']) ?></span>
                </div>
              </td>
              <td class="py-4 px-6 text-charcoal-light font-medium">
                <?= date('d M Y', strtotime($inq['event_date'])) ?>
              </td>
              <td class="py-4 px-6">
                <span class="inline-block px-2.5 py-1 text-xs font-semibold rounded-full bg-saffron-light text-saffron">
                  <?= esc($inq['event_type']) ?>
                </span>
              </td>
              <td class="py-4 px-6 text-charcoal font-medium">
                <?= esc($inq['guests']) ?>
              </td>
              <td class="py-4 px-6 text-charcoal-muted font-light max-w-[200px] truncate" title="<?= esc($inq['message']) ?>">
                <?= esc($inq['message']) ?>
              </td>
              <td class="py-4 px-6 text-right">
                <form action="<?= base_url('admin/inquiries/delete/' . $inq['id']) ?>" method="POST" onsubmit="return confirm('Are you sure you want to delete this inquiry?');" class="inline">
                  <button type="submit" class="text-red-500 hover:text-red-700 hover:bg-red-50 p-1.5 rounded-lg transition-colors" title="Delete Inquiry">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                  </button>
                </form>
              </td>
            </tr>
          <?php endforeach; ?>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</div>
<?= $this->endSection() ?>
