@extends('layouts.app')

@section('title', 'Commissions – Overview')

@push('styles')
    @include('commissions.partials.styles')
    <style>
.commissions-page { max-width: 1280px; }
.commissions-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);
}
.commissions-chart-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem; align-items: flex-end;
}
.commissions-chart-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; }
.commissions-chart-sub { margin: 0.3rem 0 0; font-size: 0.8rem; color: #64748b; }
.commissions-chart-totals { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.commissions-chart-totals-label {
    display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: #94a3b8; font-weight: 700;
}
.commissions-chart-totals-value {
    display: block; margin-top: 0.15rem; font-size: 1.15rem; font-weight: 700;
    color: #0f172a; font-variant-numeric: tabular-nums;
}
.commissions-chart-body {
    display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1.25rem; align-items: stretch;
}
.commissions-chart-table-wrap {
    overflow: auto; max-height: 340px; border: 1px solid #e2e8f0; border-radius: 8px;
}
.commissions-chart-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.commissions-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;
}
.commissions-chart-table th.commissions-num,
.commissions-chart-table td.commissions-num { text-align: right; }
.commissions-chart-table td {
    padding: 0.45rem 0.65rem; border-bottom: 1px solid #e2e8f0; color: #334155;
    font-variant-numeric: tabular-nums;
}
.commissions-chart-table tbody tr.is-active { background: #e0f2fe; }
.commissions-chart-table tbody tr.is-active td { font-weight: 700; color: #0c4a6e; }
.commissions-chart-canvas-wrap {
    position: relative; min-height: 300px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem 0.5rem 0.35rem;
}
@media (max-width: 960px) {
    .commissions-chart-body { grid-template-columns: 1fr; }
}
    </style>
@endpush

@section('content')
@php
    $chartPeopleLabel = ($filters['salesperson_id'] ?? 0) > 0
        ? (optional($yearChart['salespeople'][0] ?? null)['name'] ?? 'Salesperson')
        : 'All salespeople';
@endphp
<div class="commissions-page">
    <header class="commissions-header">
        <h1>Commissions</h1>
        <p class="commissions-subtitle">
            Monthly summary, ledger, and payouts. Owner is excluded from commission reporting.
            <strong>Sale commission</strong> = assigned to the sale.
            <strong>NMI coverage</strong> = commission on NMI sales when not the assigned seller (fixed $ or %).
            Configure in <a href="{{ route('setting.sales-commissions') }}">Setting → Sales commissions</a>.
        </p>
    </header>

    @include('commissions.partials.nav', ['activeTab' => 'overview'])

    @include('commissions.partials.filters', [
        'filters' => $filters,
        'formAction' => route('commissions.index'),
        'showSalesperson' => true,
        'salespeople' => $salespeople,
    ])

    <section class="commissions-chart-panel">
        <div class="commissions-chart-head">
            <div>
                <h2 class="commissions-chart-title">Commissions by month · {{ $filters['year'] }}</h2>
                <p class="commissions-chart-sub">{{ $chartPeopleLabel }} · filters match the table below</p>
            </div>
            <div class="commissions-chart-totals">
                <div>
                    <span class="commissions-chart-totals-label">Year earned</span>
                    <span class="commissions-chart-totals-value">${{ number_format($yearChart['year_earned'], 2) }}</span>
                </div>
                <div>
                    <span class="commissions-chart-totals-label">Sale commission</span>
                    <span class="commissions-chart-totals-value">${{ number_format($yearChart['year_sale'], 2) }}</span>
                </div>
                <div>
                    <span class="commissions-chart-totals-label">NMI coverage</span>
                    <span class="commissions-chart-totals-value">${{ number_format($yearChart['year_coverage'], 2) }}</span>
                </div>
                <div>
                    <span class="commissions-chart-totals-label">{{ $overview['period_label'] }}</span>
                    <span class="commissions-chart-totals-value">${{ number_format($overview['totals']['earned'], 2) }}</span>
                </div>
            </div>
        </div>
        <div class="commissions-chart-body">
            <div class="commissions-chart-table-wrap">
                <table class="commissions-chart-table">
                    <thead>
                        <tr>
                            <th>Month</th>
                            <th class="commissions-num">Sale</th>
                            <th class="commissions-num">Coverage</th>
                            <th class="commissions-num">Earned</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($yearChart['months'] as $point)
                            <tr class="{{ (int) $point['month'] === (int) $filters['month'] ? 'is-active' : '' }}">
                                <td>{{ $point['label_full'] }}</td>
                                <td class="commissions-num">${{ number_format($point['sale'], 2) }}</td>
                                <td class="commissions-num">${{ number_format($point['coverage'], 2) }}</td>
                                <td class="commissions-num">${{ number_format($point['earned'], 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" style="text-align:center; padding:1rem; color:#64748b;">No months in this year yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="commissions-chart-canvas-wrap">
                <canvas id="commissionsYearChart" height="280" aria-label="Commissions by month chart"></canvas>
            </div>
        </div>
    </section>

    <section class="commissions-card">
        <h2 class="commissions-period-title">{{ $overview['period_label'] }}</h2>

        @if(empty($overview['rows']))
            <p class="commissions-empty">No salespeople match these filters.</p>
        @else
            <div class="commissions-table-wrap">
                <table class="commissions-table">
                    <thead>
                        <tr>
                            <th>Salesperson</th>
                            <th>Sale commission</th>
                            <th>NMI coverage</th>
                            <th>Earned</th>
                            <th>Voided</th>
                            <th>Pending payout</th>
                            <th>Paid</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($overview['rows'] as $row)
                            @php $person = $row['salesperson']; @endphp
                            <tr>
                                <td>
                                    <strong>{{ $person->full_name }}</strong>
                                    @if($row['earned_count'] > 0)
                                        <div class="commissions-muted">{{ $row['earned_count'] }} commission{{ $row['earned_count'] === 1 ? '' : 's' }}</div>
                                    @endif
                                    @if(!empty($person->nmi_txn_fee_enabled))
                                        <div class="commissions-muted">{{ $person->nmiCoverageRoleLabel() }}</div>
                                    @endif
                                </td>
                                <td class="commissions-amount">
                                    ${{ number_format($row['assigned_earned'] ?? 0, 2) }}
                                    @if(($row['assigned_count'] ?? 0) > 0)
                                        <div class="commissions-muted">{{ $row['assigned_count'] }} assigned sale{{ $row['assigned_count'] === 1 ? '' : 's' }}</div>
                                    @endif
                                </td>
                                <td class="commissions-amount">
                                    ${{ number_format($row['fee_earned'] ?? 0, 2) }}
                                    @if(($row['fee_count'] ?? 0) > 0)
                                        <div class="commissions-muted">{{ $row['fee_count'] }} covered sale{{ $row['fee_count'] === 1 ? '' : 's' }}</div>
                                    @endif
                                </td>
                                <td class="commissions-amount">${{ number_format($row['earned'], 2) }}</td>
                                <td class="commissions-amount">
                                    @if($row['voided'] > 0)
                                        <span class="commissions-badge commissions-badge--voided">${{ number_format($row['voided'], 2) }}</span>
                                    @else
                                        <span class="commissions-muted">$0.00</span>
                                    @endif
                                </td>
                                <td class="commissions-amount">
                                    @if($row['pending'] > 0)
                                        <span class="commissions-badge commissions-badge--pending">${{ number_format($row['pending'], 2) }}</span>
                                        <div class="commissions-muted">{{ $row['pending_count'] }} pending</div>
                                    @else
                                        <span class="commissions-muted">$0.00</span>
                                    @endif
                                </td>
                                <td class="commissions-amount">
                                    @if($row['paid'] > 0)
                                        <span class="commissions-badge commissions-badge--paid">${{ number_format($row['paid'], 2) }}</span>
                                    @else
                                        <span class="commissions-muted">$0.00</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="commissions-actions">
                                        <a href="{{ route('commissions.ledger', ['year' => $filters['year'], 'month' => $filters['month'], 'salesperson_id' => $person->id]) }}" class="commissions-btn">View ledger</a>
                                        @if($row['pending'] > 0)
                                            <button type="button"
                                                class="commissions-btn commissions-btn--success commissions-mark-paid-btn"
                                                style="width:100%;"
                                                data-salesperson-id="{{ $person->id }}"
                                                data-salesperson-name="{{ $person->full_name }}"
                                                data-year="{{ $filters['year'] }}"
                                                data-month="{{ $filters['month'] }}"
                                                data-period-label="{{ $overview['period_label'] }}"
                                                data-pending-amount="{{ number_format($row['pending'], 2, '.', '') }}"
                                                data-pending-count="{{ $row['pending_count'] }}">
                                                Mark paid
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total</td>
                            <td class="commissions-amount">${{ number_format($overview['totals']['assigned_earned'] ?? 0, 2) }}</td>
                            <td class="commissions-amount">${{ number_format($overview['totals']['fee_earned'] ?? 0, 2) }}</td>
                            <td class="commissions-amount">${{ number_format($overview['totals']['earned'], 2) }}</td>
                            <td class="commissions-amount">${{ number_format($overview['totals']['voided'], 2) }}</td>
                            <td class="commissions-amount">${{ number_format($overview['totals']['pending'], 2) }}</td>
                            <td class="commissions-amount">${{ number_format($overview['totals']['paid'], 2) }}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        @endif
    </section>
</div>

@include('commissions.partials.mark-paid-dialog')
@endsection

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

    var labels = months.map(function (p) { return p.label; });
    var palette = [
        { fill: 'rgba(14, 116, 144, 0.75)', fillActive: 'rgba(14, 116, 144, 0.95)' },
        { fill: 'rgba(190, 24, 93, 0.65)', fillActive: 'rgba(190, 24, 93, 0.9)' },
        { fill: 'rgba(71, 85, 105, 0.7)', fillActive: 'rgba(71, 85, 105, 0.95)' },
        { fill: 'rgba(5, 150, 105, 0.7)', fillActive: 'rgba(5, 150, 105, 0.95)' },
        { fill: 'rgba(180, 83, 9, 0.7)', fillActive: 'rgba(180, 83, 9, 0.95)' },
        { fill: 'rgba(79, 70, 229, 0.7)', fillActive: 'rgba(79, 70, 229, 0.95)' }
    ];

    var datasets = people.map(function (person, index) {
        var colors = palette[index % palette.length];
        return {
            label: person.name,
            data: (person.amounts || []).map(function (v) { return Number(v) || 0; }),
            backgroundColor: months.map(function (p) {
                return Number(p.month) === selectedMonth ? colors.fillActive : colors.fill;
            }),
            borderRadius: 4,
            maxBarThickness: 36,
            stack: 'earned'
        };
    });

    if (!datasets.length) {
        datasets.push({
            label: 'Earned',
            data: months.map(function (p) { return Number(p.earned) || 0; }),
            backgroundColor: months.map(function (p) {
                return Number(p.month) === selectedMonth ? 'rgba(14, 116, 144, 0.95)' : 'rgba(14, 116, 144, 0.6)';
            }),
            borderRadius: 4,
            maxBarThickness: 36
        });
    }

    new Chart(canvas.getContext('2d'), {
        type: 'bar',
        data: { labels: labels, datasets: datasets },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: {
                    position: 'top',
                    align: 'end',
                    labels: { boxWidth: 12, usePointStyle: true, pointStyle: 'rectRounded', color: '#475569' }
                },
                tooltip: {
                    callbacks: {
                        label: function (ctx) {
                            return ' ' + ctx.dataset.label + ': $' + Number(ctx.raw).toLocaleString(undefined, {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });
                        },
                        footer: function (items) {
                            var total = items.reduce(function (sum, item) { return sum + (Number(item.raw) || 0); }, 0);
                            return 'Total: $' + total.toLocaleString(undefined, {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: { display: false },
                    ticks: { color: '#64748b', font: { weight: '600' } }
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    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;
                        }
                    }
                }
            }
        }
    });
})();
</script>
@endpush