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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Room Management - <?php echo e(config('app.name', 'Laravel')); ?></title>
    <link rel="icon" type="image/svg+xml" href="<?php echo e(asset('favicon.svg')); ?>">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg: #eef4ff;
            --panel: rgba(255, 255, 255, 0.9);
            --text: #172554;
            --muted: #64748b;
            --line: #dbe6f7;
            --primary: #4f46e5;
            --secondary: #2563eb;
            --shadow-soft: 0 28px 55px rgba(59, 84, 145, 0.10);
            --shadow-card: 0 18px 32px rgba(148, 163, 184, 0.12);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: var(--font-main);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.08), transparent 20%),
                radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 22%),
                linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
            color: var(--text);
            -webkit-font-smoothing: antialiased;
        }

        .app {
            display: flex;
            min-height: 100vh;
        }

        .content {
            flex: 1;
            padding: 28px;
            width: 100%;
            transition: all 0.3s ease;
            position: relative;
        }

        [x-cloak] {
            display: none !important;
        }

        .shell {
            max-width: 1480px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .surface {
            background: var(--panel);
            border: 1px solid rgba(255, 255, 255, 0.82);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(16px);
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
        }

        .hero-card {
            overflow: hidden;
            border-radius: 32px;
            padding: 24px;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.14), transparent 22%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(37, 99, 235, 0.08));
            color: var(--primary);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            border: 1px solid rgba(99, 102, 241, 0.10);
        }

        .hero-title {
            margin: 16px 0 8px;
            font-size: clamp(30px, 4vw, 44px);
            line-height: 0.98;
            letter-spacing: -0.05em;
            font-weight: 900;
        }

        .hero-text {
            margin: 0;
            color: var(--muted);
            line-height: 1.8;
            font-size: 14px;
            max-width: 760px;
        }

        .hero-mini-grid {
            margin-top: 22px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .hero-mini-card {
            position: relative;
            overflow: hidden;
            min-height: 136px;
            padding: 24px 22px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(214, 226, 247, 0.98);
            box-shadow: var(--shadow-card);
        }

        .hero-mini-card::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 66px;
            height: 66px;
            border-bottom-left-radius: 32px;
            opacity: 0.72;
        }

        .hero-mini-card.primary::after { background: #ede9fe; }
        .hero-mini-card.blue::after { background: #e0edff; }
        .hero-mini-card.amber::after { background: #fff4df; }
        .hero-mini-card.green::after { background: #dcfce7; }

        .hero-mini-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .hero-mini-label {
            color: var(--muted);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .hero-mini-top svg { position: relative; z-index: 1; }

        .hero-mini-value {
            margin-top: 12px;
            font-size: 32px;
            font-weight: 900;
            line-height: 1;
        }

        .hero-mini-card.primary .hero-mini-value { color: #4f46e5; }
        .hero-mini-card.blue .hero-mini-value { color: #2563eb; }
        .hero-mini-card.amber .hero-mini-value { color: #f59e0b; }
        .hero-mini-card.green .hero-mini-value { color: #16a34a; }

        .hero-mini-sub {
            margin-top: 12px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
        }

        .section-card {
            border-radius: 32px;
            overflow: hidden;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.12), transparent 22%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
        }

        .section-head {
            padding: 22px 24px;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: center;
            border-bottom: 1px solid rgba(219, 230, 247, 0.95);
        }

        .section-title {
            margin: 0;
            color: #172554;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .section-subtitle {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .primary-btn,
        .time-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 42px;
            padding: 0 14px;
            border-radius: 16px;
            font-size: 13px;
            font-weight: 900;
            white-space: nowrap;
        }

        .primary-btn {
            color: #fff;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            box-shadow: 0 14px 24px rgba(79, 70, 229, 0.22);
            transition: all 0.2s ease;
        }

        .primary-btn:hover { transform: translateY(-1px); }

        .time-chip {
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(214, 226, 247, 0.98);
            color: #233876;
            box-shadow: 0 10px 20px rgba(148, 163, 184, 0.10);
        }

        .alert-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 18px;
            border-radius: 22px;
            font-size: 14px;
            font-weight: 700;
        }

        .alert-card.success { border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d; }
        .alert-card.error { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }

        .room-card {
            background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.98));
            box-shadow: 0 14px 26px rgba(148, 163, 184, 0.10);
        }

        .room-card:hover {
            transform: translateY(-4px);
            border-color: rgba(79, 70, 229, 0.28);
            box-shadow: 0 22px 34px rgba(59, 84, 145, 0.14);
        }

        .status-pill {
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
        }

        .type-pill {
            backdrop-filter: blur(12px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
        }

        .modal-shell {
            background:
                radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 24%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
        }

        .modal-hero {
            background:
                linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.95) 58%, rgba(14, 165, 233, 0.9));
        }

        .modal-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 18%),
                radial-gradient(circle at right center, rgba(125, 211, 252, 0.24), transparent 25%);
        }

        .modal-hero::after {
            content: "";
            position: absolute;
            inset: auto auto -90px -40px;
            width: 220px;
            height: 220px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 60%, transparent 70%);
        }

        .schedule-panel {
            background:
                linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.96));
        }

        .safe-text {
            min-width: 0;
            max-width: 100%;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .slot-card {
            min-width: 0;
            overflow: hidden;
        }

        .slot-card-meta,
        .slot-card-note {
            min-width: 0;
            max-width: 100%;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .slot-card-meta {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .slot-card-note {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .slot-card-badge {
            flex: 0 0 auto;
            max-width: 96px;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
            text-align: center;
            justify-content: center;
        }

        .summary-panel {
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(245, 249, 255, 0.98));
        }

        @media (max-width: 1024px) {
            .app {
                display: block;
            }

            .content {
                padding: 20px;
                padding-top: 80px;
            }

            .hero-mini-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .section-head {
                flex-direction: column;
                align-items: stretch;
            }
        }

        @media (max-width: 640px) {
            .content {
                padding: 16px;
                padding-top: 80px;
            }

            .hero-card,
            .section-card {
                border-radius: 24px;
            }

            .hero-mini-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <?php echo $__env->make('partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <main class="content">
            <div class="shell" x-data="roomBookingScheduler(<?php echo \Illuminate\Support\Js::from($roomSchedules)->toHtml() ?>, <?php echo \Illuminate\Support\Js::from($scheduleDateStart)->toHtml() ?>)">
                <?php
                    $availableRooms = $rooms->where('is_available', true)->count();
                    $pendingRooms = $rooms->where('has_pending', true)->count();
                    $inactiveRooms = $rooms->filter(fn ($room) => in_array($room->manual_status ?? 'available', ['maintenance', 'closed'], true))->count();
                    $totalCapacity = $rooms->sum('capacity');
                ?>

                <section class="hero-card surface">
                    <span class="pill">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                        Manajemen Ruangan
                    </span>
                    <h1 class="hero-title">Pinjam Ruangan</h1>
                    <p class="hero-text">
                        Cek status ruangan, lihat slot waktu yang tersedia, lalu ajukan booking satu atau beberapa jam agar kebutuhan rapat, koordinasi, dan kegiatan internal lebih teratur.
                    </p>

                    <div class="hero-mini-grid">
                        <div class="hero-mini-card primary">
                            <div class="hero-mini-top">
                                <div class="hero-mini-label">Total Ruangan</div>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21h18M5 21V7l8-4v18M19 21V11l-6-3M9 9h1m-1 4h1m-1 4h1m5-4h1m-1 4h1" />
                                </svg>
                            </div>
                            <div class="hero-mini-value"><?php echo e($rooms->count()); ?></div>
                            <div class="hero-mini-sub">Semua ruang yang siap dicek jadwalnya.</div>
                        </div>
                        <div class="hero-mini-card blue">
                            <div class="hero-mini-top">
                                <div class="hero-mini-label">Tersedia</div>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div class="hero-mini-value"><?php echo e($availableRooms); ?></div>
                            <div class="hero-mini-sub">Ruangan yang masih bisa dipilih.</div>
                        </div>
                        <div class="hero-mini-card amber">
                            <div class="hero-mini-top">
                                <div class="hero-mini-label">Pending</div>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div class="hero-mini-value"><?php echo e($pendingRooms); ?></div>
                            <div class="hero-mini-sub">Ada pengajuan pada waktu berjalan.</div>
                        </div>
                        <div class="hero-mini-card green">
                            <div class="hero-mini-top">
                                <div class="hero-mini-label">Kapasitas</div>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a4 4 0 00-4-4h-1M9 20H4v-2a4 4 0 014-4h1m0-4a4 4 0 118 0 4 4 0 01-8 0z" />
                                </svg>
                            </div>
                            <div class="hero-mini-value"><?php echo e($totalCapacity); ?></div>
                            <div class="hero-mini-sub"><?php echo e($inactiveRooms); ?> ruangan sedang maintenance/ditutup.</div>
                        </div>
                    </div>
                </section>

                <?php if(session('success')): ?>
                <div class="alert-card success" x-data="{ show: true }" x-show="show">
                    <div class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                        <span class="text-sm font-medium"><?php echo e(session('success')); ?></span>
                    </div>
                    <button @click="show = false" class="text-green-600 hover:text-green-800 text-xl font-bold">&times;</button>
                </div>
                <?php endif; ?>

                <?php if(session('error')): ?>
                <div class="alert-card error">
                    <span class="text-sm font-medium"><?php echo e(session('error')); ?></span>
                </div>
                <?php endif; ?>

                <section class="section-card surface">
                    <div class="section-head">
                        <div>
                            <h2 class="section-title">Daftar Ruangan</h2>
                            <p class="section-subtitle">Pilih ruangan yang sesuai, lalu cek slot jadwal yang masih tersedia pada tanggal yang dibutuhkan.</p>
                        </div>

                        <div class="flex flex-col sm:flex-row sm:items-center gap-3">
                            <?php if(auth()->check() && auth()->user()->role === 'sekretariat'): ?>
                            <a href="<?php echo e(route('rooms.create')); ?>" class="primary-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                                </svg>
                                Tambah Ruangan
                            </a>
                            <?php endif; ?>

                            <div class="time-chip">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <span><?php echo e(now()->format('d M Y, H:i')); ?></span>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-5 md:p-6">

                    <?php $__empty_1 = true; $__currentLoopData = $rooms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $room): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php
                    $isAvailable = $room->is_available ?? true;
                    $hasPending = $room->has_pending ?? false;
                    $manualStatus = $room->manual_status ?? 'available';
                    $statusBadgeClass = 'bg-green-600 text-white';
                    $statusBadgeLabel = 'Tersedia';
                    $buttonLabel = 'Pinjam Ruangan';
                    $canOpenBooking = !in_array($manualStatus, ['maintenance', 'closed'], true);
                    $roomType = strtolower((string) ($room->type ?? 'standard'));
                    $typeBadgeClass = 'bg-slate-900/45 text-white border-white/20';

                    $imageUrl = !empty($room->image)
                    ? asset('storage/' . $room->image)
                    : 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80';

                    if (str_contains($roomType, 'meeting')) {
                        $typeBadgeClass = 'bg-blue-500/30 text-blue-50 border-blue-200/40';
                    } elseif (str_contains($roomType, 'office')) {
                        $typeBadgeClass = 'bg-emerald-500/30 text-emerald-50 border-emerald-200/40';
                    } elseif (str_contains($roomType, 'lab')) {
                        $typeBadgeClass = 'bg-violet-500/30 text-violet-50 border-violet-200/40';
                    }

                    if ($manualStatus === 'maintenance') {
                        $statusBadgeClass = 'bg-amber-500/95 text-white border border-amber-300/70';
                        $statusBadgeLabel = 'Pemeliharaan';
                        $buttonLabel = 'Ruangan Tidak Tersedia';
                    } elseif ($manualStatus === 'closed') {
                        $statusBadgeClass = 'bg-slate-800/95 text-white border border-slate-500/70';
                        $statusBadgeLabel = 'Ditutup';
                        $buttonLabel = 'Ruangan Tidak Tersedia';
                    } elseif (!$isAvailable) {
                        $statusBadgeClass = 'bg-rose-600/95 text-white border border-rose-300/70';
                        $statusBadgeLabel = 'Dipakai';
                        $buttonLabel = 'Lihat Jadwal';
                    } elseif ($hasPending) {
                        $statusBadgeClass = 'bg-amber-500/95 text-white border border-amber-300/70';
                        $statusBadgeLabel = 'Pending';
                        $buttonLabel = 'Lihat Jadwal';
                    } else {
                        $statusBadgeClass = 'bg-emerald-600/95 text-white border border-emerald-300/70';
                    }
                    ?>

                    <div class="room-card rounded-[24px] border border-slate-200/90 overflow-hidden transition-all duration-300 flex flex-col h-full group">
                        <div class="h-48 relative overflow-hidden">
                            <img src="<?php echo e($imageUrl); ?>"
                                alt="<?php echo e($room->name); ?>"
                                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                                onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80';">

                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>

                            <div class="absolute top-3 right-3 z-20">
                                <span class="status-pill inline-flex items-center px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-[0.18em] <?php echo e($statusBadgeClass); ?>">
                                    <?php echo e($statusBadgeLabel); ?>

                                </span>
                            </div>

                            <?php if(auth()->check() && auth()->user()->role === 'sekretariat'): ?>
                            <div class="absolute top-3 left-3 z-20 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <a href="<?php echo e(route('rooms.edit', $room->id)); ?>"
                                    class="p-2 bg-white/90 hover:bg-white text-blue-600 rounded-lg shadow-md transition-colors"
                                    title="Edit">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </a>

                                <form action="<?php echo e(route('rooms.destroy', $room->id)); ?>" method="POST" onsubmit="return confirm('Yakin ingin menghapus ruangan ini?')">
                                    <?php echo csrf_field(); ?>
                                    <?php echo method_field('DELETE'); ?>
                                    <button type="submit"
                                        class="p-2 bg-white/90 hover:bg-red-50 text-red-600 rounded-lg shadow-md transition-colors"
                                        title="Hapus">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </form>
                            </div>
                            <?php endif; ?>

                            <div class="absolute bottom-3 left-3 z-20">
                                <span class="type-pill inline-flex items-center px-3 py-1 rounded-full text-[10px] font-bold border uppercase tracking-[0.18em] <?php echo e($typeBadgeClass); ?>">
                                    <?php echo e($room->type ?? 'Standard'); ?>

                                </span>
                            </div>
                        </div>

                        <div class="p-5 flex-1 flex flex-col">
                            <div class="mb-3">
                                <h3 class="safe-text text-xl font-bold text-slate-900 group-hover:text-blue-700 transition-colors line-clamp-1">
                                    <?php echo e($room->name); ?>

                                </h3>
                                <p class="safe-text text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-1 flex items-center gap-1">
                                    <svg class="w-3 h-3 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                    </svg>
                                    <?php echo e($room->building ?? '-'); ?> • Lt. <?php echo e($room->floor ?? '-'); ?>

                                </p>
                            </div>

                            <p class="safe-text text-sm text-slate-600 mb-4 line-clamp-2 leading-relaxed flex-1">
                                <?php echo e($room->description ?: 'Tidak ada deskripsi ruangan.'); ?>

                            </p>

                            <div class="grid grid-cols-2 gap-3 text-xs text-slate-500 mb-5 pt-4 border-t border-slate-100">
                                <div class="rounded-2xl bg-slate-50 border border-slate-100 px-3 py-3 flex items-center gap-1.5">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0" />
                                    </svg>
                                    <span class="font-semibold text-slate-700"><?php echo e($room->capacity ?? 0); ?> Orang</span>
                                </div>
                                <div class="rounded-2xl bg-blue-50 border border-blue-100 px-3 py-3 flex items-center gap-1.5">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10m-11 9h12a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v11a2 2 0 002 2z" />
                                    </svg>
                                    <span class="font-semibold text-blue-700">Jadwal 07.00-18.00</span>
                                </div>
                            </div>

                            <button
                                @click="openBookingModal(<?php echo e($room->id); ?>, <?php echo \Illuminate\Support\Js::from($room->name)->toHtml() ?>, <?php echo e($room->chair_limit ?? 'null'); ?>)"
                                class="w-full py-2.5 px-4 rounded-lg font-bold text-sm transition-all duration-200 border flex items-center justify-center gap-2
                                <?php echo e(!$canOpenBooking ? 'bg-gray-100 text-gray-400 border-gray-200 cursor-not-allowed' : 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700 shadow-md active:scale-95'); ?>"
                                <?php echo e(!$canOpenBooking ? 'disabled' : ''); ?>>
                                <?php echo e($buttonLabel); ?>

                            </button>
                        </div>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="col-span-full py-20 text-center bg-white rounded-xl border border-dashed border-gray-300">
                        <h3 class="text-lg font-medium text-gray-400 italic">Belum ada data ruangan tersedia.</h3>
                    </div>
                    <?php endif; ?>
                    </div>
                </section>

                    <div x-show="openModal" class="fixed inset-0 z-[100] overflow-y-auto pointer-events-none" x-cloak>
                        <div class="fixed inset-0 z-0 bg-gray-900/60 backdrop-blur-sm transition-opacity pointer-events-auto" @click="closeBookingModal()"></div>
                        <div class="relative z-10 flex min-h-full items-center justify-center p-4 pointer-events-none">
                            <div class="modal-shell relative rounded-[30px] shadow-2xl w-full max-w-5xl overflow-hidden transition-all transform border border-white/70 pointer-events-auto"
                                @click.stop
                                @keydown.escape.window="closeBookingModal()"
                                role="dialog"
                                aria-modal="true"
                                aria-labelledby="roomBookingModalTitle"
                                x-transition:enter="ease-out duration-300"
                                x-transition:enter-start="opacity-0 scale-95"
                                x-transition:enter-end="opacity-100 scale-100">

                                <form action="<?php echo e(route('rooms.booking.store')); ?>" method="POST" @submit="submitBooking($event)">
                                    <?php echo csrf_field(); ?>
                                    <div class="bg-white px-6 py-4 md:px-7 md:py-5 border-b border-slate-200">
                                        <div class="relative flex justify-between items-start gap-4">
                                            <div>
                                                <h3 id="roomBookingModalTitle" class="text-xl md:text-2xl font-extrabold tracking-tight leading-tight text-slate-900">Pinjam <span x-text="selectedRoomName" class="text-blue-700"></span></h3>
                                                <p class="mt-2 max-w-2xl text-sm text-slate-500 leading-relaxed">
                                                    Pilih tanggal, slot mulai, lalu slot akhir agar jadwal ruangan tetap rapi, transparan, dan tidak bentrok dengan pengguna lain.
                                                </p>
                                            </div>
                                            <button type="button" @click="closeBookingModal()" class="h-10 w-10 shrink-0 rounded-full border border-slate-200 bg-slate-50 text-slate-500 hover:bg-slate-100 hover:text-slate-700 text-2xl leading-none transition-colors">&times;</button>
                                        </div>
                                    </div>

                                    <div class="p-6 md:p-7 space-y-5">
                                        <input type="hidden" name="room_id" x-model="selectedRoom">
                                        <input type="hidden" name="start_time" :value="selectedStartTime">
                                        <input type="hidden" name="end_time" :value="selectedEndTime">

                                        <div class="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_300px] gap-6">
                                            <div class="space-y-5">
                                                <div>
                                                    <label class="block text-sm font-semibold text-slate-700 mb-2">Judul Kegiatan</label>
                                                    <input type="text"
                                                        name="title"
                                                        x-model.trim="activityTitle"
                                                        required
                                                        class="w-full rounded-2xl border border-slate-300 bg-white/95 px-4 py-3 text-sm shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                        placeholder="Contoh: Rapat Koordinasi">
                                                </div>

                                                <div>
                                                    <label class="block text-sm font-semibold text-slate-700 mb-2">Kebutuhan Kursi</label>
                                                    <input type="number"
                                                        name="chair_count"
                                                        x-model.number="chairCount"
                                                        @input="normalizeChairCount()"
                                                        :max="chairLimit || null"
                                                        min="1"
                                                        required
                                                        class="w-full rounded-2xl border border-slate-300 bg-white/95 px-4 py-3 text-sm shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                                        :placeholder="chairLimit ? `Maksimal ${chairLimit} kursi` : 'Contoh: 30'">
                                                    <p x-show="chairLimit" class="mt-2 text-xs text-slate-500">
                                                        Maksimal <span x-text="chairLimit"></span> kursi untuk ruangan ini.
                                                    </p>
                                                    <?php $__errorArgs = ['chair_count'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                    <p class="mt-2 text-sm text-red-600"><?php echo e($message); ?></p>
                                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                                </div>

                                                <div class="schedule-panel rounded-[26px] border border-slate-200 p-4 md:p-5 shadow-sm">
                                                    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3 mb-4">
                                                        <div>
                                                            <div class="text-sm font-semibold text-slate-800">Pilih Tanggal & Rentang Waktu</div>
                                                            <div class="text-xs text-slate-500 mt-1">Jadwal ditampilkan per 1 jam, mulai 07:00 sampai 18:00. Klik slot mulai, lalu klik slot akhir untuk booking lebih dari 1 jam.</div>
                                                        </div>
                                                        <div class="w-full lg:w-auto">
                                                            <input type="date"
                                                                x-model="selectedDate"
                                                                :min="minBookingDate"
                                                                @change="handleDateChange()"
                                                                class="w-full lg:w-[240px] min-h-[58px] rounded-2xl border border-slate-300 bg-gradient-to-b from-white to-slate-50 px-5 py-4 text-base font-black text-slate-900 shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                        </div>
                                                    </div>

                                                    <div class="mb-4">
                                                        <div class="flex items-center gap-2">
                                                            <button type="button"
                                                                @click="shiftDateRange('left')"
                                                                class="hidden sm:inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 shadow-sm transition hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700"
                                                                aria-label="Scroll tanggal ke kiri">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                                                                </svg>
                                                            </button>

                                                            <div x-ref="dateScroller" class="flex-1 overflow-x-auto pb-1 snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none]" style="scrollbar-width: none; -ms-overflow-style: none;">
                                                                <div class="flex min-w-max gap-2">
                                                                    <template x-for="day in dateOptions" :key="day.value">
                                                                        <button type="button"
                                                                            @click="selectDate(day.value)"
                                                                            class="min-w-[96px] rounded-2xl border px-3 py-2.5 text-left transition-all snap-start"
                                                                            :class="selectedDate === day.value ? 'border-blue-600 bg-blue-600 text-white shadow-sm' : 'border-slate-200 bg-white text-slate-700 hover:border-blue-200 hover:bg-blue-50'">
                                                                            <div class="text-[11px] font-semibold uppercase tracking-wide" x-text="day.dayLabel"></div>
                                                                            <div class="text-sm font-bold mt-1" x-text="day.dateLabel"></div>
                                                                        </button>
                                                                    </template>
                                                                </div>
                                                            </div>

                                                            <button type="button"
                                                                @click="shiftDateRange('right')"
                                                                class="hidden sm:inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 shadow-sm transition hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700"
                                                                aria-label="Scroll tanggal ke kanan">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                                                </svg>
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <div class="rounded-[22px] border border-slate-200 bg-white/95 px-4 py-3.5 mb-4 shadow-sm">
                                                        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                                                            <div>
                                                                <div class="text-sm font-semibold text-slate-800">Ketersediaan Tanggal Dipilih</div>
                                                                <div class="text-xs text-slate-500 mt-1">
                                                                    <span x-text="availableSlotCount"></span> slot kosong dari <span x-text="timeSlots.length"></span> slot harian.
                                                                </div>
                                                            </div>

                                                            <div class="flex flex-wrap gap-2 text-[11px] font-semibold">
                                                                <span class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 text-emerald-700">
                                                                    <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
                                                                    Tersedia
                                                                </span>
                                                                <span class="inline-flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-amber-700">
                                                                    <span class="h-2 w-2 rounded-full bg-amber-500"></span>
                                                                    Pending
                                                                </span>
                                                                <span class="inline-flex items-center gap-1.5 rounded-full border border-rose-200 bg-rose-50 px-2.5 py-1 text-rose-700">
                                                                    <span class="h-2 w-2 rounded-full bg-rose-500"></span>
                                                                    Booked
                                                                </span>
                                                                <span class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-slate-600">
                                                                    <span class="h-2 w-2 rounded-full bg-slate-400"></span>
                                                                    Lewat
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                                        <template x-for="slot in timeSlots" :key="slot.key">
                                                            <button type="button"
                                                                @click="selectSlot(slot)"
                                                                class="slot-card rounded-[22px] border p-4 text-left transition-all duration-200 min-h-[136px] flex flex-col justify-between shadow-sm"
                                                                :class="slotClasses(slot)">
                                                                <div class="flex items-start justify-between gap-3 min-w-0">
                                                                    <div class="min-w-0 flex-1">
                                                                        <div class="safe-text text-lg font-bold" x-text="slot.label"></div>
                                                                        <div class="slot-card-meta text-sm mt-2" :class="slot.metaClass" x-text="slot.metaLabel" :title="slot.metaLabel"></div>
                                                                    </div>
                                                                    <span class="slot-card-badge inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-bold"
                                                                        :class="slot.badgeClass"
                                                                        x-text="slot.badgeLabel"></span>
                                                                </div>
                                                                    <div class="slot-card-note text-xs mt-3"
                                                                        :class="slot.noteClass"
                                                                        x-text="slot.note"
                                                                        :title="slot.note"></div>
                                                            </button>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="space-y-4">
                                                <div class="summary-panel rounded-[26px] border border-slate-200 p-4 md:p-5 shadow-sm">
                                                    <div class="flex items-center justify-between gap-3">
                                                        <div class="text-sm font-semibold text-slate-800">Ringkasan Booking</div>
                                                        <span class="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-[11px] font-semibold text-blue-700" x-text="selectedDurationLabel || '1 slot = 60 menit'"></span>
                                                    </div>
                                                    <div class="mt-4 space-y-3 text-sm">
                                                        <div class="rounded-xl bg-slate-50 border border-slate-200 px-4 py-3">
                                                            <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Tanggal</div>
                                                            <div class="font-semibold text-slate-700" x-text="formattedSelectedDate"></div>
                                                        </div>

                                                        <div class="rounded-xl bg-slate-50 border border-slate-200 px-4 py-3">
                                                            <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Waktu Dipilih</div>
                                                            <div class="font-semibold text-slate-700" x-text="selectedSlotLabel || 'Belum ada waktu dipilih'"></div>
                                                        </div>

                                                        <div x-show="selectedSlotLabel" class="rounded-2xl bg-gradient-to-r from-blue-700 via-blue-600 to-cyan-500 border border-blue-500 px-4 py-3 text-white shadow-md">
                                                            <div class="text-[11px] uppercase tracking-wide text-blue-100 mb-1">Rentang Aktif</div>
                                                            <div class="font-bold text-base" x-text="selectedSlotLabel"></div>
                                                            <div class="text-xs text-blue-100 mt-1">Jadwal ini akan dipakai saat booking dikirim.</div>
                                                        </div>

                                                        <div class="rounded-xl bg-blue-50 border border-blue-100 px-4 py-3">
                                                            <div class="text-[11px] uppercase tracking-wide text-blue-500 mb-1">Info Jadwal</div>
                                                            <div class="text-sm text-blue-800 leading-relaxed">
                                                                Rentang waktu tidak boleh melewati slot <span class="font-semibold">Pending</span>, <span class="font-semibold">Booked</span>, atau jam yang sudah lewat.
                                                            </div>
                                                        </div>

                                                        <div x-show="bookingError" class="rounded-xl bg-rose-50 border border-rose-200 px-4 py-3 text-sm text-rose-700" x-text="bookingError"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="bg-slate-50/90 px-6 py-4 md:px-7 flex flex-row-reverse gap-3 border-t border-slate-200">
                                        <button type="submit"
                                            :disabled="!canSubmitBooking"
                                            class="inline-flex items-center justify-center px-5 py-2.5 rounded-2xl font-bold text-sm shadow-sm transition-colors"
                                            :class="canSubmitBooking ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-slate-200 text-slate-400 cursor-not-allowed'">Konfirmasi</button>
                                        <button type="button" @click="closeBookingModal()" class="inline-flex items-center justify-center bg-white border border-slate-300 px-5 py-2.5 rounded-2xl font-bold text-sm text-slate-700 hover:bg-slate-50 transition-colors">Batal</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

            </div>
        </main>
    </div>

    <script>
        function roomBookingScheduler(roomSchedules, scheduleDateStart) {
            return {
                openModal: false,
                selectedRoom: null,
                selectedRoomName: '',
                activityTitle: '',
                chairCount: null,
                chairLimit: null,
                selectedDate: scheduleDateStart,
                minBookingDate: scheduleDateStart,
                dateWindowStart: scheduleDateStart,
                selectedStartTime: '',
                selectedEndTime: '',
                selectedSlotLabel: '',
                bookingError: '',
                roomSchedules: roomSchedules || {},
                dateOptions: [],

                init() {
                    this.dateWindowStart = this.normalizeDate(this.dateWindowStart);
                    this.dateOptions = this.generateDateOptions();
                },

                openBookingModal(roomId, roomName, chairLimit = null) {
                    this.selectedRoom = String(roomId);
                    this.selectedRoomName = roomName;
                    this.chairLimit = chairLimit;
                    this.selectedDate = this.normalizeDate(this.selectedDate);
                    this.dateWindowStart = this.selectedDate;
                    this.selectedStartTime = '';
                    this.selectedEndTime = '';
                    this.selectedSlotLabel = '';
                    this.activityTitle = '';
                    this.chairCount = null;
                    this.bookingError = '';
                    this.dateOptions = this.generateDateOptions();
                    this.openModal = true;
                },

                closeBookingModal() {
                    this.openModal = false;
                    this.chairLimit = null;
                    this.bookingError = '';
                },

                normalizeDate(value) {
                    const today = this.dateOnly(new Date());
                    return value && value >= today ? value : today;
                },

                dateOnly(date) {
                    const local = new Date(date);
                    local.setMinutes(local.getMinutes() - local.getTimezoneOffset());
                    return local.toISOString().slice(0, 10);
                },

                generateDateOptions() {
                    const start = new Date(this.dateWindowStart + 'T00:00:00');
                    const options = [];

                    for (let index = 0; index < 7; index += 1) {
                        const current = new Date(start);
                        current.setDate(start.getDate() + index);
                        options.push({
                            value: this.dateOnly(current),
                            dayLabel: current.toLocaleDateString('id-ID', { weekday: 'short' }),
                            dateLabel: current.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' }),
                        });
                    }

                    return options;
                },

                handleDateChange() {
                    this.selectedDate = this.normalizeDate(this.selectedDate);
                    this.dateWindowStart = this.selectedDate;
                    this.dateOptions = this.generateDateOptions();
                    this.clearSlotSelection();
                },

                selectDate(dateValue) {
                    this.selectedDate = dateValue;
                    this.clearSlotSelection();
                },

                shiftDateRange(direction) {
                    const baseDate = new Date(this.dateWindowStart + 'T00:00:00');
                    const minimumDate = new Date(this.minBookingDate + 'T00:00:00');
                    const offset = direction === 'left' ? -7 : 7;

                    baseDate.setDate(baseDate.getDate() + offset);

                    if (baseDate < minimumDate) {
                        baseDate.setTime(minimumDate.getTime());
                    }

                    this.dateWindowStart = this.dateOnly(baseDate);
                    this.dateOptions = this.generateDateOptions();

                    if (this.selectedDate < this.dateWindowStart) {
                        this.selectedDate = this.dateWindowStart;
                        this.clearSlotSelection();
                    }
                },

                clearSlotSelection() {
                    this.selectedStartTime = '';
                    this.selectedEndTime = '';
                    this.selectedSlotLabel = '';
                    this.bookingError = '';
                },

                get formattedSelectedDate() {
                    if (!this.selectedDate) {
                        return '-';
                    }

                    return new Date(this.selectedDate + 'T00:00:00').toLocaleDateString('id-ID', {
                        weekday: 'long',
                        day: 'numeric',
                        month: 'long',
                        year: 'numeric',
                    });
                },

                get availableSlotCount() {
                    return this.timeSlots.filter((slot) => slot.status === 'available' || slot.status === 'selected').length;
                },

                get selectedDurationLabel() {
                    if (!this.selectedStartTime || !this.selectedEndTime) {
                        return '';
                    }

                    const duration = (new Date(this.selectedEndTime.replace(' ', 'T')) - new Date(this.selectedStartTime.replace(' ', 'T'))) / 3600000;
                    return duration + ' jam dipilih';
                },

                get canSubmitBooking() {
                    const chairCount = Number(this.chairCount);
                    return Boolean(
                        this.activityTitle
                        && this.selectedStartTime
                        && this.selectedEndTime
                        && chairCount > 0
                        && (!this.chairLimit || chairCount <= Number(this.chairLimit))
                    );
                },

                normalizeChairCount() {
                    if (!this.chairCount) {
                        return;
                    }

                    const chairCount = Number(this.chairCount);

                    if (this.chairLimit && chairCount > Number(this.chairLimit)) {
                        this.chairCount = Number(this.chairLimit);
                        this.bookingError = `Kebutuhan kursi otomatis disesuaikan ke maksimal ${this.chairLimit} kursi.`;
                        return;
                    }

                    if (chairCount < 1) {
                        this.chairCount = 1;
                    }
                },

                get timeSlots() {
                    const slots = [];

                    for (let hour = 7; hour < 18; hour += 1) {
                        const slotStart = this.createSlotDate(hour);
                        const slotEnd = this.createSlotDate(hour + 1);
                        const overlap = this.findOverlap(slotStart, slotEnd);
                        const isPast = slotStart <= new Date();
                        const isSelected = this.isSlotInsideSelectedRange(slotStart, slotEnd);

                        let status = 'available';
                        let badgeLabel = 'Tersedia';
                        let badgeClass = 'bg-emerald-100 text-emerald-700';
                        let metaLabel = '60 menit';
                        let metaClass = 'text-slate-500';
                        let note = 'Slot tersedia untuk diajukan.';
                        let noteClass = 'text-slate-500';

                        if (isPast) {
                            status = 'past';
                            badgeLabel = 'Lewat';
                            badgeClass = 'bg-slate-200 text-slate-600';
                            metaLabel = 'Sudah lewat';
                            metaClass = 'text-slate-400';
                            note = 'Slot ini sudah lewat dan tidak bisa dipilih.';
                            noteClass = 'text-slate-400';
                        } else if (overlap) {
                            status = overlap.status === 'pending' ? 'pending' : 'booked';
                            badgeLabel = status === 'pending' ? 'Pending' : 'Booked';
                            badgeClass = status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-rose-100 text-rose-700';
                            metaLabel = overlap.title ? overlap.title : (status === 'pending' ? 'Menunggu persetujuan' : 'Sudah dibooking');
                            metaClass = status === 'pending' ? 'text-amber-600' : 'text-rose-600';
                            note = status === 'pending'
                                ? 'Slot ini sedang diajukan user lain dan sementara dikunci.'
                                : 'Slot ini sudah dipakai pada tanggal yang dipilih.';
                            noteClass = status === 'pending' ? 'text-amber-600' : 'text-rose-600';
                        } else if (isSelected) {
                            status = 'selected';
                            badgeLabel = 'Dipilih';
                            badgeClass = 'bg-blue-100 text-blue-700';
                            metaLabel = this.selectedDurationLabel || '60 menit';
                            metaClass = 'text-blue-100';
                            note = 'Klik lagi untuk membatalkan pilihan.';
                            noteClass = 'text-blue-100';
                        }

                        slots.push({
                            key: this.formatDateTime(slotStart),
                            label: this.slotLabel(hour),
                            start: this.formatDateTime(slotStart),
                            end: this.formatDateTime(slotEnd),
                            status,
                            badgeLabel,
                            badgeClass,
                            metaLabel,
                            metaClass,
                            note,
                            noteClass,
                            selectable: status === 'available' || status === 'selected',
                        });
                    }

                    return slots;
                },

                createSlotDate(hour) {
                    return new Date(this.selectedDate + 'T' + String(hour).padStart(2, '0') + ':00:00');
                },

                slotLabel(hour) {
                    return String(hour).padStart(2, '0') + ':00 - ' + String(hour + 1).padStart(2, '0') + ':00';
                },

                formatDateTime(date) {
                    const local = new Date(date);
                    local.setMinutes(local.getMinutes() - local.getTimezoneOffset());
                    return local.toISOString().slice(0, 19).replace('T', ' ');
                },

                getBookingsForSelectedRoom() {
                    return this.roomSchedules[this.selectedRoom] || [];
                },

                findOverlap(slotStart, slotEnd) {
                    return this.getBookingsForSelectedRoom().find((booking) => {
                        const bookingStart = new Date(booking.start_time.replace(' ', 'T'));
                        const bookingEnd = new Date(booking.end_time.replace(' ', 'T'));
                        return bookingStart < slotEnd && bookingEnd > slotStart;
                    });
                },

                selectSlot(slot) {
                    if (!slot.selectable) {
                        return;
                    }

                    if (slot.status === 'selected') {
                        this.trimSelectedRangeFromSlot(slot);
                        return;
                    }

                    if (!this.selectedStartTime) {
                        this.setSelectedRange(slot.start, slot.end);
                        return;
                    }

                    const currentStart = new Date(this.selectedStartTime.replace(' ', 'T'));
                    const currentEnd = new Date(this.selectedEndTime.replace(' ', 'T'));
                    const clickedStart = new Date(slot.start.replace(' ', 'T'));
                    const clickedEnd = new Date(slot.end.replace(' ', 'T'));
                    const rangeStart = clickedStart < currentStart ? clickedStart : currentStart;
                    const rangeEnd = clickedEnd > currentEnd ? clickedEnd : currentEnd;

                    if (!this.canSelectRange(rangeStart, rangeEnd)) {
                        this.setSelectedRange(slot.start, slot.end);
                        this.bookingError = 'Rentang itu melewati slot yang tidak tersedia. Saya mulai ulang dari slot yang baru dipilih.';
                        return;
                    }

                    this.setSelectedRange(this.formatDateTime(rangeStart), this.formatDateTime(rangeEnd));
                },

                setSelectedRange(start, end) {
                    this.selectedStartTime = start;
                    this.selectedEndTime = end;
                    this.selectedSlotLabel = this.rangeLabel(start, end);
                    this.bookingError = '';
                },

                trimSelectedRangeFromSlot(slot) {
                    const selectedStart = new Date(this.selectedStartTime.replace(' ', 'T'));
                    const clickedStart = new Date(slot.start.replace(' ', 'T'));

                    if (clickedStart <= selectedStart) {
                        this.clearSlotSelection();
                        return;
                    }

                    this.setSelectedRange(this.selectedStartTime, slot.start);
                },

                isSlotInsideSelectedRange(slotStart, slotEnd) {
                    if (!this.selectedStartTime || !this.selectedEndTime) {
                        return false;
                    }

                    const selectedStart = new Date(this.selectedStartTime.replace(' ', 'T'));
                    const selectedEnd = new Date(this.selectedEndTime.replace(' ', 'T'));
                    return slotStart >= selectedStart && slotEnd <= selectedEnd;
                },

                canSelectRange(rangeStart, rangeEnd) {
                    for (let cursor = new Date(rangeStart); cursor < rangeEnd; cursor.setHours(cursor.getHours() + 1)) {
                        const slotStart = new Date(cursor);
                        const slotEnd = new Date(cursor);
                        slotEnd.setHours(slotStart.getHours() + 1);

                        if (slotStart <= new Date() || this.findOverlap(slotStart, slotEnd)) {
                            return false;
                        }
                    }

                    return rangeStart.toDateString() === rangeEnd.toDateString()
                        && rangeStart.getHours() >= 7
                        && rangeEnd.getHours() <= 18;
                },

                rangeLabel(start, end) {
                    const startDate = new Date(start.replace(' ', 'T'));
                    const endDate = new Date(end.replace(' ', 'T'));
                    return String(startDate.getHours()).padStart(2, '0') + ':00 - '
                        + String(endDate.getHours()).padStart(2, '0') + ':00';
                },

                slotClasses(slot) {
                    if (slot.status === 'selected') {
                        return 'border-blue-600 bg-gradient-to-br from-blue-700 via-blue-600 to-cyan-500 text-white shadow-lg -translate-y-0.5';
                    }

                    if (slot.status === 'booked') {
                        return 'border-rose-200 bg-rose-50/95 text-rose-800 cursor-not-allowed opacity-90';
                    }

                    if (slot.status === 'pending') {
                        return 'border-amber-200 bg-amber-50/95 text-amber-900 cursor-not-allowed opacity-90';
                    }

                    if (slot.status === 'past') {
                        return 'border-slate-200 bg-slate-100/95 text-slate-500 cursor-not-allowed';
                    }

                    return 'border-slate-200 bg-white/95 text-slate-900 hover:-translate-y-0.5 hover:border-blue-300 hover:bg-blue-50/90 hover:shadow-md';
                },

                submitBooking(event) {
                    if (!this.activityTitle) {
                        this.bookingError = 'Isi judul kegiatan terlebih dahulu.';
                        event.preventDefault();
                        return;
                    }

                    if (!this.selectedStartTime || !this.selectedEndTime) {
                        this.bookingError = 'Pilih satu slot waktu yang tersedia terlebih dahulu.';
                        event.preventDefault();
                        return;
                    }

                    if (!this.chairCount || Number(this.chairCount) < 1) {
                        this.bookingError = 'Isi kebutuhan kursi terlebih dahulu.';
                        event.preventDefault();
                        return;
                    }

                    if (this.chairLimit && Number(this.chairCount) > Number(this.chairLimit)) {
                        this.bookingError = `Kebutuhan kursi maksimal ${this.chairLimit} kursi untuk ruangan ini.`;
                        event.preventDefault();
                    }
                },
            }
        }
    </script>
    <?php echo $__env->make('partials.custom-calendar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
</body>

</html>
<?php /**PATH /Users/Afifudin/Downloads/Magang/SIpian_2026-05-06/resources/views/rooms/index.blade.php ENDPATH**/ ?>