{{-- Settle a participant's account. RTL: logical properties only. --}}
<div class="max-w-6xl mx-auto px-3 sm:px-4 py-4 sm:py-6" dir="rtl">

    <div class="mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('تسوية حساب مشترك') }}</h1>
        <p class="mt-1 text-sm text-gray-500">
            {{ __('دفعات سابقة لم تُسجَّل، شهور تُغلق بأقل من قيمتها، شهور تُسقط، منتجات بيعت خارج السيستم — كلها في تسوية واحدة موثّقة.') }}
        </p>
    </div>

    {{-- Steps --}}
    <div class="mb-5 bg-white border border-gray-200 rounded-xl p-3 sm:p-4">
        <div class="flex items-center gap-2 sm:gap-4">
            @foreach ([1 => 'المشترك', 2 => 'الحساب والإجراءات', 3 => 'المراجعة', 4 => 'تم'] as $n => $label)
                <div class="flex items-center gap-2 {{ $n < 4 ? 'flex-1' : '' }}">
                    <span @class([
                        'w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0',
                        'bg-emerald-500 text-white' => $currentStep > $n,
                        'bg-amber-500 text-white' => $currentStep === $n,
                        'bg-gray-200 text-gray-500' => $currentStep < $n,
                    ])>{{ $currentStep > $n ? '✓' : $n }}</span>
                    <span class="text-xs sm:text-sm {{ $currentStep === $n ? 'font-bold text-gray-900' : 'text-gray-500' }}">{{ __($label) }}</span>
                    @if($n < 4)<div class="flex-1 h-px bg-gray-200"></div>@endif
                </div>
            @endforeach
        </div>
    </div>

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

    {{-- ================= STEP 1 : find the participant ================= --}}
    @if($currentStep === 1)
        <div class="bg-white border border-gray-200 rounded-xl p-4 sm:p-5">
            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('ابحث بالاسم أو رقم الهاتف') }}</label>
            <input type="text" wire:model.live.debounce.400ms="search"
                   placeholder="{{ __('اسم المشترك أو رقم ولي الأمر...') }}"
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500">

            <div class="mt-4 divide-y divide-gray-100">
                @forelse($results as $row)
                    <button type="button" wire:click="selectParticipant({{ $row->id }})"
                            class="w-full text-start py-3 px-2 hover:bg-amber-50 rounded-lg transition flex items-center justify-between gap-3">
                        <span>
                            <span class="block text-sm font-medium text-gray-900">{{ $row->person?->name_ar }}</span>
                            <span class="block text-xs text-gray-500">
                                {{ $row->enrollments->first()?->program?->name_ar ?? __('بدون برنامج') }}
                                @if($row->person?->phone) · <span dir="ltr">{{ $row->person->phone }}</span>@endif
                            </span>
                        </span>
                        <span class="text-xs text-amber-700 font-medium">{{ __('فتح الحساب') }}</span>
                    </button>
                @empty
                    <p class="py-6 text-center text-sm text-gray-400">
                        {{ mb_strlen(trim($search)) >= 2 ? __('لا توجد نتائج') : __('اكتب حرفين على الأقل للبحث') }}
                    </p>
                @endforelse
            </div>

            <div class="mt-4 pt-4 border-t border-gray-100">
                <a href="{{ route('admin.settlement-worklist') }}" wire:navigate
                   class="text-sm text-amber-700 hover:text-amber-900 font-medium">
                    {{ __('أو استعرض كل الحالات التي تحتاج تسوية ←') }}
                </a>
            </div>
        </div>
    @endif

    {{-- ================= STEP 2 : the account ================= --}}
    @if($currentStep === 2 && $this->participant)
        @php
            $diagnosis = $this->diagnosis;
            $money = $diagnosis['money'];
            $cases = \App\Domain\Financial\Services\AccountAnomalyScanner::CASES;
        @endphp

        <div class="bg-white border border-gray-200 rounded-xl p-4 sm:p-5 mb-4">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div>
                    <h2 class="text-lg font-bold text-gray-900">{{ $this->participant->person?->name_ar }}</h2>
                    <p class="text-xs text-gray-500 mt-0.5">
                        {{ $this->participant->enrollments->first()?->program?->name_ar ?? __('بدون برنامج') }}
                        · {{ $this->participant->membership_type?->label() ?? __('غير محدد') }}
                        @if($this->participant->person?->phone) · <span dir="ltr">{{ $this->participant->person->phone }}</span>@endif
                    </p>
                </div>
                <button type="button" wire:click="startOver" class="text-xs text-gray-500 hover:text-gray-800">{{ __('مشترك آخر') }}</button>
            </div>

            <div class="mt-4 grid grid-cols-2 sm:grid-cols-4 gap-3">
                @foreach ([
                    ['إجمالي ما فُوتِر', $money['billed'] ?? 0, 'text-gray-900'],
                    ['المحصَّل', $money['paid'] ?? 0, 'text-emerald-700'],
                    ['المتبقي', $money['owed'] ?? 0, 'text-red-700'],
                ] as [$label, $value, $class])
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <p class="text-[11px] text-gray-500">{{ __($label) }}</p>
                        <p class="text-base font-bold {{ $class }} tabular-nums" dir="ltr">{{ format_money($value) }}</p>
                    </div>
                @endforeach
                <div class="p-3 bg-gray-50 rounded-lg">
                    <p class="text-[11px] text-gray-500">{{ __('فواتير غير مسددة') }}</p>
                    <p class="text-base font-bold text-gray-900 tabular-nums">
                        {{ $money['unpaid'] ?? 0 }}
                        @if(($money['overdue'] ?? 0) > 0)
                            <span class="text-xs font-normal text-red-700">({{ $money['overdue'] }} {{ __('متأخرة') }})</span>
                        @endif
                    </p>
                    {{-- A renewal issued this month and not yet due is ordinary
                         business; only what is past its date is counted late. --}}
                </div>
            </div>
        </div>

        {{-- What the system thinks is wrong --}}
        @php
            $flags = [];
            if (($money['paid'] ?? 0) === 0 && ($money['overdue'] ?? 0) > 0) $flags[] = 'never_paid';
            if (($money['overdue'] ?? 0) >= 2) $flags[] = 'stacked_unpaid';
            if (($money['zero_invoices'] ?? 0) > 0) $flags[] = 'zero_invoice';
            if (!empty($diagnosis['handtyped'])) $flags[] = 'handtyped_product';
            if (!empty($diagnosis['missing_bundle'])) $flags[] = 'missing_bundle';
            if (!empty($diagnosis['partial_bundle'])) $flags[] = 'partial_bundle';
            if (!empty($diagnosis['unbilled_months'])) $flags[] = 'unbilled_month';
            if (!empty($diagnosis['duplicate_of'])) $flags[] = 'duplicate_person';
        @endphp
        @if($flags)
            <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-4">
                <h3 class="text-sm font-bold text-amber-900 mb-2">{{ __('ما رصده النظام على هذا الحساب') }}</h3>
                <ul class="space-y-1.5">
                    @foreach($flags as $flag)
                        <li class="text-xs text-amber-900 flex gap-2">
                            <span class="font-bold shrink-0">{{ $cases[$flag]['label'] }}:</span>
                            <span class="text-amber-800">{{ $cases[$flag]['hint'] }}</span>
                        </li>
                    @endforeach
                </ul>
                @if(!empty($diagnosis['duplicate_of']))
                    <p class="mt-2 text-xs text-amber-900">
                        {{ __('سجلات أخرى بنفس الاسم:') }}
                        @foreach($diagnosis['duplicate_of'] as $dup)
                            <a href="{{ route('admin.account-settlement', ['participant' => $dup['id']]) }}" class="underline">#{{ $dup['id'] }}</a>
                        @endforeach
                        — {{ __('الدمج يتم من شاشة المشتركين؛ سوِّ كل سجل على حدة حتى ذلك الحين.') }}
                    </p>
                @endif
            </div>
        @endif

        {{-- Invoices --}}
        <div class="bg-white border border-gray-200 rounded-xl overflow-hidden mb-4">
            <div class="px-4 py-3 border-b border-gray-100">
                <h3 class="text-sm font-bold text-gray-900">{{ __('الفواتير') }}</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-xs text-gray-600">
                        <tr>
                            <th class="px-3 py-2 text-start font-medium">{{ __('الفاتورة') }}</th>
                            <th class="px-3 py-2 text-start font-medium">{{ __('البيان') }}</th>
                            <th class="px-3 py-2 text-center font-medium">{{ __('التاريخ') }}</th>
                            <th class="px-3 py-2 text-center font-medium">{{ __('الإجمالي') }}</th>
                            <th class="px-3 py-2 text-center font-medium">{{ __('المحصَّل') }}</th>
                            <th class="px-3 py-2 text-center font-medium">{{ __('المتبقي') }}</th>
                            <th class="px-3 py-2 text-center font-medium">{{ __('إجراء') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($this->invoices as $invoice)
                            <tr class="{{ $invoice->due_amount > 0 ? 'bg-red-50/40' : '' }}">
                                <td class="px-3 py-2 font-medium text-gray-800" dir="ltr">{{ $invoice->number }}</td>
                                <td class="px-3 py-2 text-gray-600 text-xs">{{ $invoice->notes ?: $invoice->items->first()?->description }}</td>
                                <td class="px-3 py-2 text-center text-xs text-gray-500" dir="ltr">{{ $invoice->issue_date?->format('Y-m-d') }}</td>
                                <td class="px-3 py-2 text-center tabular-nums" dir="ltr">{{ format_money($invoice->total_amount) }}</td>
                                <td class="px-3 py-2 text-center tabular-nums text-emerald-700" dir="ltr">{{ format_money($invoice->paid_amount) }}</td>
                                <td class="px-3 py-2 text-center tabular-nums font-bold {{ $invoice->due_amount > 0 ? 'text-red-700' : 'text-gray-400' }}" dir="ltr">
                                    {{ format_money($invoice->due_amount) }}
                                </td>
                                <td class="px-3 py-2">
                                    @if($invoice->due_amount > 0)
                                        <div class="flex flex-wrap gap-1 justify-center">
                                            <button type="button" class="px-2 py-1 text-[11px] rounded bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200"
                                                    wire:click="startDraft('record_payment', {{ \Illuminate\Support\Js::from(['invoice_id' => $invoice->id, 'invoice_number' => $invoice->number, 'due' => $invoice->due_amount, 'issue_date' => $invoice->issue_date?->format('Y-m-d')]) }})">
                                                {{ __('دفعة سابقة') }}
                                            </button>
                                            <button type="button" class="px-2 py-1 text-[11px] rounded bg-amber-50 text-amber-700 hover:bg-amber-100 border border-amber-200"
                                                    wire:click="startDraft('settle_short', {{ \Illuminate\Support\Js::from(['invoice_id' => $invoice->id, 'invoice_number' => $invoice->number, 'due' => $invoice->due_amount, 'issue_date' => $invoice->issue_date?->format('Y-m-d')]) }})">
                                                {{ __('إغلاق بمبلغ') }}
                                            </button>
                                            <button type="button" class="px-2 py-1 text-[11px] rounded bg-red-50 text-red-700 hover:bg-red-100 border border-red-200"
                                                    wire:click="startDraft('waive_invoice', {{ \Illuminate\Support\Js::from(['invoice_id' => $invoice->id, 'invoice_number' => $invoice->number, 'due' => $invoice->due_amount]) }})">
                                                {{ __('إسقاط') }}
                                            </button>
                                            <button type="button" class="px-2 py-1 text-[11px] rounded bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border border-indigo-200"
                                                    wire:click="startDraft('plan_installments', {{ \Illuminate\Support\Js::from(['invoice_id' => $invoice->id, 'invoice_number' => $invoice->number, 'total' => $invoice->total_amount]) }})">
                                                {{ __('أقساط') }}
                                            </button>
                                        </div>
                                    @else
                                        <span class="block text-center text-[11px] text-gray-400">{{ __('مسددة') }}</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-3 py-6 text-center text-sm text-gray-400">{{ __('لا توجد فواتير') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Hand-typed product money --}}
        @if(!empty($diagnosis['handtyped']))
            <div class="bg-white border border-gray-200 rounded-xl p-4 mb-4">
                <h3 class="text-sm font-bold text-gray-900 mb-1">{{ __('بنود مكتوبة يدوياً تخص منتجاً') }}</h3>
                <p class="text-xs text-gray-500 mb-3">{{ __('المال مسجَّل بالفعل — الناقص هو ربط البند بالمنتج حتى تراه تقارير المنتجات والمخزون.') }}</p>
                <ul class="space-y-2">
                    @foreach($diagnosis['handtyped'] as $line)
                        <li class="flex flex-wrap items-center justify-between gap-2 p-2 bg-gray-50 rounded-lg">
                            <span class="text-xs text-gray-700">
                                <span dir="ltr" class="font-medium">{{ $line['invoice_number'] }}</span> —
                                «{{ $line['description'] }}» · <span dir="ltr">{{ format_money($line['amount']) }}</span>
                            </span>
                            <button type="button" class="px-2 py-1 text-[11px] rounded bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200"
                                    wire:click="startDraft('link_line', {{ \Illuminate\Support\Js::from($line) }})">
                                {{ __('ربط بـ') }} {{ $line['product_name'] }}
                            </button>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Months nobody billed --}}
        @if(!empty($diagnosis['unbilled_months']))
            <div class="bg-white border border-gray-200 rounded-xl p-4 mb-4">
                <h3 class="text-sm font-bold text-gray-900 mb-1">{{ __('شهور بلا فاتورة') }}</h3>
                <p class="text-xs text-gray-500 mb-3">{{ __('شهور بين بداية الاشتراك والشهر الماضي لم تصدر لها فاتورة اشتراك.') }}</p>
                <div class="flex flex-wrap gap-2">
                    @foreach($diagnosis['unbilled_months'] as $m)
                        <button type="button" class="px-2.5 py-1.5 text-xs rounded-lg bg-gray-50 border border-gray-200 hover:bg-amber-50 hover:border-amber-200"
                                wire:click="startDraft('bill_month', {{ \Illuminate\Support\Js::from($m) }})">
                            {{ $m['label'] }} <span class="text-gray-400">· {{ $m['program'] }}</span>
                        </button>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Where he stands on what the programme requires --}}
        @if(!empty($diagnosis['bundle_status']))
            <div class="bg-white border border-gray-200 rounded-xl p-4 mb-4">
                <h3 class="text-sm font-bold text-gray-900 mb-1">{{ __('مستلزمات البرنامج') }}</h3>
                <p class="text-xs text-gray-500 mb-3">
                    {{ __('يُحتسب المدفوع من الفواتير المجمّعة أيضاً — لو دفع القسط ضمن فاتورة فيها الزي، حصته من الدفع محسوبة هنا.') }}
                </p>
                <ul class="space-y-2">
                    @foreach($diagnosis['bundle_status'] as $bundle)
                        @php
                            $percent = $bundle['expected'] > 0
                                ? min(100, (int) round($bundle['paid'] * 100 / $bundle['expected']))
                                : 0;
                            $remaining = max(0, $bundle['expected'] - $bundle['paid']);
                        @endphp
                        @php $overBilled = $bundle['over_billed'] ?? 0; @endphp
                        <li class="p-3 rounded-lg border {{ $overBilled > 0 ? 'border-rose-300 bg-rose-50/60' : ($bundle['status'] === 'paid' ? 'border-emerald-200 bg-emerald-50/50' : ($bundle['status'] === 'partial' ? 'border-amber-200 bg-amber-50/50' : 'border-red-200 bg-red-50/40')) }}">
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-gray-900">{{ $bundle['product_name'] }}</p>
                                    <p class="text-xs mt-0.5 {{ $bundle['status'] === 'paid' ? 'text-emerald-700' : ($bundle['status'] === 'partial' ? 'text-amber-700' : 'text-red-700') }}">
                                        @if($bundle['status'] === 'paid')
                                            {{ __('مدفوع بالكامل') }}
                                        @elseif($bundle['status'] === 'partial')
                                            {{ __('سدد') }} <span dir="ltr">{{ format_money($bundle['paid']) }}</span>
                                            {{ __('من') }} <span dir="ltr">{{ format_money($bundle['expected']) }}</span>
                                            ({{ $percent }}%) — {{ __('متبقٍ') }} <span dir="ltr">{{ format_money($remaining) }}</span>
                                        @else
                                            {{ __('لا يوجد له أي مبلغ') }} · <span dir="ltr">{{ format_money($bundle['price']) }}</span>
                                        @endif
                                        @if($bundle['from_text'])
                                            <span class="text-gray-500">· {{ __('مسجَّل كبند يدوي') }}@if($bundle['inferred']) ({{ __('قسط بلا اسم') }})@endif</span>
                                        @endif
                                    </p>
                                </div>
                                {{-- While the account is billed above the card's price, selling the
                                     "rest" would add a third demand on top of a duplicated one. The
                                     excess comes off first; what is genuinely still owed is only
                                     knowable afterwards. --}}
                                @if($bundle['status'] !== 'paid' && $overBilled === 0)
                                    <button type="button" class="px-2.5 py-1.5 text-xs rounded-lg bg-white border border-gray-300 hover:bg-amber-50 hover:border-amber-300 shrink-0"
                                            wire:click="startDraft('sell_product', {{ \Illuminate\Support\Js::from(['product_id' => $bundle['product_id'], 'price' => $remaining ?: $bundle['price']]) }})">
                                        {{ $bundle['status'] === 'partial' ? __('تسجيل باقي القيمة') : __('تسجيل البيع') }}
                                    </button>
                                @endif
                            </div>
                            @if($overBilled > 0)
                                @php
                                    $fix = collect($this->overBilledFixes)->firstWhere('product_name', $bundle['product_name']);
                                @endphp
                                <div class="mt-2 text-xs text-rose-900 bg-rose-100/70 border border-rose-200 rounded-lg px-2.5 py-2">
                                    <p class="font-bold mb-1">{{ __('محاسَب بأكثر من سعره') }}</p>
                                    <p>
                                        {{ __('البنود المكتوبة تساوي') }} <span dir="ltr" class="font-bold">{{ format_money($bundle['billed']) }}</span>
                                        {{ __('بينما سعر المستلزم') }} <span dir="ltr" class="font-bold">{{ format_money($bundle['price']) }}</span> —
                                        {{ __('زيادة') }} <span dir="ltr" class="font-bold">{{ format_money($overBilled) }}</span>.
                                        {{ __('غالباً قسط أُدخل مرتين، أو تصحيح أضاف فاتورة بدل أن يحل محل القديمة.') }}
                                    </p>

                                    @if($fix && !empty($fix['fixes']))
                                        <p class="mt-2 text-rose-800">{{ __('الفواتير التي تحمل الزيادة ولم يُحصَّل عليها شيء:') }}</p>
                                        <ul class="mt-1 space-y-1">
                                            @foreach($fix['fixes'] as $candidate)
                                                <li class="flex flex-wrap items-center justify-between gap-2 bg-white/80 rounded px-2 py-1.5">
                                                    <span class="min-w-0">
                                                        <span dir="ltr" class="font-medium">{{ $candidate['invoice_number'] }}</span>
                                                        <span class="text-rose-700">·</span>
                                                        <span class="text-gray-700">{{ \Illuminate\Support\Str::limit($candidate['description'], 42) }}</span>
                                                        <span class="text-gray-500">
                                                            (<span dir="ltr">{{ format_money($candidate['current']) }}</span>
                                                            →
                                                            <span dir="ltr" class="font-bold text-rose-800">{{ format_money($candidate['new_amount']) }}</span>)
                                                        </span>
                                                    </span>
                                                    <button type="button"
                                                            class="shrink-0 px-2.5 py-1 text-[11px] rounded-lg bg-rose-600 text-white hover:bg-rose-700"
                                                            wire:click="startDraft('void_duplicate', {{ \Illuminate\Support\Js::from([
                                                                'invoice_id' => $candidate['invoice_id'],
                                                                'invoice_number' => $candidate['invoice_number'],
                                                                'current' => $candidate['current'],
                                                                'new_amount' => $candidate['new_amount'],
                                                                'product_name' => $bundle['product_name'],
                                                            ]) }})">
                                                        {{ $candidate['new_amount'] > 0 ? __('خفض بمقدار') : __('إلغاء') }}
                                                        @if($candidate['new_amount'] > 0)
                                                            <span dir="ltr">{{ format_money($candidate['removed']) }}</span>
                                                        @endif
                                                    </button>
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif

                                    @if($fix && $fix['blocked'])
                                        {{-- The excess sits on invoices that were actually paid. That money
                                             exists and has to go somewhere; deleting the demand would strand it. --}}
                                        <p class="mt-2 px-2 py-1.5 rounded bg-amber-100 border border-amber-300 text-amber-900">
                                            <span class="font-bold">{{ __('يحتاج قراراً بشرياً:') }}</span>
                                            <span dir="ltr" class="font-bold">{{ format_money($fix['collected_excess']) }}</span>
                                            {{ __('من الزيادة مسجَّل على فواتير محصَّلة بالفعل. المال موجود ولا يُحذف — انقله إلى الفاتورة التي تخصه فعلاً («نقل دفعة») أو أضفه لمحفظة المشترك («رصيد للمحفظة»).') }}
                                        </p>
                                    @endif
                                </div>
                            @endif
                            @if($bundle['expected'] > 0 && $bundle['status'] !== 'missing')
                                <div class="mt-2 h-1.5 w-full bg-gray-200 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full {{ $bundle['status'] === 'paid' ? 'bg-emerald-500' : 'bg-amber-500' }}"
                                         style="width: {{ max($percent, $bundle['paid'] > 0 ? 4 : 0) }}%"></div>
                                </div>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Money already on the account, in case it sits on the wrong month --}}
        @if($this->payments->isNotEmpty())
            <div class="bg-white border border-gray-200 rounded-xl p-4 mb-4">
                <h3 class="text-sm font-bold text-gray-900 mb-1">{{ __('الدفعات المسجَّلة') }}</h3>
                <p class="text-xs text-gray-500 mb-3">{{ __('إن كانت دفعة سُجِّلت على شهر غير الذي تخصه، انقلها للفاتورة الصحيحة — لا يتغير المبلغ ولا تاريخه.') }}</p>
                <ul class="space-y-2">
                    @foreach($this->payments as $payment)
                        @php $onInvoice = $this->invoices->firstWhere('id', $payment->invoice_id); @endphp
                        <li class="flex flex-wrap items-center justify-between gap-2 p-2 bg-gray-50 rounded-lg">
                            <span class="text-xs text-gray-700">
                                <span dir="ltr" class="font-bold">{{ format_money($payment->amount) }}</span>
                                · <span dir="ltr">{{ $payment->payment_date?->format('Y-m-d') }}</span>
                                · {{ __('على') }} <span dir="ltr">{{ $onInvoice?->number ?? '—' }}</span>
                            </span>
                            @if($this->invoices->where('due_amount', '>', 0)->count() > 0)
                                <button type="button" class="px-2 py-1 text-[11px] rounded bg-purple-50 text-purple-700 hover:bg-purple-100 border border-purple-200"
                                        wire:click="startDraft('move_payment', {{ \Illuminate\Support\Js::from(['payment_id' => $payment->id, 'from_invoice_number' => $onInvoice?->number, 'amount_display' => format_money($payment->amount)]) }})">
                                    {{ __('نقل لفاتورة أخرى') }}
                                </button>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Free-form additions --}}
        <div class="bg-white border border-gray-200 rounded-xl p-4 mb-4">
            <h3 class="text-sm font-bold text-gray-900 mb-3">{{ __('إجراءات إضافية') }}</h3>
            <div class="flex flex-wrap gap-2">
                <button type="button" wire:click="startDraft('bill_month')"
                        class="px-3 py-1.5 text-xs rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100">{{ __('إصدار فاتورة شهر') }}</button>
                <button type="button" wire:click="startDraft('sell_product')"
                        class="px-3 py-1.5 text-xs rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100">{{ __('تسجيل بيع منتج بأثر رجعي') }}</button>
                @can('wallets.credit')
                <button type="button" wire:click="startDraft('credit_wallet')"
                        class="px-3 py-1.5 text-xs rounded-lg bg-gray-50 border border-gray-200 hover:bg-gray-100">{{ __('إضافة رصيد للمحفظة (دفع زائد)') }}</button>
                @endcan
            </div>
        </div>

        {{-- ---- the open editor ---- --}}
        @if($draftType)
            <div class="bg-white border-2 border-amber-300 rounded-xl p-4 mb-4">
                <h3 class="text-sm font-bold text-amber-900 mb-3">
                    @switch($draftType)
                        @case('record_payment') {{ __('تسجيل دفعة سابقة') }} @break
                        @case('settle_short') {{ __('إغلاق الشهر بالمبلغ المحصَّل') }} @break
                        @case('waive_invoice') {{ __('إسقاط الفاتورة') }} @break
                        @case('bill_month') {{ __('إصدار فاتورة شهر بأثر رجعي') }} @break
                        @case('sell_product') {{ __('تسجيل بيع منتج بأثر رجعي') }} @break
                        @case('link_line') {{ __('ربط بند بمنتج') }} @break
                        @case('plan_installments') {{ __('خطة أقساط') }} @break
                        @case('move_payment') {{ __('نقل دفعة لفاتورة أخرى') }} @break
                        @case('credit_wallet') {{ __('إضافة رصيد لمحفظة المشترك') }} @break
                    @endswitch
                    @if(!empty($draft['invoice_number']))
                        <span class="text-gray-500 font-normal" dir="ltr">— {{ $draft['invoice_number'] }}</span>
                    @endif
                </h3>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    @if(in_array($draftType, ['record_payment','settle_short']))
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('المبلغ المحصَّل (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model="draft.amount"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.amount') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('تاريخ التحصيل الفعلي') }}</label>
                            <input type="date" dir="ltr" wire:model="draft.date" max="{{ now()->toDateString() }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.date') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('طريقة الدفع') }}</label>
                            <select wire:model="draft.method" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                                <option value="cash">{{ __('نقدي') }}</option>
                                <option value="card">{{ __('بطاقة') }}</option>
                                <option value="bank_transfer">{{ __('تحويل بنكي') }}</option>
                                <option value="wallet">{{ __('محفظة') }}</option>
                                <option value="online">{{ __('أونلاين') }}</option>
                                <option value="other">{{ __('أخرى') }}</option>
                            </select>
                        </div>
                        @if($draftType === 'settle_short')
                            <div class="sm:col-span-3 p-2.5 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-900">
                                {{ __('الفرق بين المتبقي والمبلغ المحصَّل سيُسقَط بقرار إداري وسيظهر على الفاتورة كخصم إداري بسببه.') }}
                            </div>
                        @endif
                    @endif

                    @if($draftType === 'waive_invoice')
                        <div class="sm:col-span-3 p-2.5 bg-red-50 border border-red-200 rounded-lg text-xs text-red-800">
                            {{ __('سيتم إسقاط') }} <span dir="ltr" class="font-bold">{{ format_money($draft['due'] ?? 0) }}</span>
                            {{ __('من هذه الفاتورة. إن لم يكن قد حُصِّل منها شيء ستُصبح ملغاة ولن تظهر في مستحقات المشترك.') }}
                        </div>
                    @endif

                    @if($draftType === 'bill_month')
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('الشهر') }}</label>
                            <input type="month" dir="ltr" wire:model="draft.month" max="{{ now()->format('Y-m') }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.month') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('قيمة الشهر (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model="draft.amount"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.amount') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('المحصَّل منه (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model="draft.paid_amount"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.paid_amount') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-3 flex items-center gap-2">
                            <input type="checkbox" id="close_month" wire:model="draft.close_month" class="rounded border-gray-300">
                            <label for="close_month" class="text-xs text-gray-700">
                                {{ __('اعتبر الشهر مغلقاً بهذا المبلغ (إسقاط الباقي) — للاعب الذي انضم في نصف الشهر ودفع ما تبقى منه') }}
                            </label>
                        </div>
                    @endif

                    @if($draftType === 'sell_product')
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('المنتج') }}</label>
                            <select wire:model="draft.product_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                                <option value="0">{{ __('اختر المنتج') }}</option>
                                @foreach($this->bundleProducts as $product)
                                    <option value="{{ $product->id }}">{{ $product->name_ar }}</option>
                                @endforeach
                            </select>
                            @error('draft.product_id') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('سعر الوحدة (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model="draft.unit_price"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.unit_price') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('المحصَّل (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model="draft.paid_amount"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.paid_amount') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('الكمية') }}</label>
                            <input type="number" min="1" dir="ltr" wire:model="draft.quantity"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('تاريخ البيع الفعلي') }}</label>
                            <input type="date" dir="ltr" wire:model="draft.date" max="{{ now()->toDateString() }}"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                        </div>
                        <div class="flex items-end gap-2 pb-2">
                            <input type="checkbox" id="adjust_stock" wire:model="draft.adjust_stock" class="rounded border-gray-300">
                            <label for="adjust_stock" class="text-xs text-gray-700">{{ __('خصم الكمية من المخزون') }}</label>
                        </div>
                    @endif

                    @if($draftType === 'link_line')
                        <div class="sm:col-span-3 p-2.5 bg-blue-50 border border-blue-200 rounded-lg text-xs text-blue-900">
                            {{ __('سيُربط البند') }} «{{ $draft['description'] ?? '' }}» {{ __('بمنتج') }}
                            <span class="font-bold">{{ $draft['product_name'] ?? '' }}</span>.
                            {{ __('لا تتغير أي مبالغ — يتغير تصنيف البند فقط.') }}
                        </div>
                    @endif

                    @if($draftType === 'plan_installments')
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('عدد الأقساط') }}</label>
                            <input type="number" min="2" dir="ltr" wire:model="draft.total_installments"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.total_installments') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('المسدد منها') }}</label>
                            <input type="number" min="0" dir="ltr" wire:model="draft.paid_installments"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.paid_installments') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('قيمة القسط (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model="draft.installment_amount"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                        </div>
                    @endif

                    @if($draftType === 'move_payment')
                        <div class="sm:col-span-3 p-2.5 bg-purple-50 border border-purple-200 rounded-lg text-xs text-purple-900">
                            {{ __('دفعة') }} <span dir="ltr" class="font-bold">{{ $draft['amount_display'] ?? '' }}</span>
                            {{ __('مسجَّلة حالياً على') }} <span dir="ltr">{{ $draft['from_invoice_number'] ?? '' }}</span>.
                            {{ __('ستُعكَس عنها وتُسجَّل على الفاتورة المختارة بنفس تاريخها وطريقتها.') }}
                        </div>
                        <div class="sm:col-span-3">
                            <label class="block text-xs text-gray-600 mb-1">{{ __('الفاتورة التي تخصها الدفعة فعلاً') }}</label>
                            <select wire:model="draft.to_invoice_id" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                                <option value="0">{{ __('اختر الفاتورة') }}</option>
                                @foreach($this->invoices->where('due_amount', '>', 0) as $target)
                                    <option value="{{ $target->id }}">{{ $target->number }} — {{ $target->notes ?: $target->issue_date?->format('Y-m') }} ({{ format_money($target->due_amount) }})</option>
                                @endforeach
                            </select>
                            @error('draft.to_invoice_id') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                    @endif

                    @if($draftType === 'void_duplicate')
                        <div class="sm:col-span-3 p-2.5 bg-rose-50 border border-rose-200 rounded-lg text-xs text-rose-900">
                            {{ __('الفاتورة') }} <span dir="ltr" class="font-bold">{{ $draft['invoice_number'] ?? '' }}</span>
                            {{ __('قيمتها الآن') }} <span dir="ltr" class="font-bold">{{ format_money((int) ($draft['current'] ?? 0)) }}</span>
                            {{ __('ولم يُحصَّل عليها شيء.') }}
                            {{ __('هذا ليس إعفاءً: المبلغ الزائد لم يكن مستحقاً أصلاً لأنه محاسَب مرة أخرى على فاتورة سابقة، فلا يخسر النادي شيئاً — يتوقف فقط مطالبة المشترك بما لا يدين به.') }}
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('القيمة الصحيحة للفاتورة (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model.live="draft.new_amount"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.new_amount') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                            @error('draft.invoice_id') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2 self-end p-2.5 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-700">
                            @php $removes = max(0, (int) ($draft['current'] ?? 0) - (int) round(((float) ($draft['new_amount'] ?? 0)) * 100)); @endphp
                            {{ __('سيُحذف من المطلوب') }} <span dir="ltr" class="font-bold text-rose-700">{{ format_money($removes) }}</span>
                            @if((int) round(((float) ($draft['new_amount'] ?? 0)) * 100) === 0)
                                — <span class="font-bold">{{ __('وتُلغى الفاتورة بالكامل') }}</span>
                            @endif
                        </div>
                    @endif

                    @if($draftType === 'credit_wallet')
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">{{ __('المبلغ (ج.م)') }}</label>
                            <input type="number" step="0.01" min="0" dir="ltr" wire:model="draft.amount"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                            @error('draft.amount') <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2 p-2.5 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-700 self-end">
                            {{ __('رصيد يُحسب للمشترك على الفواتير القادمة — للمبالغ الزائدة التي دُفعت بالفعل وسُجِّلت. لا يُحتسب تحصيلاً جديداً.') }}
                        </div>
                    @endif

                    <div class="sm:col-span-3">
                        <label class="block text-xs text-gray-600 mb-1">{{ __('ملاحظة (تظهر على الفاتورة/الإيصال)') }}</label>
                        <input type="text" wire:model="draft.note" maxlength="200"
                               placeholder="{{ __('مثال: حُصِّل نقداً يوم التسجيل ولم يُسجَّل') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
                    </div>
                </div>

                <div class="mt-4 flex items-center gap-2">
                    <button type="button" wire:click="addDraft" wire:loading.attr="disabled"
                            class="px-4 py-2 bg-amber-500 text-white text-sm font-medium rounded-lg hover:bg-amber-600 disabled:opacity-50">
                        <span wire:loading.remove wire:target="addDraft">{{ __('أضف إلى التسوية') }}</span>
                        <span wire:loading wire:target="addDraft">{{ __('...') }}</span>
                    </button>
                    <button type="button" wire:click="cancelDraft" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-900">{{ __('إلغاء') }}</button>
                </div>
            </div>
        @endif

        {{-- ---- the cart ---- --}}
        @include('livewire.admin.partials.settlement-cart', ['editable' => true])

        <div class="flex items-center justify-between gap-3">
            <button type="button" wire:click="startOver" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-900">{{ __('رجوع') }}</button>
            <button type="button" wire:click="goToStep(3)" @disabled(empty($cart))
                    class="px-5 py-2.5 bg-amber-500 text-white text-sm font-bold rounded-lg hover:bg-amber-600 disabled:opacity-40 disabled:cursor-not-allowed">
                {{ __('مراجعة التسوية') }} ({{ count($cart) }})
            </button>
        </div>
    @endif

    {{-- ================= STEP 3 : review ================= --}}
    @if($currentStep === 3)
        @include('livewire.admin.partials.settlement-cart', ['editable' => false])

        <div class="bg-white border border-gray-200 rounded-xl p-4 sm:p-5 mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('سبب التسوية') }} <span class="text-red-600">*</span></label>
            <p class="text-xs text-gray-500 mb-2">{{ __('ما الذي حدث فعلاً ومن قرر؟ هذا النص هو ما سيُقرأ بعد ستة أشهر عند السؤال عن هذه المبالغ.') }}</p>
            <textarea wire:model="reason" rows="3" maxlength="500"
                      placeholder="{{ __('مثال: راجعنا دفتر الكاش مع الاستقبال — دفع 900 نقداً يوم 20 أغسطس ولم تُسجَّل، واتفق المدير على إسقاط شهر سبتمبر لتأخر بدء المجموعة.') }}"
                      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"></textarea>
            @error('reason') <p class="text-xs text-red-600 mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="flex items-center justify-between gap-3">
            <button type="button" wire:click="goToStep(2)" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-900">{{ __('تعديل الإجراءات') }}</button>
            <button type="button" wire:click="applySettlement" wire:loading.attr="disabled" wire:target="applySettlement"
                    class="px-5 py-2.5 bg-emerald-600 text-white text-sm font-bold rounded-lg hover:bg-emerald-700 disabled:opacity-50">
                <span wire:loading.remove wire:target="applySettlement">{{ __('تنفيذ التسوية') }}</span>
                <span wire:loading wire:target="applySettlement">{{ __('جارٍ التنفيذ...') }}</span>
            </button>
        </div>
    @endif

    {{-- ================= STEP 4 : done ================= --}}
    @if($currentStep === 4 && $result)
        <div class="bg-white border border-emerald-200 rounded-xl p-5">
            <div class="flex items-center gap-3 mb-4">
                <span class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center text-xl">✓</span>
                <div>
                    <h2 class="text-lg font-bold text-gray-900">{{ __('تمت التسوية') }}</h2>
                    <p class="text-xs text-gray-500" dir="ltr">{{ $result['reference'] }}</p>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-3 mb-4">
                <div class="p-3 bg-emerald-50 rounded-lg">
                    <p class="text-[11px] text-emerald-700">{{ __('محصَّل') }}</p>
                    <p class="text-base font-bold text-emerald-800 tabular-nums" dir="ltr">{{ format_money($result['collected']) }}</p>
                </div>
                <div class="p-3 bg-red-50 rounded-lg">
                    <p class="text-[11px] text-red-700">{{ __('مُسقَط') }}</p>
                    <p class="text-base font-bold text-red-800 tabular-nums" dir="ltr">{{ format_money($result['waived']) }}</p>
                </div>
                <div class="p-3 bg-gray-50 rounded-lg">
                    <p class="text-[11px] text-gray-600">{{ __('مُفوتَر جديد') }}</p>
                    <p class="text-base font-bold text-gray-800 tabular-nums" dir="ltr">{{ format_money($result['billed']) }}</p>
                </div>
            </div>

            <ul class="space-y-1.5 mb-5">
                @foreach($result['actions'] as $action)
                    <li class="text-xs text-gray-700 flex items-start gap-2">
                        <span class="text-emerald-600">✓</span>
                        <span>{{ $action['label'] ?? $action['type'] }}</span>
                    </li>
                @endforeach
            </ul>

            <div class="flex flex-wrap gap-2">
                <button type="button" wire:click="startOver"
                        class="px-4 py-2 bg-amber-500 text-white text-sm font-medium rounded-lg hover:bg-amber-600">{{ __('تسوية مشترك آخر') }}</button>
                <a href="{{ route('admin.settlement-worklist') }}" wire:navigate
                   class="px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50">{{ __('العودة لقائمة الحالات') }}</a>
            </div>
        </div>
    @endif
</div>
