@extends('layouts.app')

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

@push('styles')
<style>
.chart-card { border-radius: 16px; overflow: hidden; }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1>Dashboard</h1>
        <p class="breadcrumb mb-0"><i class="bi bi-calendar3 me-1"></i>{{ now()->format('F Y') }} — Current Month Summary</p>
    </div>
</div>

{{-- Summary Cards --}}
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="stat-card salary">
            <div class="stat-icon salary">
                <i class="bi bi-people"></i>
            </div>
            <div class="stat-info">
                <div class="stat-label">Total Salary</div>
                <div class="stat-value">৳{{ number_format($summary['total_salary'], 2) }}</div>
                <div class="stat-period">Current month payroll</div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stat-card expense">
            <div class="stat-icon expense">
                <i class="bi bi-arrow-down-circle"></i>
            </div>
            <div class="stat-info">
                <div class="stat-label">Total Expenses</div>
                <div class="stat-value">৳{{ number_format($summary['total_expense'], 2) }}</div>
                <div class="stat-period">Current month expenses</div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stat-card income">
            <div class="stat-icon income">
                <i class="bi bi-arrow-up-circle"></i>
            </div>
            <div class="stat-info">
                <div class="stat-label">Total Income</div>
                <div class="stat-value">৳{{ number_format($summary['total_income'], 2) }}</div>
                <div class="stat-period">Current month income</div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stat-card profit">
            <div class="stat-icon profit">
                <i class="bi bi-graph-up-arrow"></i>
            </div>
            <div class="stat-info">
                <div class="stat-label">Profit / Loss</div>
                <div class="stat-value {{ $summary['profit'] >= 0 ? 'profit-positive' : 'profit-negative' }}">
                    ৳{{ number_format(abs($summary['profit']), 2) }}
                </div>
                <div class="stat-period">
                    {{ $summary['profit'] >= 0 ? '↑ Profit' : '↓ Loss' }} this month
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Chart --}}
<div class="row">
    <div class="col-12">
        <div class="card chart-card">
            <div class="card-header-custom">
                <h5><i class="bi bi-bar-chart-line me-2 text-primary"></i>Income vs Expenses — Last 6 Months</h5>
            </div>
            <div class="chart-wrapper">
                <canvas id="incomeExpenseChart" height="100"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('incomeExpenseChart').getContext('2d');

const chartData = {
    labels: @json($chartData['labels']),
    incomes: @json($chartData['incomes']),
    expenses: @json($chartData['expenses']),
};

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: chartData.labels,
        datasets: [
            {
                label: 'Income',
                data: chartData.incomes,
                backgroundColor: 'rgba(16, 185, 129, 0.85)',
                borderRadius: 6,
                borderSkipped: false,
            },
            {
                label: 'Expenses',
                data: chartData.expenses,
                backgroundColor: 'rgba(239, 68, 68, 0.75)',
                borderRadius: 6,
                borderSkipped: false,
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
                labels: { font: { family: 'Inter', size: 12 }, padding: 16 }
            },
            tooltip: {
                callbacks: {
                    label: ctx => '৳' + ctx.parsed.y.toLocaleString('en', {minimumFractionDigits: 2})
                }
            }
        },
        scales: {
            x: { grid: { display: false }, ticks: { font: { family: 'Inter' } } },
            y: {
                grid: { color: '#F1F5F9' },
                ticks: {
                    font: { family: 'Inter' },
                    callback: v => '৳' + v.toLocaleString()
                }
            }
        }
    }
});
</script>
@endpush