PHP-TOTS/Dashboard.php at main · create2000/PHP-TOTS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<?php
session_start();

require_once __DIR__ . '/vendor/autoload.php';
use Dotenv\Dotenv;
use GuzzleHttp\Client;

// Load environment variables
$dotenv = Dotenv::createImmutable(__DIR__);
$dotenv->load();

$paystackSecretKey = getenv('paystack_secret_key');

// Check if payment was successful
$payment_status = isset($_SESSION['payment_status']) ? $_SESSION['payment_status'] : '';
$payment_completed = isset($_SESSION['payment_completed']) ? $_SESSION['payment_completed'] : false;

if ($payment_status === 'success') {
    $payment_amount = $_SESSION['payment_amount'];
    $payment_email = $_SESSION['payment_email'];

    // Set payment completed flag
    $_SESSION['payment_completed'] = true;

    unset($_SESSION['payment_status']);
    unset($_SESSION['payment_amount']);
    unset($_SESSION['payment_email']);

    // Reset total price after successful payment
    $totalPrice = 0;

    // Set notification for successful payment
    $_SESSION['notification'] = "Payment of $$payment_amount was successful!";
    $_SESSION['notification_seen'] = false; // Set notification as unseen
} else {
    $payment_amount = 0;
    $payment_email = '';
}


if (!isset($_SESSION['user_id'])) {
    header('Location: index.php');
    exit;
}

require 'C:\xampp\htdocs\PHP-Tots\config\db.php';

$userId = $_SESSION['user_id'];
$name = $_SESSION['user_last name'];

// Fetch all booked rooms for the user, including both paid and unpaid ones
$sql = "SELECT r.id, r.type, r.price, b.check_in_date, b.check_out_date, b.status
        FROM bookings b
        JOIN rooms r ON b.room_id = r.id
        WHERE b.user_id = ?"; // Fetch all bookings regardless of status
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $userId);
$stmt->execute();
$result = $stmt->get_result();
$bookedRooms = $result->fetch_all(MYSQLI_ASSOC);
$stmt->close();

// Calculate total price only for unpaid bookings if payment has not been successful
$totalPrice = 0;
if ($payment_status !== 'success' && !$payment_completed) {
    foreach ($bookedRooms as $room) {
        if ($room['status'] == 'pending') {
            $totalPrice += $room['price'];
        }
    }
}


$conn->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customer Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <style>
    .sidebar {
      transition: width 0.3s;
    }
    .sidebar-expanded {
      width: 240px;
    }
    .sidebar-collapsed {
      width: 60px;
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 50;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      width: 100%;
      max-width: 500px;
    }
    .popup {
      display: none;
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 20px;
      background-color: #4caf50;
      color: white;
      border-radius: 5px;
      text-align: center;
      z-index: 1000;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .popup.show {
      display: block;
      opacity: 1;
    }

    .popup.hide {
      opacity: 0;
    }
  </style>
</head>
<body class="bg-gray-100">

<div id="popup" class="popup"></div>
<div class="flex h-screen">
  <!-- Sidebar -->
  <div id="sidebar" class="sidebar sidebar-expanded bg-gray-800 text-white flex flex-col">
    <div class="flex items-center justify-between p-4">
      <span class="text-lg font-bold">Hello <?php echo htmlspecialchars($name); ?></span>
      <button id="toggleSidebar" class="text-white">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M4 5h12a1 1 0 010 2H4a1 1 0 110-2zm0 4h12a1 1 0 010 2H4a1 1 0 110-2zm0 4h12a1 1 0 010 2H4a1 1 0 110-2z" clip-rule="evenodd"/>
        </svg>
      </button>
    </div>
    <nav class="flex flex-col space-y-2 p-4">
      <a href="landing.php" class="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8.707 12.707a1 1 0 01-1.414-1.414l2-2a1 1 0 011.414 0l2 2a1 1 0 01-1.414 1.414L10 11.414l-1.293 1.293z"/>
        </svg>
        <span>Book Another Room</span>
      </a>
      <a href="profile.php" class="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM10 7a3 3 0 110 6 3 3 0 010-6z"/>
        </svg>
        <span>Profile</span>
      </a>
      <a href="settings.php" class="flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
          <path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2h-1v2h1a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2a2 2 0 012-2h1V9H4a2 2 0 01-2-2V5zm3 4h8V5H5v4zm10 4h1v2h-1v-2zm-8 0h6v2H7v-2z"/>
        </svg>
        <span>Settings</span>
      </a>
      <a href="notifications.php" class="relative flex items-center space-x-2 p-2 hover:bg-gray-700 rounded-md">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8.707 12.707a1 1 0 01-1.414-1.414l2-2a1 1 0 011.414 0l2 2a1 1 0 01-1.414 1.414L10 11.414l-1.293 1.293z"/>
        </svg>
        <span>Notifications</span>
        <?php if (isset($_SESSION['notification']) && !$_SESSION['notification_seen']): ?>
            <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-green-500"></span>
        <?php endif; ?>
      </a>

      <!-- Notification Modal -->
      <?php if (isset($_SESSION['notification'])): ?>
      <div id="notificationModal" class="modal">
          <div class="modal-content">
              <span onclick="closeNotificationModal()" class="close">&times;</span>
              <p><?php echo htmlspecialchars($_SESSION['notification']); ?></p>
              <?php $_SESSION['notification_seen'] = true; // Mark notification as seen ?>
          </div>
      </div>
      <?php endif; ?>

    </nav>
  </div>

 <!-- Main content area -->
 <div class="flex-grow p-6">
    <h1 class="text-2xl font-bold mb-4">Booked Rooms</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <?php foreach ($bookedRooms as $room): ?>
        <div class="bg-white shadow-md rounded-lg p-4">
          <h2 class="text-lg font-semibold mb-2"><?php echo htmlspecialchars($room['type']); ?></h2>
          <p>Check-in Date: <?php echo htmlspecialchars($room['check_in_date']); ?></p>
          <p>Check-out Date: <?php echo htmlspecialchars($room['check_out_date']); ?></p>
          <p>Price: $<?php echo htmlspecialchars($room['price']); ?></p>
          <p>Status: <?php echo htmlspecialchars($room['status']); ?></p>
          <?php if ($room['status'] == 'pending'): ?>
            <form action="cancel_booking.php" method="post">
              <input type="hidden" name="room_id" value="<?php echo $room['id']; ?>">
              <button type="submit" class="bg-red-500 text-white p-2 rounded mt-2 hover:bg-red-700">Cancel Booking</button>
            </form>
          <?php endif; ?>
        </div>
      <?php endforeach; ?>
    </div>

    <?php if (!$payment_completed && $totalPrice > 0): ?>
    <div class="mt-4">
        <p class="text-lg font-semibold">Total Price: $<?php echo htmlspecialchars($totalPrice); ?></p>
        <form action="./templates/payment.php" method="post">
            <input type="hidden" name="total_price" value="<?php echo htmlspecialchars($totalPrice); ?>">
            <button type="submit" class="bg-green-500 text-white p-2 rounded hover:bg-green-700">Initialize Payment</button>
        </form>
    </div>
<?php endif; ?>


    <!-- Display Review Button -->
    <?php if ($payment_completed && !empty($bookedRooms)): ?>
    <button class="bg-blue-500 text-white mt-4 px-4 py-2 rounded-md hover:bg-blue-600" onclick="toggleReviewForm()">Leave a Review</button>
<?php endif; ?>

<!-- Review Form (Initially Hidden) -->
<div id="reviewForm" class="modal" style="display: none;">
        <div class="modal-content">
            <h2 class="text-lg font-semibold mb-4">Leave a Review</h2>
            <form action="./templates/reviews.php" method="post">
                <input type="hidden" name="room_id" value="<?php echo isset($room['id']) ? htmlspecialchars($room['id']) : ''; ?>">
                <div class="mb-4">
                    <label for="rating" class="block text-sm font-medium text-gray-700">Rating:</label>
                    <input type="number" name="rating" id="rating" min="1" max="5" class="w-full mt-1 border-gray-300 rounded-md">
                </div>
                <div class="mb-4">
                    <label for="comment" class="block text-sm font-medium text-gray-700">Comment:</label>
                    <textarea name="comment" id="comment" rows="4" class="w-full mt-1 border-gray-300 rounded-md"></textarea>
                </div>
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Submit Review</button>
                <button type="button" class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600" onclick="toggleReviewForm()">Cancel</button>
            </form>
        </div>
    </div>

  </div>
</div>

<script>
document.getElementById('toggleSidebar').addEventListener('click', function() {
  const sidebar = document.getElementById('sidebar');
  sidebar.classList.toggle('sidebar-expanded');
  sidebar.classList.toggle('sidebar-collapsed');
});

// Notification Popup
function showPopup(message) {
  const popup = document.getElementById('popup');
  popup.textContent = message;
  popup.classList.add('show');

  setTimeout(() => {
    popup.classList.remove('show');
  }, 5000);
}

// Check if there's a notification
<?php if (isset($_SESSION['notification']) && !$_SESSION['notification_seen']): ?>
    document.addEventListener('DOMContentLoaded', function() {
      showPopup("<?php echo addslashes($_SESSION['notification']); ?>");
    });
<?php endif; ?>

// Toggle the visibility of the review form
function toggleReviewForm() {
        const form = document.getElementById('reviewForm');
        form.style.display = form.style.display === 'flex' ? 'none' : 'flex';
    }
</script>

</body>
</html>