<!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>
