137 lines
6.7 KiB
PHP
137 lines
6.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kos Calista</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-blue-400 to-white min-h-screen flex items-center justify-center p-6 font-sans">
|
|
<div class="max-w-6xl mx-auto py-6 px-4">
|
|
<!-- Header -->
|
|
<header class="bg-black text-white px-6 py-4 rounded-lg flex justify-between items-center shadow-md">
|
|
<h1 class="text-2xl font-bold">Kos Calista</h1>
|
|
|
|
<div class="flex items-center gap-6">
|
|
|
|
{{-- Notifikasi sisa masa booking --}}
|
|
@isset($daysLeft)
|
|
@if ($daysLeft > 0)
|
|
<div class="bg-yellow-400 text-black px-4 py-1 rounded text-sm font-medium">
|
|
Sisa booking: <strong>{{ $daysLeft }} hari</strong>
|
|
</div>
|
|
@elseif ($daysLeft === 0)
|
|
<div class="bg-red-500 text-white px-4 py-1 rounded text-sm font-medium">
|
|
Hari ini <strong>terakhir</strong> masa booking!
|
|
</div>
|
|
@else
|
|
<div class="bg-gray-600 text-white px-4 py-1 rounded text-sm font-medium">
|
|
Masa booking sudah <strong>berakhir</strong>
|
|
</div>
|
|
@endif
|
|
@endisset
|
|
|
|
<i class="fa fa-female text-2xl"></i>
|
|
|
|
<!-- Dropdown -->
|
|
<div class="relative group">
|
|
<button class="bg-white text-blue-800 font-semibold px-4 py-2 rounded shadow hover:bg-gray-100 transition">
|
|
Menu
|
|
</button>
|
|
<div class="absolute right-0 mt-2 w-44 bg-white border border-gray-200 rounded shadow-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
|
|
@isset($booking)
|
|
<a href="{{ route('users.detail-pesanan', ['id_booking' => $booking->id_booking]) }}"
|
|
class="block px-4 py-2 text-black hover:bg-gray-100">
|
|
Detail Pesanan
|
|
</a>
|
|
<a href="{{ route('users.perpanjangan-sewa', ['id_booking' => $booking->id_booking]) }}"
|
|
class="block px-4 py-2 text-black hover:bg-gray-100">
|
|
Perpanjang Sewa
|
|
</a>
|
|
@else
|
|
<span class="block px-4 py-2 text-gray-400 cursor-not-allowed">
|
|
Detail Pesanan
|
|
</span>
|
|
@endisset
|
|
|
|
<a href="{{ route('users.profile') }}" class="block px-4 py-2 text-black hover:bg-gray-100">
|
|
Profile
|
|
</a>
|
|
<form action="{{ route('logout') }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="w-full text-left px-4 py-2 text-black hover:bg-gray-100">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Denah Kos -->
|
|
<section class="mt-8 bg-white p-6 rounded-lg shadow-lg">
|
|
<h2 class="text-2xl font-semibold text-center text-blue-800 mb-4">📍 Denah Kos</h2>
|
|
<div class="relative overflow-hidden rounded-lg">
|
|
<div id="slider" class="flex transition-transform duration-500 ease-in-out w-full">
|
|
<img src="{{ asset('assets/peta/1.png') }}" class="w-full object-contain flex-shrink-0" alt="Denah 1">
|
|
<img src="{{ asset('assets/peta/2.png') }}" class="w-full object-contain flex-shrink-0" alt="Denah 2">
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex justify-center gap-3">
|
|
<button onclick="slideTo(0)" class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full">1</button>
|
|
<button onclick="slideTo(1)" class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full">2</button>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function slideTo(index) {
|
|
const slider = document.getElementById('slider');
|
|
slider.style.transform = `translateX(-${index * 100}%)`;
|
|
}
|
|
</script>
|
|
|
|
<!-- Daftar Kamar -->
|
|
<section class="mt-10">
|
|
<h2 class="text-2xl font-semibold text-blue-800 mb-4">🛏️ Daftar Kamar</h2>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach($rooms as $room)
|
|
<a href="{{ $room->status === 'tersedia' ? route('users.detail_kamar', $room->id_kamar) : '#' }}"
|
|
class="block">
|
|
<div class="relative bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition
|
|
{{ $room->status !== 'tersedia' ? 'opacity-60 pointer-events-none' : '' }}">
|
|
|
|
<!-- Overlay jika terisi atau diperbaiki -->
|
|
@if($room->status === 'terisi')
|
|
<div class="absolute inset-0 flex items-center justify-center bg-red-200 bg-opacity-70 rounded-lg z-10">
|
|
<i class="fas fa-times-circle text-red-600 text-4xl"></i>
|
|
</div>
|
|
@elseif($room->status === 'diperbaiki')
|
|
<div class="absolute top-2 right-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded shadow z-10">
|
|
Diperbaiki
|
|
</div>
|
|
@endif
|
|
|
|
<img src="{{ asset('assets/admin/' . $room->foto) }}"
|
|
class="w-full h-40 object-cover rounded-lg shadow">
|
|
<h3 class="font-bold mt-2 text-lg">{{ $room->room_number }} - {{ $room->room_type }}</h3>
|
|
<p class="text-gray-700 font-semibold">Rp {{ number_format($room->harga, 2, ',', '.') }}</p>
|
|
<p class="text-sm {{
|
|
$room->status == 'tersedia' ? 'text-green-600' :
|
|
($room->status == 'terisi' ? 'text-red-600' : 'text-yellow-600') }}">
|
|
{{ ucfirst($room->status) }}
|
|
</p>
|
|
<p class="text-xs text-gray-500">Lantai: {{ $room->lantai }}</p>
|
|
<p class="text-xs text-gray-500">{{ Str::limit($room->deskripsi, 50) }}</p>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|