<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    @hotelSettings
    <title>{{ $room ? 'Room ' . $room->room_number : 'General' }} - Maintenance Details - {{ hotelName() }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-green: #1a936f;
            --secondary-green: #88d498;
            --light-green: #c6dabf;
            --dark-green: #114b5f;
            --accent: #f3e9d2;
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar {
            background: linear-gradient(90deg, var(--dark-green) 0%, var(--primary-green) 100%);
        }
        
        .sidebar {
            background-color: white;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .main-content {
            margin-left: 150px;
            margin-right:150px;
            padding: 20px;
            margin-top: 56px;
        }
        
        .room-header {
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);
            color: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .amenity-badge {
            background-color: var(--light-green);
            color: var(--dark-green);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            margin: 5px;
            display: inline-flex;
            align-items: center;
        }
        
        .amenity-badge i {
            margin-right: 5px;
            color: var(--primary-green);
        }
        
        .image-gallery {
            border-radius: 10px;
            overflow: hidden;
        }
        
        .main-image {
            height: 400px;
            object-fit: cover;
            width: 100%;
        }
        
        .thumbnail-container {
            margin-top: 10px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .thumbnail {
            height: 80px;
            width: 100px;
            object-fit: cover;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s;
            border-radius: 5px;
        }
        
        .thumbnail:hover, .thumbnail.active {
            opacity: 1;
            border: 2px solid var(--primary-green);
        }
        
        .info-card {
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            height: 100%;
        }
        
        .info-card:hover {
            transform: translateY(-5px);
        }
        
        .maintenance-alert {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .status-badge {
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .priority-badge {
            font-size: 0.75rem;
            padding: 0.35em 0.65em;
        }
        
        .currency {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 600;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding: 0;
        }
        
        .breadcrumb-item a {
            color: var(--primary-green);
            text-decoration: none;
        }
        
        .breadcrumb-item.active {
            color: #6c757d;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        
        @media (max-width: 768px) {
            .main-content {
                margin-left: 15px;
                margin-right: 15px;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .action-buttons .btn {
                width: 100%;
            }
            
            .room-header {
                padding: 20px;
                text-align: center;
            }
            
            .room-header .text-end {
                text-align: center !important;
                margin-top: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <div class="container-fluid">
         
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('dashboard') }}">
                            <i class="fas fa-tachometer-alt me-1"></i>Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('rooms.index') }}">
                            <i class="fas fa-bed me-1"></i>Rooms
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ route('maintenance.index') }}">
                            <i class="fas fa-tools me-1"></i>Maintenance
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Header with breadcrumb and actions -->
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1 text-gray-800">{{ $room ? 'Room Maintenance Details' : 'General Maintenance Details' }}</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('maintenance.index') }}">Maintenance Management</a></li>
                        @if($room)
                            <li class="breadcrumb-item"><a href="{{ route('rooms.show', $room->id) }}">Room {{ $room->room_number }}</a></li>
                        @endif
                        <li class="breadcrumb-item active">Request #{{ $maintenance->id }}</li>
                    </ol>
                </nav>
            </div>
            <div class="action-buttons mt-2 mt-md-0">
                @if($room)
                    <a href="{{ route('rooms.maintenance', $room->id) }}" class="btn btn-info">
                        <i class="fas fa-history me-2"></i>All Maintenance
                    </a>
                @endif
                <a href="{{ route('maintenance.edit', $maintenance->id) }}" class="btn btn-warning">
                    <i class="fas fa-edit me-2"></i>Edit Request
                </a>
                @if($room)
                    <a href="{{ route('rooms.show', $room->id) }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to Room
                    </a>
                @else
                    <a href="{{ route('maintenance.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Back to List
                    </a>
                @endif
            </div>
        </div>

        <!-- Room/Location Header -->
        <div class="room-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="mb-2">
                        @if($room)
                            Room {{ $room->room_number }}
                        @else
                            {{ $maintenance->location ?? 'General' }}
                        @endif
                         - Request #{{ $maintenance->id }}
                    </h2>
                    @if($room)
                        <h4 class="mb-3">{{ $room->roomType->name ?? 'No Type' }}</h4>
                    @endif
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        @if($room)
                            <span class="status-badge bg-{{ $room->status_badge_class ?? 'secondary' }}">
                                <i class="fas fa-door-open me-1"></i>{{ ucfirst($room->status) }}
                            </span>
                        @endif
                        <span class="status-badge bg-{{ $maintenance->priority_badge ?? 'warning' }}">
                            <i class="fas fa-exclamation-triangle me-1"></i>{{ ucfirst($maintenance->priority) }}
                        </span>
                        <span class="status-badge bg-{{ $maintenance->status_badge ?? 'secondary' }}">
                            <i class="fas fa-clipboard-list me-1"></i>{{ ucfirst(str_replace('_', ' ', $maintenance->status)) }}
                        </span>
                        @if($room)
                            <span class="status-badge bg-secondary">
                                <i class="fas fa-layer-group me-1"></i>Floor {{ $room->floor }}
                            </span>
                        @endif
                        <span class="status-badge bg-info">
                            <i class="fas fa-map-marker-alt me-1"></i>{{ $maintenance->location ?? 'General' }}
                        </span>
                    </div>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    <div class="room-actions">
                        <a href="{{ route('maintenance.create', $room ? ['room_id' => $room->id] : []) }}" class="btn btn-light btn-lg">
                            <i class="fas fa-plus me-2"></i>New Request
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Maintenance Alert for Active Requests -->
        @if($room && $room->has_active_maintenance)
        <div class="maintenance-alert">
            <div class="d-flex flex-wrap justify-content-between align-items-center">
                <div>
                    <h5 class="text-warning mb-1">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Active Maintenance Requests
                    </h5>
                    <p class="mb-0">This room has {{ $room->activeMaintenanceRequests->count() }} active maintenance request(s).</p>
                </div>
                <div class="mt-2 mt-sm-0">
                    <a href="{{ route('rooms.maintenance', $room->id) }}" class="btn btn-warning btn-sm">
                        <i class="fas fa-eye me-1"></i>View All
                    </a>
                </div>
            </div>
        </div>
        @endif

        <div class="row">
            <!-- Room Images -->
            <div class="col-lg-8 mb-4">
                <div class="card info-card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-images me-2"></i>Room Images</h5>
                    </div>
                    <div class="card-body">
                        @php
                            // Safely decode room images
                            $roomImages = [];
                            if (isset($room->images) && $room->images) {
                                if (is_array($room->images)) {
                                    $roomImages = $room->images;
                                } elseif (is_string($room->images)) {
                                    $decoded = json_decode($room->images, true);
                                    if (is_array($decoded)) {
                                        $roomImages = $decoded;
                                    } else {
                                        // Try comma-separated string
                                        $roomImages = array_filter(array_map('trim', explode(',', $room->images)));
                                    }
                                }
                            }
                            
                            // Get first image or placeholder
                            $mainImage = !empty($roomImages) ? asset('storage/' . $roomImages[0]) : 'https://via.placeholder.com/800x400?text=No+Image';
                        @endphp

                        @if(!empty($roomImages))
                            <div class="image-gallery mb-3">
                                <img id="mainImage" src="{{ $mainImage }}" 
                                     class="main-image" 
                                     alt="Room {{ $room->room_number }}"
                                     onerror="this.src='https://via.placeholder.com/800x400?text=Image+Not+Found'">
                            </div>
                            
                            @if(count($roomImages) > 1)
                                <div class="thumbnail-container">
                                    @foreach($roomImages as $index => $image)
                                        @php
                                            $imageUrl = asset('storage/' . $image);
                                        @endphp
                                        <img src="{{ $imageUrl }}" 
                                             class="thumbnail {{ $index === 0 ? 'active' : '' }}" 
                                             onclick="changeImage(this, '{{ $imageUrl }}')"
                                             onerror="this.src='https://via.placeholder.com/100x80?text=Error'"
                                             alt="Room {{ $room->room_number }} - Image {{ $index + 1 }}">
                                    @endforeach
                                </div>
                            @endif
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-image fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No images available for this room.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Room/Location Information -->
            <div class="col-lg-4 mb-4">
                <div class="card info-card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>{{ $room ? 'Room' : 'Location' }} Information</h5>
                    </div>
                    <div class="card-body">
                        @if($room)
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <td><strong>Room Number:</strong></td>
                                    <td class="text-end">{{ $room->room_number }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Floor:</strong></td>
                                    <td class="text-end">{{ $room->floor ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Room Type:</strong></td>
                                    <td class="text-end">{{ $room->roomType->name ?? 'No Type' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td class="text-end">
                                        <span class="badge bg-{{ $room->status_badge_class ?? 'secondary' }}">
                                            {{ ucfirst($room->status) }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-map-marker-alt fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">{{ $maintenance->location ?? 'General Area' }}</h5>
                                <p class="text-muted">This maintenance is for a general area, not a specific guest room.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Maintenance Request Details -->
            <div class="col-md-6 mb-4">
                <div class="card info-card">
                    <div class="card-header bg-warning text-white">
                        <h5 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>Maintenance Request Details</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <th style="width: 40%">Request ID:</th>
                                <td>#{{ $maintenance->id }}</td>
                            </tr>
                            <tr>
                                <th>Title:</th>
                                <td>{{ $maintenance->title }}</td>
                            </tr>
                            <tr>
                                <th>Description:</th>
                                <td>{{ $maintenance->description ?? 'No description provided' }}</td>
                            </tr>
                            <tr>
                                <th>Type:</th>
                                <td><span class="badge bg-info">{{ ucfirst($maintenance->maintenance_type) }}</span></td>
                            </tr>
                            <tr>
                                <th>Priority:</th>
                                <td>
                                    <span class="badge priority-badge {{ $maintenance->priority_badge ?? 'bg-warning' }}">
                                        {{ ucfirst($maintenance->priority) }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Status:</th>
                                <td>
                                    <span class="badge priority-badge {{ $maintenance->status_badge ?? 'bg-secondary' }}">
                                        {{ ucfirst(str_replace('_', ' ', $maintenance->status)) }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <th>Reported Date:</th>
                                <td>{{ $maintenance->reported_date->format('F j, Y') }}</td>
                            </tr>
                            @if($maintenance->scheduled_date)
                            <tr>
                                <th>Scheduled Date:</th>
                                <td>{{ $maintenance->scheduled_date->format('F j, Y') }}</td>
                            </tr>
                            @endif
                            @if($maintenance->completed_date)
                            <tr>
                                <th>Completed Date:</th>
                                <td>{{ $maintenance->completed_date->format('F j, Y') }}</td>
                            </tr>
                            @endif
                            <tr>
                                <th>Reported By:</th>
                                <td>{{ $maintenance->reportedBy->full_name ?? $maintenance->reportedBy->name ?? 'Unknown' }}</td>
                            </tr>
                            <tr>
                                <th>Assigned To:</th>
                                <td>{{ $maintenance->assignedTechnician->full_name ?? 'Not Assigned' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Cost & Duration Information -->
            <div class="col-md-6 mb-4">
                <div class="card info-card">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>Cost & Duration</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <tr>
                                <th style="width: 50%">Estimated Cost:</th>
                                <td class="text-end">
                                    @if($maintenance->estimated_cost)
                                        UGX {{ number_format($maintenance->estimated_cost, 2) }}
                                    @else
                                        <span class="text-muted">Not estimated</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Actual Cost:</th>
                                <td class="text-end">
                                    @if($maintenance->actual_cost)
                                        UGX {{ number_format($maintenance->actual_cost, 2) }}
                                    @else
                                        <span class="text-muted">Not recorded</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Estimated Duration:</th>
                                <td class="text-end">
                                    @if($maintenance->estimated_duration)
                                        {{ $maintenance->estimated_duration }} minutes
                                    @else
                                        <span class="text-muted">Not estimated</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Actual Duration:</th>
                                <td class="text-end">
                                    @if($maintenance->actual_duration)
                                        {{ $maintenance->actual_duration }} minutes
                                    @else
                                        <span class="text-muted">Not recorded</span>
                                    @endif
                                </td>
                            </tr>
                            @if($maintenance->materials_used)
                            <tr>
                                <th colspan="2" class="pt-3">Materials Used:</th>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    @php
                                        $materials = is_string($maintenance->materials_used) ? 
                                            json_decode($maintenance->materials_used, true) : 
                                            $maintenance->materials_used;
                                    @endphp
                                    
                                    @if(is_array($materials))
                                        <ul class="mb-0">
                                            @foreach($materials as $material)
                                                <li>{{ $material }}</li>
                                            @endforeach
                                        </ul>
                                    @else
                                        {{ $maintenance->materials_used }}
                                    @endif
                                </td>
                            </tr>
                            @endif
                            @if($maintenance->resolution_notes)
                            <tr>
                                <th colspan="2" class="pt-3">Resolution Notes:</th>
                            </tr>
                            <tr>
                                <td colspan="2">{{ $maintenance->resolution_notes }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Amenities -->
            <div class="col-md-6 mb-4">
                <div class="card info-card h-100">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-star me-2"></i>Room Amenities</h5>
                    </div>
                    <div class="card-body">
                        @php
                            // Safely decode amenities
                            $amenitiesArray = [];
                            if (isset($room->amenities) && $room->amenities) {
                                if (is_array($room->amenities)) {
                                    $amenitiesArray = $room->amenities;
                                } elseif (is_string($room->amenities)) {
                                    $decoded = json_decode($room->amenities, true);
                                    if (is_array($decoded)) {
                                        $amenitiesArray = $decoded;
                                    } else {
                                        // Try comma-separated string
                                        $amenitiesArray = array_filter(array_map('trim', explode(',', $room->amenities)));
                                    }
                                }
                            }
                        @endphp

                        @if(!empty($amenitiesArray))
                            <div class="d-flex flex-wrap">
                                @foreach($amenitiesArray as $amenity)
                                    <span class="amenity-badge">
                                        <i class="fas fa-check-circle"></i>
                                        {{ $amenity }}
                                    </span>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-info-circle fa-2x text-muted mb-3"></i>
                                <p class="text-muted">No amenities listed for this room.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Description -->
            <div class="col-md-6 mb-4">
                <div class="card info-card h-100">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>Room Description</h5>
                    </div>
                    <div class="card-body">
                        @if($room->description)
                            <p class="mb-0">{{ $room->description }}</p>
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-file-alt fa-2x text-muted mb-3"></i>
                                <p class="text-muted">No description available for this room.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Maintenance History Summary -->
        <div class="row">
            <div class="col-12">
                <div class="card info-card">
                    <div class="card-header bg-warning text-white d-flex flex-wrap justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>Maintenance History Summary
                        </h5>
                        <a href="{{ route('rooms.maintenance', $room->id) }}" class="btn btn-light btn-sm mt-2 mt-sm-0">
                            <i class="fas fa-eye me-1"></i>View Full History
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-6 col-md-3">
                                <div class="border rounded p-3 text-center">
                                    <h3 class="text-primary mb-1">{{ $room->maintenanceRequests->count() }}</h3>
                                    <p class="mb-0 small">Total Requests</p>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="border rounded p-3 text-center">
                                    <h3 class="text-warning mb-1">{{ $room->activeMaintenanceRequests->count() }}</h3>
                                    <p class="mb-0 small">Active Requests</p>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="border rounded p-3 text-center">
                                    <h3 class="text-success mb-1">{{ $room->maintenanceRequests->where('status', 'completed')->count() }}</h3>
                                    <p class="mb-0 small">Completed</p>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="border rounded p-3 text-center">
                                    <h3 class="text-danger mb-1">{{ $room->maintenanceRequests->where('priority', 'urgent')->count() }}</h3>
                                    <p class="mb-0 small">Urgent</p>
                                </div>
                            </div>
                        </div>
                        
                        @if($room->maintenanceRequests->count() > 0)
                            <h6 class="mt-4 mb-3">Recent Maintenance Requests:</h6>
                            <div class="table-responsive">
                                <table class="table table-sm table-hover">
                                    <thead class="table-light">
                                        <tr>
                                            <th>ID</th>
                                            <th>Title</th>
                                            <th>Type</th>
                                            <th>Priority</th>
                                            <th>Status</th>
                                            <th>Reported Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($room->maintenanceRequests->take(5) as $history)
                                        <tr>
                                            <td>#{{ $history->id }}</td>
                                            <td>{{ Str::limit($history->title, 30) }}</td>
                                            <td><span class="badge bg-info">{{ ucfirst($history->maintenance_type) }}</span></td>
                                            <td>
                                                <span class="badge priority-badge {{ $history->priority_badge ?? 'bg-warning' }}">
                                                    {{ ucfirst($history->priority) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge priority-badge {{ $history->status_badge ?? 'bg-secondary' }}">
                                                    {{ ucfirst(str_replace('_', ' ', $history->status)) }}
                                                </span>
                                            </td>
                                            <td>{{ $history->reported_date->format('M j, Y') }}</td>
                                            <td>
                                                <a href="{{ route('maintenance.show', $history->id) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-4 mt-3">
                                <i class="fas fa-tools fa-2x text-muted mb-3"></i>
                                <p class="text-muted">No maintenance history for this room.</p>
                                <a href="{{ route('maintenance.create', ['room_id' => $room->id]) }}" class="btn btn-primary">
                                    <i class="fas fa-plus me-2"></i>Create First Request
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Function to change main image when thumbnail is clicked
        function changeImage(thumb, src) {
            const mainImage = document.getElementById('mainImage');
            if (mainImage) {
                mainImage.src = src;
            }
            
            // Update active thumbnail
            document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
            thumb.classList.add('active');
        }
        
        // Auto-rotate images every 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            @php
                // Safely prepare images array for JavaScript
                $jsImages = [];
                if (isset($room->images) && $room->images) {
                    if (is_array($room->images)) {
                        $jsImages = $room->images;
                    } elseif (is_string($room->images)) {
                        $decoded = json_decode($room->images, true);
                        if (is_array($decoded)) {
                            $jsImages = $decoded;
                        }
                    }
                }
            @endphp
            
            const images = @json($jsImages);
            let currentImageIndex = 0;
            const mainImage = document.getElementById('mainImage');
            
            function rotateImages() {
                if (images && images.length > 1 && mainImage) {
                    currentImageIndex = (currentImageIndex + 1) % images.length;
                    const imageUrl = "{{ asset('storage/') }}/" + images[currentImageIndex];
                    mainImage.src = imageUrl;
                    
                    // Update active thumbnail
                    const thumbnails = document.querySelectorAll('.thumbnail');
                    thumbnails.forEach((thumb, index) => {
                        thumb.classList.toggle('active', index === currentImageIndex);
                    });
                }
            }
            
            // Start rotation if there are multiple images
            if (images && images.length > 1) {
                setInterval(rotateImages, 5000);
            }
        });
    </script>
    
    <script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>
