<div x-data="{ showPaymentModal: $wire.entangle('showPaymentModal') }">
    {{-- 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

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6">
        <div class="flex items-start gap-3">
            <a href="{{ route('trainers.list') }}" wire:navigate
               class="inline-flex items-center justify-center w-9 h-9 mt-1 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 text-gray-500 transition-colors flex-shrink-0">
                <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>
                <div class="flex items-center gap-3 flex-wrap">
                    <h1 class="text-2xl font-bold text-gray-900" dir="ltr">
                        {{ $payslip->payslip_number }}
                    </h1>
                    @php
                        $statusColors = [
                            'draft'            => 'bg-gray-100 text-gray-700',
                            'pending_approval' => 'bg-amber-100 text-amber-800',
                            'approved'         => 'bg-blue-100 text-blue-800',
                            'paid'             => 'bg-green-100 text-green-800',
                            'cancelled'        => 'bg-red-100 text-red-800',
                        ];
                        $statusColor = $statusColors[$payslip->status->value] ?? 'bg-gray-100 text-gray-700';
                    @endphp
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium {{ $statusColor }}">
                        {{ $payslip->status->label() }}
                    </span>
                </div>
                <p class="mt-1 text-gray-600">
                    {{ $payslip->trainer->employee?->person?->name_ar ?? $payslip->trainer->person?->name_ar ?? __('مدرب غير معروف') }}
                </p>
                @if($payslip->period)
                    <p class="text-sm text-gray-400 mt-0.5" dir="ltr">
                        {{ \Carbon\Carbon::parse($payslip->period->period_start)->format('Y-m-d') }}
                        &mdash;
                        {{ \Carbon\Carbon::parse($payslip->period->period_end)->format('Y-m-d') }}
                    </p>
                @endif
            </div>
        </div>

        {{-- Action Buttons --}}
        <div class="flex items-center gap-2 flex-shrink-0">
            @if(in_array($payslip->status->value, ['draft', 'pending_approval']))
                <button wire:click="approve"
                        wire:loading.attr="disabled"
                        wire:target="approve"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50">
                    <span wire:loading.remove wire:target="approve">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </span>
                    <svg wire:loading wire:target="approve" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
                    </svg>
                    <span wire:loading.remove wire:target="approve">{{ __('اعتماد الكشف') }}</span>
                    <span wire:loading wire:target="approve">{{ __('جارٍ الاعتماد...') }}</span>
                </button>
            @endif

            @if($payslip->status->value === 'approved')
                <button @click="showPaymentModal = true"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                    {{ __('تسجيل الدفع') }}
                </button>
            @endif
        </div>
    </div>

    {{-- Summary Section --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        {{-- Gross Amount --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <p class="text-sm text-gray-500 mb-1">{{ __('الإجمالي') }}</p>
            <p class="text-2xl font-bold text-gray-900 tabular-nums" dir="ltr">
                {{ number_format($payslip->gross_amount / 100, 2) }}
                <span class="text-base font-normal text-gray-500">{{ __('ج.م') }}</span>
            </p>
            @if($payslip->base_amount > 0)
                <p class="text-xs text-gray-400 mt-1">
                    {{ __('راتب أساسي:') }} {{ number_format($payslip->base_amount / 100, 2) }} {{ __('ج.م') }}
                </p>
            @endif
        </div>

        {{-- Total Deductions --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <p class="text-sm text-gray-500 mb-1">{{ __('الاستقطاعات') }}</p>
            <p class="text-2xl font-bold text-red-700 tabular-nums" dir="ltr">
                {{ number_format($payslip->total_deductions / 100, 2) }}
                <span class="text-base font-normal text-gray-500">{{ __('ج.م') }}</span>
            </p>
            @if($payslip->advances_deducted > 0)
                <p class="text-xs text-gray-400 mt-1">
                    {{ __('يشمل سلف:') }} {{ number_format($payslip->advances_deducted / 100, 2) }} {{ __('ج.م') }}
                </p>
            @endif
        </div>

        {{-- Net Amount --}}
        <div class="bg-blue-600 rounded-xl shadow-sm p-5">
            <p class="text-sm text-blue-200 mb-1">{{ __('الصافي المستحق') }}</p>
            <p class="text-3xl font-bold text-white tabular-nums" dir="ltr">
                {{ number_format($payslip->net_amount / 100, 2) }}
                <span class="text-lg font-normal text-blue-200">{{ __('ج.م') }}</span>
            </p>
            @if($payslip->status->value === 'paid' && $payslip->paid_at)
                <p class="text-xs text-blue-200 mt-1">
                    {{ __('مدفوع في:') }} {{ \Carbon\Carbon::parse($payslip->paid_at)->format('Y-m-d') }}
                </p>
            @endif
        </div>
    </div>

    {{-- Earnings Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-4 overflow-hidden">
        <div class="px-5 py-4 border-b border-gray-200 bg-gray-50">
            <h2 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                <svg class="w-4 h-4 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>
                {{ __('المكاسب') }}
            </h2>
        </div>

        @if($earningItems->isNotEmpty())
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-5 py-2.5 text-start font-medium text-gray-500">{{ __('البند') }}</th>
                        <th class="px-5 py-2.5 text-end font-medium text-gray-500">{{ __('الكمية') }}</th>
                        <th class="px-5 py-2.5 text-end font-medium text-gray-500">{{ __('السعر') }}</th>
                        <th class="px-5 py-2.5 text-end font-medium text-gray-500">{{ __('المبلغ') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($earningItems as $item)
                        <tr class="hover:bg-gray-50">
                            <td class="px-5 py-3 text-gray-800">
                                {{ $item->description }}
                                @if($item->type)
                                    <span class="ms-2 text-xs text-gray-400">({{ $item->type->label() }})</span>
                                @endif
                            </td>
                            <td class="px-5 py-3 text-end text-gray-600 tabular-nums" dir="ltr">
                                {{ number_format((float) $item->quantity, 2) }}
                            </td>
                            <td class="px-5 py-3 text-end text-gray-600 tabular-nums whitespace-nowrap" dir="ltr">
                                @if($item->rate > 0)
                                    {{ number_format($item->rate / 100, 2) }} {{ __('ج.م') }}
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-5 py-3 text-end font-semibold text-gray-900 tabular-nums whitespace-nowrap" dir="ltr">
                                {{ number_format($item->amount / 100, 2) }} {{ __('ج.م') }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot class="bg-green-50 border-t-2 border-green-200">
                    <tr>
                        <td colspan="3" class="px-5 py-3 text-sm font-semibold text-green-800">{{ __('إجمالي المكاسب') }}</td>
                        <td class="px-5 py-3 text-end text-sm font-bold text-green-800 tabular-nums whitespace-nowrap" dir="ltr">
                            {{ number_format($earningItems->sum('amount') / 100, 2) }} {{ __('ج.م') }}
                        </td>
                    </tr>
                </tfoot>
            </table>
        @else
            <div class="px-5 py-10 text-center text-sm text-gray-400">
                {{ __('لا توجد بنود مكاسب في هذا الكشف') }}
            </div>
        @endif
    </div>

    {{-- Deductions Table --}}
    <div class="bg-white rounded-xl shadow-sm border border-red-100 mb-6 overflow-hidden">
        <div class="px-5 py-4 border-b border-red-100 bg-red-50">
            <h2 class="text-sm font-semibold text-red-700 flex items-center gap-2">
                <svg class="w-4 h-4 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>
                {{ __('الاستقطاعات') }}
            </h2>
        </div>

        @if($deductionItems->isNotEmpty())
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-5 py-2.5 text-start font-medium text-gray-500">{{ __('البند') }}</th>
                        <th class="px-5 py-2.5 text-end font-medium text-gray-500">{{ __('الكمية') }}</th>
                        <th class="px-5 py-2.5 text-end font-medium text-gray-500">{{ __('السعر') }}</th>
                        <th class="px-5 py-2.5 text-end font-medium text-gray-500">{{ __('المبلغ') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($deductionItems as $item)
                        <tr class="hover:bg-red-50">
                            <td class="px-5 py-3 text-gray-800">
                                {{ $item->description }}
                                @if($item->type)
                                    <span class="ms-2 text-xs text-gray-400">({{ $item->type->label() }})</span>
                                @endif
                            </td>
                            <td class="px-5 py-3 text-end text-gray-600 tabular-nums" dir="ltr">
                                {{ number_format((float) $item->quantity, 2) }}
                            </td>
                            <td class="px-5 py-3 text-end text-gray-600 tabular-nums whitespace-nowrap" dir="ltr">
                                @if($item->rate > 0)
                                    {{ number_format($item->rate / 100, 2) }} {{ __('ج.م') }}
                                @else
                                    —
                                @endif
                            </td>
                            <td class="px-5 py-3 text-end font-semibold text-red-700 tabular-nums whitespace-nowrap" dir="ltr">
                                -{{ number_format($item->amount / 100, 2) }} {{ __('ج.م') }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot class="bg-red-50 border-t-2 border-red-200">
                    <tr>
                        <td colspan="3" class="px-5 py-3 text-sm font-semibold text-red-800">{{ __('إجمالي الاستقطاعات') }}</td>
                        <td class="px-5 py-3 text-end text-sm font-bold text-red-800 tabular-nums whitespace-nowrap" dir="ltr">
                            -{{ number_format($deductionItems->sum('amount') / 100, 2) }} {{ __('ج.م') }}
                        </td>
                    </tr>
                </tfoot>
            </table>
        @else
            <div class="px-5 py-10 text-center text-sm text-gray-400">
                {{ __('لا توجد استقطاعات في هذا الكشف') }}
            </div>
        @endif
    </div>

    {{-- Paid info card (when already paid) --}}
    @if($payslip->status->value === 'paid')
        <div class="bg-green-50 border border-green-200 rounded-xl p-5 mb-6">
            <h3 class="text-sm font-semibold text-green-800 mb-3 flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                {{ __('تفاصيل الدفع') }}
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <p class="text-xs text-green-600">{{ __('طريقة الدفع') }}</p>
                    <p class="text-sm font-medium text-green-900 mt-0.5">
                        {{ $payslip->payment_method?->label() ?? '—' }}
                    </p>
                </div>
                <div>
                    <p class="text-xs text-green-600">{{ __('المرجع') }}</p>
                    <p class="text-sm font-medium text-green-900 mt-0.5" dir="ltr">
                        {{ $payslip->payment_reference ?? '—' }}
                    </p>
                </div>
                <div>
                    <p class="text-xs text-green-600">{{ __('تاريخ الدفع') }}</p>
                    <p class="text-sm font-medium text-green-900 mt-0.5" dir="ltr">
                        {{ $payslip->paid_at ? \Carbon\Carbon::parse($payslip->paid_at)->format('Y-m-d H:i') : '—' }}
                    </p>
                </div>
            </div>
        </div>
    @endif

    {{-- Metadata Footer --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3">{{ __('معلومات إضافية') }}</h3>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
            <div>
                <p class="text-xs text-gray-400">{{ __('تاريخ الإنشاء') }}</p>
                <p class="text-gray-700 mt-0.5" dir="ltr">{{ $payslip->created_at->format('Y-m-d H:i') }}</p>
            </div>
            @if($payslip->approver)
                <div>
                    <p class="text-xs text-gray-400">{{ __('اعتمد من قِبَل') }}</p>
                    <p class="text-gray-700 mt-0.5">{{ $payslip->approver->name }}</p>
                    @if($payslip->approved_at)
                        <p class="text-xs text-gray-400 mt-0.5" dir="ltr">{{ \Carbon\Carbon::parse($payslip->approved_at)->format('Y-m-d H:i') }}</p>
                    @endif
                </div>
            @endif
            @if($payslip->notes)
                <div>
                    <p class="text-xs text-gray-400">{{ __('ملاحظات') }}</p>
                    <p class="text-gray-700 mt-0.5">{{ $payslip->notes }}</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Payment Modal --}}
    <div x-show="showPaymentModal"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 flex items-center justify-center"
         style="display: none;">

        {{-- Backdrop --}}
        <div class="absolute inset-0 bg-gray-900/50 backdrop-blur-sm" @click="showPaymentModal = false"></div>

        {{-- Modal Panel --}}
        <div x-show="showPaymentModal"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95 translate-y-2"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100 translate-y-0"
             x-transition:leave-end="opacity-0 scale-95 translate-y-2"
             class="relative w-full max-w-md bg-white rounded-2xl shadow-xl mx-4 overflow-hidden">

            {{-- Modal Header --}}
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                <h3 class="text-base font-semibold text-gray-900">{{ __('تسجيل دفع الراتب') }}</h3>
                <button @click="showPaymentModal = false"
                        class="inline-flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {{-- Modal Body --}}
            <div class="px-6 py-5 space-y-4">
                {{-- Net amount reminder --}}
                <div class="bg-blue-50 rounded-lg px-4 py-3 flex items-center justify-between">
                    <span class="text-sm text-blue-700">{{ __('المبلغ المستحق') }}</span>
                    <span class="text-lg font-bold text-blue-900 tabular-nums" dir="ltr">
                        {{ number_format($payslip->net_amount / 100, 2) }} {{ __('ج.م') }}
                    </span>
                </div>

                {{-- Payment Method --}}
                <div>
                    <label for="paymentMethod" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('طريقة الدفع') }}
                        <span class="text-red-500 ms-0.5">*</span>
                    </label>
                    <select id="paymentMethod"
                            wire:model="paymentMethod"
                            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">
                        @foreach($paymentMethods as $method)
                            <option value="{{ $method->value }}">{{ $method->label() }}</option>
                        @endforeach
                    </select>
                    @error('paymentMethod')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Payment Reference --}}
                <div>
                    <label for="paymentReference" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('رقم المرجع / الإيصال') }}
                        <span class="text-xs text-gray-400 ms-1">({{ __('اختياري') }})</span>
                    </label>
                    <input type="text"
                           id="paymentReference"
                           wire:model="paymentReference"
                           placeholder="{{ __('مثال: TXN-20240105-001') }}"
                           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 placeholder:text-gray-400">
                    @error('paymentReference')
                        <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Modal Footer --}}
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50">
                <button @click="showPaymentModal = false"
                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                    {{ __('إلغاء') }}
                </button>
                <button wire:click="processPayment"
                        wire:loading.attr="disabled"
                        wire:target="processPayment"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50">
                    <svg wire:loading wire:target="processPayment" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
                    </svg>
                    <span wire:loading.remove wire:target="processPayment">{{ __('تأكيد الدفع') }}</span>
                    <span wire:loading wire:target="processPayment">{{ __('جارٍ التسجيل...') }}</span>
                </button>
            </div>
        </div>
    </div>
</div>
