<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title>Detail Kamar - {{ $room->room_number }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen flex flex-col bg-gradient-to-b from-blue-400">
    <!-- Container Utama -->
    <div class="max-w-6xl w-full mx-auto mt-10 bg-blue-100 p-8 rounded-xl shadow-lg">
        <div class="flex flex-col md:flex-row gap-10">

            <!-- Bagian Kiri: Detail Kamar -->
            <div class="flex-1">
                <div class="flex flex-col md:flex-row gap-8">
                    <img src="{{ asset('assets/admin/' . $room->foto) }}" alt="Foto Kamar"
                        class="max-w-xs md:max-w-sm h-auto rounded-lg shadow object-contain mx-auto">

                    <div class="flex-1">
                        <h2 class="text-3xl font-bold text-gray-800 mb-3">{{ $room->room_number }} -
                            {{ $room->room_type }}
                        </h2>

                        <p class="text-lg text-gray-700 mb-2">
                            <span class="font-semibold text-blue-600">Rp
                                {{ number_format($room->harga, 2, ',', '.') }}</span> /
                            bulan
                        </p>

                        <p class="text-sm mb-2">
                            Status:
                            <span
                                class="{{ $room->status == 'tersedia' ? 'text-green-600' : ($room->status == 'terisi' ? 'text-red-600' : 'text-yellow-500') }} font-semibold">
                                {{ ucfirst($room->status) }}
                            </span>
                        </p>

                        <p class="text-sm text-gray-600 mb-2">Lantai: {{ $room->lantai }}</p>

                        @if (!empty($room->fasilitas))
                            <div class="mb-4">
                                <h3 class="text-md font-semibold text-gray-800 mb-1">Fasilitas:</h3>
                                <ul class="list-disc list-inside text-gray-700 text-sm">
                                    @foreach (explode(',', $room->fasilitas) as $fasilitas)
                                        <li>{{ trim($fasilitas) }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if (!empty($room->deskripsi))
                        @php
                            // Pisahkan berdasarkan dua bagian utama: 'Fasilitas umum :' dan 'Aturan di Kos Calista'
                            $fasilitas = '';
                            $aturan = '';
                    
                            if (preg_match('/Fasilitas umum\s*:\s*(.+?)\s*Aturan di Kos Calista\s*/s', $room->deskripsi, $match)) {
                                $fasilitas = trim($match[1]);
                            }
                    
                            if (preg_match('/Aturan di Kos Calista\s*(.+)/s', $room->deskripsi, $match)) {
                                $aturan = trim($match[1]);
                            }
                    
                            // Ambil item berdasarkan pola angka di depan (1. xxx 2. xxx ...)
                            preg_match_all('/\d+\.\s*([^0-9]+)/', $fasilitas, $fasilitasList);
                            preg_match_all('/\d+\.\s*([^0-9]+)/', $aturan, $aturanList);
                        @endphp
                    
                        <div class="mb-4">
                            <h3 class="text-md font-semibold text-gray-800 mb-1">Fasilitas Umum:</h3>
                            <ul class="list-disc pl-5 text-gray-700 text-sm leading-relaxed">
                                @foreach ($fasilitasList[1] as $item)
                                    <li>{{ trim($item) }}</li>
                                @endforeach
                            </ul>
                        </div>
                    
                        <div class="mb-4">
                            <h3 class="text-md font-semibold text-gray-800 mb-1">Aturan di Kos Calista:</h3>
                            <ul class="list-decimal pl-5 text-gray-700 text-sm leading-relaxed">
                                @foreach ($aturanList[1] as $item)
                                    <li>{{ trim($item) }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif                    

                        <div class="mt-6">
                            <a href="{{ route('users.peta') }}"
                                class="inline-block bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium px-5 py-2 rounded-lg transition">
                                ← Kembali ke Daftar Kamar
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bagian Kanan: Form Booking -->
            @if ($room->status == 'tersedia')
                <div class="w-full md:w-1/3 mt-10 md:mt-0">
                    <div class="bg-gray-100 p-6 rounded-lg shadow-md">
                        <h3 class="text-xl font-bold text-gray-800 mb-6">Formulir Booking</h3>

                        @if (session('success'))
                            <div class="bg-green-100 text-green-700 px-4 py-3 rounded mb-6">
                                {{ session('success') }}
                            </div>
                        @endif

                        <form method="POST" action="{{ route('users.storebooking') }}" class="space-y-4">
                            @csrf
                            <input type="hidden" name="id_kamar" value="{{ $room->id_kamar }}">
                            <input type="hidden" name="id_user" value="{{ Auth::id() }}">
                            <input type="hidden" name="tanggal_booking" value="{{ date('Y-m-d') }}">

                            <div>
                                <label class="block text-gray-700 font-medium mb-1">Nama Pemesan</label>
                                <input type="text" value="{{ Auth::user()->name }}" disabled
                                    class="w-full bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 cursor-not-allowed">
                            </div>

                            <div>
                                <label for="tanggal_checkin" class="block text-gray-700 font-medium mb-1">Tanggal
                                    Check-in</label>
                                <input type="date" id="tanggal_checkin" name="tanggal_checkin" required
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400">
                            </div>

                            <div>
                                <label for="tanggal_checkout" class="block text-gray-700 font-medium mb-1">Tanggal
                                    Check-out</label>
                                <input type="date" id="tanggal_checkout" name="tanggal_checkout" required
                                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-400">
                                <p id="error-message" class="text-red-500 text-sm mt-1 hidden">Tanggal Check-out harus sama
                                    dengan tanggal Check-in!</p>
                            </div>

                            <script>
                                const checkinInput = document.getElementById('tanggal_checkin');
                                const checkoutInput = document.getElementById('tanggal_checkout');
                                const errorMessage = document.getElementById('error-message');

                                checkoutInput.addEventListener('change', function () {
                                    const checkinDate = new Date(checkinInput.value);
                                    const checkoutDate = new Date(checkoutInput.value);

                                    // Mendapatkan hanya tanggal (day) dari tanggal check-in dan check-out
                                    const checkinDay = checkinDate.getDate();
                                    const checkoutDay = checkoutDate.getDate();

                                    // Validasi apakah tanggal checkout tidak sama dengan tanggal checkin
                                    if (checkoutDay !== checkinDay) {
                                        errorMessage.classList.remove('hidden'); // Menampilkan pesan error
                                        checkoutInput.setCustomValidity("Tanggal Check-out harus sama dengan tanggal Check-in.");
                                    }
                                    else {
                                        errorMessage.classList.add('hidden'); // Menyembunyikan pesan error
                                        checkoutInput.setCustomValidity(""); // Menghapus validasi custom
                                    }
                                });
                            </script>

                            <div class="pt-4">
                                <button type="submit"
                                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition">
                                    Sewa Sekarang
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            @else
                <p class="mt-10 text-center text-red-500 font-semibold text-lg w-full">Kamar ini sudah terisi.</p>
            @endif

        </div>
    </div>

</body>

</html>