<?
php
require_once '../includes/[Link]';
require_once '../includes/auth_check.php';
require_once '../includes/[Link]';
// جلب بيانات الغرف
$rooms_query = "SELECT * FROM rooms ORDER BY room_number ASC";
$rooms_result = $conn->query($rooms_query);
$rooms = [];
if ($rooms_result) {
while ($room = $rooms_result->fetch_assoc()) {
$rooms[] = $room;
}
}
// جلب الحجوزات النشطة
$active_bookings_query = "
SELECT b.*, r.room_number
FROM bookings b
JOIN rooms r ON b.room_id = [Link]
WHERE [Link] IN (''محجوزة, 'checked_in')
";
$active_bookings_result = $conn->query($active_bookings_query);
$occupied_rooms = [];
if ($active_bookings_result) {
while ($booking = $active_bookings_result->fetch_assoc()) {
$occupied_rooms[$booking['room_number']] = $booking;
}
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> فندق مارينا- <لوحة التحكم/title>
<!-- الموارد المحلية-->
<link href="../assets/css/vendor/[Link]" rel="stylesheet">
<link href="../assets/css/vendor/[Link]" rel="stylesheet">
<link href="../assets/css/vendor/tajawal_google_fonts.css" rel="stylesheet">
<link href="../assets/css/[Link]" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
font-family: 'Tajawal', sans-serif;
min-height: 100vh;
}
.dashboard-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 15px;
margin-bottom: 30px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.dashboard-header h1 {
margin: 0;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.rooms-container {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.rooms-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
}
.room-button {
border: none;
border-radius: 12px;
padding: 20px 15px;
font-size: 16px;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
}
.room-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.[Link] {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.[Link] {
background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
}
.[Link] {
background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
color: #212529;
}
.room-number {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.room-status {
font-size: 12px;
opacity: 0.9;
}
.room-type {
font-size: 11px;
opacity: 0.8;
margin-top: 3px;
}
.guest-info {
font-size: 10px;
margin-top: 5px;
opacity: 0.9;
}
.section-title {
color: #495057;
font-weight: 700;
font-size: 24px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.legend {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 6px;
}
.[Link] {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.[Link] {
background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
}
.[Link] {
background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
}
.quick-actions {
background: white;
border-radius: 15px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.action-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.action-btn {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
color: white;
border: none;
border-radius: 10px;
padding: 15px 20px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
color: white;
text-decoration: none;
}
.[Link] {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
}
.[Link] {
background: linear-gradient(135deg, #198754 0%, #157347 100%);
}
.[Link] {
background: linear-gradient(135deg, #0dcaf0 0%, #31d2f2 100%);
}
.[Link] {
background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
color: #212529;
}
@media (max-width: 768px) {
.rooms-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.room-button {
padding: 15px 10px;
font-size: 14px;
}
.room-number {
font-size: 20px;
}
.legend {
gap: 15px;
}
.action-buttons {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.dashboard-header {
padding: 15px;
margin-bottom: 20px;
}
.rooms-container {
padding: 15px;
}
.rooms-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.room-button {
padding: 12px 8px;
font-size: 12px;
}
.room-number {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="container-fluid py-4">
<!-- رأس لوحة التحكم-->
<div class="dashboard-header">
<h1><i class="fas fa-tachometer-alt me-3"></i> فندق- لوحة التحكم
<مارينا/h1>
<p class="mb-0">مرحبًا بك، <?php echo
htmlspecialchars($_SESSION['username'] ?? '<>? ;)'المدير/p>
</div>
<!-- عرض الغرف-->
<div class="rooms-container">
<div class="section-title">
<i class="fas fa-bed"></i>
حالة الغرف
</div>
<!-- مفتاح الألوان-->
<div class="legend">
<div class="legend-item">
<div class="legend-color available"></div>
<span><شاغرة/span>
</div>
<div class="legend-item">
<div class="legend-color occupied"></div>
<span><محجوزة/span>
</div>
<div class="legend-item">
<div class="legend-color maintenance"></div>
<span><صيانة/span>
</div>
</div>
<!-- شبكة الغرف-->
<div class="rooms-grid">
<?php foreach ($rooms as $room): ?>
<?php
$room_status = 'available';
$status_text = ';'شاغرة
$guest_info = '';
if (isset($occupied_rooms[$room['room_number']])) {
$room_status = 'occupied';
$status_text = ';'محجوزة
$booking = $occupied_rooms[$room['room_number']];
$guest_info = htmlspecialchars($booking['guest_name'] ?? '
;)'ضيف
} elseif ($room['status'] == ' || 'صيانة$room['status'] ==
'maintenance') {
$room_status = 'maintenance';
$status_text = ';'صيانة
}
?>
<button class="room-button <?php echo $room_status; ?>"
onclick="handleRoomClick(<?php echo $room['id']; ?>,
'<?php echo $room['room_number']; ?>', '<?php echo $room_status; ?>')">
<div class="room-number"><?php echo
htmlspecialchars($room['room_number']); ?></div>
<div class="room-status"><?php echo $status_text; ?></div>
<div class="room-type"><?php echo
htmlspecialchars($room['type'] ?? '<>? ;)'عادية/div>
<?php if ($guest_info): ?>
<div class="guest-info"><?php echo $guest_info;
?></div>
<?php endif; ?>
</button>
<?php endforeach; ?>
</div>
</div>
<!-- الإجراءات السريعة-->
<div class="quick-actions">
<div class="section-title">
<i class="fas fa-bolt"></i>
الإجراءات السريعة
</div>
<div class="action-buttons">
<a href="bookings/[Link]" class="action-btn primary">
<i class="fas fa-plus"></i>
حجز جديد
</a>
<a href="bookings/[Link]" class="action-btn success">
<i class="fas fa-list"></i>
قائمة الحجوزات
</a>
<a href="reports/comprehensive_reports.php" class="action-btn
info">
<i class="fas fa-chart-bar"></i>
التقارير
</a>
<a href="expenses/[Link]" class="action-btn warning">
<i class="fas fa-receipt"></i>
المصروفات
</a>
<a href="settings/[Link]" class="action-btn">
<i class="fas fa-cog"></i>
الإعدادات
</a>
<a href="../[Link]" class="action-btn" style="background:
linear-gradient(135deg, #dc3545 0%, #c82333 100%); color: white;">
<i class="fas fa-sign-out-alt"></i>
تسجيل الخروج
</a>
</div>
</div>
</div>
<!-- الموارد المحلية-->
<script src="../assets/js/vendor/[Link]"></script>
<script>
function handleRoomClick(roomId, roomNumber, status) {
if (status === 'available') {
// اذهب لصفحة الحجز،إذا كانت الغرفة شاغرة
[Link] = `bookings/[Link]?room_id=$
{roomId}&room_number=${roomNumber}`;
} else if (status === 'occupied') {
// اذهب لصفحة تفاصيل الحجز،إذا كانت الغرفة محجوزة
[Link] = `bookings/[Link]?room_number=$
{roomNumber}`;
} else if (status === 'maintenance') {
// اعرض رسالة،إذا كانت الغرفة تحت الصيانة
alert(` الغرفة رقم${roomNumber} ;)`تحت الصيانة حاليًا
}
}
// ثانية لعرض أحدث حالة للغرف30 تحديث الصفحة كل
setInterval(function() {
[Link]();
}, 30000);
// إضافة تأثيرات بصرية
[Link]('DOMContentLoaded', function() {
// تأثير الظهور التدريجي للغرف
const roomButtons = [Link]('.room-button');
[Link]((button, index) => {
[Link] = '0';
[Link] = 'translateY(20px)';
setTimeout(() => {
[Link] = 'all 0.5s ease';
[Link] = '1';
[Link] = 'translateY(0)';
}, index * 50);
});
// تأثير النبض للغرف المحجوزة
const occupiedRooms = [Link]('.room-
[Link]');
[Link](room => {
setInterval(() => {
[Link] = 'scale(1.05)';
setTimeout(() => {
[Link] = 'scale(1)';
}, 200);
}, 3000);
});
});
// إضافة صوت عند النقر على الغرف
function playClickSound() {
// يمكن إضافة صوت هنا إذا رغبت
const audio = new
Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQ
oGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/
LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/
LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiB
C13yO/eizEIHWq+8+OWT');
[Link]().catch(() => {});
}
// إضافة الصوت لجميع أزرار الغرف
[Link]('.room-button').forEach(button => {
[Link]('click', playClickSound);
});
</script>
</body>
</html>
<?php $conn->close(); ?>
