<?php
session_start();
if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../login.php');
    exit;
}

require_once '../../config/database.php';
$database = new Database();
$db = $database->getConnection();

$message = '';

// Handle actions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['add_service'])) {
        $query = "INSERT INTO beauty_services (name, description, price, duration, category, is_active) VALUES (?, ?, ?, ?, ?, 1)";
        $stmt = $db->prepare($query);
        $stmt->execute([$_POST['name'], $_POST['description'], $_POST['price'], $_POST['duration'], $_POST['category']]);
        $message = 'تم إضافة الخدمة بنجاح!';
    } elseif (isset($_POST['delete_service'])) {
        $query = "DELETE FROM beauty_services WHERE id = ?";
        $stmt = $db->prepare($query);
        $stmt->execute([$_POST['service_id']]);
        $message = 'تم حذف الخدمة بنجاح!';
    } elseif (isset($_POST['update_service'])) {
        $query = "UPDATE beauty_services SET name = ?, description = ?, price = ?, duration = ?, category = ? WHERE id = ?";
        $stmt = $db->prepare($query);
        $stmt->execute([$_POST['name'], $_POST['description'], $_POST['price'], $_POST['duration'], $_POST['category'], $_POST['service_id']]);
        $message = 'تم تحديث الخدمة بنجاح!';
    }
}

$stmt = $db->prepare("SELECT * FROM beauty_services WHERE is_active = 1 ORDER BY id DESC");
$stmt->execute();
$services = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>خدمات البيوتي</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Tajawal&display=swap" rel="stylesheet">
<style>body{font-family:Tajawal,sans-serif}</style>
</head>
<body class="bg-gray-50 p-6">
<div class="max-w-7xl mx-auto">
<div class="mb-6 flex items-center justify-between">
<div class="flex items-center gap-4">
<a href="../dashboard.php" class="text-blue-600">← رجوع</a>
<h1 class="text-3xl font-bold">خدمات البيوتي (<?php echo count($services); ?>)</h1>
</div>
<button onclick="document.getElementById('addModal').classList.remove('hidden')" class="bg-pink-600 text-white px-4 py-2 rounded-lg hover:bg-pink-700">
+ إضافة خدمة
</button>
</div>

<?php if($message): ?>
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
<?php echo $message; ?>
</div>
<?php endif; ?>
<div class="grid md:grid-cols-3 gap-6">
<?php foreach($services as $s): ?>
<div class="bg-white p-6 rounded-lg shadow">
<div class="flex justify-between mb-4">
<span class="text-2xl">💆‍♀️</span>
<span class="text-2xl font-bold text-pink-600"><?php echo number_format($s['price'],0); ?> ج.م</span>
</div>
<h3 class="text-xl font-bold mb-2"><?php echo htmlspecialchars($s['name']); ?></h3>
<p class="text-gray-600 text-sm mb-4"><?php echo htmlspecialchars($s['description']); ?></p>
<div class="text-sm text-gray-500 mb-4">
⏱️ <?php echo $s['duration']; ?> دقيقة | 🏷️ <?php echo $s['category']; ?>
</div>
<div class="flex gap-2">
<button onclick="editService(<?php echo htmlspecialchars(json_encode($s)); ?>)" class="flex-1 bg-blue-50 text-blue-600 px-3 py-2 rounded text-sm hover:bg-blue-100">
✏️ تعديل
</button>
<form method="POST" class="flex-1" onsubmit="return confirm('هل أنت متأكد من الحذف؟')">
<input type="hidden" name="service_id" value="<?php echo $s['id']; ?>">
<button type="submit" name="delete_service" class="w-full bg-red-50 text-red-600 px-3 py-2 rounded text-sm hover:bg-red-100">
🗑️ حذف
</button>
</form>
</div>
</div>
<?php endforeach; ?>
</div>
</div>

<!-- Add Modal -->
<div id="addModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold mb-4">إضافة خدمة جديدة</h2>
<form method="POST">
<div class="mb-4">
<label class="block text-sm font-bold mb-2">اسم الخدمة</label>
<input type="text" name="name" required class="w-full border rounded px-3 py-2">
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">الوصف</label>
<textarea name="description" required class="w-full border rounded px-3 py-2" rows="3"></textarea>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">السعر (ج.م)</label>
<input type="number" name="price" required class="w-full border rounded px-3 py-2">
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">المدة (دقيقة)</label>
<input type="number" name="duration" required class="w-full border rounded px-3 py-2">
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">الفئة</label>
<input type="text" name="category" required class="w-full border rounded px-3 py-2">
</div>
<div class="flex gap-2">
<button type="submit" name="add_service" class="flex-1 bg-pink-600 text-white px-4 py-2 rounded hover:bg-pink-700">
إضافة
</button>
<button type="button" onclick="document.getElementById('addModal').classList.add('hidden')" class="flex-1 bg-gray-300 px-4 py-2 rounded hover:bg-gray-400">
إلغاء
</button>
</div>
</form>
</div>
</div>

<!-- Edit Modal -->
<div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold mb-4">تعديل الخدمة</h2>
<form method="POST">
<input type="hidden" name="service_id" id="edit_id">
<div class="mb-4">
<label class="block text-sm font-bold mb-2">اسم الخدمة</label>
<input type="text" name="name" id="edit_name" required class="w-full border rounded px-3 py-2">
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">الوصف</label>
<textarea name="description" id="edit_description" required class="w-full border rounded px-3 py-2" rows="3"></textarea>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">السعر (ج.م)</label>
<input type="number" name="price" id="edit_price" required class="w-full border rounded px-3 py-2">
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">المدة (دقيقة)</label>
<input type="number" name="duration" id="edit_duration" required class="w-full border rounded px-3 py-2">
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2">الفئة</label>
<input type="text" name="category" id="edit_category" required class="w-full border rounded px-3 py-2">
</div>
<div class="flex gap-2">
<button type="submit" name="update_service" class="flex-1 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
تحديث
</button>
<button type="button" onclick="document.getElementById('editModal').classList.add('hidden')" class="flex-1 bg-gray-300 px-4 py-2 rounded hover:bg-gray-400">
إلغاء
</button>
</div>
</form>
</div>
</div>

<script>
function editService(service) {
document.getElementById('edit_id').value = service.id;
document.getElementById('edit_name').value = service.name;
document.getElementById('edit_description').value = service.description;
document.getElementById('edit_price').value = service.price;
document.getElementById('edit_duration').value = service.duration;
document.getElementById('edit_category').value = service.category;
document.getElementById('editModal').classList.remove('hidden');
}
</script>
</body>
</html>
