@extends('layouts.app')

@section('title', 'Admin Dashboard - eCards Accounting')

@section('page-title', 'Admin Dashboard')

@section('content')
<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stats-card h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Total Customers</div>
                        <div class="h5 mb-0 font-weight-bold">{{ number_format($stats['total_customers']) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-people display-6"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card income-card h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Total Income</div>
                        <div class="h5 mb-0 font-weight-bold">LKR {{ number_format($stats['total_income'], 2) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-arrow-up-circle display-6"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card expense-card h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Total Expenses</div>
                        <div class="h5 mb-0 font-weight-bold">LKR {{ number_format($stats['total_expenses'], 2) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-arrow-down-circle display-6"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card {{ $stats['net_balance'] >= 0 ? 'income-card' : 'expense-card' }} h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-uppercase mb-1">Net Balance</div>
                        <div class="h5 mb-0 font-weight-bold">LKR {{ number_format($stats['net_balance'], 2) }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-calculator display-6"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Monthly Statistics -->
<div class="row mb-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-graph-up me-2"></i>
                    Monthly Income vs Expenses ({{ date('Y') }})
                </h5>
            </div>
            <div class="card-body">
                <canvas id="monthlyChart" height="100"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-calendar-month me-2"></i>
                    This Month
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span>Income:</span>
                        <strong class="text-success">LKR {{ number_format($stats['total_income'], 2) }}</strong>
                    </div>
                </div>
                <div class="mb-3">
                    <div class="d-flex justify-content-between">
                        <span>Expenses:</span>
                        <strong class="text-danger">LKR {{ number_format($stats['total_expenses'], 2) }}</strong>
                    </div>
                </div>
                <hr>
                <div class="d-flex justify-content-between">
                    <span><strong>Net:</strong></span>
                    <strong class="{{ $stats['net_balance'] >= 0 ? 'text-success' : 'text-danger' }}">
                        LKR {{ number_format($stats['monthly_net'], 2) }}
                    </strong>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Recent Transactions -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="bi bi-clock-history me-2"></i>
                    Recent Transactions
                </h5>
                <a href="{{ route('transactions.index') }}" class="btn btn-outline-primary btn-sm">
                    View All <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            <div class="card-body">
                @if($recentTransactions->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Customer</th>
                                <th>Type</th>
                                <th>Amount</th>
                                <th>Description</th>
                                <th>Created By</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentTransactions as $transaction)
                            <tr>
                                <td>{{ $transaction->transaction_date->format('M d, Y') }}</td>
                                <td>
                                    <a href="{{ route('customers.show', $transaction->customer) }}" class="text-decoration-none">
                                        {{ $transaction->customer->name }}
                                    </a>
                                </td>
                                <td>
                                    <span class="badge {{ $transaction->type === 'income' ? 'bg-success' : 'bg-danger' }}">
                                        {{ ucfirst($transaction->type) }}
                                    </span>
                                </td>
                                <td class="{{ $transaction->type === 'income' ? 'text-success' : 'text-danger' }}">
                                    <strong>{{ $transaction->formatted_amount }}</strong>
                                </td>
                                <td>{{ Str::limit($transaction->description, 50) }}</td>
                                <td>{{ $transaction->user->name }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-4">
                    <i class="bi bi-inbox display-4 text-muted"></i>
                    <p class="text-muted mt-2">No transactions found</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Wait for Chart.js to load
document.addEventListener('DOMContentLoaded', function() {
    // Check if Chart.js is loaded
    if (typeof Chart === 'undefined') {
        console.error('Chart.js not loaded');
        return;
    }

    // Monthly Chart
    const ctx = document.getElementById('monthlyChart');
    if (!ctx) {
        console.error('Chart canvas not found');
        return;
    }

    const monthlyData = @json($monthlyData);
    console.log('Monthly Data:', monthlyData);

    const labels = [];
    const incomeData = [];
    const expenseData = [];

    // Fill data for all 12 months
    for (let i = 1; i <= 12; i++) {
        const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        labels.push(monthNames[i - 1]);
        
        const monthData = monthlyData.find(item => parseInt(item.month) === i);
        incomeData.push(monthData ? parseFloat(monthData.income) || 0 : 0);
        expenseData.push(monthData ? parseFloat(monthData.expense) || 0 : 0);
    }

    console.log('Labels:', labels);
    console.log('Income Data:', incomeData);
    console.log('Expense Data:', expenseData);

    try {
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Income',
                    data: incomeData,
                    borderColor: '#38ef7d',
                    backgroundColor: 'rgba(56, 239, 125, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: 'Expenses',
                    data: expenseData,
                    borderColor: '#ff6b6b',
                    backgroundColor: 'rgba(255, 107, 107, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return 'LKR ' + value.toLocaleString();
                            }
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });
        console.log('Chart created successfully');
    } catch (error) {
        console.error('Error creating chart:', error);
    }
});
</script>
@endsection