<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Expense Report</title>
    <style>
        @page { margin: 20px 30px; }
        body {
            font-family: 'DejaVu Sans', sans-serif;
            font-size: 10pt;
            color: #1f2937;
            margin: 0;
            padding: 0;
        }
        .header {
            border-bottom: 3px solid #0d9488;
            padding-bottom: 12px;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        .header .app-name {
            font-size: 18pt;
            font-weight: 800;
            color: #0d9488;
            letter-spacing: -0.5px;
        }
        .header .report-title {
            font-size: 14pt;
            font-weight: 700;
            color: #374151;
        }
        .header .report-meta {
            font-size: 8pt;
            color: #6b7280;
            margin-top: 2px;
        }
        .summary-grid {
            display: flex;
            gap: 10px;
            margin-bottom: 18px;
        }
        .summary-card {
            flex: 1;
            padding: 10px 14px;
            border-radius: 8px;
            text-align: center;
        }
        .summary-card .label {
            font-size: 7pt;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #6b7280;
        }
        .summary-card .value {
            font-size: 14pt;
            font-weight: 800;
            margin-top: 4px;
        }
        .card-teal { background: #f0fdfa; }
        .card-teal .value { color: #0f766e; }
        .card-red { background: #fef2f2; }
        .card-red .value { color: #dc2626; }
        .card-blue { background: #eff6ff; }
        .card-blue .value { color: #2563eb; }
        .card-gray { background: #f9fafb; }
        .card-gray .value { color: #4b5563; }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9pt;
        }
        th {
            background: #0d9488;
            color: white;
            padding: 8px 10px;
            text-align: left;
            font-weight: 600;
            font-size: 8pt;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        th.amt { text-align: right; }
        td {
            padding: 7px 10px;
            border-bottom: 1px solid #e5e7eb;
        }
        td.amt { text-align: right; font-weight: 700; }
        tr:nth-child(even) { background: #f9fafb; }
        tr:nth-child(odd) { background: #ffffff; }

        .section-title {
            font-size: 11pt;
            font-weight: 700;
            color: #0d9488;
            margin-top: 20px;
            margin-bottom: 8px;
            padding-bottom: 4px;
            border-bottom: 2px solid #ccfbf1;
        }

        .category-table { margin-top: 0; }
        .category-table td:last-child { text-align: right; font-weight: 700; }
        .bar-bg { background: #e5e7eb; border-radius: 4px; height: 14px; overflow: hidden; }
        .bar-fill { height: 14px; border-radius: 4px; }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 7pt;
            color: #9ca3af;
            padding: 8px 0;
            border-top: 1px solid #e5e7eb;
        }
        .footer .page-number:after { content: counter(page); }
    </style>
</head>
<body>
    <div class="header">
        <div>
            <div class="app-name">💰 ExpenseTracker</div>
            <div class="report-meta">Generated {{ $generatedAt }}</div>
        </div>
        <div class="report-meta" style="text-align:right">
            <div class="report-title">Expense Report</div>
            <div>{{ $dateFrom }} &mdash; {{ $dateTo }}</div>
        </div>
    </div>

    <div class="summary-grid">
        <div class="summary-card card-teal">
            <div class="label">Total Expenses</div>
            <div class="value">{{ number_format($total, 2) }}</div>
        </div>
        <div class="summary-card card-red">
            <div class="label">Avg per Day</div>
            <div class="value">{{ number_format($avgPerDay, 2) }}</div>
        </div>
        <div class="summary-card card-blue">
            <div class="label">Transactions</div>
            <div class="value">{{ $count }}</div>
        </div>
        <div class="summary-card card-gray">
            <div class="label">Categories</div>
            <div class="value">{{ count($categoryBreakdown) }}</div>
        </div>
    </div>

    <div class="section-title">📋 All Transactions</div>
    <table>
        <tr>
            <th style="width:75px">Date</th>
            <th style="width:65px">Time</th>
            <th>Category</th>
            <th>Note</th>
            <th style="width:80px">Payment</th>
            <th class="amt" style="width:80px">Amount</th>
        </tr>
        @foreach ($expenses as $expense)
        <tr>
            <td>{{ $expense->date }}</td>
            <td>{{ $expense->time ?? '--' }}</td>
            <td>{{ $expense->category?->name ?? 'Unknown' }}</td>
            <td>{{ $expense->note ? \Illuminate\Support\Str::limit($expense->note, 30) : '--' }}</td>
            <td><span style="text-transform:capitalize">{{ $expense->payment_method }}</span></td>
            <td class="amt">{{ number_format($expense->amount, 2) }}</td>
        </tr>
        @endforeach
    </table>

    <div class="section-title">📊 Category Breakdown</div>
    <table class="category-table">
        <tr>
            <th>Category</th>
            <th style="width:70px">Count</th>
            <th style="width:100px">Percentage</th>
            <th class="amt" style="width:80px">Amount</th>
        </tr>
        @foreach ($categoryBreakdown as $cat)
        <tr>
            <td>{{ $cat['category'] }}</td>
            <td>{{ $cat['count'] }}</td>
            <td>
                <div class="bar-bg">
                    <div class="bar-fill" style="width:{{ $cat['percentage'] }}%;background:{{ $cat['color'] }}"></div>
                </div>
            </td>
            <td class="amt">{{ number_format($cat['total'], 2) }}</td>
        </tr>
        @endforeach
        <tr style="font-weight:700;background:#f0fdfa">
            <td><strong>Total</strong></td>
            <td>{{ $count }}</td>
            <td>100%</td>
            <td class="amt">{{ number_format($total, 2) }}</td>
        </tr>
    </table>

    <div class="footer">
        <span>ExpenseTracker &bull; </span>
        <span class="page-number">Page </span>
    </div>
</body>
</html>
