@extends('layouts.app')

@section('title', 'Accountant Report')

@section('content')
<div class="acct-page">
    <header class="acct-header">
        <div>
            <h1>Accountant Report</h1>
        </div>
        <a href="{{ route('setting.accountant-report') }}" class="btn btn-secondary">Settings</a>
    </header>

    <form method="GET" action="{{ route('accountant-report.index') }}" class="acct-filters">
        <div class="acct-filter-row">
            <label>
                <span>Year</span>
                <select name="year" onchange="this.form.submit()">
                    @foreach($years as $y)
                        <option value="{{ $y['value'] }}" @selected($filter['year'] === $y['value'])>{{ $y['label'] }}</option>
                    @endforeach
                </select>
            </label>
            <label>
                <span>Month</span>
                <select name="month" onchange="this.form.submit()">
                    @foreach($months as $m)
                        <option value="{{ $m['value'] }}" @selected($filter['month'] === $m['value'])>{{ $m['label'] }}</option>
                    @endforeach
                </select>
            </label>
            <label class="acct-check">
                <input type="hidden" name="no_tax" value="0">
                <input type="checkbox" name="no_tax" value="1" @checked($onlyNoTax) onchange="this.form.submit()">
                <span>Only no-tax</span>
            </label>
            <label class="acct-check">
                <input type="hidden" name="hide_fl_no_tax" value="0">
                <input type="checkbox" name="hide_fl_no_tax" value="1" @checked($hideFlNoTax) onchange="this.form.submit()">
                <span>Hide Florida no-tax</span>
            </label>
            <label class="acct-check">
                <input type="hidden" name="hide_test" value="0">
                <input type="checkbox" name="hide_test" value="1" @checked($hideTest) onchange="this.form.submit()">
                <span>Hide test orders</span>
            </label>
        </div>
    </form>

    @php
        $chartFilterBits = [];
        if ($onlyNoTax) { $chartFilterBits[] = 'no-tax only'; }
        else { $chartFilterBits[] = 'all sales'; }
        if ($hideFlNoTax) { $chartFilterBits[] = 'FL no-tax hidden'; }
        if ($hideTest) { $chartFilterBits[] = 'tests hidden'; }
    @endphp

    <section class="acct-chart-panel">
        <div class="acct-chart-head">
            <div>
                <h2 class="acct-chart-title">Sales by month · {{ $filter['year'] }}</h2>
                <p class="acct-chart-sub">{{ implode(' · ', $chartFilterBits) }}</p>
            </div>
            <div class="acct-chart-totals">
                <div>
                    <span class="acct-chart-totals-label">Year total</span>
                    <span class="acct-chart-totals-value">${{ number_format($yearTotalAmount, 2) }}</span>
                </div>
                <div>
                    <span class="acct-chart-totals-label">Sales</span>
                    <span class="acct-chart-totals-value">{{ $yearTotalCount }}</span>
                </div>
                <div>
                    <span class="acct-chart-totals-label">{{ $filter['label'] }}</span>
                    <span class="acct-chart-totals-value">${{ number_format((float) $transactions->sum('amount'), 2) }}</span>
                </div>
            </div>
        </div>
        <div class="acct-chart-body">
            <div class="acct-chart-table-wrap">
                <table class="acct-chart-table">
                    <thead>
                        <tr>
                            <th>Month</th>
                            <th class="acct-num">Sales</th>
                            <th class="acct-num">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($yearSeries as $point)
                            <tr class="{{ (int) $point['month'] === (int) $filter['month'] ? 'is-active' : '' }}">
                                <td>{{ $point['label_full'] }}</td>
                                <td class="acct-num">{{ $point['count'] }}</td>
                                <td class="acct-num">${{ number_format($point['amount'], 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="acct-chart-canvas-wrap">
                <canvas id="acctYearChart" height="260" aria-label="Sales by month chart"></canvas>
            </div>
        </div>
    </section>

    <div class="acct-summary acct-summary--slim">
        <div class="acct-stat">
            <span class="acct-stat-label">Table rows</span>
            <span class="acct-stat-value">{{ $transactions->count() }}</span>
            <span class="acct-stat-hint">{{ $filter['label'] }}</span>
        </div>
        <div class="acct-stat acct-stat--muted">
            <span class="acct-stat-label">Accountant</span>
            <span class="acct-stat-value acct-stat-value--sm">{{ $settings->accountantEmail() }}</span>
            <span class="acct-stat-hint">Auto-send: {{ $settings->isAutoSendEnabled() ? 'ON (day ' . $autoSendDay . ')' : 'OFF' }}</span>
        </div>
    </div>

    <div class="acct-last-sent {{ $settings->hasLastSentReport() ? '' : 'acct-last-sent--empty' }}">
        <div class="acct-last-sent-main">
            <span class="acct-last-sent-label">Last email to accountant</span>
            @if($settings->hasLastSentReport())
                <p class="acct-last-sent-when">{{ $settings->lastSentAtDisplay() }}</p>
                <p class="acct-last-sent-meta">
                    <strong>{{ $settings->lastSentModeLabel() }}</strong>
                    · to {{ $settings->last_sent_to }}
                    · report for <strong>{{ $settings->last_sent_month_label }}</strong>
                    · {{ (int) $settings->last_sent_row_count }} row(s)
                    · ${{ number_format((float) $settings->last_sent_total_amount, 2) }}
                    @if($lastSend)
                        · status <strong class="acct-send-tone-{{ $lastSend->statusTone() }}">{{ $lastSend->statusLabel() }}</strong>
                        @if($lastSend->delivered_at)
                            · delivered {{ $lastSend->deliveredAtDisplay() }}
                        @endif
                        @if($lastSend->opened_at)
                            · opened {{ $lastSend->openedAtDisplay() }}
                        @endif
                        @if($lastSend->hasIncompleteInvoices())
                            · invoices {{ (int) $lastSend->invoices_included }}/{{ (int) $lastSend->invoices_expected }}
                        @endif
                    @endif
                </p>
            @else
                <p class="acct-last-sent-when">Not sent yet</p>
                <p class="acct-last-sent-meta">After you email a report (manual or automatic), the date/time, delivery status, PDF, and CSV appear here.</p>
            @endif
        </div>
        <div class="acct-last-sent-actions">
            @if($settings->hasLastSentPdfFile())
                <a href="{{ route('accountant-report.last-sent') }}" class="btn btn-secondary" target="_blank" rel="noopener"
                   title="Exact PDF that was emailed last time">View last PDF</a>
            @elseif($settings->hasLastSentReport())
                <span class="acct-last-sent-missing">PDF archive missing</span>
            @endif
            @if($settings->hasLastSentCsvFile())
                <a href="{{ route('accountant-report.last-sent-csv') }}" class="btn btn-secondary"
                   title="Exact CSV that was emailed last time">Last CSV</a>
            @endif
        </div>
    </div>

    @if($recentSends->isNotEmpty())
        <section class="acct-send-history">
            <h2 class="acct-send-history-title">Send history</h2>
            <p class="acct-send-history-sub">PDF + CSV archives by month · delivery/open from Brevo + open pixel</p>
            <div class="acct-table-wrap">
                <table class="acct-table acct-send-table">
                    <thead>
                        <tr>
                            <th>When</th>
                            <th>Month</th>
                            <th>Mode</th>
                            <th>Status</th>
                            <th class="acct-num">Rows</th>
                            <th class="acct-num">Amount</th>
                            <th>Invoices</th>
                            <th>Files</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentSends as $send)
                            <tr>
                                <td>{{ $send->sentAtDisplay() }}</td>
                                <td>{{ $send->month_label }}</td>
                                <td>{{ $send->modeLabel() }}</td>
                                <td>
                                    <span class="acct-send-tone-{{ $send->statusTone() }}">{{ $send->statusLabel() }}</span>
                                    @if($send->status === \App\Models\AccountantReportSend::STATUS_FAILED && $send->error_message)
                                        <div class="acct-send-error" title="{{ $send->error_message }}">{{ \Illuminate\Support\Str::limit($send->error_message, 80) }}</div>
                                    @endif
                                    @if($send->opened_at)
                                        <div class="acct-send-meta">Opened {{ $send->openedAtDisplay() }}</div>
                                    @elseif($send->delivered_at)
                                        <div class="acct-send-meta">Delivered {{ $send->deliveredAtDisplay() }}</div>
                                    @endif
                                </td>
                                <td class="acct-num">{{ (int) $send->row_count }}</td>
                                <td class="acct-num">${{ number_format((float) $send->total_amount, 2) }}</td>
                                <td>
                                    {{ (int) $send->invoices_included }}/{{ (int) $send->invoices_expected }}
                                    @if($send->hasIncompleteInvoices() && is_array($send->invoices_missing) && count($send->invoices_missing))
                                        <div class="acct-send-error" title="{{ implode(', ', $send->invoices_missing) }}">missing</div>
                                    @endif
                                </td>
                                <td>
                                    @if($send->pdfAbsolutePath())
                                        <a href="{{ route('accountant-report.archive-pdf', $send->month_key) }}" target="_blank" rel="noopener">PDF</a>
                                    @else
                                        —
                                    @endif
                                    ·
                                    @if($send->csvAbsolutePath())
                                        <a href="{{ route('accountant-report.archive-csv', $send->month_key) }}">CSV</a>
                                    @else
                                        —
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    @endif

    <div class="acct-actions">
        <a href="{{ route('accountant-report.pdf', ['year' => $filter['year'], 'month' => $filter['month'], 'no_tax' => $onlyNoTax ? 1 : 0, 'hide_test' => $hideTest ? 1 : 0, 'hide_fl_no_tax' => $hideFlNoTax ? 1 : 0]) }}"
           class="acct-action-btn acct-action-btn--primary" target="_blank" rel="noopener" title="One PDF: summary + Shopify invoices + NMI receipts (same filters as the table)">Export PDF</a>

        <a href="{{ route('accountant-report.csv', ['year' => $filter['year'], 'month' => $filter['month'], 'no_tax' => $onlyNoTax ? 1 : 0, 'hide_test' => $hideTest ? 1 : 0, 'hide_fl_no_tax' => $hideFlNoTax ? 1 : 0]) }}"
           class="acct-action-btn acct-action-btn--secondary" title="Sales table CSV only (same filters as the table)">Export CSV</a>

        <form method="POST" action="{{ route('accountant-report.send') }}" class="acct-inline-form"
              onsubmit="return confirm('Send NO-TAX (outside FL) PDF + CSV for {{ $filter['label'] }} to {{ $settings->accountantEmail() }}?\n\nPDF = summary + invoices/receipts\nCSV = sales table only\n\nAlways excludes tax, Florida no-tax billing errors, and test orders ({{ $testEmail }} / {{ $testPhone }}).');">
            @csrf
            <input type="hidden" name="year" value="{{ $filter['year'] }}">
            <input type="hidden" name="month" value="{{ $filter['month'] }}">
            <input type="hidden" name="no_tax" value="{{ $onlyNoTax ? 1 : 0 }}">
            <input type="hidden" name="hide_test" value="{{ $hideTest ? 1 : 0 }}">
            <input type="hidden" name="hide_fl_no_tax" value="{{ $hideFlNoTax ? 1 : 0 }}">
            <button type="submit" class="acct-action-btn acct-action-btn--email" title="Always no-tax outside FL; PDF + CSV">Email to accountant</button>
        </form>
    </div>

    <div class="acct-table-wrap">
        <table class="acct-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Source</th>
                    <th>Name</th>
                    <th>Shopify order</th>
                    <th>NMI txn</th>
                    <th class="acct-num">Amount</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Tax</th>
                    <th>Invoice / Receipt</th>
                </tr>
            </thead>
            <tbody>
                @forelse($transactions as $row)
                    <tr class="{{ !empty($row['is_test']) ? 'acct-row-test' : '' }}">
                        <td>{{ $row['occurred_at_display'] }}</td>
                        <td>
                            <span class="acct-source acct-source--{{ $row['source'] }}">{{ $row['source_label'] }}</span>
                            <div class="acct-muted">{{ $row['source_detail'] }}</div>
                            @if(!empty($row['is_test']))
                                <div class="acct-badge acct-badge--test">Test</div>
                            @endif
                        </td>
                        <td>{{ $row['customer_name'] }}</td>
                        <td>{{ !empty($row['shopify_order_ref']) ? $row['shopify_order_ref'] : '—' }}</td>
                        <td>{{ !empty($row['nmi_transaction_id']) ? $row['nmi_transaction_id'] : '—' }}</td>
                        <td class="acct-num">
                            ${{ number_format($row['amount'], 2) }}
                            @if($row['is_partial_refund'])
                                <div class="acct-muted">
                                    Partial refund −${{ number_format($row['refunded_amount'], 2) }}
                                    · original ${{ number_format((float) $row['amount'] + (float) $row['refunded_amount'], 2) }}
                                </div>
                            @endif
                        </td>
                        <td>{{ $row['city'] }}</td>
                        <td>{{ $row['state'] }}</td>
                        <td>
                            @if($row['has_tax'])
                                <span class="acct-badge acct-badge--tax">${{ number_format($row['tax_amount'], 2) }}</span>
                            @else
                                <span class="acct-badge acct-badge--none">No tax</span>
                            @endif
                        </td>
                        <td>
                            @if(!empty($row['invoice_url']))
                                <a href="{{ $row['invoice_url'] }}" target="_blank" rel="noopener" class="acct-invoice-link">{{ $row['invoice_label'] }}</a>
                            @else
                                <span>{{ $row['invoice_label'] }}</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="acct-empty">
                            @if($summary['total_count'] === 0)
                                No reportable paid transactions for {{ $filter['label'] }}.
                                Use <strong>Setting → Accountant Report → Run year-to-date sync</strong>, or wait for the hourly auto-sync.
                            @elseif($onlyNoTax && $summary['no_tax_count'] === 0)
                                No <strong>no-tax</strong> sales in {{ $filter['label'] }}.
                                This month has {{ $summary['total_count'] }} reportable sale(s), all with tax collected.
                                Uncheck “Only no-tax” to see them.
                            @elseif($onlyNoTax && $hideFlNoTax && $summary['no_tax_count'] > 0 && $summary['no_tax_count'] === $summary['no_tax_florida_count'] && $summary['no_tax_test_count'] === 0)
                                All {{ $summary['no_tax_florida_count'] }} no-tax sale(s) in {{ $filter['label'] }} are <strong>Florida no-tax</strong> (billing errors) and are hidden.
                                Uncheck “Hide Florida no-tax” to view them — they are never emailed to the accountant.
                            @elseif($onlyNoTax && $hideTest && $summary['no_tax_count'] > 0 && $summary['no_tax_count'] === $summary['no_tax_test_count'])
                                {{ $summary['no_tax_test_count'] }} no-tax row(s) in {{ $filter['label'] }} are <strong>test orders</strong>
                                ({{ $testEmail }} / {{ $testPhone }}) and are hidden.
                                Uncheck “Hide test orders” to view them — they are never emailed to the accountant.
                            @elseif($hideTest && $summary['test_count'] === $summary['total_count'])
                                All {{ $summary['total_count'] }} sale(s) in {{ $filter['label'] }} are test orders and are hidden.
                                Uncheck “Hide test orders” to view them.
                            @else
                                No rows match the current filters for {{ $filter['label'] }}.
                                @if($onlyNoTax && $hideFlNoTax && ($summary['no_tax_florida_count'] ?? 0) > 0)
                                    ({{ $summary['no_tax_florida_count'] }} Florida no-tax billing error(s) are hidden.)
                                @endif
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('styles')
<style>
.acct-page { max-width: 1280px; }
.acct-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.acct-header h1 { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 700; }
.acct-subtitle { margin: 0; color: #4b5563; font-size: 0.95rem; max-width: 52rem; line-height: 1.5; }
.acct-filters { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.acct-filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.acct-filter-row label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: #374151; font-weight: 600; }
.acct-filter-row select { min-width: 10rem; padding: 0.45rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-weight: 500; }
.acct-check { flex-direction: row !important; align-items: center; gap: 0.5rem !important; padding-bottom: 0.15rem; font-weight: 500 !important; }
.acct-chart-panel {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.1rem 1.2rem 1.25rem;
    margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.acct-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; align-items: flex-end; }
.acct-chart-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; }
.acct-chart-sub { margin: 0.3rem 0 0; font-size: 0.8rem; color: #64748b; }
.acct-chart-totals { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.acct-chart-totals-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; font-weight: 700; }
.acct-chart-totals-value { display: block; margin-top: 0.15rem; font-size: 1.15rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.acct-chart-body { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 1.25rem; align-items: stretch; }
.acct-chart-table-wrap { overflow: auto; max-height: 320px; border: 1px solid #e2e8f0; border-radius: 8px; }
.acct-chart-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.acct-chart-table th { position: sticky; top: 0; background: #1e293b; color: #f8fafc; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.55rem 0.65rem; text-align: left; }
.acct-chart-table th.acct-num, .acct-chart-table td.acct-num { text-align: right; }
.acct-chart-table td { padding: 0.45rem 0.65rem; border-bottom: 1px solid #e2e8f0; color: #334155; font-variant-numeric: tabular-nums; }
.acct-chart-table tbody tr.is-active { background: #e0f2fe; }
.acct-chart-table tbody tr.is-active td { font-weight: 700; color: #0c4a6e; }
.acct-chart-canvas-wrap { position: relative; min-height: 280px; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem 0.5rem 0.35rem; }
.acct-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.acct-summary--slim { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.acct-stat { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.9rem 1rem; }
.acct-stat--muted { background: #f8fafc; }
.acct-stat-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; font-weight: 600; }
.acct-stat-value { display: block; margin-top: 0.25rem; font-size: 1.35rem; font-weight: 700; color: #111827; }
.acct-stat-value--sm { font-size: 0.95rem; word-break: break-all; }
.acct-stat-hint { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: #6b7280; }
@media (max-width: 900px) {
    .acct-chart-body { grid-template-columns: 1fr; }
}
.acct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.acct-inline-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
}
.acct-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.5rem;
    height: 2.5rem;
    padding: 0 1.1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.acct-action-btn--primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}
.acct-action-btn--primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}
.acct-action-btn--secondary {
    background: #fff;
    border-color: #cbd5e1;
    color: #334155;
}
.acct-action-btn--secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}
.acct-action-btn--email {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 118, 110, 0.22);
}
.acct-action-btn--email:hover {
    background: #0d9488;
    border-color: #0d9488;
    color: #fff;
}
@media (max-width: 640px) {
    .acct-actions { padding: 0.75rem; }
    .acct-inline-form,
    .acct-action-btn { width: 100%; }
}
.acct-last-sent {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 0.9rem 1.1rem; margin-bottom: 1rem;
}
.acct-last-sent--empty { background: #f8fafc; border-color: #e2e8f0; }
.acct-last-sent-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; font-weight: 700; }
.acct-last-sent-when { margin: 0.25rem 0 0; font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.acct-last-sent-meta { margin: 0.35rem 0 0; font-size: 0.85rem; color: #475569; line-height: 1.45; }
.acct-last-sent-missing { font-size: 0.85rem; color: #b45309; font-weight: 600; }
.acct-last-sent-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.acct-send-history { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.acct-send-history-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.acct-send-history-sub { margin: 0.25rem 0 0.85rem; font-size: 0.8rem; color: #64748b; }
.acct-send-table { font-size: 0.82rem; }
.acct-send-meta { font-size: 0.72rem; color: #64748b; margin-top: 0.2rem; }
.acct-send-error { font-size: 0.72rem; color: #b91c1c; margin-top: 0.2rem; }
.acct-send-tone-ok { color: #047857; font-weight: 700; }
.acct-send-tone-warn { color: #b45309; font-weight: 700; }
.acct-send-tone-bad { color: #b91c1c; font-weight: 700; }
.acct-send-tone-muted { color: #64748b; font-weight: 600; }
.acct-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.acct-table th, .acct-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; }
.acct-table th { background: #f8fafc; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; white-space: nowrap; }
.acct-table tbody tr:hover { background: #fafafa; }
.acct-row-test { background: #fffbeb; }
.acct-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acct-muted { font-size: 0.75rem; color: #6b7280; margin-top: 0.15rem; }
.acct-source { display: inline-block; font-weight: 600; font-size: 0.8rem; }
.acct-source--website { color: #0369a1; }
.acct-source--gateway { color: #7c3aed; }
.acct-badge { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.acct-badge--tax { background: #ecfdf5; color: #047857; }
.acct-badge--none { background: #fff7ed; color: #c2410c; }
.acct-badge--test { background: #fef3c7; color: #92400e; margin-top: 0.25rem; }
.acct-invoice-link { color: #2563eb; font-weight: 600; text-decoration: none; }
.acct-invoice-link:hover { text-decoration: underline; }
.acct-empty { text-align: center; color: #6b7280; padding: 2rem 1rem !important; line-height: 1.5; }
@media (max-width: 720px) {
    .acct-header { flex-direction: column; }
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
(function () {
    var series = @json($yearSeries);
    var selectedMonth = {{ (int) $filter['month'] }};
    var canvas = document.getElementById('acctYearChart');
    if (!canvas || typeof Chart === 'undefined' || !series.length) {
        return;
    }

    var labels = series.map(function (p) { return p.label; });
    var amounts = series.map(function (p) { return Number(p.amount) || 0; });
    var counts = series.map(function (p) { return Number(p.count) || 0; });
    var barColors = series.map(function (p) {
        return Number(p.month) === selectedMonth ? 'rgba(14, 116, 144, 0.92)' : 'rgba(71, 85, 105, 0.72)';
    });

    new Chart(canvas.getContext('2d'), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    type: 'bar',
                    label: 'Amount ($)',
                    data: amounts,
                    backgroundColor: barColors,
                    borderRadius: 6,
                    maxBarThickness: 42,
                    yAxisID: 'y',
                    order: 2
                },
                {
                    type: 'line',
                    label: 'Sales count',
                    data: counts,
                    borderColor: 'rgba(190, 24, 93, 0.95)',
                    backgroundColor: 'rgba(190, 24, 93, 0.12)',
                    pointBackgroundColor: '#be185d',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 5,
                    tension: 0.35,
                    yAxisID: 'y1',
                    order: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: {
                    position: 'top',
                    align: 'end',
                    labels: { boxWidth: 12, usePointStyle: true, pointStyle: 'circle', color: '#475569' }
                },
                tooltip: {
                    callbacks: {
                        label: function (ctx) {
                            if (ctx.dataset.yAxisID === 'y') {
                                return ' Amount: $' + Number(ctx.raw).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                            }
                            return ' Sales: ' + ctx.raw;
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { color: '#64748b', font: { weight: '600' } }
                },
                y: {
                    beginAtZero: true,
                    position: 'left',
                    grid: { color: 'rgba(148, 163, 184, 0.25)', borderDash: [4, 4] },
                    ticks: {
                        color: '#94a3b8',
                        callback: function (v) {
                            if (v >= 1000) return '$' + (v / 1000).toFixed(v % 1000 === 0 ? 0 : 1) + 'k';
                            return '$' + v;
                        }
                    }
                },
                y1: {
                    beginAtZero: true,
                    position: 'right',
                    grid: { drawOnChartArea: false },
                    ticks: { color: '#be185d', precision: 0 }
                }
            }
        }
    });
})();
</script>
@endpush