@extends('layouts.site')

@section('title', 'Maintenance Request Details')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="mb-6">
            <a href="{{ route('maintenance.tenant-requests', ['tenant_id' => $tenant->tenant_id]) }}" class="text-blue-600 hover:text-blue-800 mb-2 inline-block">
                ← Back to My Requests
            </a>
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-2xl font-bold text-gray-800 mb-2">{{ $maintenanceRequest->title }}</h1>
                    <p class="text-gray-600">Request #{{ $maintenanceRequest->id }}</p>
                </div>
                <div class="text-right">
                    <span class="inline-block px-3 py-1 rounded-full text-sm font-medium mb-2
                        @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>
                    <br>
                    <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] }} Priority
                    </span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-6">
                {{-- Request Details --}}
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Request Details</h2>
                    <div class="space-y-3">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <span class="text-sm font-medium text-gray-600">Category:</span>
                                <p class="text-gray-900">{{ \App\Models\MaintenanceRequest::getCategories()[$maintenanceRequest->category] }}</p>
                            </div>
                            <div>
                                <span class="text-sm font-medium text-gray-600">Submitted:</span>
                                <p class="text-gray-900">{{ $maintenanceRequest->requested_at->format('M j, Y g:i A') }}</p>
                            </div>
                        </div>
                        <div>
                            <span class="text-sm font-medium text-gray-600">Description:</span>
                            <p class="text-gray-900 mt-1">{{ $maintenanceRequest->description }}</p>
                        </div>
                    </div>
                </div>

                {{-- Photos --}}
                @if($maintenanceRequest->photos && count($maintenanceRequest->photos) > 0)
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h2 class="text-lg font-semibold text-gray-800 mb-4">Photos</h2>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            @foreach($maintenanceRequest->photos as $photo)
                                <img 
                                    src="{{ Storage::url($photo) }}" 
                                    alt="Maintenance photo" 
                                    class="w-full h-32 object-cover rounded-lg cursor-pointer hover:opacity-75 transition duration-200"
                                    onclick="openImageModal('{{ Storage::url($photo) }}')"
                                >
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- Work History/Updates --}}
                @if($maintenanceRequest->work_notes)
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h2 class="text-lg font-semibold text-gray-800 mb-4">Work Notes</h2>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <p class="text-gray-700">{{ $maintenanceRequest->work_notes }}</p>
                        </div>
                    </div>
                @endif

                {{-- Feedback Section --}}
                @if($maintenanceRequest->status === 'completed')
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h2 class="text-lg font-semibold text-gray-800 mb-4">Feedback</h2>
                        
                        @if($maintenanceRequest->tenant_rating)
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <div class="flex items-center mb-2">
                                    <span class="text-sm font-medium text-green-800 mr-2">Your Rating:</span>
                                    <div class="flex items-center">
                                        @for($i = 1; $i <= 5; $i++)
                                            <svg class="w-4 h-4 {{ $i <= $maintenanceRequest->tenant_rating ? 'text-yellow-400' : 'text-gray-300' }}" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                            </svg>
                                        @endfor
                                        <span class="ml-2 text-sm text-green-800">({{ $maintenanceRequest->tenant_rating }}/5)</span>
                                    </div>
                                </div>
                                @if($maintenanceRequest->tenant_feedback)
                                    <p class="text-green-700 text-sm">{{ $maintenanceRequest->tenant_feedback }}</p>
                                @endif
                            </div>
                        @else
                            <form action="{{ route('maintenance.feedback', $maintenanceRequest->id) }}" method="POST">
                                @csrf
                                <input type="hidden" name="tenant_id" value="{{ $tenant->tenant_id }}">
                                
                                <div class="mb-4">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        How would you rate the service? *
                                    </label>
                                    <div class="flex items-center space-x-2">
                                        @for($i = 1; $i <= 5; $i++)
                                            <label class="cursor-pointer">
                                                <input type="radio" name="rating" value="{{ $i }}" class="sr-only" required>
                                                <svg class="w-8 h-8 text-gray-300 hover:text-yellow-400 transition duration-200 rating-star" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                                </svg>
                                            </label>
                                        @endfor
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <label for="feedback" class="block text-sm font-medium text-gray-700 mb-2">
                                        Additional Comments (Optional)
                                    </label>
                                    <textarea 
                                        id="feedback" 
                                        name="feedback" 
                                        rows="3"
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        placeholder="Tell us about your experience..."
                                        maxlength="1000"
                                    ></textarea>
                                </div>

                                <button 
                                    type="submit" 
                                    class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-200"
                                >
                                    Submit Feedback
                                </button>
                            </form>
                        @endif
                    </div>
                @endif
            </div>

            <div class="space-y-6">
                {{-- Property Info --}}
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Property Information</h2>
                    <div class="space-y-3 text-sm">
                        <div>
                            <span class="font-medium text-gray-600">Property:</span>
                            <p class="text-gray-900">{{ $tenant->unit->property->name }}</p>
                        </div>
                        <div>
                            <span class="font-medium text-gray-600">Unit:</span>
                            <p class="text-gray-900">{{ $tenant->unit->unit_number }}</p>
                        </div>
                        <div>
                            <span class="font-medium text-gray-600">Tenant:</span>
                            <p class="text-gray-900">{{ $tenant->first_name }} {{ $tenant->last_name }}</p>
                        </div>
                    </div>
                </div>

                {{-- Assignment Info --}}
                @if($maintenanceRequest->assigned_to)
                    <div class="bg-white rounded-lg shadow-md p-6">
                        <h2 class="text-lg font-semibold text-gray-800 mb-4">Assigned Worker</h2>
                        <div class="space-y-3 text-sm">
                            <div>
                                <span class="font-medium text-gray-600">Name:</span>
                                <p class="text-gray-900">{{ $maintenanceRequest->assignedWorker->name }}</p>
                            </div>
                            @if($maintenanceRequest->assigned_at)
                                <div>
                                    <span class="font-medium text-gray-600">Assigned:</span>
                                    <p class="text-gray-900">{{ $maintenanceRequest->assigned_at->format('M j, Y') }}</p>
                                </div>
                            @endif
                            @if($maintenanceRequest->scheduled_at)
                                <div>
                                    <span class="font-medium text-gray-600">Scheduled:</span>
                                    <p class="text-gray-900">{{ $maintenanceRequest->scheduled_at->format('M j, Y g:i A') }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Timeline --}}
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Status Timeline</h2>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-3 h-3 bg-blue-600 rounded-full mt-1"></div>
                            <div class="ml-4">
                                <p class="text-sm font-medium text-gray-900">Request Submitted</p>
                                <p class="text-xs text-gray-500">{{ $maintenanceRequest->requested_at->format('M j, Y g:i A') }}</p>
                            </div>
                        </div>
                        
                        @if($maintenanceRequest->assigned_at)
                            <div class="flex items-start">
                                <div class="flex-shrink-0 w-3 h-3 bg-yellow-600 rounded-full mt-1"></div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-900">Assigned to Worker</p>
                                    <p class="text-xs text-gray-500">{{ $maintenanceRequest->assigned_at->format('M j, Y g:i A') }}</p>
                                </div>
                            </div>
                        @endif

                        @if($maintenanceRequest->started_at)
                            <div class="flex items-start">
                                <div class="flex-shrink-0 w-3 h-3 bg-orange-600 rounded-full mt-1"></div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-900">Work Started</p>
                                    <p class="text-xs text-gray-500">{{ $maintenanceRequest->started_at->format('M j, Y g:i A') }}</p>
                                </div>
                            </div>
                        @endif

                        @if($maintenanceRequest->completed_at)
                            <div class="flex items-start">
                                <div class="flex-shrink-0 w-3 h-3 bg-green-600 rounded-full mt-1"></div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-900">Completed</p>
                                    <p class="text-xs text-gray-500">{{ $maintenanceRequest->completed_at->format('M j, Y g:i A') }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Image Modal --}}
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="max-w-4xl max-h-full bg-white rounded-lg overflow-hidden">
        <div class="flex justify-between items-center p-4 border-b">
            <h3 class="text-lg font-semibold">Photo</h3>
            <button onclick="closeImageModal()" class="text-gray-500 hover:text-gray-700">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div class="p-4">
            <img id="modalImage" src="" alt="Maintenance photo" class="max-w-full max-h-96 mx-auto">
        </div>
    </div>
</div>

<script>
// Rating system
document.addEventListener('DOMContentLoaded', function() {
    const stars = document.querySelectorAll('.rating-star');
    const ratingInputs = document.querySelectorAll('input[name="rating"]');
    
    stars.forEach((star, index) => {
        star.addEventListener('click', function() {
            ratingInputs[index].checked = true;
            updateStarDisplay(index + 1);
        });
        
        star.addEventListener('mouseenter', function() {
            updateStarDisplay(index + 1);
        });
    });
    
    // Reset stars on mouse leave
    const ratingContainer = document.querySelector('.flex.items-center.space-x-2');
    if (ratingContainer) {
        ratingContainer.addEventListener('mouseleave', function() {
            const checkedRating = document.querySelector('input[name="rating"]:checked');
            const rating = checkedRating ? parseInt(checkedRating.value) : 0;
            updateStarDisplay(rating);
        });
    }
    
    function updateStarDisplay(rating) {
        stars.forEach((star, index) => {
            if (index < rating) {
                star.classList.remove('text-gray-300');
                star.classList.add('text-yellow-400');
            } else {
                star.classList.remove('text-yellow-400');
                star.classList.add('text-gray-300');
            }
        });
    }
});

// Image modal functions
function openImageModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    document.getElementById('imageModal').classList.remove('hidden');
}

function closeImageModal() {
    document.getElementById('imageModal').classList.add('hidden');
}

// Close modal on outside click
document.getElementById('imageModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeImageModal();
    }
});
</script>
@endsection