<!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_number }} - {{ 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 {
            margin-right: 220px;
            margin-left: 220px;
            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;
        }
        
        .image-gallery {
            border-radius: 10px;
            overflow: hidden;
        }
        
        .main-image {
            height: 400px;
            object-fit: cover;
            width: 100%;
        }
        
        .thumbnail {
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s;
        }
        
        .thumbnail:hover, .thumbnail.active {
            opacity: 1;
        }
        
        .info-card {
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .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;
        }

        .currency {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 600;
        }
        
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                position: relative;
            }
            
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar and Sidebar (same as previous templates) -->
    <!-- ... navbar and sidebar code ... -->

    <!-- Main Content -->
    <div class="main-content">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0 text-gray-800">Room Details</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('rooms.index') }}">Room Management</a></li>
                        <li class="breadcrumb-item active">Room {{ $room->room_number }}</li>
                    </ol>
                </nav>
            </div>
            <div class="action-buttons">
                <a href="{{ route('rooms.maintenance', $room->id) }}" class="btn btn-info">
                    <i class="fas fa-tools me-2"></i>Maintenance History
                </a>
                <a href="{{ route('rooms.edit', $room->id) }}" class="btn btn-warning">
                    <i class="fas fa-edit me-2"></i>Edit Room
                </a>
                <a href="{{ route('rooms.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to Rooms
                </a>
            </div>
        </div>

        <!-- Room Header -->
        <div class="room-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="mb-2">Room {{ $room->room_number }}</h2>
                    <h4 class="mb-3">{{ $room->roomType->name ?? 'No Type' }}</h4>
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <span class="status-badge bg-{{ $room->status_badge_class }}">
                            {{ ucfirst($room->status) }}
                        </span>
                        @if($room->has_active_maintenance)
                            <span class="status-badge bg-warning">
                                <i class="fas fa-tools me-1"></i>Under Maintenance
                            </span>
                        @endif
                        <span class="status-badge bg-secondary">
                            <i class="fas fa-layer-group me-1"></i>Floor {{ $room->floor }}
                        </span>
                        <span class="status-badge bg-info">
                            <i class="fas fa-user me-1"></i>{{ $room->capacity }} Guests
                        </span>
                    </div>
                    <h3 class="mb-0">
                        <span class="currency">UGX {{ number_format($room->price_per_night, 2) }}</span> 
                        <small class="fs-6">/ night</small>
                    </h3>
                </div>
                <div class="col-md-4 text-end">
                    <div class="room-actions">
                        @if($room->has_active_maintenance)
                            <a href="{{ route('maintenance.create', ['room_id' => $room->id]) }}" class="btn btn-light btn-lg">
                                <i class="fas fa-plus me-2"></i>Add Maintenance
                            </a>
                        @else
                            <a href="{{ route('maintenance.create', ['room_id' => $room->id]) }}" class="btn btn-warning btn-lg">
                                <i class="fas fa-tools me-2"></i>Request Maintenance
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Maintenance Alert -->
        @if($room->has_active_maintenance)
        <div class="maintenance-alert">
            <div class="d-flex 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>
                    <a href="{{ route('rooms.maintenance', $room->id) }}" class="btn btn-warning btn-sm">
                        View Details
                    </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">
                        @if($room->images && count($room->images) > 0)
                            <div class="image-gallery mb-3">
                                <img id="mainImage" src="{{ asset('storage/' . $room->images[0]) }}" class="main-image" alt="Room {{ $room->room_number }}">
                            </div>
                            <div class="thumbnail-container d-flex gap-2">
                                @foreach($room->images as $index => $image)
                                    <img src="{{ asset('storage/' . $image) }}" 
                                         class="thumbnail {{ $index === 0 ? 'active' : '' }}" 
                                         onclick="changeImage(this, '{{ asset('storage/' . $image) }}')"
                                         alt="Room {{ $room->room_number }} - Image {{ $index + 1 }}">
                                @endforeach
                            </div>
                        @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 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 Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <strong>Room Number:</strong>
                            <span class="float-end">{{ $room->room_number }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Floor:</strong>
                            <span class="float-end">{{ $room->floor }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Room Type:</strong>
                            <span class="float-end">{{ $room->roomType->name ?? 'No Type' }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Category:</strong>
                            <span class="float-end">{{ $room->category ?? 'No Category' }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Capacity:</strong>
                            <span class="float-end">{{ $room->capacity }} Guests</span>
                        </div>
                        <div class="mb-3">
                            <strong>Price per Night:</strong>
                            <span class="float-end currency">UGX {{ number_format($room->price_per_night, 2) }}</span>
                        </div>
                        <div class="mb-3">
                            <strong>Status:</strong>
                            <span class="float-end badge bg-{{ $room->status_badge_class }}">
                                {{ ucfirst($room->status) }}
                            </span>
                        </div>
                        @if($room->has_active_maintenance)
                        <div class="mb-3">
                            <strong>Maintenance Status:</strong>
                            <span class="float-end badge bg-warning">
                                Active Maintenance
                            </span>
                        </div>
                        @endif
                    </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>Amenities</h5>
                    </div>
                    <div class="card-body">
                        @if($room->amenities && count($room->amenities) > 0)
                            <div class="d-flex flex-wrap">
                                @foreach($room->amenities as $amenity)
                                    <span class="amenity-badge">{{ $amenity }}</span>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted">No amenities listed for this room.</p>
                        @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>Description</h5>
                    </div>
                    <div class="card-body">
                        @if($room->description)
                            <p>{{ $room->description }}</p>
                        @else
                            <p class="text-muted">No description available for this room.</p>
                        @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">
                        <h5 class="mb-0">
                            <i class="fas fa-history me-2"></i>Maintenance History Summary
                            <a href="{{ route('rooms.maintenance', $room->id) }}" class="btn btn-light btn-sm float-end">
                                View Full History
                            </a>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3">
                                    <h3 class="text-primary">{{ $room->maintenanceRequests->count() }}</h3>
                                    <p class="mb-0">Total Requests</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3">
                                    <h3 class="text-warning">{{ $room->activeMaintenanceRequests->count() }}</h3>
                                    <p class="mb-0">Active Requests</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3">
                                    <h3 class="text-success">{{ $room->maintenanceRequests->where('status', 'completed')->count() }}</h3>
                                    <p class="mb-0">Completed</p>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="border rounded p-3">
                                    <h3 class="text-danger">{{ $room->maintenanceRequests->where('maintenance_type', 'repair')->count() }}</h3>
                                    <p class="mb-0">Repair Requests</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">
                                    <thead>
                                        <tr>
                                            <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 $maintenance)
                                        <tr>
                                            <td>{{ Str::limit($maintenance->title, 30) }}</td>
                                            <td>
                                                <span class="text-capitalize">{{ $maintenance->maintenance_type }}</span>
                                            </td>
                                            <td>
                                                <span class="badge priority-badge {{ $maintenance->priority_badge }}">
                                                    {{ ucfirst($maintenance->priority) }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge priority-badge {{ $maintenance->status_badge }}">
                                                    {{ ucfirst(str_replace('_', ' ', $maintenance->status)) }}
                                                </span>
                                            </td>
                                            <td>{{ $maintenance->reported_date->format('M j, Y') }}</td>
                                            <td>
                                                <a href="{{ route('maintenance.show', $maintenance) }}" class="btn btn-sm btn-outline-primary">
                                                    View
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-4">
                                <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">
                                    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 changeImage(thumb, src) {
            // Update main image
            document.getElementById('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
        let currentImageIndex = 0;
        const images = @json($room->images ?? []);
        
        function rotateImages() {
            if (images.length > 1) {
                currentImageIndex = (currentImageIndex + 1) % images.length;
                const imageUrl = "{{ asset('storage/') }}/" + images[currentImageIndex];
                document.getElementById('mainImage').src = imageUrl;
                
                // Update active thumbnail
                document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
                    thumb.classList.toggle('active', index === currentImageIndex);
                });
            }
        }
        
        // Start rotation if there are multiple images
        if (images.length > 1) {
            setInterval(rotateImages, 5000);
        }
    </script>
    
<script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>

