File Manager

✏️ Edit File: /home/u625410797/public_html/public_html/views/admin/services.php

<?php
require_once VIEWS_PATH . 'admin/layout/header.php';
?>

<div class="max-w-7xl mx-auto space-y-6" x-data="servicesManager()">
    
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-900/40 backdrop-blur-xl border border-slate-800 p-6 rounded-3xl shadow-2xl">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-white flex items-center gap-2">
                <span class="w-3 h-3 rounded-full bg-emerald-400 animate-pulse"></span>
                Services Management
            </h1>
            <p class="text-sm text-slate-400 mt-1">จัดการบริการโซลาร์เซลล์ ออกแบบ ติดตั้ง และบำรุงรักษา</p>
        </div>
        <button @click="openModal()" class="w-full sm:w-auto bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white font-semibold px-5 py-2.5 rounded-xl transition duration-300 transform hover:-translate-y-0.5 shadow-[0_0_20px_rgba(16,185,129,0.2)] flex items-center justify-center gap-2">
            <i class="w-4 h-4" data-lucide="plus"></i>
            <span>Add Service</span>
        </button>
    </div>

<div class="bg-slate-900/40 backdrop-blur-xl border border-slate-800 p-4 rounded-2xl flex flex-col sm:flex-row gap-4 items-center justify-between">
        <div class="relative w-full sm:w-96">
            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500"></i>
            <input type="text" x-model="searchQuery" placeholder="Search services..." class="w-full pl-10 pr-4 py-2 bg-slate-950/60 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none focus:border-emerald-500 transition-colors">
        </div>
        <div class="flex flex-wrap gap-2 w-full sm:w-auto">
            <select x-model="filterStatus" class="bg-slate-950 border border-slate-800 text-slate-300 rounded-xl px-3 py-2 text-xs focus:outline-none focus:border-emerald-500 w-full sm:w-auto">
                <option value="all">All Status</option>
                <option value="active">Active Only</option>
                <option value="inactive">Inactive Only</option>
            </select>
        </div>
    </div>

<div class="bg-slate-900/40 backdrop-blur-xl border border-slate-800 rounded-3xl overflow-hidden shadow-2xl">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="border-b border-slate-800 bg-slate-950/40">
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Service Details</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Slug</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Icon</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">Sort</th>
                        <th class="px-6 py-4 text-xs font-semibold text-slate-400 uppercase tracking-wider text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800">
                    <?php if (!empty($services)): ?>
                        <template x-for="service in filteredServices" :key="service.id">
                        <tr class="hover:bg-slate-800/50 transition-colors duration-200">
                            <td class="px-6 py-4">
                                <span class="text-slate-300 font-mono text-sm" x-text="service.id"></span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 flex items-center justify-center border border-emerald-500/30">
                                        <i data-lucide="wrench" class="w-5 h-5 text-emerald-400"></i>
                                    </div>
                                    <div>
                                        <div class="text-slate-200 font-semibold text-sm" x-text="service.title"></div>
                                        <div class="text-slate-500 text-xs" x-text="service.short_description || 'No description'"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <code class="text-xs text-slate-400 bg-slate-950/50 px-2 py-1 rounded-lg" x-text="service.slug"></code>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-slate-300 text-sm" x-text="service.icon || '—'"></span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold"
                                      :class="service.is_active ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-slate-500/10 text-slate-400 border border-slate-500/20'"
                                      x-text="service.is_active ? 'Active' : 'Inactive'">
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-slate-400 text-sm" x-text="service.sort_order"></span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <button @click="editService(service.id)" class="p-2 text-slate-400 hover:text-emerald-400 hover:bg-emerald-500/10 rounded-lg transition-all duration-200" title="Edit">
                                        <i data-lucide="edit-2" class="w-4 h-4"></i>
                                    </button>
                                    <button @click="deleteService(service.id)" class="p-2 text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-200" title="Delete">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </template>
                    <?php else: ?>
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center gap-4">
                                    <div class="w-16 h-16 rounded-2xl bg-slate-800/50 flex items-center justify-center">
                                        <i data-lucide="wrench" class="w-8 h-8 text-slate-600"></i>
                                    </div>
                                    <div>
                                        <p class="text-slate-400 text-sm">No services found</p>
                                        <p class="text-slate-600 text-xs mt-1">Click "Add Service" to create your first service</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="serviceModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden items-center justify-center z-50" x-data="{ isOpen: false }">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between p-6 border-b border-slate-800">
            <h2 id="modalTitle" class="text-xl font-bold text-white">Add Service</h2>
            <button onclick="closeModal()" class="text-slate-400 hover:text-white transition-colors">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>
        <form id="serviceForm" class="p-6 space-y-4">
            <input type="hidden" id="serviceId" name="id">
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">Title *</label>
                <input type="text" id="title" name="title" required
                    class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">Slug *</label>
                <input type="text" id="slug" name="slug" required
                    class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">Short Description</label>
                <textarea id="short_description" name="short_description" rows="2"
                    class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all resize-none"></textarea>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">Description</label>
                <textarea id="description" name="description" rows="4"
                    class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all resize-none"></textarea>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">Icon</label>
                <select id="icon" name="icon"
                    class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all">
                    <option value="">Select Icon</option>
                    <option value="Layout">Layout</option>
                    <option value="Construction">Construction</option>
                    <option value="Settings">Settings</option>
                    <option value="CreditCard">CreditCard</option>
                    <option value="Zap">Zap</option>
                    <option value="PenTool">PenTool</option>
                    <option value="Hammer">Hammer</option>
                    <option value="TrendingUp">TrendingUp</option>
                    <option value="ArrowRight">ArrowRight</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">Image URL</label>
                <input type="text" id="image" name="image"
                    class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-300 mb-2">Link</label>
                <input type="text" id="link" name="link"
                    class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all">
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">Sort Order</label>
                    <input type="number" id="sort_order" name="sort_order" value="0"
                        class="w-full px-4 py-2.5 bg-slate-950/50 border border-slate-700 rounded-xl text-slate-200 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20 transition-all">
                </div>
                <div class="flex items-center pt-7">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" id="is_active" name="is_active" checked
                            class="w-5 h-5 text-emerald-500 rounded focus:ring-emerald-500 focus:ring-offset-0 bg-slate-950 border-slate-700">
                        <span class="text-sm font-medium text-slate-300">Active</span>
                    </label>
                </div>
            </div>
            
            <div class="flex justify-end gap-3 pt-4 border-t border-slate-800">
                <button type="button" onclick="closeModal()" class="px-5 py-2.5 border border-slate-700 text-slate-300 rounded-xl hover:bg-slate-800 transition-colors">
                    Cancel
                </button>
                <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-400 hover:to-teal-500 text-white font-semibold rounded-xl transition-all duration-300 transform hover:-translate-y-0.5 shadow-[0_0_15px_rgba(16,185,129,0.3)]">
                    Save Service
                </button>
            </div>
        </form>
    </div>
</div>

function openModal() {
    document.getElementById('serviceModal').classList.remove('hidden');
    document.getElementById('serviceModal').classList.add('flex');
    document.getElementById('modalTitle').textContent = 'Add Service';
    document.getElementById('serviceForm').reset();
    document.getElementById('serviceId').value = '';
    lucide.createIcons();
}

function closeModal() {
    document.getElementById('serviceModal').classList.add('hidden');
    document.getElementById('serviceModal').classList.remove('flex');
}

function editService(id) {
    const service = servicesData.find(s => s.id === id);
    if (service) {
        document.getElementById('serviceId').value = service.id;
        document.getElementById('title').value = service.title;
        document.getElementById('slug').value = service.slug;
        document.getElementById('short_description').value = service.short_description || '';
        document.getElementById('description').value = service.description || '';
        document.getElementById('icon').value = service.icon || '';
        document.getElementById('image').value = service.image || '';
        document.getElementById('link').value = service.link || '';
        document.getElementById('sort_order').value = service.sort_order;
        document.getElementById('is_active').checked = service.is_active == 1;
        
        document.getElementById('modalTitle').textContent = 'Edit Service';
        document.getElementById('serviceModal').classList.remove('hidden');
        document.getElementById('serviceModal').classList.add('flex');
        lucide.createIcons();
    }
}

document.getElementById('title').addEventListener('input', function() {
    const title = this.value;
    const slug = title.toLowerCase()
        .replace(/[^a-z0-9ก-๙\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-');
    document.getElementById('slug').value = slug;
});
</script>

<?php
require_once VIEWS_PATH . 'admin/layout/footer.php';
?>

Batal

⬅ Naik ke views 54 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁layout	dir	—	2026-05-31 16:45	📂 Buka
📁menus	dir	—	2026-05-31 16:45	📂 Buka
📁orders	dir	—	2026-05-31 16:45	📂 Buka
📁pages	dir	—	2026-05-31 16:45	📂 Buka
📁products	dir	—	2026-05-31 16:45	📂 Buka
🐘404.php	php	511 B	2026-05-31 16:43	✏️ Edit 👁️ View
🐘about-sections.php	php	22.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘admin-users.php	php	18.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘banners.php	php	25.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘branches.php	php	22.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘categories.php	php	20.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘contact-info.php	php	19.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘coupons.php	php	23.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘cta-buttons.php	php	1.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘cta.php	php	17 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘customers.php	php	1.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘dashboard.php	php	51.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘database-viewer.php	php	28.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘documents.php	php	21.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘faqs.php	php	16.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘features.php	php	19.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘file-manager.php	php	66.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘finance.php	php	26.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘hero-sections.php	php	27.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘image-gallery.php	php	41.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘inquiries.php	php	7.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘inventory.php	php	16.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘knowledge.php	php	22.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘layout.php	php	27.6 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘login.php	php	10.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘logout.php	php	195 B	2026-05-31 16:43	✏️ Edit 👁️ View
🐘map-locations.php	php	18 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘menus.php	php	11.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘navigation-form.php	php	14 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘navigation.php	php	33.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘omni-dynamic.php	php	16.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘orders.php	php	8.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘pages.php	php	28.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘payments.php	php	23.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘product-attributes.php	php	22.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘product-images.php	php	21.3 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘products.php	php	29.1 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘projects.php	php	33.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘reviews.php	php	22.7 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘services.php	php	20.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘settings.php	php	51.8 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘shipping.php	php	8.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘solar-calculator.php	php	31.5 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘solutions.php	php	47.3 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘statistics.php	php	17.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘testimonials.php	php	20.4 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘verify-mfa.php	php	10.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘videos-form.php	php	28.2 KB	2026-05-31 16:43	✏️ Edit 👁️ View
🐘videos.php	php	27.9 KB	2026-05-31 16:43	✏️ Edit 👁️ View