@extends('layouts.mother')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Page Header -->
    <div class="bg-white rounded-xl shadow-lg p-8 mb-8 border border-gray-100">
        <div class="text-center">
            <div class="bg-[#850E35]/10 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-file-medical text-[#850E35] text-3xl"></i>
            </div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">My Health Records</h1>
            <p class="text-gray-600 text-lg">View your maternal health records from all appointments</p>

            <div class="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
                Please be informed that your health record will be available for viewing within up to two (2) weeks after your appointment. This is because some medical tests require time for results to be processed. The health record can only be viewed once it has been marked as completed by the assigned nurse. Mothers are advised to check the health record periodically for updates.
            </div>
        </div>
    </div>

    @if($records->isEmpty())
        <!-- Empty State -->
        <div class="bg-white rounded-lg shadow-md p-12 text-center">
            <i class="fas fa-folder-open text-gray-300 text-6xl mb-4"></i>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No Health Records Yet</h3>
            <p class="text-gray-600">Your health records will appear here after your appointments with the nurse.</p>
        </div>
    @else
        <!-- Records List -->
        <div class="space-y-4">
            @foreach($records as $record)
            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
                <div class="p-6">
                    <div class="flex items-start justify-between">
                        <!-- Record Info -->
                        <div class="flex-1">
                            <div class="flex items-center mb-3">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold
                                    @if($record->status === 'completed') bg-green-100 text-green-800
                                    @elseif($record->status === 'reviewed') bg-blue-100 text-blue-800
                                    @else bg-yellow-100 text-yellow-800
                                    @endif">
                                    @if($record->status === 'completed')
                                        <i class="fas fa-check-circle mr-2"></i> Completed
                                    @elseif($record->status === 'reviewed')
                                        <i class="fas fa-check-double mr-2"></i> Reviewed
                                    @else
                                        <i class="fas fa-clock mr-2"></i> Draft
                                    @endif
                                </span>
                                
                                @if($record->appointment && $record->appointment->appointment_date)
                                <span class="ml-3 text-sm text-gray-600">
                                    <i class="fas fa-calendar-check mr-1"></i>
                                    Appointment: {{ $record->appointment->appointment_date->format('d M Y, h:i A') }}
                                </span>
                                @endif
                            </div>

                            <h3 class="text-lg font-semibold text-gray-900 mb-2">
                                <i class="fas fa-notes-medical text-pink-600 mr-2"></i>
                                Health Record - Visit #{{ $record->visit_number }}
                            </h3>

                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                                <div>
                                    <div class="text-xs text-gray-600">Visit Date</div>
                                    <div class="font-semibold text-gray-900">{{ $record->record_date ? $record->record_date->format('d M Y') : 'N/A' }}</div>
                                </div>
                                <div>
                                    <div class="text-xs text-gray-600">Gestational Week</div>
                                    <div class="font-semibold text-gray-900">{{ $record->gestational_week ?? 'N/A' }} weeks</div>
                                </div>
                                <div>
                                    <div class="text-xs text-gray-600">Tests Performed</div>
                                    <div class="font-semibold text-gray-900">{{ $record->testResults->count() }} tests</div>
                                </div>
                                <div>
                                    <div class="text-xs text-gray-600">Clinic</div>
                                    <div class="font-semibold text-gray-900">
                                        {{ $record->appointment?->clinic?->name 
                                           ?? $record->expectantMother?->clinic?->name 
                                           ?? $record->nurse?->clinic?->name 
                                           ?? 'N/A' }}
                                    </div>
                                </div>
                            </div>

                            @if($record->testResults->isNotEmpty())
                            <div class="mb-3">
                                <div class="text-xs text-gray-600 mb-2">Tests Included:</div>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($record->testResults as $test)
                                    <span class="inline-flex items-center px-2 py-1 bg-blue-50 text-blue-700 rounded text-xs">
                                        <i class="fas fa-vial mr-1"></i>
                                        {{ $test->test_name }}
                                    </span>
                                    @endforeach
                                </div>
                            </div>
                            @endif

                            <div class="text-sm text-gray-600">
                                <i class="fas fa-user-nurse mr-1"></i>
                                Recorded by: <span class="font-medium">{{ $record->recordedByNurse->name }}</span>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="ml-6 flex flex-col space-y-2">
                            <a href="{{ route('mother.health-records.show', $record) }}" 
                               class="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors duration-200">
                                <i class="fas fa-eye mr-2"></i>
                                View Details
                            </a>
                            
                            @if($record->status === 'completed' || $record->status === 'reviewed')
                            <a href="{{ route('mother.health-records.export', $record) }}"
                               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                                <i class="fas fa-file-pdf mr-2"></i>
                                Download PDF
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Pagination -->
        @if($records->hasPages())
        <div class="mt-6">
            {{ $records->links() }}
        </div>
        @endif
    @endif
</div>
@endsection