@extends('layouts.app')

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

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Tasks Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-500 transition-all duration-300 shadow-sm hover:shadow-md dark:hover:shadow-lg hover:shadow-blue-200 dark:hover:shadow-blue-900/30">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                </svg>
            </div>
            <span class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ $taskCount }}</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm font-medium mb-3">Total Tasks</p>
        <a href="{{ route('tasks.index') }}" class="text-blue-600 dark:text-blue-400 text-sm font-semibold hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-1">
            View all <span>→</span>
        </a>
    </div>

    <!-- Notes Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-green-400 dark:hover:border-green-500 transition-all duration-300 shadow-sm hover:shadow-md dark:hover:shadow-lg hover:shadow-green-200 dark:hover:shadow-green-900/30">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
            </div>
            <span class="text-3xl font-bold text-green-600 dark:text-green-400">{{ $noteCount }}</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm font-medium mb-3">Notes</p>
        <a href="{{ route('notes.index') }}" class="text-green-600 dark:text-green-400 text-sm font-semibold hover:text-green-700 dark:hover:text-green-300 flex items-center gap-1">
            View all <span>→</span>
        </a>
    </div>

    <!-- Reminders Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-amber-400 dark:hover:border-amber-500 transition-all duration-300 shadow-sm hover:shadow-md dark:hover:shadow-lg hover:shadow-amber-200 dark:hover:shadow-amber-900/30">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                </svg>
            </div>
            <span class="text-3xl font-bold text-amber-600 dark:text-amber-400">{{ $reminderCount }}</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm font-medium mb-3">Reminders</p>
        <a href="{{ route('reminders.index') }}" class="text-amber-600 dark:text-amber-400 text-sm font-semibold hover:text-amber-700 dark:hover:text-amber-300 flex items-center gap-1">
            View all <span>→</span>
        </a>
    </div>

    <!-- Finances Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:border-purple-400 dark:hover:border-purple-500 transition-all duration-300 shadow-sm hover:shadow-md dark:hover:shadow-lg hover:shadow-purple-200 dark:hover:shadow-purple-900/30">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <span class="text-3xl font-bold text-purple-600 dark:text-purple-400">0</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm font-medium mb-3">Finances</p>
        <a href="{{ route('finances.index') }}" class="text-purple-600 dark:text-purple-400 text-sm font-semibold hover:text-purple-700 dark:hover:text-purple-300 flex items-center gap-1">
            View all <span>→</span>
        </a>
    </div>
</div>

<!-- Quick Actions + Upcoming Reminders Grid -->
<div class="mb-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Quick Actions Section -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 shadow-sm">
        <div class="mb-6">
            <h3 class="text-xl font-bold text-gray-900 dark:text-white">Quick Actions</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Get started with creating new items</p>
        </div>
        
        <div class="grid grid-cols-2 gap-4">
            <!-- New Task -->
            <a href="{{ route('tasks.create') }}" 
               class="group flex flex-col items-center justify-center p-6 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-all duration-300">
                <svg class="w-8 h-8 text-gray-600 dark:text-gray-400 mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition transform group-hover:scale-110">
                    <path fill="currentColor" fill-rule="evenodd" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300 text-center group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">New Task</span>
            </a>

            <!-- New Note -->
            <a href="{{ route('notes.create') }}" 
               class="group flex flex-col items-center justify-center p-6 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-green-400 dark:hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition-all duration-300">
                <svg class="w-8 h-8 text-gray-600 dark:text-gray-400 mb-3 group-hover:text-green-600 dark:group-hover:text-green-400 transition transform group-hover:scale-110">
                    <path fill="currentColor" fill-rule="evenodd" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300 text-center group-hover:text-green-600 dark:group-hover:text-green-400 transition">New Note</span>
            </a>

            <!-- New Reminder -->
            <a href="{{ route('reminders.create') }}" 
               class="group flex flex-col items-center justify-center p-6 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-amber-400 dark:hover:border-amber-500 hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-all duration-300">
                <svg class="w-8 h-8 text-gray-600 dark:text-gray-400 mb-3 group-hover:text-amber-600 dark:group-hover:text-amber-400 transition transform group-hover:scale-110">
                    <path fill="currentColor" fill-rule="evenodd" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300 text-center group-hover:text-amber-600 dark:group-hover:text-amber-400 transition">New Reminder</span>
            </a>

            <!-- New Finance -->
            <a href="{{ route('finances.create') }}" 
               class="group flex flex-col items-center justify-center p-6 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-purple-400 dark:hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all duration-300">
                <svg class="w-8 h-8 text-gray-600 dark:text-gray-400 mb-3 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition transform group-hover:scale-110">
                    <path fill="currentColor" fill-rule="evenodd" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" clip-rule="evenodd"></path>
                </svg>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300 text-center group-hover:text-purple-600 dark:group-hover:text-purple-400 transition">New Finance</span>
            </a>
        </div>
    </div>

    <!-- Upcoming Reminders (Next 7 Days) -->
    @if(isset($upcomingReminders) && $upcomingReminders->count() > 0)
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-amber-200 dark:border-amber-800 p-6 shadow-sm">
        <div class="mb-4 flex items-center justify-between">
            <div>
                <h3 class="text-lg font-bold text-amber-900 dark:text-amber-100">Upcoming (Next 7 Days)</h3>
                <p class="text-sm text-amber-700 dark:text-amber-400">{{ $upcomingReminders->count() }} reminder{{ $upcomingReminders->count() !== 1 ? 's' : '' }}</p>
            </div>
            <a href="{{ route('reminders.index') }}" class="text-amber-600 dark:text-amber-400 text-sm font-semibold hover:text-amber-700 dark:hover:text-amber-300">
                View all →
            </a>
        </div>

        <div class="space-y-2">
            @foreach($upcomingReminders as $reminder)
                <div class="flex items-start justify-between p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-900/30 transition">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="w-2 h-2 rounded-full bg-amber-600 flex-shrink-0"></span>
                            <h4 class="font-semibold text-amber-900 dark:text-amber-100 truncate">{{ $reminder->title }}</h4>
                        </div>
                        <p class="text-xs text-amber-700 dark:text-amber-400">
                            {{ $reminder->reminder_date->format('M d, Y') }}
                            @if($reminder->reminder_time)
                                at {{ $reminder->reminder_time }}
                            @endif
                        </p>
                    </div>
                    <a href="{{ route('reminders.show', $reminder) }}" class="text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300 text-xs font-medium flex-shrink-0 ml-2">
                        View →
                    </a>
                </div>
            @endforeach
        </div>
    </div>
    @else
    <!-- Empty State when no upcoming reminders -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-amber-200 dark:border-amber-800 p-6 shadow-sm flex items-center justify-center">
        <div class="text-center">
            <svg class="w-12 h-12 text-amber-300 dark:text-amber-600 mx-auto mb-3" 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>
            <p class="text-gray-600 dark:text-gray-400 text-sm font-medium">No upcoming reminders</p>
            <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">You're all caught up!</p>
        </div>
    </div>
    @endif
</div>

<!-- Overdue Reminders Widget -->
@if(isset($overdueReminders) && $overdueReminders->count() > 0)
<div class="mb-8 bg-white dark:bg-gray-800 rounded-xl border-2 border-red-200 dark:border-red-800 p-6 shadow-sm">
    <div class="mb-4 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4v.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
                <h3 class="text-lg font-bold text-red-900 dark:text-red-100">Overdue Reminders</h3>
                <p class="text-xs text-red-700 dark:text-red-400">{{ $overdueReminders->count() }} item{{ $overdueReminders->count() !== 1 ? 's' : '' }} need attention</p>
            </div>
        </div>
        <a href="{{ route('reminders.index') }}" class="text-red-600 dark:text-red-400 text-sm font-semibold hover:text-red-700 dark:hover:text-red-300">
            View all →
        </a>
    </div>

    <div class="space-y-2">
        @foreach($overdueReminders->take(5) as $reminder)
            <div class="flex items-start justify-between p-3 bg-red-50 dark:bg-red-900/20 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 transition">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="w-2 h-2 rounded-full bg-red-600 flex-shrink-0"></span>
                        <h4 class="font-semibold text-red-900 dark:text-red-100 truncate">{{ $reminder->title }}</h4>
                    </div>
                    <p class="text-xs text-red-700 dark:text-red-400">
                        Was due: {{ $reminder->reminder_date->format('M d, Y') }}
                    </p>
                </div>
                <a href="{{ route('reminders.show', $reminder) }}" class="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 text-xs font-medium flex-shrink-0 ml-2">
                    Mark done →
                </a>
            </div>
        @endforeach
        @if($overdueReminders->count() > 5)
            <p class="text-xs text-gray-500 dark:text-gray-400 pt-2">+{{ $overdueReminders->count() - 5 }} more overdue</p>
        @endif
    </div>
</div>
@endif

<!-- In Progress Tasks Widget -->
@if(isset($inProgressTasks) && $inProgressTasks->count() > 0)
<div class="mb-8 bg-white dark:bg-gray-800 rounded-xl border border-blue-200 dark:border-blue-800 p-6 shadow-sm">
    <div class="mb-4 flex items-center justify-between">
        <div class="flex items-center gap-2">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            <div>
                <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100">In Progress</h3>
                <p class="text-xs text-blue-700 dark:text-blue-400">{{ $inProgressTasks->count() }} task{{ $inProgressTasks->count() !== 1 ? 's' : '' }} being worked on</p>
            </div>
        </div>
        <a href="{{ route('tasks.index') }}" class="text-blue-600 dark:text-blue-400 text-sm font-semibold hover:text-blue-700 dark:hover:text-blue-300">
            View all →
        </a>
    </div>

    <div class="space-y-2">
        @foreach($inProgressTasks->take(5) as $task)
            <a href="{{ route('tasks.show', $task) }}" class="block p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition">
                <div class="flex items-start justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <span class="w-2 h-2 rounded-full bg-blue-600 flex-shrink-0"></span>
                            <h4 class="font-semibold text-blue-900 dark:text-blue-100 truncate">{{ $task->title }}</h4>
                        </div>
                        <div class="flex items-center gap-3 text-xs text-blue-700 dark:text-blue-400 flex-wrap">
                            @if($task->project)
                                <span class="flex items-center gap-1">
                                    <span class="w-2 h-2 rounded-full flex-shrink-0" style="background-color: {{ $task->project->color }}"></span>
                                    {{ $task->project->name }}
                                </span>
                            @endif
                            @if($task->time_spent > 0)
                                <span class="flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    @php
                                        $hours = intval($task->time_spent);
                                        $minutes = intval(($task->time_spent - $hours) * 60);
                                    @endphp
                                    {{ $hours > 0 ? $hours . 'h ' : '' }}{{ $minutes }}m
                                </span>
                            @endif
                            @if($task->due_date)
                                <span class="flex items-center gap-1">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h18M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    {{ $task->due_date->format('M d') }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </a>
        @endforeach
        @if($inProgressTasks->count() > 5)
            <p class="text-xs text-gray-500 dark:text-gray-400 pt-2">+{{ $inProgressTasks->count() - 5 }} more in progress</p>
        @endif
    </div>
</div>
@endif

<!-- Financial Overview -->
@if(isset($currentMonthData))
<div class="mb-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Current Month Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-green-200 dark:border-green-800 p-6 shadow-sm">
        <div class="mb-4">
            <h3 class="text-lg font-bold text-green-900 dark:text-green-100">{{ $currentMonth->format('F Y') }} Overview</h3>
            <p class="text-sm text-green-700 dark:text-green-400">Current month financial snapshot</p>
        </div>
        
        <div class="space-y-3">
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-600 dark:text-gray-400">Income</span>
                <span class="font-semibold text-green-600 dark:text-green-400">{{ number_format($currentMonthData['income'], 2) }}</span>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-gray-600 dark:text-gray-400">Fixed Costs</span>
                    <span class="font-semibold text-red-600 dark:text-red-400">- {{ number_format($currentMonthData['fixed'], 2) }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-600 dark:text-gray-400">Variable Costs</span>
                    <span class="font-semibold text-amber-600 dark:text-amber-400">- {{ number_format($currentMonthData['variable'], 2) }}</span>
                </div>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
                <div class="flex justify-between items-center">
                    <span class="font-semibold text-gray-900 dark:text-white">NET Result</span>
                    <span class="text-lg font-bold {{ $currentMonthData['net'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                        {{ $currentMonthData['net'] >= 0 ? '+' : '' }}{{ number_format($currentMonthData['net'], 2) }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Bank Balance -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-purple-200 dark:border-purple-800 p-6 shadow-sm">
        <div class="mb-4">
            <h3 class="text-lg font-bold text-purple-900 dark:text-purple-100">Bank Balance</h3>
            <p class="text-sm text-purple-700 dark:text-purple-400">Current account status</p>
        </div>
        
        <div class="text-center py-4">
            <div class="text-5xl font-bold text-purple-600 dark:text-purple-400 mb-2">
                {{ number_format($bankBalance?->actual_amount ?? 0, 2) }}
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400">
                Bank Entry: {{ number_format($bankBalance?->actual_amount ?? 0, 2) }} + NET: {{ number_format($currentMonthData['net'], 2) }}
            </p>
            <div class="text-2xl font-bold {{ ($bankBalance?->actual_amount ?? 0) + $currentMonthData['net'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }} mt-3">
                = {{ number_format(($bankBalance?->actual_amount ?? 0) + $currentMonthData['net'], 2) }}
            </div>
        </div>
        
        <a href="{{ route('finances.show', [$currentMonth->year, $currentMonth->month]) }}" class="mt-4 w-full px-4 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-900/50 transition font-medium text-sm text-center">
            View Details →
        </a>
    </div>
</div>

<!-- Monthly Trend Chart -->
<div class="mb-8 bg-white dark:bg-gray-800 rounded-xl border border-indigo-200 dark:border-indigo-800 p-6 shadow-sm">
    <div class="mb-6">
        <h3 class="text-lg font-bold text-indigo-900 dark:text-indigo-100">Last 12 Months Trend</h3>
        <p class="text-sm text-indigo-700 dark:text-indigo-400">NET result progression</p>
    </div>
    
    <div style="position: relative; height: 300px;">
        <canvas id="trendChart"></canvas>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const trendData = {!! $monthlyTrend !!};
    
    const ctx = document.getElementById('trendChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: trendData.map(d => d.label),
            datasets: [
                {
                    label: 'NET',
                    data: trendData.map(d => d.net),
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 5,
                    pointBackgroundColor: '#6366f1',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointHoverRadius: 7,
                },
                {
                    label: 'Income',
                    data: trendData.map(d => d.income),
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.05)',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 3,
                    pointBackgroundColor: '#10b981',
                    borderDash: [5, 5],
                },
                {
                    label: 'Expenses',
                    data: trendData.map(d => d.expenses),
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.05)',
                    borderWidth: 2,
                    fill: false,
                    tension: 0.4,
                    pointRadius: 3,
                    pointBackgroundColor: '#ef4444',
                    borderDash: [5, 5],
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        color: document.documentElement.classList.contains('dark') ? '#e5e7eb' : '#374151',
                        font: { size: 12, weight: '500' },
                        padding: 15,
                        usePointStyle: true,
                    }
                },
                tooltip: {
                    backgroundColor: document.documentElement.classList.contains('dark') ? 'rgba(31, 41, 55, 0.9)' : 'rgba(255, 255, 255, 0.9)',
                    titleColor: document.documentElement.classList.contains('dark') ? '#f3f4f6' : '#111827',
                    bodyColor: document.documentElement.classList.contains('dark') ? '#d1d5db' : '#6b7280',
                    borderColor: document.documentElement.classList.contains('dark') ? '#4b5563' : '#e5e7eb',
                    borderWidth: 1,
                    padding: 12,
                    titleFont: { size: 13, weight: '600' },
                    bodyFont: { size: 12 },
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + context.parsed.y.toFixed(0);
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: document.documentElement.classList.contains('dark') ? 'rgba(75, 85, 99, 0.1)' : 'rgba(0, 0, 0, 0.05)',
                    },
                    ticks: {
                        color: document.documentElement.classList.contains('dark') ? '#9ca3af' : '#6b7280',
                        callback: function(value) {
                            return value.toFixed(0);
                        }
                    }
                },
                x: {
                    grid: {
                        display: false,
                    },
                    ticks: {
                        color: document.documentElement.classList.contains('dark') ? '#9ca3af' : '#6b7280',
                    }
                }
            }
        }
    });
});
</script>
@endif
@endsection