@extends('layouts.app')

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

@section('content')
<!-- Quick Actions -->


<!-- Summary Cards -->
<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-main-card-blue">
            <img src="{{ asset('assets/images/Dashboard/dash-i-1.png') }}" alt="" class="dashboard-card-icon-blue">
            <div class="dashboard-stat-info-blue">
                <p>Total Income</p>
                <h2>{{ formatCurrency($total_income) }}</h2>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-main-card">
            <img src="{{ asset('assets/images/Dashboard/dash-card-vec.png') }}" alt="" class="dashboard-card-vec">
            <img src="{{ asset('assets/images/Dashboard/dash-i-2.png') }}" alt="" class="dashboard-card-icon">
            <div class="dashboard-stat-info">
                <p>Total Invoice</p>
                <h2>{{ formatCurrency($total_sales) }}</h2>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-main-card">
            <img src="{{ asset('assets/images/Dashboard/dash-card-vec.png') }}" alt="" class="dashboard-card-vec">
            <img src="{{ asset('assets/images/Dashboard/dash-i-3.png') }}" alt="" class="dashboard-card-icon">
            <div class="dashboard-stat-info">
                <p>Invoice Due</p>
                <h2>{{ formatCurrency($receivables) }}</h2>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="dashboard-main-card">
            <img src="{{ asset('assets/images/Dashboard/dash-card-vec.png') }}" alt="" class="dashboard-card-vec">
            <img src="{{ asset('assets/images/Dashboard/dash-i-4.png') }}" alt="" class="dashboard-card-icon">
            <div class="dashboard-stat-info">
                <p>Total Expenses</p>
                <h2>{{ formatCurrency($total_expenses) }}</h2>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-3">
        <div class="dashboard-main-card">
            <img src="{{ asset('assets/images/Dashboard/dash-card-vec.png') }}" alt="" class="dashboard-card-vec">
            <img src="{{ asset('assets/images/Dashboard/dash-i-4.png') }}" alt="" class="dashboard-card-icon">
            <div class="dashboard-stat-info">
                <p>Cash on Hand</p>
                <h2>{{ formatCurrency($cash_on_hand) }}</h2>
            </div>
        </div>
        <div class="dashboard-main-card mt-4">
            <img src="{{ asset('assets/images/Dashboard/dash-card-vec.png') }}" alt="" class="dashboard-card-vec">
            <img src="{{ asset('assets/images/Dashboard/dash-i-4.png') }}" alt="" class="dashboard-card-icon">
            <div class="dashboard-stat-info">
                <p>Total Payables</p>
                <h2>{{ formatCurrency($payables) }}</h2>
            </div>
        </div>



        <div class="Dashboard-left-box mt-4">
            <img src="{{ asset('assets/images/Dashboard/Reciept_01.svg') }}"> 
            <h4>Scan receipts effortlessly,  anywhere</h4>
            <p>Automatic expense tracking with Wave’s mobile app.</p>
            <a href="">Get started →</a>
        </div>

        <div class="Dashboard-left-box mt-4">
			<img src="{{ asset('assets/images/Dashboard/bank.png') }}">
			<h4 class="mt-2">Connect your bank account </h4>
			<p>Automate your bookkeeping by importing 
			transactions automatically.</p>
			<a href="https://accountieons.com/admin/banking"><button class="btn btn-primary rounded-pill">Connect my account</button></a>
		</div>

        <div class="dashboard-button-card mt-4">
            <h1 class="dashboard-button-card-title">Things You Can Do</h1>
            <div class="mb-2">
                <a href="{{ route('customers.create') }}" class="dashboard-button-new-link">
                    Add Customer
                </a>
            </div>
            <div class="mb-2">
                <a href="{{ route('invoices.create') }}" class="dashboard-button-new-link">
                    Create Invoice
                </a>
            </div>
            <div>
                <a href="{{ route('expenses.create') }}" class="dashboard-button-new-link">
                    Add Expense
                </a>
            </div>
        </div>
    </div>
    <div class="col-lg-9">
        <div class="dashboard-chart-div">
            <div class="dashboard-chart-header">
                <h6 class="">Revenue vs Expenses  <span class="chart-value" id="revenueTrend">+0%</span></h6>
                <select class="dashboard-chart-filter" id="revenuePeriodFilter">
                    <option value="7d">Last 7 Days</option>
                    <option value="30d">Last 30 Days</option>
                    <option value="6mo" selected>Last 6 Months</option>
                </select>
            </div>
            <div class="dashboard-chart-body">
                <div class="chart-container-modern" style="height: 235px;">
                    <canvas id="revenueExpensesChart"></canvas>
                </div>
            </div>
        </div>
        <div class="dashboard-chart-div mt-4">
            <div class="dashboard-chart-header">
                <h6 class="">Cash Flow  <span class="chart-value1" id="expenseTrend">-0%</span></h6>
                <select class="dashboard-chart-filter" id="cashFlowPeriodFilter">
                    <option value="7d">Last 7 Days</option>
                            <option value="30d">Last 30 Days</option>
                            <option value="6mo" selected>Last 6 Months</option>
                </select>
            </div>
            <div class="dashboard-chart-body">
                <div class="chart-container-modern" style="height: 235px;">
                    <canvas id="cashFlowChart"></canvas>
                </div>
            </div>
        </div>
        <!-- Aging and Net Income Tables -->
        <div class="mt-4">
            <h5 class="fw-bold mb-3">Payable & Owing</h5>
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="dashboard-chart-div">
                        <div class="dashboard-chart-header">
                            <h6>Invoices payable to you</h6>
                        </div>
                        <div class="dashboard-chart-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <tbody class="small">
                                        <tr>
                                            <td class="ps-4 text-primary fw-medium">Coming Due</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($receivablesAging['coming_due']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">1-30 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($receivablesAging['1_30']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">31-60 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($receivablesAging['31_60']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">61-90 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($receivablesAging['61_90']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">> 90 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($receivablesAging['over_90']) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="dashboard-chart-div">
                        <div class="dashboard-chart-header">
                            <h6>Bills you owe</h6>
                        </div>
                        <div class="dashboard-chart-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <tbody class="small">
                                        <tr>
                                            <td class="ps-4 text-primary fw-medium">Coming Due</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($payablesAging['coming_due']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">1-30 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($payablesAging['1_30']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">31-60 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($payablesAging['31_60']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">61-90 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($payablesAging['61_90']) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="ps-4">> 90 days overdue</td>
                                            <td class="text-end pe-4 fw-bold">{{ formatCurrency($payablesAging['over_90']) }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-4">
            <div class="dashboard-chart-div">
                <div class="dashboard-chart-header">
                     <h6>Net Income</h6>
                </div>
                <div class="dashboard-chart-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr class="small text-muted">
                                    <th class="ps-4">Fisical period</th>
                                    <th class="text-center">Current</th>
                                    <th class="text-end pe-4">Previous</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($netIncomeComparison as $period => $values)
                                <tr>
                                    <td class="ps-4 fw-medium">{{ $period }}</td>
                                    <td class="text-center fw-bold text-dark">{{ formatCurrency($values['current']) }}</td>
                                    <td class="text-end pe-4 text-muted">{{ formatCurrency($values['previous']) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>





<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let revenueChart, breakdownChart, cashFlowChart;

        const colors = {
            primary: '#4F46E5',
            primaryLight: 'rgba(79, 70, 229, 0.1)',
            danger: '#EF4444',
            dangerLight: 'rgba(239, 68, 68, 0.1)',
            success: '#10B981',
            successLight: 'rgba(16, 185, 129, 0.1)',
            pastels: ['#818CF8', '#F87171', '#34D399', '#FBBF24', '#A78BFA', '#F472B6']
        };

        function initCharts(data) {
            // 1. Revenue vs Expenses (Line)
            const revCtx = document.getElementById('revenueExpensesChart').getContext('2d');
            const revGradient = revCtx.createLinearGradient(0, 0, 0, 240);
            revGradient.addColorStop(0, colors.primaryLight);
            revGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

            revenueChart = new Chart(revCtx, {
                type: 'line',
                data: {
                    labels: data.months,
                    datasets: [{
                            label: 'Revenue',
                            data: data.revenue,
                            borderColor: colors.primary,
                            backgroundColor: revGradient,
                            fill: true,
                            tension: 0.4,
                            borderWidth: 3,
                            pointRadius: 0,
                            pointHoverRadius: 6
                        },
                        {
                            label: 'Expenses',
                            data: data.expenses,
                            borderColor: colors.danger,
                            borderDash: [5, 5],
                            fill: false,
                            tension: 0.4,
                            borderWidth: 2,
                            pointRadius: 0,
                            pointHoverRadius: 6
                        }
                    ]
                },
                options: getDefaultOptions('currency')
            });


            // 3. Cash Flow (Bar)
            const cashFlowCtx = document.getElementById('cashFlowChart').getContext('2d');
            cashFlowChart = new Chart(cashFlowCtx, {
                type: 'bar',
                data: {
                    labels: data.months,
                    datasets: [{
                            label: 'Inflow',
                            data: data.cashIn,
                            backgroundColor: colors.success,
                            borderRadius: 6,
                            barThickness: 12
                        },
                        {
                            label: 'Outflow',
                            data: data.cashOut,
                            backgroundColor: colors.danger,
                            borderRadius: 6,
                            barThickness: 12
                        }
                    ]
                },
                options: getDefaultOptions('currency')
            });

            // Update KPI values
            document.getElementById('revenueKpi').textContent = '{{ getCurrencySymbol() }}' + data.totalRevenue;
            document.getElementById('expensesKpi').textContent = '{{ getCurrencySymbol() }}' + data.totalExpenses;
            document.getElementById('revenueTrend').textContent = data.revenueTrend;
            document.getElementById('expenseTrend').textContent = data.expenseTrend;
        }

        function updateRevenueChart(data) {
            revenueChart.data.labels = data.months;
            revenueChart.data.datasets[0].data = data.revenue;
            revenueChart.data.datasets[1].data = data.expenses;
            revenueChart.update();
            document.getElementById('revenueKpi').textContent = '{{ getCurrencySymbol() }}' + data.totalRevenue;
            document.getElementById('revenueTrend').textContent = data.revenueTrend;
        }

        function updateCashFlowChart(data) {
            cashFlowChart.data.labels = data.months;
            cashFlowChart.data.datasets[0].data = data.cashIn;
            cashFlowChart.data.datasets[1].data = data.cashOut;
            cashFlowChart.update();
            document.getElementById('expensesKpi').textContent = '{{ getCurrencySymbol() }}' + data.totalExpenses;
            document.getElementById('expenseTrend').textContent = data.expenseTrend;
        }


        function getDefaultOptions(type) {
            return {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: '#1e293b',
                        padding: 12,
                        titleFont: {
                            size: 14,
                            weight: '700'
                        },
                        bodyFont: {
                            size: 13
                        },
                        cornerRadius: 8,
                        displayColors: true,
                        boxWidth: 8,
                        boxHeight: 8,
                        usePointStyle: true,
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) label += ': ';
                                if (type === 'currency') {
                                    label += '{{ getCurrencySymbol() }}' + context.parsed.y.toLocaleString();
                                } else {
                                    label += context.parsed.y;
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#94a3b8',
                            font: {
                                size: 11
                            }
                        }
                    },
                    y: {
                        beginAtZero: true,
                        border: {
                            display: false
                        },
                        grid: {
                            color: '#f1f5f9'
                        },
                        ticks: {
                            color: '#94a3b8',
                            font: {
                                size: 11
                            },
                            maxTicksLimit: 5,
                            callback: function(value) {
                                if (type === 'currency') return '{{ getCurrencySymbol() }}' + (value >= 1000 ? (value / 1000).toFixed(0) + 'K' : value);
                                return value;
                            }
                        }
                    }
                }
            };
        }

        // Independent Filter Logic
        document.getElementById('revenuePeriodFilter').addEventListener('change', function() {
            fetch(`{{ route("dashboard.chart-data") }}?period=${this.value}`)
                .then(res => res.json())
                .then(data => updateRevenueChart(data));
        });

        document.getElementById('cashFlowPeriodFilter').addEventListener('change', function() {
            fetch(`{{ route("dashboard.chart-data") }}?period=${this.value}`)
                .then(res => res.json())
                .then(data => updateCashFlowChart(data));
        });

        // Initial Load
        fetch('{{ route("dashboard.chart-data") }}?period=6mo')
            .then(res => res.json())
            .then(data => initCharts(data))
            .catch(err => console.error("Initial Chart Load Error:", err));
    });
</script>
@endsection