@extends('layouts.app')

@section('content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
        <p class="text-gray-500">Welcome to your Construction Expense Tracker</p>
    </div>
    <a href="{{ route('expenses.create') }}" class="flex items-center rounded-lg bg-primary px-4 py-2 text-white shadow-md hover:bg-secondary transition-colors duration-200">
        <i class="fas fa-plus mr-2"></i> Add Expense
    </a>
</div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <!-- Total Expenses Card -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-primary">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="rounded-full bg-primary bg-opacity-10 p-3 mr-4">
                        <i class="fas fa-money-bill-wave text-primary text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Total Expenses</p>
                        <p class="text-xl font-bold text-gray-800">LKR {{ number_format($totalExpenses, 2) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Projects Card -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-success">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="rounded-full bg-success bg-opacity-10 p-3 mr-4">
                        <i class="fas fa-building text-success text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Projects</p>
                        <p class="text-xl font-bold text-gray-800">{{ $projects->count() }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Categories Card -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-accent">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="rounded-full bg-accent bg-opacity-10 p-3 mr-4">
                        <i class="fas fa-tags text-accent text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">Categories</p>
                        <p class="text-xl font-bold text-gray-800">{{ $categories->count() }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- This Month Card -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden border-l-4 border-warning">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="rounded-full bg-warning bg-opacity-10 p-3 mr-4">
                        <i class="fas fa-calendar text-warning text-xl"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 font-medium">This Month</p>
                        <p class="text-xl font-bold text-gray-800">LKR {{ number_format($currentMonthTotal, 2) }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Category Chart -->
    <div class="mb-6">
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-100 flex flex-wrap justify-between items-center gap-2">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-chart-pie mr-2 text-primary"></i> Expense Distribution by Category
                </h2>
                <div class="text-sm text-gray-500">Total: LKR {{ number_format($totalExpenses, 2) }}</div>
            </div>
            <div class="p-4">
                <div class="chart-container h-72">
                    <canvas id="categoryChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Expenses Chart -->
    <div class="mb-6">
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-100 flex flex-wrap justify-between items-center gap-2">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-chart-line mr-2 text-primary"></i> Monthly Expenses
                </h2>
                <div class="text-sm text-gray-500">Last 6 months</div>
            </div>
            <div class="p-4">
                <div class="chart-container h-72">
                    <canvas id="monthlyExpensesChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Projects and Recent Expenses -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Projects Overview -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-100 flex flex-wrap justify-between items-center gap-2">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-building mr-2 text-primary"></i> Projects Overview
                </h2>
                <a href="{{ route('projects.index') }}" class="px-3 py-1 bg-primary text-white text-sm rounded-lg hover:bg-secondary transition-colors duration-200">View All</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">Budget</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">Expenses</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($projects as $project)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <a href="{{ route('projects.show', $project) }}" class="text-primary font-medium hover:text-secondary">
                                    {{ $project->name }}
                                </a>
                                <div class="md:hidden text-xs text-gray-500 mt-1">
                                    {{ $project->formatted_budget }} / {{ $project->formatted_total_expenses }}
                                </div>
                            </td>
                            <td class="px-4 py-3 hidden md:table-cell text-gray-700">{{ $project->formatted_budget }}</td>
                            <td class="px-4 py-3 hidden md:table-cell text-gray-700">{{ $project->formatted_total_expenses }}</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center">
                                    <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                                        <div class="{{ $project->budget_percentage_used > 100 ? 'bg-danger' : 'bg-success' }} h-2 rounded-full" style="width: {{ min($project->budget_percentage_used, 100) }}%"></div>
                                    </div>
                                    <span class="text-xs font-medium">{{ round($project->budget_percentage_used) }}%</span>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Recent Expenses -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="p-4 border-b border-gray-100 flex flex-wrap justify-between items-center gap-2">
                <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-receipt mr-2 text-primary"></i> Recent Expenses
                </h2>
                <a href="{{ route('expenses.index') }}" class="px-3 py-1 bg-primary text-white text-sm rounded-lg hover:bg-secondary transition-colors duration-200">View All</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider hidden md:table-cell">Date</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($recentExpenses as $expense)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 hidden md:table-cell text-gray-700">{{ $expense->expense_date->format('M d') }}</td>
                            <td class="px-4 py-3">
                                <a href="{{ route('expenses.show', $expense) }}" class="text-primary font-medium hover:text-secondary">
                                    {{ $expense->title }}
                                </a>
                                <div class="md:hidden text-xs text-gray-500">
                                    {{ $expense->expense_date->format('M d') }}
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs rounded-full" style="background-color: {{ $expense->category->color }}; color: white;">
                                    {{ $expense->category->name }}
                                </span>
                            </td>
                            <td class="px-4 py-3 font-medium text-gray-700">{{ $expense->formatted_amount }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Make charts responsive
    Chart.defaults.responsive = true;
    Chart.defaults.maintainAspectRatio = false;
    
    // Expenses by Category Chart
    const categoryData = @json($expensesByCategory);
    
    if (categoryData.length > 0) {
        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        new Chart(categoryCtx, {
            type: 'doughnut',
            data: {
                labels: categoryData.map(item => item.name),
                datasets: [{
                    data: categoryData.map(item => item.total),
                    backgroundColor: categoryData.map(item => item.color),
                    borderWidth: 2,
                    borderColor: '#ffffff',
                    hoverBorderWidth: 3,
                    hoverOffset: 10
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        position: 'right',
                        labels: {
                            font: {
                                family: "'Poppins', sans-serif",
                                size: 12
                            },
                            padding: 20,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        titleColor: '#333',
                        bodyColor: '#666',
                        bodyFont: {
                            family: "'Poppins', sans-serif"
                        },
                        titleFont: {
                            family: "'Poppins', sans-serif",
                            weight: 'bold'
                        },
                        padding: 15,
                        boxPadding: 10,
                        cornerRadius: 10,
                        displayColors: true,
                        borderColor: 'rgba(0, 0, 0, 0.1)',
                        borderWidth: 1,
                        callbacks: {
                            label: function(context) {
                                const value = context.raw;
                                const total = context.dataset.data.reduce((acc, val) => acc + val, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${context.label}: LKR ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }

    // Monthly Expenses Chart
    const monthlyData = @json($monthlyExpenses);
    
    if (monthlyData.length > 0) {
        const monthlyCtx = document.getElementById('monthlyExpensesChart').getContext('2d');
        
        // Adjust chart options for better mobile display
        const isMobile = window.innerWidth < 768;
        
        // Create gradient
        const gradientFill = monthlyCtx.createLinearGradient(0, 0, 0, 350);
        gradientFill.addColorStop(0, 'rgba(67, 97, 238, 0.3)');
        gradientFill.addColorStop(1, 'rgba(67, 97, 238, 0.0)');
        
        new Chart(monthlyCtx, {
            type: 'line',
            data: {
                labels: monthlyData.map(item => item.month),
                datasets: [{
                    label: 'Monthly Expenses',
                    data: monthlyData.map(item => item.total),
                    backgroundColor: gradientFill,
                    borderColor: '#4361ee',
                    pointBackgroundColor: '#ffffff',
                    pointBorderColor: '#4361ee',
                    pointBorderWidth: 2,
                    pointRadius: 6,
                    pointHoverRadius: 8,
                    pointHoverBackgroundColor: '#ffffff',
                    pointHoverBorderColor: '#4361ee',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.3 // Adds curve to the line
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)',
                            drawBorder: false
                        },
                        ticks: {
                            font: {
                                family: "'Poppins', sans-serif",
                                size: 12
                            },
                            color: '#666',
                            padding: 10,
                            callback: function(value) {
                                return 'LKR ' + value.toLocaleString();
                            }
                        }
                    },
                    x: {
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            font: {
                                family: "'Poppins', sans-serif",
                                size: 12
                            },
                            color: '#666',
                            padding: 10
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        titleColor: '#333',
                        bodyColor: '#666',
                        bodyFont: {
                            family: "'Poppins', sans-serif"
                        },
                        titleFont: {
                            family: "'Poppins', sans-serif",
                            weight: 'bold'
                        },
                        padding: 15,
                        boxPadding: 10,
                        cornerRadius: 10,
                        displayColors: false,
                        borderColor: 'rgba(0, 0, 0, 0.1)',
                        borderWidth: 1,
                        callbacks: {
                            label: function(context) {
                                return 'LKR ' + context.raw.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
    }
</script>
@endsection