{{-- resources/views/filament/modals/missing-payments.blade.php --}}

<div class="space-y-6">
    {{-- Lease Information Header --}}
    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    Lease Information
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Tenant: {{ $lease->tenant->name ?? 'N/A' }}
                </p>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Period: {{ $lease->start_month->format('M Y') }} - {{ $lease->end_month ? $lease->end_month->format('M Y') : 'Ongoing' }}
                </p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">
                    Status: <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                        {{ ucfirst($lease->status) }}
                    </span>
                </p>
            </div>
        </div>
    </div>

    {{-- Payment Statistics --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
            <div class="flex items-center">
                <div class="p-2 bg-blue-500 rounded-lg">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-blue-600 dark:text-blue-400">Paid Months</p>
                    <p class="text-2xl font-bold text-blue-900 dark:text-blue-100">{{ $stats['paid_months'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4">
            <div class="flex items-center">
                <div class="p-2 bg-yellow-500 rounded-lg">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-yellow-600 dark:text-yellow-400">Missing Months</p>
                    <p class="text-2xl font-bold text-yellow-900 dark:text-yellow-100">{{ $stats['missing_months'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
            <div class="flex items-center">
                <div class="p-2 bg-red-500 rounded-lg">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-red-600 dark:text-red-400">Overdue Months</p>
                    <p class="text-2xl font-bold text-red-900 dark:text-red-100">{{ $stats['overdue_months'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
            <div class="flex items-center">
                <div class="p-2 bg-green-500 rounded-lg">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-green-600 dark:text-green-400">Progress</p>
                    <p class="text-2xl font-bold text-green-900 dark:text-green-100">{{ $stats['payment_progress'] }}%</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Progress Bar --}}
    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Payment Progress</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">{{ $stats['paid_months'] }}/{{ $stats['total_months'] }} months</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
            <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-300" style="width: {{ $stats['payment_progress'] }}%"></div>
        </div>
    </div>

    {{-- Missing Payments List --}}
    @if($missingMonths->count() > 0)
        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
                    Missing Payment Months ({{ $missingMonths->count() }})
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($missingMonths as $month)
                        @php
                            $isOverdue = $month->lessThan(now()->startOfMonth());
                            $isCurrentMonth = $month->isSameMonth(now());
                        @endphp
                        
                        <div class="flex items-center justify-between p-3 rounded-lg border 
                            {{ $isOverdue ? 'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800' : 
                               ($isCurrentMonth ? 'bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800' : 
                                'bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600') }}">
                            <div class="flex items-center space-x-3">
                                <div class="flex-shrink-0">
                                    @if($isOverdue)
                                        <svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                        </svg>
                                    @elseif($isCurrentMonth)
                                        <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                        </svg>
                                    @else
                                        <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                                        </svg>
                                    @endif
                                </div>
                                <div>
                                    <p class="text-sm font-medium {{ $isOverdue ? 'text-red-900 dark:text-red-100' : ($isCurrentMonth ? 'text-yellow-900 dark:text-yellow-100' : 'text-gray-900 dark:text-gray-100') }}">
                                        {{ $month->format('F Y') }}
                                    </p>
                                    <p class="text-xs {{ $isOverdue ? 'text-red-600 dark:text-red-400' : ($isCurrentMonth ? 'text-yellow-600 dark:text-yellow-400' : 'text-gray-500 dark:text-gray-400') }}">
                                        @if($isOverdue)
                                            Overdue ({{ $month->diffForHumans() }})
                                        @elseif($isCurrentMonth)
                                            Current Month
                                        @else
                                            Upcoming
                                        @endif
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex-shrink-0">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {{ $isOverdue ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' : 
                                       ($isCurrentMonth ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' : 
                                        'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200') }}">
                                    @if($isOverdue)
                                        Overdue
                                    @elseif($isCurrentMonth)
                                        Due Now
                                    @else
                                        Pending
                                    @endif
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @else
        <div class="text-center py-8">
            <svg class="mx-auto h-12 w-12 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No Missing Payments</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">All payments are up to date!</p>
        </div>
    @endif
</div>