@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1>Advanced Financial Dashboard</h1>
        </div>
    </div>
    
    <!-- Key Metrics Cards -->
    <div class="row">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5>Total Revenue</h5>
                    <h2>${{ number_format($dashboardData['key_metrics']['total_revenue'], 2) }}</h2>
                    <small>+{{ $dashboardData['revenue_analytics']['growth_rate'] }}% from last period</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5>Net Profit</h5>
                    <h2>${{ number_format($dashboardData['key_metrics']['net_profit'], 2) }}</h2>
                    <small>{{ number_format($dashboardData['key_metrics']['gross_profit_margin'], 1) }}% margin</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5>Cash Flow</h5>
                    <h2>${{ number_format($dashboardData['cash_flow_overview']['net_cash_flow'], 2) }}</h2>
                    <small>Operating activities</small>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5>ROI</h5>
                    <h2>{{ number_format($dashboardData['key_metrics']['roi'], 1) }}%</h2>
                    <small>Return on investment</small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Charts Row -->
    <div class="row mt-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5>Revenue Trends</h5>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5>Expense Breakdown</h5>
                </div>
                <div class="card-body">
                    <canvas id="expenseChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Financial Ratios -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>Financial Ratios</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Liquidity Ratios</h6>
                            <ul class="list-unstyled">
                                <li>Current Ratio: {{ number_format($dashboardData['financial_ratios']['liquidity_ratios']['current_ratio'], 2) }}</li>
                                <li>Quick Ratio: {{ number_format($dashboardData['financial_ratios']['liquidity_ratios']['quick_ratio'], 2) }}</li>
                                <li>Cash Ratio: {{ number_format($dashboardData['financial_ratios']['liquidity_ratios']['cash_ratio'], 2) }}</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6>Profitability Ratios</h6>
                            <ul class="list-unstyled">
                                <li>ROA: {{ number_format($dashboardData['financial_ratios']['profitability_ratios']['return_on_assets'], 1) }}%</li>
                                <li>ROE: {{ number_format($dashboardData['financial_ratios']['profitability_ratios']['return_on_equity'], 1) }}%</li>
                                <li>Gross Margin: {{ number_format($dashboardData['financial_ratios']['profitability_ratios']['gross_margin'], 1) }}%</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>Aging Analysis</h5>
                </div>
                <div class="card-body">
                    <h6>Accounts Receivable</h6>
                    @foreach($dashboardData['aging_analysis']['receivables'] as $aging)
                    <div class="d-flex justify-content-between">
                        <span>{{ $aging->aging_bucket }}</span>
                        <span>${{ number_format($aging->amount_due, 2) }}</span>
                    </div>
                    @endforeach
                    <hr>
                    <div class="d-flex justify-content-between font-weight-bold">
                        <span>Total Outstanding</span>
                        <span>${{ number_format($dashboardData['aging_analysis']['total_receivables'], 2) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Revenue Chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
new Chart(revenueCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($dashboardData['revenue_analytics']['trends']->pluck('period')) !!},
        datasets: [{
            label: 'Revenue',
            data: {!! json_encode($dashboardData['revenue_analytics']['trends']->pluck('revenue')) !!},
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// Expense Chart
const expenseCtx = document.getElementById('expenseChart').getContext('2d');
new Chart(expenseCtx, {
    type: 'doughnut',
    data: {
        labels: {!! json_encode($dashboardData['expense_breakdown']->pluck('expense_category')) !!},
        datasets: [{
            data: {!! json_encode($dashboardData['expense_breakdown']->pluck('total_amount')) !!},
            backgroundColor: [
                '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', 
                '#9966FF', '#FF9F40'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});
</script>
@endsection