@extends('layouts.bootstrap')

@section('title', 'Financial Dashboard')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="bi bi-graph-up me-2"></i>Financial Dashboard
                </h1>
                <div class="btn-group" role="group">
                    <input type="radio" class="btn-check" name="period" id="month" value="month" {{ $period == 'month' ? 'checked' : '' }}>
                    <label class="btn btn-outline-primary" for="month">Month</label>
                    
                    <input type="radio" class="btn-check" name="period" id="quarter" value="quarter" {{ $period == 'quarter' ? 'checked' : '' }}>
                    <label class="btn btn-outline-primary" for="quarter">Quarter</label>
                    
                    <input type="radio" class="btn-check" name="period" id="year" value="year" {{ $period == 'year' ? 'checked' : '' }}>
                    <label class="btn btn-outline-primary" for="year">Year</label>
                </div>
            </div>
        </div>
    </div>

    <!-- Key Metrics Row -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Total Income</h6>
                            <h4 class="mb-0">${{ number_format($totalIncome, 2) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-arrow-up-circle fs-2"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Total Expenses</h6>
                            <h4 class="mb-0">${{ number_format($totalExpenses, 2) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-arrow-down-circle fs-2"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card {{ $netProfit >= 0 ? 'bg-info' : 'bg-warning' }} text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Net Profit</h6>
                            <h4 class="mb-0">${{ number_format($netProfit, 2) }}</h4>
                            <small>{{ number_format($profitMargin, 1) }}% margin</small>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-graph-{{ $netProfit >= 0 ? 'up' : 'down' }} fs-2"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Outstanding Loans</h6>
                            <h4 class="mb-0">${{ number_format($totalOutstanding, 2) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="bi bi-bank fs-2"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts and Analysis Row -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Income by Category</h5>
                </div>
                <div class="card-body">
                    @if($incomeByCategory->count() > 0)
                        @foreach($incomeByCategory as $category => $amount)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>{{ $category }}</span>
                                <div>
                                    <span class="badge bg-success">${{ number_format($amount, 2) }}</span>
                                    <small class="text-muted">
                                        ({{ $totalIncome > 0 ? number_format(($amount / $totalIncome) * 100, 1) : 0 }}%)
                                    </small>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted">No income data for this period.</p>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Expenses by Category</h5>
                </div>
                <div class="card-body">
                    @if($expensesByCategory->count() > 0)
                        @foreach($expensesByCategory as $category => $amount)
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span>{{ $category }}</span>
                                <div>
                                    <span class="badge bg-danger">${{ number_format($amount, 2) }}</span>
                                    <small class="text-muted">
                                        ({{ $totalExpenses > 0 ? number_format(($amount / $totalExpenses) * 100, 1) : 0 }}%)
                                    </small>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted">No expense data for this period.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Monthly Trends -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Monthly Trends (Last 12 Months)</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Month</th>
                                    <th class="text-end">Income</th>
                                    <th class="text-end">Expenses</th>
                                    <th class="text-end">Profit</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($monthlyTrends as $trend)
                                    <tr>
                                        <td>{{ $trend['month'] }}</td>
                                        <td class="text-end text-success">${{ number_format($trend['income'], 2) }}</td>
                                        <td class="text-end text-danger">${{ number_format($trend['expenses'], 2) }}</td>
                                        <td class="text-end {{ $trend['profit'] >= 0 ? 'text-success' : 'text-danger' }}">
                                            ${{ number_format($trend['profit'], 2) }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Alerts and Actions -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Pending Actions</h5>
                </div>
                <div class="card-body">
                    @if($pendingExpenses > 0)
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <strong>{{ $pendingExpenses }}</strong> expenses pending approval
                            <a href="{{ route('expenses.index', ['status' => 'pending']) }}" class="alert-link">Review now</a>
                        </div>
                    @endif
                    
                    @if($upcomingPayments > 0)
                        <div class="alert alert-info">
                            <i class="bi bi-calendar-event me-2"></i>
                            <strong>{{ $upcomingPayments }}</strong> investment payments due soon
                            <a href="{{ route('investments.index') }}" class="alert-link">View details</a>
                        </div>
                    @endif
                    
                    @if($pendingExpenses == 0 && $upcomingPayments == 0)
                        <p class="text-muted">No pending actions at this time.</p>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('incomes.create') }}" class="btn btn-success">
                            <i class="bi bi-plus-circle me-2"></i>Record Income
                        </a>
                        <a href="{{ route('expenses.create') }}" class="btn btn-danger">
                            <i class="bi bi-plus-circle me-2"></i>Record Expense
                        </a>
                        <a href="{{ route('investments.create') }}" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-2"></i>Add Investment
                        </a>
                        <hr>
                        <a href="{{ route('financial.profit-loss') }}" class="btn btn-outline-info">
                            <i class="bi bi-file-earmark-bar-graph me-2"></i>P&L Report
                        </a>
                        <a href="{{ route('financial.cash-flow') }}" class="btn btn-outline-info">
                            <i class="bi bi-cash-stack me-2"></i>Cash Flow Report
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle period selection
    document.querySelectorAll('input[name="period"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            if (this.checked) {
                window.location.href = '{{ route("financial.dashboard") }}?period=' + this.value;
            }
        });
    });
});
</script>
@endsection