@extends('layouts.app')

@section('title', 'My Maintenance Requests')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">My Maintenance Requests</h1>
                <p class="text-gray-600">
                    {{ $tenant->first_name }} {{ $tenant->last_name }} 
                    ({{ $tenant->unit->property->name }} - Unit {{ $tenant->unit->unit_number }})
                </p>
            </div>
            <a 
                href="{{ route('maintenance.create') }}" 
                class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-200"
            >
                New Request
            </a>
        </div>

        @if($maintenanceRequests->count() > 0)
            <div class="space-y-4">
                @foreach($maintenanceRequests as $maintenanceRequest)
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-800 mb-1">
                                    {{ $maintenanceRequest->title }}
                                </h3>
                                <div class="flex items-center gap-4 text-sm text-gray-600">
                                    <span>Request #{{ $maintenanceRequest->id }}</span>
                                    <span>{{ $maintenanceRequest->requested_at->format('M j, Y') }}</span>
                                    <span class="capitalize">{{ \App\Models\MaintenanceRequest::getCategories()[$maintenanceRequest->category] }}</span>
                                </div>
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="inline-block px-3 py-1 rounded-full text-sm font-medium
                                    @if($maintenanceRequest->status === 'pending') bg-yellow-100 text-yellow-800
                                    @elseif($maintenanceRequest->status === 'in_progress') bg-blue-100 text-blue-800
                                    @elseif($maintenanceRequest->status === 'completed') bg-green-100 text-green-800
                                    @else bg-gray-100 text-gray-800
                                    @endif">
                                    {{ ucfirst(str_replace('_', ' ', $maintenanceRequest->status)) }}
                                </span>
                                <span class="inline-block px-3 py-1 rounded-full text-sm font-medium
                                    @if($maintenanceRequest->priority === 'emergency') bg-red-100 text-red-800
                                    @elseif($maintenanceRequest->priority === 'high') bg-orange-100 text-orange-800
                                    @elseif($maintenanceRequest->priority === 'medium') bg-yellow-100 text-yellow-800
                                    @else bg-gray-100 text-gray-800
                                    @endif">
                                    {{ \App\Models\MaintenanceRequest::getPriorities()[$maintenanceRequest->priority] }}
                                </span>
                            </div>
                        </div>

                        <p class="text-gray-700 mb-4">{{ Str::limit($maintenanceRequest->description, 200) }}</p>

                        <div class="flex justify-between items-center">
                            <div class="text-sm text-gray-500">
                                @if($maintenanceRequest->assigned_to)
                                    Assigned to: {{ $maintenanceRequest->assignedWorker->name }}
                                @else
                                    Not yet assigned
                                @endif
                            </div>
                            <a 
                                href="{{ route('maintenance.show', ['maintenanceRequest' => $maintenanceRequest->id, 'tenant_id' => $tenant->tenant_id]) }}" 
                                class="text-blue-600 hover:text-blue-800 font-medium"
                            >
                                View Details →
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-6">
                {{ $maintenanceRequests->links() }}
            </div>
        @else
            <div class="bg-white rounded-lg shadow-md p-8 text-center">
                <div class="mb-4">
                    <svg class="mx-auto w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No maintenance requests found</h3>
                <p class="text-gray-600 mb-6">You haven't submitted any maintenance requests yet.</p>
                <a 
                    href="{{ route('maintenance.create') }}" 
                    class="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200"
                >
                    Submit Your First Request
                </a>
            </div>
        @endif
    </div>
</div>
@endsection