<div x-data="{ activeTab: @entangle('activeTab') }">

    {{-- ─── Header ───────────────────────────────────────────────────────── --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ __('إدارة الرواتب') }}</h1>
            <p class="text-sm text-gray-500 mt-0.5">{{ __('إدارة دورات الرواتب وكشوف رواتب المدربين') }}</p>
        </div>
        @can('payroll.manage')
        <button
            wire:click="createPeriod"
            wire:loading.attr="disabled"
            wire:target="createPeriod"
            class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-60 transition-colors"
        >
            <span wire:loading.remove wire:target="createPeriod">
                <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="M12 4v16m8-8H4"/>
                </svg>
            </span>
            <span wire:loading wire:target="createPeriod">
                <svg class="w-5 h-5 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-8V0C5.373 0 0 5.373 0 12h4z"/>
                </svg>
            </span>
            <span wire:loading.remove wire:target="createPeriod">{{ __('فترة رواتب جديدة') }}</span>
            <span wire:loading wire:target="createPeriod">{{ __('جارٍ الإنشاء...') }}</span>
        </button>
        @endcan
    </div>

    {{-- ─── Flash Messages ───────────────────────────────────────────────── --}}
    @if(session('success'))
        <div class="mb-5 flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-xl text-green-800 text-sm">
            <svg class="w-5 h-5 shrink-0 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-5 flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-xl text-red-800 text-sm">
            <svg class="w-5 h-5 shrink-0 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- ─── Payroll Disabled Warning ──────────────────────────────────────── --}}
    @if(!$payrollEnabled)
    <div class="mb-6 p-6 bg-amber-50 border border-amber-200 rounded-xl">
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
                <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-base font-semibold text-amber-900">{{ __('نظام الرواتب غير مفعل') }}</h3>
                <p class="text-sm text-amber-700 mt-1">{{ __('يجب تفعيل نظام الرواتب من إعدادات النظام أو بالضغط على الزر أدناه. بعد التفعيل سيتم احتساب أجور المدربين تلقائياً عند تسجيل الحضور.') }}</p>
                <button wire:click="enablePayroll" wire:loading.attr="disabled" wire:target="enablePayroll"
                    class="mt-3 inline-flex items-center gap-2 px-4 py-2 bg-amber-600 text-white text-sm font-medium rounded-lg hover:bg-amber-700 disabled:opacity-60 transition-colors">
                    <span wire:loading.remove wire:target="enablePayroll">{{ __('تفعيل نظام الرواتب') }}</span>
                    <span wire:loading wire:target="enablePayroll">{{ __('جارٍ التفعيل...') }}</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    {{-- ─── Stats Row ────────────────────────────────────────────────────── --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">

        {{-- إجمالي الرواتب --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm font-medium text-gray-500">{{ __('إجمالي رواتب الفترة') }}</span>
                <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                    <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="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-2xl font-bold text-gray-900">{{ number_format($totalPayrollThisMonth / 100, 2) }}</p>
            <p class="text-xs text-gray-400 mt-1">{{ __('ج.م') }}</p>
        </div>

        {{-- بانتظار الموافقة --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm font-medium text-gray-500">{{ __('بانتظار الموافقة') }}</span>
                <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center">
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ $pendingApprovals }}</p>
            <p class="text-xs text-gray-400 mt-1">{{ __('كشف راتب') }}</p>
        </div>

        {{-- مدفوع هذا الشهر --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm font-medium text-gray-500">{{ __('مدفوع هذا الشهر') }}</span>
                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
                    <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                </div>
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($paidThisMonth / 100, 2) }}</p>
            <p class="text-xs text-gray-400 mt-1">{{ __('ج.م') }}</p>
        </div>

        {{-- مدربين نشطين --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm font-medium text-gray-500">{{ __('مدربين نشطين') }}</span>
                <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
                    <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ $activeTrainers }}</p>
            <p class="text-xs text-gray-400 mt-1">{{ __('مدرب') }}</p>
        </div>

    </div>

    {{-- ─── Tabs ─────────────────────────────────────────────────────────── --}}
    <div class="border-b border-gray-200 mb-5">
        <nav class="flex gap-1">
            <button
                @click="activeTab = 'periods'"
                :class="activeTab === 'periods'
                    ? 'border-b-2 border-blue-600 text-blue-600 font-semibold'
                    : 'text-gray-500 hover:text-gray-700'"
                class="px-4 py-3 text-sm transition-colors whitespace-nowrap"
            >
                {{ __('فترات الرواتب') }}
            </button>
            <button
                @click="activeTab = 'payslips'"
                :class="activeTab === 'payslips'
                    ? 'border-b-2 border-blue-600 text-blue-600 font-semibold'
                    : 'text-gray-500 hover:text-gray-700'"
                class="px-4 py-3 text-sm transition-colors whitespace-nowrap"
            >
                {{ __('كشوف الرواتب') }}
                @if($pendingApprovals > 0)
                    <span class="ms-1.5 inline-flex items-center justify-center w-5 h-5 rounded-full bg-amber-100 text-amber-700 text-xs font-bold">{{ $pendingApprovals }}</span>
                @endif
            </button>
        </nav>
    </div>

    {{-- ─────────────────────────────────────────────────────────────────── --}}
    {{-- TAB: Payroll Periods                                                --}}
    {{-- ─────────────────────────────────────────────────────────────────── --}}
    <div x-show="activeTab === 'periods'" x-cloak>

        {{-- Filter bar --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
            <div class="flex flex-col sm:flex-row gap-3">
                <select
                    wire:model.live="periodFilter"
                    class="w-full sm:w-56 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($periodStatuses as $s)
                        @php
                            $label = match($s->value) {
                                'open'        => 'مفتوحة',
                                'calculating' => 'جارٍ الاحتساب',
                                'review'      => 'قيد المراجعة',
                                'approved'    => 'موافق عليها',
                                'closed'      => 'مغلقة',
                                default       => $s->value,
                            };
                        @endphp
                        <option value="{{ $s->value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Periods 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" wire:target="periodFilter,calculatePeriod,approvePeriod,closePeriod,createPeriod">
                <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-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-center 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($periods as $period)
                            @php
                                $statusConfig = match($period->status->value) {
                                    'open'        => ['label' => 'مفتوحة',          'class' => 'bg-sky-100 text-sky-800'],
                                    'calculating' => ['label' => 'جارٍ الاحتساب',   'class' => 'bg-yellow-100 text-yellow-800'],
                                    'review'      => ['label' => 'قيد المراجعة',    'class' => 'bg-amber-100 text-amber-800'],
                                    'approved'    => ['label' => 'موافق عليها',     'class' => 'bg-blue-100 text-blue-800'],
                                    'closed'      => ['label' => 'مغلقة',           'class' => 'bg-gray-100 text-gray-600'],
                                    default       => ['label' => $period->status->value, 'class' => 'bg-gray-100 text-gray-600'],
                                };
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    <p class="font-medium text-gray-900">
                                        {{ $period->period_start->format('d/m/Y') }}
                                        <span class="text-gray-400 mx-1">←</span>
                                        {{ $period->period_end->format('d/m/Y') }}
                                    </p>
                                    <p class="text-xs text-gray-400 mt-0.5">
                                        {{ __('أُنشئت:') }} {{ $period->created_at->format('d/m/Y') }}
                                    </p>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusConfig['class'] }}">
                                        {{ $statusConfig['label'] }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-end font-medium text-gray-800">
                                    {{ $period->total_gross ? number_format($period->total_gross / 100, 2) . ' ج.م' : '-' }}
                                </td>
                                <td class="px-4 py-3 text-end font-semibold text-green-700">
                                    {{ $period->total_net ? number_format($period->total_net / 100, 2) . ' ج.م' : '-' }}
                                </td>
                                <td class="px-4 py-3 text-center text-gray-600">
                                    {{ $period->payslip_count ?? 0 }}
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-2">
                                        @if($period->status->value === 'open')
                                            <button
                                                wire:click="calculatePeriod({{ $period->id }})"
                                                wire:loading.attr="disabled"
                                                wire:target="calculatePeriod({{ $period->id }})"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 text-white text-xs font-medium rounded-lg hover:bg-blue-700 disabled:opacity-60 transition-colors"
                                            >
                                                <span wire:loading.remove wire:target="calculatePeriod({{ $period->id }})">{{ __('احتساب') }}</span>
                                                <span wire:loading wire:target="calculatePeriod({{ $period->id }})">{{ __('جارٍ...') }}</span>
                                            </button>
                                        @elseif($period->status->value === 'review')
                                            <button
                                                wire:click="approvePeriod({{ $period->id }})"
                                                wire:loading.attr="disabled"
                                                wire:target="approvePeriod({{ $period->id }})"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-600 text-white text-xs font-medium rounded-lg hover:bg-green-700 disabled:opacity-60 transition-colors"
                                            >
                                                <span wire:loading.remove wire:target="approvePeriod({{ $period->id }})">{{ __('اعتماد') }}</span>
                                                <span wire:loading wire:target="approvePeriod({{ $period->id }})">{{ __('جارٍ...') }}</span>
                                            </button>
                                        @elseif($period->status->value === 'approved')
                                            <button
                                                wire:click="closePeriod({{ $period->id }})"
                                                wire:loading.attr="disabled"
                                                wire:target="closePeriod({{ $period->id }})"
                                                class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-600 text-white text-xs font-medium rounded-lg hover:bg-gray-700 disabled:opacity-60 transition-colors"
                                            >
                                                <span wire:loading.remove wire:target="closePeriod({{ $period->id }})">{{ __('إغلاق') }}</span>
                                                <span wire:loading wire:target="closePeriod({{ $period->id }})">{{ __('جارٍ...') }}</span>
                                            </button>
                                        @elseif($period->status->value === 'closed')
                                            <span class="text-xs text-gray-400">{{ __('مغلقة') }}</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-4 py-16 text-center">
                                    <svg class="w-14 h-14 text-gray-200 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                                    <p class="font-semibold text-gray-500">{{ __('لا توجد فترات رواتب') }}</p>
                                    <p class="text-sm text-gray-400 mt-1">{{ __('اضغط على "فترة رواتب جديدة" لإنشاء الفترة الحالية') }}</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

    {{-- ─────────────────────────────────────────────────────────────────── --}}
    {{-- TAB: Payslips                                                       --}}
    {{-- ─────────────────────────────────────────────────────────────────── --}}
    <div x-show="activeTab === 'payslips'" x-cloak>

        {{-- Search & Filter bar --}}
        <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 xl:grid-cols-3 gap-3">
                <input
                    type="text"
                    wire:model.live.debounce.300ms="search"
                    placeholder="{{ __('بحث باسم المدرب...') }}"
                    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"
                >
                <select
                    wire:model.live="payslipStatus"
                    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($payslipStatuses as $s)
                        <option value="{{ $s->value }}">{{ $s->label() }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- Payslips 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" wire:target="search,payslipStatus,approvePayslip,confirmMarkPaid">
                <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($payslips as $payslip)
                            @php
                                $badgeClass = match($payslip->status->value) {
                                    'draft'            => 'bg-gray-100 text-gray-600',
                                    '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',
                                    default            => 'bg-gray-100 text-gray-600',
                                };
                            @endphp
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-3">
                                    <p class="font-medium text-gray-900">
                                        {{ $payslip->trainer?->employee?->person?->name_ar ?? $payslip->trainer?->person?->name_ar ?? '-' }}
                                    </p>
                                    <p class="text-xs text-gray-400 mt-0.5">
                                        {{ $payslip->trainer?->employee?->branch?->name_ar ?? '' }}
                                    </p>
                                </td>
                                <td class="px-4 py-3 text-gray-600 text-xs">
                                    @if($payslip->period)
                                        {{ $payslip->period->period_start->format('d/m/Y') }}
                                        <br>
                                        {{ $payslip->period->period_end->format('d/m/Y') }}
                                    @else
                                        <span class="text-gray-400">-</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 font-mono text-xs text-gray-600">
                                    {{ $payslip->payslip_number }}
                                </td>
                                <td class="px-4 py-3 text-end text-gray-800">
                                    {{ number_format($payslip->gross_amount / 100, 2) }} <span class="text-xs text-gray-400">ج.م</span>
                                </td>
                                <td class="px-4 py-3 text-end text-red-600">
                                    @if($payslip->total_deductions > 0)
                                        ({{ number_format($payslip->total_deductions / 100, 2) }}) <span class="text-xs text-red-400">ج.م</span>
                                    @else
                                        <span class="text-gray-400">-</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-end font-semibold text-green-700">
                                    {{ number_format($payslip->net_amount / 100, 2) }} <span class="text-xs text-green-500">ج.م</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium {{ $badgeClass }}">
                                        {{ $payslip->status->label() }}
                                    </span>
                                    @if($payslip->status->value === 'paid' && $payslip->paid_at)
                                        <p class="text-xs text-gray-400 mt-0.5">{{ $payslip->paid_at->format('d/m/Y') }}</p>
                                    @endif
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-2">
                                        @if(in_array($payslip->status->value, ['draft', 'pending_approval']))
                                            @can('payroll.manage')
                                            <button
                                                wire:click="approvePayslip({{ $payslip->id }})"
                                                wire:loading.attr="disabled"
                                                wire:target="approvePayslip({{ $payslip->id }})"
                                                class="inline-flex items-center gap-1 px-2.5 py-1 bg-blue-50 text-blue-700 border border-blue-200 text-xs font-medium rounded-lg hover:bg-blue-100 disabled:opacity-60 transition-colors"
                                            >
                                                <span wire:loading.remove wire:target="approvePayslip({{ $payslip->id }})">{{ __('اعتماد') }}</span>
                                                <span wire:loading wire:target="approvePayslip({{ $payslip->id }})">...</span>
                                            </button>
                                            @endcan
                                        @endif
                                        @if($payslip->status->value === 'approved')
                                            @can('payroll.manage')
                                            <button
                                                wire:click="openMarkPaidModal({{ $payslip->id }})"
                                                class="inline-flex items-center gap-1 px-2.5 py-1 bg-green-50 text-green-700 border border-green-200 text-xs font-medium rounded-lg hover:bg-green-100 transition-colors"
                                            >
                                                {{ __('تسجيل دفع') }}
                                            </button>
                                            @endcan
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-4 py-16 text-center">
                                    <svg class="w-14 h-14 text-gray-200 mx-auto mb-4" 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="font-semibold text-gray-500">{{ __('لا توجد كشوف رواتب') }}</p>
                                    <p class="text-sm text-gray-400 mt-1">
                                        @if($search || $payslipStatus)
                                            {{ __('لا توجد نتائج تطابق معايير البحث') }}
                                        @else
                                            {{ __('قم بإنشاء فترة رواتب واحتسابها لتوليد الكشوف') }}
                                        @endif
                                    </p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

    {{-- ─── Mark Paid Modal ──────────────────────────────────────────────── --}}
    @if($showMarkPaidModal)
        <div
            class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
            x-data
            @keydown.escape.window="$wire.closeModal()"
        >
            <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md 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-lg font-bold text-gray-900">{{ __('تسجيل دفع الراتب') }}</h3>
                    <button
                        wire:click="closeModal"
                        class="w-8 h-8 flex items-center justify-center 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">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">
                            {{ __('طريقة الدفع') }}
                            <span class="text-red-500">*</span>
                        </label>
                        <select
                            wire:model="markPaidMethod"
                            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>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">
                            {{ __('رقم المرجع / الإيصال') }}
                            <span class="text-gray-400 text-xs font-normal">({{ __('اختياري') }})</span>
                        </label>
                        <input
                            type="text"
                            wire:model="markPaidReference"
                            placeholder="{{ __('مثال: TXN-12345') }}"
                            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>
                </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
                        wire:click="closeModal"
                        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="confirmMarkPaid"
                        wire:loading.attr="disabled"
                        wire:target="confirmMarkPaid"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-60 transition-colors"
                    >
                        <span wire:loading.remove wire:target="confirmMarkPaid">
                            <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>
                        <span wire:loading wire:target="confirmMarkPaid">
                            <svg 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-8V0C5.373 0 0 5.373 0 12h4z"/>
                            </svg>
                        </span>
                        <span wire:loading.remove wire:target="confirmMarkPaid">{{ __('تأكيد الدفع') }}</span>
                        <span wire:loading wire:target="confirmMarkPaid">{{ __('جارٍ التسجيل...') }}</span>
                    </button>
                </div>

            </div>
        </div>
    @endif

</div>
