<div>
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div class="flex items-center gap-3">
            <a href="{{ route('trainers.list') }}" wire:navigate
               class="inline-flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 text-gray-500 transition-colors">
                <svg class="w-5 h-5 rotate-180 rtl:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-gray-900">
                    {{ $trainer->employee?->person?->name_ar ?? $trainer->person?->name_ar ?? __('مدرب غير معروف') }}
                </h1>
                <div class="flex items-center gap-2 mt-1">
                    <span class="text-sm text-gray-500">{{ __('تعويضات المدرب') }}</span>
                    @if($trainer->compensation_model)
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
                            {{ $trainer->compensation_model->label() }}
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Flash messages --}}
    @if(session('success'))
        <div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-800 text-sm">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-800 text-sm">
            {{ session('error') }}
        </div>
    @endif

    {{-- Summary Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {{-- Total Earnings --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-green-100">
                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('إجمالي المكاسب') }}</p>
                    <p class="text-lg font-bold text-green-700">{{ number_format($totalEarnings / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
            </div>
        </div>

        {{-- Total Penalties --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-red-100">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('إجمالي الخصومات') }}</p>
                    <p class="text-lg font-bold text-red-700">{{ number_format($totalPenalties / 100, 2) }} {{ __('ج.م') }}</p>
                </div>
            </div>
        </div>

        {{-- Net Amount --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-blue-100">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('الصافي') }}</p>
                    <p class="text-lg font-bold {{ $netAmount >= 0 ? 'text-blue-700' : 'text-red-700' }}">
                        {{ number_format($netAmount / 100, 2) }} {{ __('ج.م') }}
                    </p>
                </div>
            </div>
        </div>

        {{-- Sessions Count --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-center gap-3">
                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-purple-100">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-xs text-gray-500">{{ __('عدد الحصص') }}</p>
                    <p class="text-lg font-bold text-purple-700">{{ $sessionsCount }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Date Range + Filters --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            {{-- Date From --}}
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('من تاريخ') }}</label>
                <input type="date" wire:model.live="dateFrom" dir="ltr"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>

            {{-- Date To --}}
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('إلى تاريخ') }}</label>
                <input type="date" wire:model.live="dateTo" dir="ltr"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>

            {{-- Type Filter --}}
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('النوع') }}</label>
                <select wire:model.live="typeFilter"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">{{ __('كل الأنواع') }}</option>
                    @foreach($types as $type)
                        <option value="{{ $type->value }}">{{ $type->label() }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Status Filter --}}
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">{{ __('الحالة') }}</label>
                <select wire:model.live="statusFilter"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">{{ __('كل الحالات') }}</option>
                    @foreach($statuses as $status)
                        <option value="{{ $status->value }}">
                            @php
                                $labels = [
                                    'pending'  => 'قيد المراجعة',
                                    'approved' => 'معتمد',
                                    'disputed' => 'متنازع عليه',
                                    'paid'     => 'مدفوع',
                                    'cancelled'=> 'ملغي',
                                ];
                            @endphp
                            {{ $labels[$status->value] ?? $status->value }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-4 py-3 text-start font-semibold text-gray-600">{{ __('التاريخ') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-600">{{ __('النوع') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-600">{{ __('الوصف') }}</th>
                        <th class="px-4 py-3 text-end font-semibold text-gray-600">{{ __('الكمية') }}</th>
                        <th class="px-4 py-3 text-end font-semibold text-gray-600">{{ __('السعر') }}</th>
                        <th class="px-4 py-3 text-end font-semibold text-gray-600">{{ __('المبلغ') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-600">{{ __('الحالة') }}</th>
                        <th class="px-4 py-3 text-start font-semibold text-gray-600">{{ __('إجراءات') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($compensations as $record)
                        @php
                            $isPenalty = ! $record->type->isEarning();
                            $rowBg = $isPenalty ? 'bg-red-50' : '';
                        @endphp
                        <tr class="hover:bg-gray-50 {{ $rowBg }}">
                            {{-- Date --}}
                            <td class="px-4 py-3 text-gray-700 whitespace-nowrap" dir="ltr">
                                {{ $record->date->format('Y-m-d') }}
                            </td>

                            {{-- Type badge --}}
                            <td class="px-4 py-3">
                                @php
                                    $typeColors = [
                                        'session_pay'      => 'bg-blue-100 text-blue-800',
                                        'group_pay'        => 'bg-indigo-100 text-indigo-800',
                                        'player_pay'       => 'bg-cyan-100 text-cyan-800',
                                        'revenue_share'    => 'bg-teal-100 text-teal-800',
                                        'bonus'            => 'bg-green-100 text-green-800',
                                        'penalty'          => 'bg-red-100 text-red-800',
                                        'overtime'         => 'bg-yellow-100 text-yellow-800',
                                        'substitute'       => 'bg-purple-100 text-purple-800',
                                        'cancelled_session'=> 'bg-gray-100 text-gray-700',
                                    ];
                                    $typeColor = $typeColors[$record->type->value] ?? 'bg-gray-100 text-gray-700';
                                @endphp
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $typeColor }}">
                                    {{ $record->type->label() }}
                                </span>
                            </td>

                            {{-- Description --}}
                            <td class="px-4 py-3 text-gray-700 max-w-xs truncate" title="{{ $record->description }}">
                                {{ $record->description ?? '—' }}
                                @if($record->session)
                                    <span class="block text-xs text-gray-400 mt-0.5">
                                        {{ $record->session->name_ar ?? __('حصة') }} — {{ $record->session->scheduled_at?->format('H:i') }}
                                    </span>
                                @endif
                            </td>

                            {{-- Quantity --}}
                            <td class="px-4 py-3 text-end text-gray-700 tabular-nums" dir="ltr">
                                {{ number_format((float) $record->quantity, 2) }}
                            </td>

                            {{-- Rate --}}
                            <td class="px-4 py-3 text-end text-gray-700 tabular-nums whitespace-nowrap" dir="ltr">
                                {{ number_format($record->rate / 100, 2) }} {{ __('ج.م') }}
                            </td>

                            {{-- Amount --}}
                            <td class="px-4 py-3 text-end font-semibold whitespace-nowrap tabular-nums {{ $isPenalty ? 'text-red-700' : 'text-gray-900' }}" dir="ltr">
                                {{ $isPenalty ? '-' : '' }}{{ number_format($record->amount / 100, 2) }} {{ __('ج.م') }}
                            </td>

                            {{-- Status badge --}}
                            <td class="px-4 py-3">
                                @php
                                    $statusColors = [
                                        'pending'   => 'bg-amber-100 text-amber-800',
                                        'approved'  => 'bg-blue-100 text-blue-800',
                                        'disputed'  => 'bg-orange-100 text-orange-800',
                                        'paid'      => 'bg-green-100 text-green-800',
                                        'cancelled' => 'bg-gray-100 text-gray-600',
                                    ];
                                    $statusLabels = [
                                        'pending'   => 'قيد المراجعة',
                                        'approved'  => 'معتمد',
                                        'disputed'  => 'متنازع عليه',
                                        'paid'      => 'مدفوع',
                                        'cancelled' => 'ملغي',
                                    ];
                                    $statusColor = $statusColors[$record->status->value] ?? 'bg-gray-100 text-gray-600';
                                    $statusLabel = $statusLabels[$record->status->value] ?? $record->status->value;
                                @endphp
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $statusColor }}">
                                    {{ $statusLabel }}
                                </span>
                            </td>

                            {{-- Actions --}}
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    @if($record->status === \App\Domain\HR\Enums\CompensationStatus::Pending)
                                        <button wire:click="approveRecord({{ $record->id }})"
                                                wire:loading.attr="disabled"
                                                wire:target="approveRecord({{ $record->id }})"
                                                class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition-colors disabled:opacity-50">
                                            <span wire:loading.remove wire:target="approveRecord({{ $record->id }})">{{ __('اعتماد') }}</span>
                                            <span wire:loading wire:target="approveRecord({{ $record->id }})">{{ __('جارٍ...') }}</span>
                                        </button>
                                    @endif

                                    @if(in_array($record->status->value, ['pending', 'approved']))
                                        <button wire:click="disputeRecord({{ $record->id }})"
                                                wire:loading.attr="disabled"
                                                wire:target="disputeRecord({{ $record->id }})"
                                                class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-orange-50 text-orange-700 rounded-md hover:bg-orange-100 transition-colors disabled:opacity-50">
                                            <span wire:loading.remove wire:target="disputeRecord({{ $record->id }})">{{ __('اعتراض') }}</span>
                                            <span wire:loading wire:target="disputeRecord({{ $record->id }})">{{ __('جارٍ...') }}</span>
                                        </button>
                                    @endif

                                    @if($record->status === \App\Domain\HR\Enums\CompensationStatus::Approved)
                                        <span class="text-xs text-gray-400">
                                            {{ __('موافق') }}: {{ $record->approved_at?->format('d/m') }}
                                        </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-16 text-center">
                                <div class="flex flex-col items-center gap-3 text-gray-400">
                                    <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                    <p class="text-sm font-medium text-gray-500">{{ __('لا توجد سجلات تعويض') }}</p>
                                    <p class="text-xs text-gray-400">{{ __('لا توجد سجلات تعويض للمدرب في النطاق الزمني المحدد') }}</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($compensations->hasPages())
            <div class="px-4 py-3 border-t border-gray-200">
                {{ $compensations->links() }}
            </div>
        @endif
    </div>
</div>
