@extends('layouts.nurse')

@section('title', 'Nurse 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 />

        <!-- Password Change Warning -->
        @if(auth()->user()->must_change_password)
            <div class="modern-card mb-8 p-6 border-l-4" style="border-color: #ED8936; background: linear-gradient(135deg, #FFF5F0 0%, #FFFAF5 100%);">
                <div class="flex items-center">
                    <div class="stat-icon warning mr-4">
                        <i class="fas fa-exclamation-triangle text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="text-lg font-bold mb-1" style="color: #C05621;">
                            <i class="fas fa-shield-alt mr-2"></i>Password Change Required
                        </h3>
                        <p class="mb-4" style="color: #7C2D12;">You must change your password before accessing all features.</p>
                        <a href="{{ route('password.change') }}" class="modern-button">
                            <i class="fas fa-key mr-2"></i>
                            Change Password Now
                        </a>
                    </div>
                </div>
            </div>
        @endif

        <!-- Dashboard Stats -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Total Patients -->
            <div class="stat-card group">
                <div class="stat-icon primary group-hover:scale-110 transition-transform">
                    <i class="fas fa-users text-2xl"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-semibold mb-1" style="color: #718096;">Assigned Mothers</p>
                    <p class="text-3xl font-bold mb-1" style="color: #CD7A98;">{{ $assignedMothers ?? 0 }}</p>
                    <p class="text-xs font-medium" style="color: #A0AEC0;">In your zones</p>
                </div>
            </div>

            <!-- High Risk Patients -->
            <div class="stat-card group">
                <div class="stat-icon danger group-hover:scale-110 transition-transform">
                    <i class="fas fa-exclamation-triangle text-2xl"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-semibold mb-1" style="color: #718096;">High Risk (Red)</p>
                    <p class="text-3xl font-bold mb-1" style="color: #F56565;">{{ $highRiskCount ?? 0 }}</p>
                    <p class="text-xs font-medium" style="color: #A0AEC0;">Requires attention</p>
                </div>
            </div>

            <!-- Today's Appointments -->
            <div class="stat-card group">
                <div class="stat-icon warning group-hover:scale-110 transition-transform">
                    <i class="fas fa-calendar-day text-2xl"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-semibold mb-1" style="color: #718096;">Today's Appointments</p>
                    <p class="text-3xl font-bold mb-1" style="color: #ED8936;">{{ $todayAppointments ?? 0 }}</p>
                    <p class="text-xs font-medium" style="color: #A0AEC0;">Scheduled visits</p>
                </div>
            </div>

            <!-- Pending Updates -->
            <div class="stat-card group">
                <div class="stat-icon info group-hover:scale-110 transition-transform">
                    <i class="fas fa-clipboard-list text-2xl"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-semibold mb-1" style="color: #718096;">Pending Updates</p>
                    <p class="text-3xl font-bold mb-1" style="color: #4299E1;">{{ $pendingUpdates ?? 0 }}</p>
                    <p class="text-xs font-medium" style="color: #A0AEC0;">Records to update</p>
                </div>
            </div>
        </div>

        <!-- Assigned Mothers Section -->
        @if(isset($mothersInZones) && $mothersInZones->count() > 0)
            <div class="modern-card mb-8 p-6">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4" style="background: linear-gradient(135deg, rgba(205, 122, 152, 0.15) 0%, rgba(205, 122, 152, 0.25) 100%);">
                            <i class="fas fa-users text-2xl" style="color: #CD7A98;"></i>
                        </div>
                        <div>
                            <h2 class="text-2xl font-bold mb-1" style="color: #2D3748;">
                                Your Assigned Mothers
                            </h2>
                            <p class="font-medium" style="color: #718096;">
                                <span class="font-bold" style="color: #CD7A98;">{{ $mothersInZones->count() }}</span> mothers in your care
                            </p>
                        </div>
                    </div>
                    <a href="{{ route('nurse.health-records.index') }}" class="modern-button">
                        <i class="fas fa-eye mr-2"></i>
                        View All Records
                    </a>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($mothersInZones as $mother)
                        <div class="rounded-xl p-5 border-l-4 transition-all hover:shadow-lg group"
                             style="background: linear-gradient(135deg, #FFFFFF 0%, #F5E6ED 100%); border-color: #CD7A98;">
                            <div class="flex items-center justify-between">
                                <div class="flex-1">
                                    <a href="{{ route('nurse.mothers.profile', $mother->user_id) }}" 
                                       class="font-bold text-lg mb-2 hover:underline inline-flex items-center gap-1 group/link"
                                       style="color: #CD7A98;"
                                       onmouseover="this.style.color='#A8456F';"
                                       onmouseout="this.style.color='#CD7A98';">
                                        {{ $mother->mother_full_name ?? $mother->user->name }}
                                        <i class="fas fa-external-link-alt text-xs opacity-0 group-hover/link:opacity-100 transition-opacity"></i>
                                    </a>
                                    <div class="space-y-2 mt-2">
                                        <p class="text-sm font-medium flex items-center" style="color: #4A5568;">
                                            <i class="fas fa-id-card text-xs mr-2" style="color: #CD7A98;"></i>
                                            Series: <span class="ml-1 font-bold">{{ $mother->series_number }}</span>
                                        </p>
                                        <p class="text-sm font-medium flex items-center" style="color: #4A5568;">
                                            <i class="fas fa-map-marker-alt text-xs mr-2" style="color: #CD7A98;"></i>
                                            <span class="truncate">{{ $mother->currentAssignment->zone->zone_code }} - {{ $mother->currentAssignment->zone->zone_name }}</span>
                                        </p>
                                        <div class="flex items-center mt-3">
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold"
                                                  style="background: linear-gradient(135deg, rgba(72, 187, 120, 0.15) 0%, rgba(72, 187, 120, 0.25) 100%); color: #38A169;">
                                                <i class="fas fa-check-circle mr-1"></i>
                                                {{ ucfirst($mother->currentAssignment->assignment_type) }} assigned
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($mother->mother_full_name ?? $mother->user->name) }}&background=CD7A98&color=fff&size=56"
                                         alt="Mother" class="w-14 h-14 rounded-full border-3 shadow-md group-hover:scale-110 transition-transform" style="border-color: #CD7A98;">
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @else
            <!-- Empty State for No Assigned Mothers -->
            <div class="modern-card mb-8 p-12 text-center">
                <div class="w-20 h-20 rounded-2xl mx-auto mb-6 flex items-center justify-center"
                     style="background: linear-gradient(135deg, rgba(205, 122, 152, 0.15) 0%, rgba(205, 122, 152, 0.25) 100%);">
                    <i class="fas fa-users text-4xl" style="color: #CD7A98;"></i>
                </div>
                <h3 class="text-2xl font-bold mb-3" style="color: #2D3748;">No Assigned Mothers</h3>
                <p class="text-lg mb-6" style="color: #718096;">You don't have any mothers assigned to your zones yet.</p>
                <a href="{{ route('nurse.health-records.index') }}" class="modern-button inline-flex">
                    <i class="fas fa-search mr-2"></i>
                    Browse Available Records
                </a>
            </div>
        @endif

        <!-- Quick Actions -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- Maternal Health Records -->
            <div class="modern-card p-6 group hover:border-2" style="border-color: transparent;" onmouseover="this.style.borderColor='#CD7A98'" onmouseout="this.style.borderColor='transparent'">
                <div class="stat-icon primary mb-4 group-hover:scale-110 transition-transform">
                    <i class="fas fa-file-medical text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2" style="color: #2D3748;">Maternal Health Records</h3>
                <p class="mb-6 font-medium" style="color: #718096;">Manage antenatal blood screening test results and maternal health data</p>
                <div class="space-y-3">
                    <a href="{{ route('nurse.health-records.index') }}" class="modern-button w-full justify-center">
                        <i class="fas fa-eye mr-2"></i>
                        View All Records
                    </a>
                    <a href="{{ route('nurse.health-records.index') }}" class="modern-button-secondary w-full justify-center">
                        <i class="fas fa-plus mr-2"></i>
                        Create from Appointment
                    </a>
                </div>
            </div>

            <!-- Color Code Management -->
            <div class="modern-card p-6 group hover:border-2" style="border-color: transparent;" onmouseover="this.style.borderColor='#CD7A98'" onmouseout="this.style.borderColor='transparent'">
                <div class="stat-icon warning mb-4 group-hover:scale-110 transition-transform">
                    <i class="fas fa-palette text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2" style="color: #2D3748;">Color Code Management</h3>
                <p class="mb-4 font-medium" style="color: #718096;">Manage patient risk assessments and color code updates</p>
                <div class="mb-5">
                    <div class="grid grid-cols-2 gap-2 text-xs">
                        <div class="flex items-center space-x-2 p-2.5 rounded-lg transition-all hover:scale-105" style="background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.2) 100%);">
                            <div class="w-3 h-3 rounded-full" style="background: #F56565;"></div>
                            <span class="font-bold" style="color: #C53030;">High Risk</span>
                        </div>
                        <div class="flex items-center space-x-2 p-2.5 rounded-lg transition-all hover:scale-105" style="background: linear-gradient(135deg, rgba(237, 137, 54, 0.1) 0%, rgba(237, 137, 54, 0.2) 100%);">
                            <div class="w-3 h-3 rounded-full" style="background: #ED8936;"></div>
                            <span class="font-bold" style="color: #C05621;">Moderate</span>
                        </div>
                        <div class="flex items-center space-x-2 p-2.5 rounded-lg transition-all hover:scale-105" style="background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.2) 100%);">
                            <div class="w-3 h-3 rounded-full" style="background: #48BB78;"></div>
                            <span class="font-bold" style="color: #2F855A;">Low Risk</span>
                        </div>
                        <div class="flex items-center space-x-2 p-2.5 rounded-lg transition-all hover:scale-105" style="background: linear-gradient(135deg, rgba(160, 174, 192, 0.1) 0%, rgba(160, 174, 192, 0.2) 100%);">
                            <div class="w-3 h-3 rounded-full" style="background: #A0AEC0;"></div>
                            <span class="font-bold" style="color: #4A5568;">No Risk</span>
                        </div>
                    </div>
                </div>
                <a href="{{ route('color-code.management') }}" class="modern-button w-full justify-center">
                    <i class="fas fa-cogs mr-2"></i>
                    Manage Color Codes
                </a>
            </div>

            <!-- Appointments -->
            <div class="modern-card p-6 group hover:border-2" style="border-color: transparent;" onmouseover="this.style.borderColor='#CD7A98'" onmouseout="this.style.borderColor='transparent'">
                <div class="stat-icon info mb-4 group-hover:scale-110 transition-transform">
                    <i class="fas fa-calendar-check text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2" style="color: #2D3748;">Appointments</h3>
                <p class="mb-6 font-medium" style="color: #718096;">View and manage patient appointments and schedules</p>
                <div class="space-y-3">
                    <a href="{{ route('nurse.appointments') }}" class="modern-button w-full justify-center">
                        <i class="fas fa-calendar mr-2"></i>
                        View Appointments
                    </a>
                    <div class="text-center p-3 rounded-lg" style="background: linear-gradient(135deg, #F5E6ED 0%, #E8C4D4 100%);">
                        <span class="text-sm font-bold" style="color: #CD7A98;">Today: {{ $todayAppointments ?? 0 }} appointments</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection