@extends('layouts.mother')

@section('title', 'Mother Dashboard')

@section('content')
    <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <!-- Welcome Card -->
        <x-welcome-card />
        <!-- Personal Information Card -->
        @if(auth()->user()->expectantMother)
            <div class="modern-card mb-8 p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-user-circle accent-text mr-3"></i>
                        Personal Information
                    </h2>
                    <!-- Real-time Risk Level Badge -->
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-600">Current Risk Level:</span>
                        <x-color-code-badge
                            :color-code="auth()->user()->expectantMother->current_color_code ?? 'white'"
                            size="lg"
                            :show-label="true"
                            :show-risk="true"
                        />
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="flex items-center space-x-3 p-4 bg-gray-50 rounded-xl">
                            <i class="fas fa-id-card accent-text text-lg"></i>
                            <div>
                                <span class="text-sm text-gray-500 block">Series Number</span>
                                <span class="font-semibold text-gray-900">{{ auth()->user()->expectantMother->series_number }}</span>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3 p-4 bg-gray-50 rounded-xl">
                            <i class="fas fa-hospital accent-text text-lg"></i>
                            <div>
                                <span class="text-sm text-gray-500 block">Assigned Clinic</span>
                                <span class="font-semibold text-gray-900">{{ auth()->user()->clinic->name ?? 'Not assigned' }}</span>
                            </div>
                        </div>
                    </div>

                    @php
                        $currentAssignment = auth()->user()->expectantMother->currentAssignment;
                    @endphp

                    <div class="space-y-4">
                        @if($currentAssignment)
                            <div class="flex items-center space-x-3 p-4 bg-gray-50 rounded-xl">
                                <i class="fas fa-map-marker-alt accent-text text-lg"></i>
                                <div>
                                    <span class="text-sm text-gray-500 block">Assigned Zone</span>
                                    <span class="font-semibold text-gray-900">{{ $currentAssignment->zone->zone_code }} - {{ $currentAssignment->zone->zone_name }}</span>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3 p-4 bg-gray-50 rounded-xl">
                                <i class="fas fa-user-nurse accent-text text-lg"></i>
                                <div>
                                    <span class="text-sm text-gray-500 block">Your Nurse</span>
                                    <span class="font-semibold text-gray-900">{{ $currentAssignment->nurse->name }}</span>
                                </div>
                            </div>
                        @elseif(auth()->user()->expectantMother->zone_assignment_pending)
                            <div class="flex items-center space-x-3 p-4 bg-yellow-50 rounded-xl border border-yellow-200">
                                <i class="fas fa-clock text-yellow-600 text-lg"></i>
                                <div>
                                    <span class="text-sm text-yellow-600 block">Assignment Status</span>
                                    <span class="font-medium text-yellow-700">Zone assignment pending - A head nurse will assign you to a zone soon</span>
                                </div>
                            </div>
                        @else
                            <div class="flex items-center space-x-3 p-4 bg-red-50 rounded-xl border border-red-200">
                                <i class="fas fa-exclamation-triangle text-red-600 text-lg"></i>
                                <div>
                                    <span class="text-sm text-red-600 block">Assignment Status</span>
                                    <span class="font-medium text-red-700">No zone assigned - Please contact the clinic</span>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

            <!-- Success Messages -->
            @if(session('success'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-xl shadow-md">
                    <div class="flex items-center">
                        <i class="fas fa-check-circle text-green-600 mr-3"></i>
                        <div>
                            <div class="font-medium">{{ session('success') }}</div>
                            @if(isset($isWelcomePage) && $isWelcomePage)
                                <div class="mt-1 text-sm text-green-600">
                                    You will be redirected to your main dashboard in a few seconds...
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endif

            @if(session('zone_assignment_success'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-xl shadow-md">
                    <div class="flex items-center">
                        <i class="fas fa-map-marker-alt text-green-600 mr-3"></i>
                        <div>
                            <div class="font-medium">Zone Assignment Successful!</div>
                            <div class="mt-1 text-sm">{{ session('zone_assignment_success') }}</div>
                        </div>
                    </div>
                </div>
            @endif

            @if(session('zone_assignment_pending'))
                <div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 text-yellow-800 rounded-xl shadow-md">
                    <div class="flex items-center">
                        <i class="fas fa-clock text-yellow-600 mr-3"></i>
                        <div>
                            <div class="font-medium">Zone Assignment Pending</div>
                            <div class="mt-1 text-sm">{{ session('zone_assignment_pending') }}</div>
                        </div>
                    </div>
                </div>
            @endif

 <!-- Risk Level Information Card -->
        @if(auth()->user()->expectantMother)
            @php
                $currentColorCode = auth()->user()->expectantMother->current_color_code ?? 'white';
                $colorInfo = [
                    'red' => [
                        'title' => 'High Risk',
                        'icon' => 'fas fa-exclamation-triangle',
                        'bg' => 'bg-red-50',
                        'border' => 'border-red-200',
                        'text' => 'text-red-800',
                        'description' => 'Immediate hospital referral required. Your pregnancy requires specialized care and close monitoring.',
                        'care' => 'Hospital-based care with specialist supervision'
                    ],
                    'yellow' => [
                        'title' => 'Moderate Risk',
                        'icon' => 'fas fa-exclamation-circle',
                        'bg' => 'bg-yellow-50',
                        'border' => 'border-yellow-200',
                        'text' => 'text-yellow-800',
                        'description' => 'Specialist referral recommended. Regular monitoring and shared care with specialists.',
                        'care' => 'Specialist consultation with shared care'
                    ],
                    'green' => [
                        'title' => 'Low Risk',
                        'icon' => 'fas fa-info-circle',
                        'bg' => 'bg-green-50',
                        'border' => 'border-green-200',
                        'text' => 'text-green-800',
                        'description' => 'Health clinic management. Routine monitoring with standard antenatal care.',
                        'care' => 'Regular clinic-based antenatal care'
                    ],
                    'white' => [
                        'title' => 'No Risk',
                        'icon' => 'fas fa-check-circle',
                        'bg' => 'bg-gray-50',
                        'border' => 'border-gray-200',
                        'text' => 'text-gray-800',
                        'description' => 'Community-based care. Your pregnancy is progressing normally with minimal risk factors.',
                        'care' => 'Nurse-led community care with medical supervision'
                    ]
                ];
                $info = $colorInfo[$currentColorCode];
            @endphp
            <div class="modern-card mb-8 p-6 {{ $info['bg'] }} border-2 {{ $info['border'] }}">
                <div class="flex items-start space-x-4">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 rounded-full {{ $info['bg'] }} flex items-center justify-center">
                            <i class="{{ $info['icon'] }} {{ $info['text'] }} text-2xl"></i>
                        </div>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-semibold {{ $info['text'] }} mb-2">
                            Understanding Your Risk Level: {{ $info['title'] }}
                        </h3>
                        <p class="{{ $info['text'] }} mb-3">{{ $info['description'] }}</p>
                        <div class="flex items-start space-x-2 {{ $info['text'] }} opacity-90">
                            <i class="fas fa-hospital-user mt-1"></i>
                            <p class="text-sm font-medium">{{ $info['care'] }}</p>
                        </div>
                        <div class="mt-4 pt-4 border-t {{ $info['border'] }}">
                            <p class="text-sm {{ $info['text'] }} opacity-75">
                                <i class="fas fa-sync-alt mr-2"></i>
                                Your risk level is updated after each appointment based on current health assessments. 
                                Always attend your scheduled appointments for accurate monitoring.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <!-- Quick Actions Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            <!-- Health Records Card -->
            <div class="modern-card p-6 text-center">
                <div class="accent-bg-light rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-file-medical accent-text text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Health Records</h3>
                <p class="text-gray-600 text-sm mb-4">View your maternal health records and test results</p>
                <a href="{{ route('mother.health-records.index') }}" class="modern-button inline-flex items-center text-sm">
                    <i class="fas fa-eye mr-2"></i>
                    View Records
                </a>
            </div>

            <!-- Appointments Card -->
            <div class="modern-card p-6 text-center">
                <div class="accent-bg-light rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-user-nurse accent-text text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Appointments</h3>
                <p class="text-gray-600 text-sm mb-4">Schedule and manage your clinic appointments</p>
                <a href="{{ route('appointments') }}" class="modern-button inline-flex items-center text-sm">
                    <i class="fas fa-calendar-plus mr-2"></i>
                    Book Appointment
                </a>
            </div>

            <!-- Kick & Hiccup Tracker Card -->
            <div class="modern-card p-6 text-center">
                <div class="accent-bg-light rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-heartbeat accent-text text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Baby Tracker</h3>
                <p class="text-gray-600 text-sm mb-4">Track your baby's kicks and hiccups</p>
                <a href="{{ route('kick-hiccup-tracker') }}" class="modern-button inline-flex items-center text-sm">
                    <i class="fas fa-chart-line mr-2"></i>
                    Start Tracking
                </a>
            </div>
        </div>

       
    </div>
@endsection