@extends('layouts.app')

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

@push('styles')
    @include('commissions.partials.styles')
@endpush

@section('content')
<div class="commissions-page">
    <header class="commissions-header">
        <h1>Commissions</h1>
        <p class="commissions-subtitle">History of commission payouts. Use <a href="{{ route('commissions.index') }}">Overview</a> to mark pending commissions as paid. Mistake? Revert a payout here — commissions return to pending.</p>
    </header>

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

    <section class="commissions-card">
        @if($payouts->isEmpty())
            <p class="commissions-empty">No payouts recorded yet.</p>
        @else
            <div class="commissions-table-wrap">
                <table class="commissions-table">
                    <thead>
                        <tr>
                            <th>Paid at</th>
                            <th>Salesperson</th>
                            <th>Period</th>
                            <th>Commissions</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Recorded by</th>
                            <th>Notes</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($payouts as $payout)
                            <tr class="{{ $payout->isReverted() ? 'commissions-row--reverted' : '' }}">
                                <td>{{ $payout->paid_at?->timezone('America/New_York')->format('M j, Y g:i A') }}</td>
                                <td>{{ $payout->salesperson?->full_name }}</td>
                                <td>{{ $payout->periodLabel() }}</td>
                                <td>{{ $payout->commission_count }}</td>
                                <td class="commissions-amount">${{ number_format((float) $payout->total_amount, 2) }}</td>
                                <td>
                                    @if($payout->isReverted())
                                        <span class="commissions-badge commissions-badge--voided">Reverted</span>
                                        <div class="commissions-muted">{{ $payout->reverted_at?->timezone('America/New_York')->format('M j, Y') }}</div>
                                    @else
                                        <span class="commissions-badge commissions-badge--paid">Active</span>
                                    @endif
                                </td>
                                <td>
                                    {{ $payout->paidByUser?->displayLoginName() ?? '—' }}
                                    @if($payout->isReverted())
                                        <div class="commissions-muted">Reverted by {{ $payout->revertedByUser?->displayLoginName() ?? '—' }}</div>
                                    @endif
                                </td>
                                <td>{{ $payout->notes ?: '—' }}</td>
                                <td>
                                    @unless($payout->isReverted())
                                        <button type="button"
                                            class="commissions-btn commissions-btn--danger commissions-revert-payout-btn"
                                            data-action="{{ route('commissions.payouts.revert', $payout) }}"
                                            data-salesperson-name="{{ $payout->salesperson?->full_name }}"
                                            data-period-label="{{ $payout->periodLabel() }}"
                                            data-commission-count="{{ $payout->commission_count }}"
                                            data-total="{{ number_format((float) $payout->total_amount, 2, '.', '') }}">
                                            Revert
                                        </button>
                                    @else
                                        <span class="commissions-muted">—</span>
                                    @endunless
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{ $payouts->links() }}
        @endif
    </section>
</div>

@include('commissions.partials.revert-payout-dialog')
@endsection