@extends('layouts.app')

@section('title', 'Analytics Reports')
@section('page_title', 'Analytics & Profit Reports')

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4 no-print bg-white p-3 rounded shadow-sm">
    <span class="text-secondary small fw-bold"><i class="bi bi-file-earmark-spreadsheet text-primary"></i> DOWNLOAD CSV EXPORTS</span>
    <div class="d-flex gap-2">
        <a href="{{ route('reports.export.sales') }}" class="btn btn-outline-primary btn-sm d-flex align-items-center gap-1">
            <i class="bi bi-download"></i> Export Sales CSV
        </a>
        <a href="{{ route('reports.export.expenses') }}" class="btn btn-outline-danger btn-sm d-flex align-items-center gap-1">
            <i class="bi bi-download"></i> Export Expenses CSV
        </a>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                <i class="bi bi-graph-up"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL REVENUE (SALES)</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($totalSales) }} <small class="fs-6 text-muted">UGX</small></h3>
            <div class="mt-2 text-success small">
                Gross sales incoming
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-danger bg-opacity-10 text-danger">
                <i class="bi bi-wallet2"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL EXPENSES</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($totalExpenses) }} <small class="fs-6 text-muted">UGX</small></h3>
            <div class="mt-2 text-danger small">
                Approved business payouts
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-cash-coin"></i>
            </div>
            <h6 class="text-secondary small fw-bold">NET CASH PROFIT</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($netProfit) }} <small class="fs-6 text-muted">UGX</small></h3>
            <div class="mt-2 text-success small">
                Estimated profit balance
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Comparison Chart -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm p-4 h-100">
            <h5 class="fw-bold mb-4 text-dark">Revenue vs Expenses Comparison ({{ now()->year }})</h5>
            <div style="height: 320px; position: relative;">
                <canvas id="comparisonChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Expense distribution -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm p-4 h-100">
            <h5 class="fw-bold mb-4 text-dark">Expense Categories</h5>
            <div style="height: 220px; position: relative;" class="mb-4">
                <canvas id="expenseCategoryChart"></canvas>
            </div>
            @if(empty($expenseLabels))
                <div class="text-center text-muted small py-4">No approved expenses logged to display.</div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/chart.umd.js') }}"></script>
<script>
    // 1. Grouped Revenue vs Expense Bar Chart
    const compCtx = document.getElementById('comparisonChart').getContext('2d');
    new Chart(compCtx, {
        type: 'bar',
        data: {
            labels: {!! json_encode($months) !!},
            datasets: [
                {
                    label: 'Revenue (UGX)',
                    data: {!! json_encode($monthlyRevenue) !!},
                    backgroundColor: '#3b82f6',
                    borderRadius: 4
                },
                {
                    label: 'Expenses (UGX)',
                    data: {!! json_encode($monthlyExpenses) !!},
                    backgroundColor: '#ef4444',
                    borderRadius: 4
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    grid: { color: 'rgba(0, 0, 0, 0.05)' },
                    ticks: { callback: value => value.toLocaleString() + ' UGX' }
                },
                x: { grid: { display: false } }
            }
        }
    });

    // 2. Expense Category Pie/Doughnut Chart
    @if(!empty($expenseLabels))
    const expCtx = document.getElementById('expenseCategoryChart').getContext('2d');
    new Chart(expCtx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($expenseLabels) !!},
            datasets: [{
                data: {!! json_encode($expenseSums) !!},
                backgroundColor: ['#ef4444', '#f59e0b', '#3b82f6', '#10b981', '#06b6d4', '#8b5cf6', '#ec4899'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
    @endif
</script>
@endsection