@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2">{{ $reportTitle }}</h1>
            @if($reportSubtitle)
                <h5 class="text-muted">{{ $reportSubtitle }}</h5>
            @endif
        </div>
        <div>
            <form action="{{ route('reports.generate') }}" method="POST" class="d-inline">
                @csrf
                @foreach(request()->all() as $key => $value)
                    @if($key !== '_token' && $key !== 'format')
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endif
                @endforeach
                <input type="hidden" name="format" value="pdf">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-file-pdf me-1"></i> Download PDF
                </button>
            </form>
            <a href="{{ route('reports.index') }}" class="btn btn-secondary ms-2">
                <i class="fas fa-arrow-left me-1"></i> Back to Reports
            </a>
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold">Expense Details</h6>
            <span class="text-muted small">Generated: {{ $generatedAt }}</span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Title</th>
                            <th>Project</th>
                            <th>Category</th>
                            <th>Vendor</th>
                            <th>Payment Method</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($expenses as $expense)
                        <tr>
                            <td>{{ $expense->expense_date->format('M d, Y') }}</td>
                            <td>
                                {{ $expense->title }}
                                @if($expense->description)
                                    <div class="small text-muted">{{ $expense->description }}</div>
                                @endif
                            </td>
                            <td>{{ $expense->project->name }}</td>
                            <td>
                                <span class="badge" style="background-color: {{ $expense->category->color }}">
                                    {{ $expense->category->name }}
                                </span>
                            </td>
                            <td>{{ $expense->vendor ?? 'N/A' }}</td>
                            <td>{{ $expense->payment_method ?? 'N/A' }}</td>
                            <td>{{ $expense->formatted_amount }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center">No expenses found for this report criteria.</td>
                        </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr class="bg-light">
                            <th colspan="6" class="text-end">Total:</th>
                            <th>LKR {{ number_format($totalAmount, 2) }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold">Summary</h6>
                </div>
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-6 text-muted">Total Expenses:</div>
                        <div class="col-6 text-end fw-bold">{{ count($expenses) }}</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-6 text-muted">Total Amount:</div>
                        <div class="col-6 text-end fw-bold">LKR {{ number_format($totalAmount, 2) }}</div>
                    </div>
                    @if($expenses->count() > 0)
                    <div class="row mb-2">
                        <div class="col-6 text-muted">Average Amount:</div>
                        <div class="col-6 text-end">LKR {{ number_format($totalAmount / $expenses->count(), 2) }}</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-6 text-muted">Highest Expense:</div>
                        <div class="col-6 text-end">LKR {{ number_format($expenses->max('amount'), 2) }}</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col-6 text-muted">Lowest Expense:</div>
                        <div class="col-6 text-end">LKR {{ number_format($expenses->min('amount'), 2) }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        
        @if($expenses->count() > 0)
        <div class="col-md-6 mb-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold">Expense Distribution</h6>
                </div>
                <div class="card-body">
                    <canvas id="expenseDistributionChart" height="250"></canvas>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@section('scripts')
@if($expenses->count() > 0)
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Prepare data for the chart
        const ctx = document.getElementById('expenseDistributionChart').getContext('2d');
        
        // Group expenses by category
        const categories = {};
        const categoryColors = {};
        
        @foreach($expenses as $expense)
            if (!categories['{{ $expense->category->name }}']) {
                categories['{{ $expense->category->name }}'] = 0;
                categoryColors['{{ $expense->category->name }}'] = '{{ $expense->category->color }}';
            }
            categories['{{ $expense->category->name }}'] += {{ $expense->amount }};
        @endforeach
        
        const categoryNames = Object.keys(categories);
        const categoryValues = Object.values(categories);
        const colors = categoryNames.map(name => categoryColors[name]);
        
        // Create the chart
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: categoryNames,
                datasets: [{
                    data: categoryValues,
                    backgroundColor: colors,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${context.label}: LKR ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    });
</script>
@endif
@endsection