<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pilih Ruangan</title>
    <link rel="icon" type="image/x-icon" href="<?php echo e(asset('images/logo.png')); ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }

        /* Animasi fade-in */
        .card-room {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s forwards;
        }
        @keyframes fadeInUp {
            to { opacity: 1; transform: translateY(0); }
        }

        .card-room:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col items-center justify-center p-6 relative">

    <!-- Tombol Login Admin -->
<div class="absolute top-5 right-5 z-10">
    <a href="<?php echo e(route('login')); ?>" 
       class="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold 
              text-gray-800 backdrop-blur-md bg-white/60 border border-white/40 
              shadow-md hover:bg-white/80 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" 
             class="h-5 w-5 text-gray-700" fill="none" 
             viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M15 12H3m12 0l-4-4m4 4l-4 4m10-10v12a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2h8" />
        </svg>
        <span class="hidden sm:inline">Login Admin</span>
    </a>
</div>

    <!-- Kontainer Utama -->
    <div class="w-full max-w-5xl bg-white rounded-3xl shadow-xl p-8 sm:p-12 text-center relative z-0">

        <!-- Logo -->
        <img src="<?php echo e(asset('images/logo.png')); ?>" alt="Logo Perusahaan" 
             class="w-28 h-24 mx-auto mb-6">

        <!-- Hero Section -->
        <h1 class="text-4xl font-extrabold text-emerald-700 mb-3">Booking Room</h1>
        <p class="text-lg text-gray-600 mb-10">
            Please select the room you would like to book
        </p>

        <!-- Grid Card -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="room-grid"></div>
    </div>

    <!-- Script Generate Card -->
    <script>
        const rooms = [
            'guest_room_1',
            'guest_room_2',
            'meeting_room_1',
            'meeting_room_4',
            'meeting_room_5',
            'meeting_room_qc',
            'training_room_1',
            'training_room_2',
            'training_room_3'
        ];
        
        const roomGrid = document.getElementById('room-grid');

        rooms.forEach((room, index) => {
            const card = document.createElement('a');
            card.href = `<?php echo e(url('/calendar/room/${room}')); ?>`;
            card.className = `
                card-room flex items-center justify-center 
                h-32 sm:h-36 
                rounded-2xl text-center 
                bg-gradient-to-br from-emerald-500 to-teal-600 
                text-white font-bold text-lg sm:text-xl 
                shadow-lg relative overflow-hidden
            `;
            card.style.animationDelay = `${index * 0.1}s`;

            card.innerHTML = `
                <div class="absolute inset-0 bg-black opacity-10"></div>
                <div class="relative z-10">
                    <h3 class="tracking-wide">
                        ${room.replace(/_/g, ' ').toUpperCase()}
                    </h3>
                </div>
            `;
            roomGrid.appendChild(card);
        });
    </script>
</body>
</html>
<?php /**PATH D:\Hafiiz\Project\Code Magang\Finall\Apps Asama Layer Security\booking-ruangan-tamu\resources\views/calendar/index.blade.php ENDPATH**/ ?>