@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('rooms.index') }}">Rooms</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">
                View Room
            </h1>

            <div class="row">
                <!-- Main Content -->
                <div class="col-lg-8">
                    <!-- Basic Information Panel -->
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-info-circle"></i> Room Information
                            </h4>
                            <div class="panel-heading-btn">
                                <a href="{{ route('rooms.edit', $room->id) }}" class="btn btn-custom">
                                    <i class="fa fa-edit"></i> Edit Room
                                </a>
                                <a href="{{ route('rooms.index') }}" class="btn btn-custom">
                                    <i class="fa fa-arrow-left"></i> Back to List
                                </a>
                            </div>
                        </div>

                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="info-group">
                                        <label class="info-label">Room Number/Name:</label>
                                        <div class="info-value">{{ $room->room }}</div>
                                    </div>

                                    <div class="info-group">
                                        <label class="info-label">Room Type:</label>
                                        <div class="info-value">
                                            @if ($room->roomType)
                                                <span class="badge badge-primary">{{ $room->roomType->name }}</span>
                                            @else
                                                <span class="text-muted">No room type assigned</span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="info-group">
                                        <label class="info-label">Current Status:</label>
                                        <div class="info-value">
                                            @if ($room->status_room === 'checked_in')
                                                <span class="badge badge-success">
                                                    <i class="fa fa-check-circle"></i> Checked In
                                                </span>
                                            @else
                                                <span class="badge badge-secondary">
                                                    <i class="fa fa-clock"></i> Checked Out
                                                </span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="info-group">
                                        <label class="info-label">Background Status:</label>
                                        <div class="info-value">
                                            @if ($room->status_bg)
                                                <span class="badge badge-success">
                                                    <i class="fa fa-check"></i> Active
                                                </span>
                                            @else
                                                <span class="badge badge-danger">
                                                    <i class="fa fa-times"></i> Inactive
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="info-group">
                                        <label class="info-label">Description:</label>
                                        <div class="info-value">
                                            @if ($room->description)
                                                <div class="description-text">{{ $room->description }}</div>
                                            @else
                                                <span class="text-muted">No description provided</span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="info-group">
                                        <label class="info-label">Room ID:</label>
                                        <div class="info-value">
                                            <code>#{{ $room->id }}</code>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Guest Information Panel -->
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-user"></i> Guest Information
                            </h4>
                        </div>

                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="info-group">
                                        <label class="info-label">Guest Name:</label>
                                        <div class="info-value">
                                            @if ($room->guestname)
                                                <h5 class="guest-name">
                                                    <i class="fa fa-user text-primary"></i>
                                                    {{ $room->guestname }}
                                                </h5>
                                            @else
                                                <span class="text-muted">No guest assigned</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="info-group">
                                        <label class="info-label">Guest Image:</label>
                                        <div class="info-value">
                                            <div class="guest-image-container">
                                                @if ($room->guest_image && $room->guest_image !== 'noimage.jpg')
                                                    <img src="{{ asset('storage/welcome_guest/' . $room->guest_image) }}"
                                                        alt="{{ $room->guestname ?? 'Guest' }}" class="guest-image"
                                                        data-toggle="modal" data-target="#image-modal"
                                                        data-image-src="{{ asset('storage/welcome_guest/' . $room->guest_image) }}"
                                                        data-image-title="Guest Image - {{ $room->guestname ?? 'Guest' }}">
                                                @else
                                                    <img src="{{ asset('storage/welcome_guest/noimage.jpg') }}"
                                                        alt="No Guest Image" class="guest-image guest-image-placeholder">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Welcome Greeting Panel -->
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-comment"></i> Welcome Greeting
                            </h4>
                            <div class="panel-heading-btn">
                                <a href="{{ route('welcome_greetings.index') }}" class="btn btn-custom">
                                    <i class="fa fa-external-link"></i> Manage Greetings
                                </a>
                            </div>
                        </div>

                        <div class="panel-body">
                            @if ($welcomeGreeting)
                                <div class="welcome-greeting-display">
                                    <div class="greeting-type-badge">
                                        @if ($greetingType === 'personal')
                                            <span class="badge badge-info">
                                                <i class="fa fa-user"></i> Personal Assignment
                                            </span>
                                        @elseif($greetingType === 'general')
                                            <span class="badge badge-primary">
                                                <i class="fa fa-globe"></i> General Assignment
                                            </span>
                                        @endif
                                    </div>

                                    <div class="greeting-content">
                                        <label class="info-label">Greeting Content:</label>
                                        <div class="greeting-text">
                                            {!! nl2br(e($welcomeGreeting)) !!}
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="no-greeting-message">
                                    <div class="alert alert-warning">
                                        <h6><i class="fa fa-exclamation-triangle"></i> No Welcome Greeting Assigned</h6>
                                        <p class="mb-0">
                                            This room doesn't have any welcome greeting assigned.
                                            You can assign one from the Welcome Greeting Management.
                                        </p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Sidebar Content -->
                <div class="col-lg-4">
                    <!-- WiFi Configuration Panel -->
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-wifi"></i> WiFi Configuration
                            </h4>
                        </div>

                        <div class="panel-body">
                            @if ($room->username_cast && $room->password_cast)
                                <div class="wifi-config">
                                    <div class="info-group">
                                        <label class="info-label">Network Name (SSID):</label>
                                        <div class="info-value">
                                            <code class="wifi-credential">{{ $room->username_cast }}</code>
                                            <button class="btn btn-sm btn-custom copy-btn"
                                                data-copy="{{ $room->username_cast }}" title="Copy SSID">
                                                <i class="fa fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="info-group">
                                        <label class="info-label">Password:</label>
                                        <div class="info-value">
                                            <code class="wifi-credential password-hidden" id="wifi-password">
                                                {{ str_repeat('•', strlen($room->password_cast)) }}
                                            </code>
                                            <button class="btn btn-sm btn-custom toggle-password-btn"
                                                data-password="{{ $room->password_cast }}" title="Show/Hide Password">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-custom copy-btn"
                                                data-copy="{{ $room->password_cast }}" title="Copy Password">
                                                <i class="fa fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>

                                    @if ($room->qrcode_cast && $room->qrcode_cast !== 'noimage.jpg')
                                        <div class="info-group">
                                            <label class="info-label">QR Code:</label>
                                            <div class="info-value">
                                                <div class="qr-code-container">
                                                    <img src="{{ asset('storage/qr_codes/' . $room->qrcode_cast) }}"
                                                        alt="WiFi QR Code" class="qr-code-image" data-toggle="modal"
                                                        data-target="#image-modal"
                                                        data-image-src="{{ asset('storage/qr_codes/' . $room->qrcode_cast) }}"
                                                        data-image-title="WiFi QR Code">
                                                    <div class="qr-code-info">
                                                        <small class="text-muted">
                                                            <i class="fa fa-info-circle"></i>
                                                            Click to view full size
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @else
                                <div class="no-wifi-config">
                                    <div class="alert alert-info">
                                        <h6><i class="fa fa-info-circle"></i> No WiFi Configuration</h6>
                                        <p class="mb-0">
                                            WiFi credentials have not been configured for this room.
                                        </p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Room Appearance Panel -->
                    <div class="panel panel-inverse">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <i class="fa fa-image"></i> Room Appearance
                            </h4>
                        </div>

                        <div class="panel-body">
                            <div class="info-group">
                                <label class="info-label">Background Image:</label>
                                <div class="info-value">
                                    <div class="background-image-container">
                                        @if ($room->background_img && $room->background_img !== 'noimage.jpg')
                                            <img src="{{ asset('storage/room_background/' . $room->background_img) }}"
                                                alt="Room Background" class="background-image" data-toggle="modal"
                                                data-target="#image-modal"
                                                data-image-src="{{ asset('storage/room_background/' . $room->background_img) }}"
                                                data-image-title="Room Background Image">
                                            <div class="background-image-info">
                                                <small class="text-muted">
                                                    <i class="fa fa-info-circle"></i>
                                                    Click to view full size
                                                </small>
                                            </div>
                                        @else
                                            <div class="no-background-image">
                                                <img src="{{ asset('storage/room_background/noimage.jpg') }}"
                                                    alt="No Background Image"
                                                    class="background-image background-image-placeholder">
                                                <div class="no-image-text">
                                                    <small class="text-muted">No background image set</small>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Image Modal -->
        <div class="modal fade" id="image-modal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body text-center">
                        <img src="" alt="" class="img-fluid" id="modal-image">
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel">
                            <i class="fa fa-exclamation-triangle text-warning"></i>
                            Confirm Delete
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete room <strong id="delete-room-name"></strong>?</p>
                        <div class="alert alert-danger">
                            <i class="fa fa-warning"></i>
                            <strong>Warning:</strong> This action cannot be undone. All associated data including images and
                            QR codes will be permanently deleted.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <i class="fa fa-times"></i> Cancel
                        </button>
                        <form id="delete-form" method="POST" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger">
                                <i class="fa fa-trash"></i> Delete Room
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <style>
        .room-status-badge {
            float: right;
            margin-top: 5px;
        }

        .info-group {
            margin-bottom: 1.5rem;
        }

        .info-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.5rem;
            display: block;
        }

        .info-value {
            color: #6c757d;
            font-size: 0.95rem;
        }

        .description-text {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 6px;
            border-left: 4px solid #007bff;
            white-space: pre-wrap;
        }

        .guest-name {
            color: #495057;
            margin: 0;
        }

        .guest-image-container,
        .background-image-container,
        .qr-code-container {
            text-align: center;
        }

        .guest-image,
        .background-image,
        .qr-code-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .guest-image:hover,
        .background-image:hover,
        .qr-code-image:hover {
            transform: scale(1.02);
        }

        .guest-image {
            max-height: 150px;
            object-fit: cover;
        }

        .background-image {
            max-height: 200px;
            object-fit: cover;
        }

        .qr-code-image {
            max-height: 200px;
            max-width: 200px;
        }

        .guest-image-placeholder,
        .background-image-placeholder {
            opacity: 0.6;
            cursor: default;
        }

        .guest-image-placeholder:hover,
        .background-image-placeholder:hover {
            transform: none;
        }

        .welcome-greeting-display {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .greeting-type-badge {
            margin-bottom: 1rem;
        }

        .greeting-content {
            margin-top: 1rem;
        }

        .greeting-text {
            background-color: white;
            padding: 1rem;
            border-radius: 6px;
            border-left: 4px solid #17a2b8;
            margin-top: 0.5rem;
            line-height: 1.6;
        }

        .wifi-config .info-group {
            margin-bottom: 1rem;
        }

        .wifi-credential {
            background-color: #f8f9fa;
            padding: 0.5rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            margin-right: 0.5rem;
        }

        .copy-btn,
        .toggle-password-btn {
            margin-left: 0.25rem;
        }

        .quick-actions .action-group {
            margin-bottom: 1.5rem;
        }

        .action-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.5rem;
            display: block;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-group-vertical .btn {
            margin-bottom: 0.25rem;
        }

        .no-image-text {
            margin-top: 0.5rem;
        }

        .panel {
            margin-bottom: 1.5rem;
        }

        .badge {
            font-size: 0.75em;
            padding: 0.35em 0.6em;
        }

        @media (max-width: 768px) {
            .room-status-badge {
                float: none;
                display: block;
                margin-top: 1rem;
            }

            .panel-heading-btn {
                margin-top: 1rem;
            }

            .panel-heading-btn .btn {
                margin-bottom: 0.5rem;
                width: 100%;
            }

            .quick-actions .btn-block {
                margin-bottom: 0.5rem;
            }
        }

        /* Copy button success feedback */
        .copy-btn.copied {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
        }

        /* Loading states */
        .status-btn.loading,
        .bg-status-btn.loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .status-btn.loading::after,
        .bg-status-btn.loading::after {
            content: '';
            width: 12px;
            height: 12px;
            margin-left: 8px;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            display: inline-block;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Image modal functionality
            const imageModal = document.getElementById('image-modal');
            const modalImage = document.getElementById('modal-image');
            const modalTitle = document.getElementById('imageModalLabel');

            document.querySelectorAll('[data-toggle="modal"][data-target="#image-modal"]').forEach(img => {
                img.addEventListener('click', function() {
                    const imageSrc = this.getAttribute('data-image-src');
                    const imageTitle = this.getAttribute('data-image-title');

                    modalImage.src = imageSrc;
                    modalImage.alt = imageTitle;
                    modalTitle.textContent = imageTitle;
                });
            });

            // Password toggle functionality
            const togglePasswordBtn = document.querySelector('.toggle-password-btn');
            const passwordElement = document.getElementById('wifi-password');

            if (togglePasswordBtn && passwordElement) {
                let isPasswordVisible = false;
                const actualPassword = togglePasswordBtn.getAttribute('data-password');
                const hiddenPassword = '•'.repeat(actualPassword.length);

                togglePasswordBtn.addEventListener('click', function() {
                    isPasswordVisible = !isPasswordVisible;

                    if (isPasswordVisible) {
                        passwordElement.textContent = actualPassword;
                        this.querySelector('i').className = 'fa fa-eye-slash';
                        this.title = 'Hide Password';
                    } else {
                        passwordElement.textContent = hiddenPassword;
                        this.querySelector('i').className = 'fa fa-eye';
                        this.title = 'Show Password';
                    }
                });
            }

            // Copy to clipboard functionality
            document.querySelectorAll('.copy-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const textToCopy = this.getAttribute('data-copy');

                    navigator.clipboard.writeText(textToCopy).then(() => {
                        // Visual feedback
                        const originalIcon = this.querySelector('i').className;
                        const originalTitle = this.title;

                        this.classList.add('copied');
                        this.querySelector('i').className = 'fa fa-check';
                        this.title = 'Copied!';

                        setTimeout(() => {
                            this.classList.remove('copied');
                            this.querySelector('i').className = originalIcon;
                            this.title = originalTitle;
                        }, 2000);
                    }).catch(err => {
                        console.error('Failed to copy text: ', err);
                        alert('Failed to copy to clipboard');
                    });
                });
            });

            // Status update functionality
            document.querySelectorAll('.status-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const roomId = this.getAttribute('data-room-id');
                    const newStatus = this.getAttribute('data-status');

                    updateRoomStatus(roomId, 'status_room', newStatus, this);
                });
            });

            // Background status update functionality
            document.querySelectorAll('.bg-status-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const roomId = this.getAttribute('data-room-id');
                    const newStatus = this.getAttribute('data-status') === 'true';

                    updateBackgroundStatus(roomId, newStatus, this);
                });
            });

            // Delete room functionality
            const deleteBtn = document.querySelector('.delete-room-btn');
            const deleteModal = document.getElementById('delete-modal');
            const deleteForm = document.getElementById('delete-form');
            const deleteRoomNameSpan = document.getElementById('delete-room-name');

            if (deleteBtn && deleteModal && deleteForm) {
                deleteBtn.addEventListener('click', function() {
                    const roomId = this.getAttribute('data-room-id');
                    const roomName = this.getAttribute('data-room-name');

                    deleteRoomNameSpan.textContent = roomName;
                    deleteForm.action = `/rooms/${roomId}`;

                    // Show modal using Bootstrap
                    $(deleteModal).modal('show');
                });
            }

            // Helper function to update room status
            function updateRoomStatus(roomId, statusType, newStatus, buttonElement) {
                // Add loading state
                buttonElement.classList.add('loading');
                buttonElement.disabled = true;

                const updates = [{
                    id: parseInt(roomId),
                    [statusType]: newStatus
                }];

                fetch('/rooms/update-status', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content')
                        },
                        body: JSON.stringify({
                            updates: updates
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            showSuccessMessage(data.message);
                            // Reload page to reflect changes
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            showErrorMessage(data.error || 'Failed to update status');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showErrorMessage('Failed to update room status');
                    })
                    .finally(() => {
                        buttonElement.classList.remove('loading');
                        buttonElement.disabled = false;
                    });
            }

            // Helper function to update background status
            function updateBackgroundStatus(roomId, newStatus, buttonElement) {
                // Add loading state
                buttonElement.classList.add('loading');
                buttonElement.disabled = true;

                const updates = [{
                    id: parseInt(roomId),
                    status_bg: newStatus
                }];

                fetch('/rooms/update-status', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content')
                        },
                        body: JSON.stringify({
                            updates: updates
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            showSuccessMessage(data.message);
                            // Reload page to reflect changes
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            showErrorMessage(data.error || 'Failed to update background status');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showErrorMessage('Failed to update background status');
                    })
                    .finally(() => {
                        buttonElement.classList.remove('loading');
                        buttonElement.disabled = false;
                    });
            }

            // Helper function to show success messages
            function showSuccessMessage(message) {
                const alertHtml = `
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fa fa-check-circle"></i> ${message}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;

                const contentDiv = document.getElementById('content');
                if (contentDiv) {
                    contentDiv.insertAdjacentHTML('afterbegin', alertHtml);

                    // Auto remove after 5 seconds
                    setTimeout(() => {
                        const alert = contentDiv.querySelector('.alert-success');
                        if (alert) {
                            $(alert).alert('close');
                        }
                    }, 5000);
                }
            }

            // Helper function to show error messages
            function showErrorMessage(message) {
                const alertHtml = `
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fa fa-exclamation-triangle"></i> ${message}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                `;

                const contentDiv = document.getElementById('content');
                if (contentDiv) {
                    contentDiv.insertAdjacentHTML('afterbegin', alertHtml);

                    // Auto remove after 7 seconds for errors
                    setTimeout(() => {
                        const alert = contentDiv.querySelector('.alert-danger');
                        if (alert) {
                            $(alert).alert('close');
                        }
                    }, 7000);
                }
            }

            // Keyboard shortcuts
            document.addEventListener('keydown', function(e) {
                // Ctrl/Cmd + E to edit
                if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
                    e.preventDefault();
                    window.location.href = '{{ route('rooms.edit', $room->id) }}';
                }

                // Escape to go back
                if (e.key === 'Escape') {
                    window.location.href = '{{ route('rooms.index') }}';
                }
            });

            // Add tooltips to buttons (if Bootstrap tooltips are available)
            if (typeof $().tooltip === 'function') {
                $('[title]').tooltip();
            }
        });
    </script>
@endsection