<?php
$page_title = 'Wellness Services Management | Admin';
$page_description = 'Manage wellness wheel services and inquiries';
$page_content = function () { ?>

<div class="min-h-screen bg-[#F9FBF7]">
  <div class="max-w-7xl mx-auto grid md:grid-cols-[240px,1fr] gap-6 py-8">
    <!-- Sidebar -->
    <aside class="hidden md:block bg-white p-6 rounded-2xl shadow-sm border">
      <div class="flex items-center gap-3 mb-6">
        <div class="w-10 h-10 rounded-lg grid place-items-center text-white font-bold bg-gradient-to-br from-[#2f7a4f] to-[#51bfa8]">HW</div>
        <div><strong>Admin Portal</strong></div>
      </div>
      <nav class="space-y-2">
        <a href="/files/atasteofafricanmarketplace/dashboard/admin/index.php" class="block px-3 py-2 rounded-lg font-semibold hover:bg-amber-50">Overview</a>
        <a href="#" class="block px-3 py-2 rounded-lg font-semibold hover:bg-amber-50">Users</a>
        <a href="#" class="block px-3 py-2 rounded-lg font-semibold hover:bg-amber-50">Coaches</a>
        <a href="/files/atasteofafricanmarketplace/dashboard/admin/wellness.php" class="block px-3 py-2 rounded-lg font-semibold bg-amber-50">Wellness Wheel</a>
        <a href="/files/atasteofafricanmarketplace/dashboard/admin/sms.php" class="block px-3 py-2 rounded-lg font-semibold hover:bg-amber-50">SMS</a>
        <a href="#" class="block px-3 py-2 rounded-lg font-semibold hover:bg-amber-50">Analytics</a>
      </nav>
    </aside>

    <!-- Main -->
    <main>
      <header class="flex items-center justify-between bg-white p-4 rounded-2xl shadow-sm mb-6 border">
        <div><strong>Wellness Services Management</strong></div>
        <div><a href="/files/atasteofafricanmarketplace/wellness-wheel.php" class="text-shining-green">View Wheel</a></div>
      </header>

      <div class="space-y-6">
        <!-- Tabs -->
        <div class="bg-white rounded-2xl shadow-sm border">
          <div class="border-b border-gray-200 p-6">
            <nav class="-mb-px flex space-x-8">
              <button onclick="showTab('services')" id="services-tab" class="tab-button active py-2 px-1 border-b-2 font-medium text-sm border-green-500 text-green-600">
                Services
              </button>
              <button onclick="showTab('inquiries')" id="inquiries-tab" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500">
                Inquiries
              </button>
            </nav>
          </div>

          <!-- Services Tab -->
          <div id="services-content" class="tab-content p-6">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-xl font-semibold text-gray-900">Wellness Services</h2>
              <button onclick="openServiceModal()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
                Add Service
              </button>
            </div>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody id="services-table" class="bg-white divide-y divide-gray-200">
                  <!-- Services will be loaded here -->
                </tbody>
              </table>
            </div>
          </div>

          <!-- Inquiries Tab -->
          <div id="inquiries-content" class="tab-content hidden p-6">
            <h2 class="text-xl font-semibold text-gray-900 mb-6">Service Inquiries</h2>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Message</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody id="inquiries-table" class="bg-white divide-y divide-gray-200">
                  <!-- Inquiries will be loaded here -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<!-- Service Modal -->
<div id="service-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
  <div class="flex items-center justify-center min-h-screen p-4">
    <div class="bg-white rounded-lg max-w-2xl w-full">
      <div class="p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-semibold text-gray-900">Service Details</h3>
          <button onclick="closeServiceModal()" class="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
        </div>
        <form id="service-form" onsubmit="saveService(event)">
          <input type="hidden" id="service-id" name="id">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
              <input type="text" id="service-name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Slug</label>
              <input type="text" id="service-slug" name="slug" required class="w-full px-3 py-2 border border-gray-300 rounded-lg">
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">Short Description</label>
            <input type="text" id="service-short-desc" name="short_description" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
            <textarea id="service-description" name="description" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg"></textarea>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Icon</label>
              <select id="service-icon" name="icon" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                <option value="leaf">🌿 Leaf</option>
                <option value="home">🏠 Home</option>
                <option value="file-text">📋 File</option>
                <option value="trending-up">📈 Chart</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Color</label>
              <input type="color" id="service-color" name="color" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">Position (0-360°)</label>
              <input type="number" id="service-position" name="position_angle" min="0" max="360" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
            </div>
          </div>
          <div class="mb-6">
            <label class="flex items-center">
              <input type="checkbox" id="service-active" name="is_active" class="mr-2">
              <span class="text-sm text-gray-700">Active</span>
            </label>
          </div>
          <div class="flex justify-end gap-4">
            <button type="button" onclick="closeServiceModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
              Cancel
            </button>
            <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
              Save Service
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
// Tab functionality
function showTab(tab) {
  document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden'));
  document.querySelectorAll('.tab-button').forEach(button => {
    button.classList.remove('active', 'border-green-500', 'text-green-600');
    button.classList.add('border-transparent', 'text-gray-500');
  });
  
  document.getElementById(tab + '-content').classList.remove('hidden');
  const tabButton = document.getElementById(tab + '-tab');
  tabButton.classList.add('active', 'border-green-500', 'text-green-600');
  tabButton.classList.remove('border-transparent', 'text-gray-500');
  
  if (tab === 'services') {
    loadServices();
  } else if (tab === 'inquiries') {
    loadInquiries();
  }
}

// Load services
async function loadServices() {
  try {
    const response = await fetch('/files/atasteofafricanmarketplace/api/wellness/services.php');
    const data = await response.json();
    
    if (data.success) {
      renderServicesTable(data.services);
    }
  } catch (error) {
    console.error('Error loading services:', error);
  }
}

// Render services table
function renderServicesTable(services) {
  const tbody = document.getElementById('services-table');
  tbody.innerHTML = services.map(service => `
    <tr>
      <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center">
          <div class="w-8 h-8 rounded-full flex items-center justify-center text-white mr-3" style="background-color: ${service.color}">
            ${getServiceIcon(service.icon)}
          </div>
          <div>
            <div class="text-sm font-medium text-gray-900">${service.name}</div>
            <div class="text-sm text-gray-500">${service.slug}</div>
          </div>
        </div>
      </td>
      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${service.position_angle}°</td>
      <td class="px-6 py-4 whitespace-nowrap">
        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
          service.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
        }">
          ${service.is_active ? 'Active' : 'Inactive'}
        </span>
      </td>
      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
        <button onclick="editService(${service.id})" class="text-green-600 hover:text-green-900 mr-3">Edit</button>
        <button onclick="deleteService(${service.id})" class="text-red-600 hover:text-red-900">Delete</button>
      </td>
    </tr>
  `).join('');
}

// Get service icon
function getServiceIcon(icon) {
  const icons = {
    'leaf': '🌿',
    'home': '🏠',
    'file-text': '📋',
    'trending-up': '📈'
  };
  return icons[icon] || '⭐';
}

// Service modal functions
function openServiceModal(service = null) {
  const modal = document.getElementById('service-modal');
  const form = document.getElementById('service-form');
  
  if (service) {
    // Edit mode
    document.getElementById('service-id').value = service.id;
    document.getElementById('service-name').value = service.name;
    document.getElementById('service-slug').value = service.slug;
    document.getElementById('service-short-desc').value = service.short_description || '';
    document.getElementById('service-description').value = service.description || '';
    document.getElementById('service-icon').value = service.icon;
    document.getElementById('service-color').value = service.color;
    document.getElementById('service-position').value = service.position_angle;
    document.getElementById('service-active').checked = service.is_active;
  } else {
    // Add mode
    form.reset();
    document.getElementById('service-color').value = '#10B981';
    document.getElementById('service-active').checked = true;
  }
  
  modal.classList.remove('hidden');
}

function closeServiceModal() {
  document.getElementById('service-modal').classList.add('hidden');
}

// Initialize
showTab('services');
</script>

<?php };
include __DIR__ . '/../../partials/layout.php';
?>