<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maintenance - {{ 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">
    
    @hotelSettings
    <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;
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 1600px;
            margin: 0 auto;
        }
        
        .priority-badge {
            font-size: 0.75rem;
            padding: 0.35em 0.65em;
        }
        
        .dashboard-card {
            border-radius: 10px;
            transition: transform 0.3s, box-shadow 0.3s;
            border: none;
            background: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .dashboard-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }
        
        .border-left-primary { border-left: 4px solid #4e73df !important; }
        .border-left-success { border-left: 4px solid #1cc88a !important; }
        .border-left-info { border-left: 4px solid #36b9cc !important; }
        .border-left-warning { border-left: 4px solid #f6c23e !important; }
        .border-left-danger { border-left: 4px solid #e74a3b !important; }
        .border-left-secondary { border-left: 4px solid #858796 !important; }
        
        .btn-primary {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-primary:hover {
            background-color: var(--dark-green);
            border-color: var(--dark-green);
        }
        
        .btn-outline-primary {
            color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-green);
            color: white;
        }
        
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 1.5rem;
        }
        
        .card-header {
            background: linear-gradient(90deg, var(--primary-green) 0%, var(--secondary-green) 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
            padding: 1rem;
        }
        
        .card-header.bg-primary {
            background: linear-gradient(90deg, var(--dark-green) 0%, var(--primary-green) 100%) !important;
        }
        
        .card-header.bg-light {
            background: #f8f9fa !important;
            color: #333;
            border-bottom: 1px solid #dee2e6;
        }
        
        .table th {
            text-align: center;
            vertical-align: middle;
            background-color: #f8f9fa;
        }
        
        .table td {
            vertical-align: middle;
        }
        
        .btn-group.d-flex {
            flex-wrap: nowrap;
            gap: 0.25rem;
        }
        
        .badge.bg-secondary {
            background-color: var(--dark-green) !important;
        }
        
        .badge.bg-warning {
            background-color: #ffc107 !important;
            color: #000;
        }
        
        .badge.bg-danger {
            background-color: #dc3545 !important;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 0.2rem rgba(26, 147, 111, 0.25);
        }
        
        .pagination .page-link {
            color: var(--primary-green);
        }
        
        .pagination .page-item.active .page-link {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
            color: white;
        }
        
        h2 {
            color: var(--dark-green);
        }
        
        .text-primary {
            color: var(--primary-green) !important;
        }
        
        .text-gray-800 {
            color: #333;
        }
        
        .text-gray-300 {
            color: #dee2e6;
        }
        
        /* Center alignment enhancements */
        .card-header h5 {
            display: inline-block;
            margin: 0;
        }
        
        .form-control.text-center::placeholder {
            text-align: center;
        }
        
        select.form-select.text-center {
            text-align-last: center;
        }
        
        input[type="date"].form-control.text-center {
            text-align: center;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .container {
                margin-left: 15px;
                margin-right: 15px;
                padding: 0;
            }
            
            .btn-group.d-flex {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .btn-group.d-flex .btn {
                width: 100%;
                margin: 0;
            }
        }
    </style>
</head>
<body>
    <div style="margin-left: 150px; margin-right: 150px;" class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-tools me-2"></i>Maintenance</h2>
            <div class="d-flex">
                <a href="{{ route('dashboard') }}" class="btn btn-outline-primary me-2">
                    <i class="fas fa-tachometer-alt me-2"></i>Back to Dashboard
                </a>
                <a href="{{ route('maintenance.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>New Request
                </a>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="row justify-content-center mb-4">
            @php
                $statCards = [
                    ['title' => 'Total', 'value' => $stats['total'] ?? 0, 'color' => 'primary', 'icon' => 'fas fa-clipboard-list'],
                    ['title' => 'Pending', 'value' => $stats['pending'] ?? 0, 'color' => 'warning', 'icon' => 'fas fa-clock'],
                    ['title' => 'In Progress', 'value' => $stats['in_progress'] ?? 0, 'color' => 'info', 'icon' => 'fas fa-spinner'],
                    ['title' => 'Completed', 'value' => $stats['completed'] ?? 0, 'color' => 'success', 'icon' => 'fas fa-check-circle'],
                    ['title' => 'High Priority', 'value' => ($stats['high_priority'] ?? 0) + ($stats['urgent'] ?? 0), 'color' => 'danger', 'icon' => 'fas fa-exclamation-triangle'],
                    ['title' => 'Rooms Under Maintenance', 'value' => $stats['rooms_under_maintenance'] ?? 0, 'color' => 'secondary', 'icon' => 'fas fa-bed']
                ];
            @endphp
            
            @foreach($statCards as $card)
            <div class="col-xl-2 col-md-4 mb-3">
                <div class="card dashboard-card border-left-{{ $card['color'] }} shadow h-100 py-2 text-center">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center justify-content-center">
                            <div class="col">
                                <div class="text-xs font-weight-bold text-{{ $card['color'] }} text-uppercase mb-1">
                                    {{ $card['title'] }}
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $card['value'] }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="{{ $card['icon'] }} fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-header bg-light text-center">
                <h5 class="mb-0"><i class="fas fa-filter me-2"></i>Filters</h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('maintenance.index') }}">
                    <div class="row g-3 justify-content-center">
                        <div class="col-md-2">
                            <input type="text" name="search" class="form-control text-center" placeholder="Search..." value="{{ request('search') }}">
                        </div>
                        <div class="col-md-2">
                            <select name="room_id" class="form-select text-center">
                                <option value="">All Rooms</option>
                                @foreach($rooms ?? [] as $room)
                                    <option value="{{ $room->id }}" {{ request('room_id') == $room->id ? 'selected' : '' }}>
                                        Room {{ $room->room_number }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="status" class="form-select text-center">
                                <option value="">All Status</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="priority" class="form-select text-center">
                                <option value="">All Priority</option>
                                <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>Low</option>
                                <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                <option value="high" {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
                                <option value="urgent" {{ request('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="date" name="date_from" class="form-control text-center" value="{{ request('date_from') }}" placeholder="From Date">
                        </div>
                        <div class="col-md-2">
                            <input type="date" name="date_to" class="form-control text-center" value="{{ request('date_to') }}" placeholder="To Date">
                        </div>
                        <div class="col-12 text-center mt-3">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fas fa-filter me-1"></i>Apply Filters
                            </button>
                            <a href="{{ route('maintenance.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i>Clear Filters
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Maintenance Requests Table -->
        <div class="card">
            <div class="card-header bg-primary text-white text-center d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-list me-2"></i>Maintenance Requests</h5>
                <a href="{{ route('maintenance.export', request()->query()) }}" class="btn btn-light btn-sm">
                    <i class="fas fa-download me-1"></i>Export
                </a>
            </div>
            <div class="card-body">
                @if($maintenances->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="text-center">
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Location</th>
                                    <th>Type</th>
                                    <th>Priority</th>
                                    <th>Status</th>
                                    <th>Reported Date</th>
                                    <th>Scheduled Date</th>
                                    <th>Assigned To</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($maintenances as $maintenance)
                                <tr>
                                    <td class="text-center">#{{ $maintenance->id }}</td>
                                    <td>
                                        <a href="{{ route('maintenance.show', $maintenance) }}" class="text-decoration-none text-center d-block">
                                            {{ Str::limit($maintenance->title, 30) }}
                                        </a>
                                        @if($maintenance->maintenance_type === 'repair')
                                            <span class="badge bg-danger d-block text-center mt-1">Repair</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($maintenance->room)
                                            <a href="{{ route('rooms.show', $maintenance->room_id) }}" class="text-decoration-none">
                                                <span class="badge bg-secondary">
                                                    <i class="fas fa-bed me-1"></i>Room {{ $maintenance->room->room_number }}
                                                </span>
                                            </a>
                                            @if($maintenance->room->status === 'maintenance')
                                                <span class="badge bg-warning d-block text-center mt-1">Room Locked</span>
                                            @endif
                                        @else
                                            <span class="badge bg-info">
                                                <i class="fas fa-map-marker-alt me-1"></i>{{ $maintenance->location ?? 'General' }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="text-capitalize">{{ $maintenance->maintenance_type }}</span>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $priorityBadge = match($maintenance->priority) {
                                                'urgent' => 'bg-danger',
                                                'high' => 'bg-warning',
                                                'medium' => 'bg-info',
                                                'low' => 'bg-success',
                                                default => 'bg-secondary'
                                            };
                                        @endphp
                                        <span class="badge priority-badge {{ $priorityBadge }}">
                                            {{ ucfirst($maintenance->priority) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $statusBadge = match($maintenance->status) {
                                                'pending' => 'bg-warning',
                                                'in_progress' => 'bg-info',
                                                'completed' => 'bg-success',
                                                'cancelled' => 'bg-danger',
                                                default => 'bg-secondary'
                                            };
                                        @endphp
                                        <span class="badge priority-badge {{ $statusBadge }}">
                                            {{ ucfirst(str_replace('_', ' ', $maintenance->status)) }}
                                        </span>
                                    </td>
                                    <td class="text-center">{{ $maintenance->reported_date ? $maintenance->reported_date->format('M j, Y') : 'N/A' }}</td>
                                    <td class="text-center">
                                        @if($maintenance->scheduled_date)
                                            {{ $maintenance->scheduled_date->format('M j, Y') }}
                                        @else
                                            <span class="text-muted">Not scheduled</span>
                                        @endif
                                    </td>
                                    <td class="text-center">{{ $maintenance->assignedTechnician?->full_name ?? 'Not Assigned' }}</td>
                                    <td>
                                        <div class="btn-group btn-group-sm d-flex justify-content-center">
                                            <a href="{{ route('maintenance.show', $maintenance) }}" class="btn btn-outline-primary" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('maintenance.edit', $maintenance) }}" class="btn btn-outline-warning" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            @if($maintenance->room)
                                                <a href="{{ route('rooms.show', $maintenance->room_id) }}" class="btn btn-outline-info" title="View Room">
                                                    <i class="fas fa-bed"></i>
                                                </a>
                                            @else
                                                <button class="btn btn-outline-secondary" disabled title="Room not available">
                                                    <i class="fas fa-bed"></i>
                                                </button>
                                            @endif
                                            <!-- Delete button removed as requested -->
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    <div class="d-flex justify-content-between align-items-center mt-3 text-center">
                        <div class="w-100 text-center">
                            Showing {{ $maintenances->firstItem() }} to {{ $maintenances->lastItem() }} of {{ $maintenances->total() }} results
                        </div>
                        <div class="w-100 text-center mt-2">
                            {{ $maintenances->links() }}
                        </div>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-tools fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">No maintenance requests found</h4>
                        <p class="text-muted">Get started by creating your first maintenance request.</p>
                        <a href="{{ route('maintenance.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Create Request
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>
