{{--
    The settlement console.

    Two jobs on one screen: say which accounts need a decision, and teach the
    operator how each kind of case is handled. The second job is why the guide
    panel is here rather than in a manual — the person reading this is a
    receptionist mid-shift, and a case they do not understand is a case they
    skip.

    RTL: logical properties only (ms/me/ps/pe, text-start/end, border-s/e).
--}}
@php
    // Severity bands. The scanner's numbers are an ordering, not a vocabulary;
    // this is where they become one, in one place, so the rail dot, the row
    // stripe and the guide heading cannot disagree about how bad a case is.
    $band = fn (int $severity) => match (true) {
        $severity <= 2 => ['dot' => 'bg-rose-500', 'chip' => 'bg-rose-50 text-rose-700 ring-rose-200 dark:bg-rose-950/50 dark:text-rose-300 dark:ring-rose-900'],
        $severity <= 5 => ['dot' => 'bg-amber-500', 'chip' => 'bg-amber-50 text-amber-800 ring-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:ring-amber-900'],
        default => ['dot' => 'bg-slate-400', 'chip' => 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700'],
    };
@endphp

<div dir="rtl" class="settlement-console min-h-screen bg-gray-50 dark:bg-gray-950">
    <style>
        /* The surfaces we did not draw still belong to the design: selection,
           focus and the rail's scrollbar ship with browser defaults otherwise. */
        .settlement-console ::selection { background: #fde68a; color: #451a03; }
        .dark .settlement-console ::selection { background: #78350f; color: #fef3c7; }
        .settlement-console :focus-visible {
            outline: 2px solid #f59e0b;
            outline-offset: 2px;
            border-radius: 0.5rem;
        }
        .settlement-console .rail { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
        .dark .settlement-console .rail { scrollbar-color: #334155 transparent; }
        /* The one authored moment on the page: a row opening its evidence.
           Exponential ease-out from an already-visible default. */
        @keyframes settlement-reveal {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: none; }
        }
        .settlement-console .reveal { animation: settlement-reveal 180ms cubic-bezier(0.16, 1, 0.3, 1) both; }
        @media (prefers-reduced-motion: reduce) {
            .settlement-console .reveal { animation: none; }
        }
    </style>

    <div class="max-w-[92rem] mx-auto px-3 sm:px-5 py-5 sm:py-7">

        {{-- ---- what this screen is ------------------------------------ --}}
        <div class="flex flex-wrap items-end justify-between gap-4 mb-5">
            <div class="max-w-[62ch]">
                <h1 class="text-2xl sm:text-[26px] font-bold tracking-tight text-gray-900 dark:text-gray-50">
                    {{ __('حالات تحتاج تسوية') }}
                </h1>
                <p class="mt-1.5 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
                    {{ __('حسابات لا تتفق أرقامها مع الواقع: مال حُصِّل ولم يُسجَّل، شهور بلا فواتير، لاعبون لا يحاسبهم شيء. اختر حالة من القائمة لتقرأ معناها وطريقة معالجتها خطوة بخطوة.') }}
                </p>
                <p class="mt-1 text-[12px] text-gray-500 dark:text-gray-500">
                    {{ __('الشهر الجاري لا يُحتسب هنا — تحصيله من شاشة «تحصيل دفعة»، وكذلك الأقساط المنتظمة.') }}
                </p>
            </div>

            <button type="button" wire:click="export" wire:loading.attr="disabled"
                    class="shrink-0 inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium
                           border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-200
                           bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800
                           disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                <x-ui.icon name="document-text" class="w-4 h-4" />
                <span wire:loading.remove wire:target="export">{{ __('تصدير Excel') }}</span>
                <span wire:loading wire:target="export">{{ __('جارٍ التصدير…') }}</span>
            </button>
        </div>

        {{-- ---- the state of the books --------------------------------- --}}
        <div class="mb-6 rounded-xl bg-slate-900 dark:bg-slate-900 ring-1 ring-slate-800 shadow-lg shadow-slate-900/10">
            <div class="flex flex-wrap">
                <div class="flex-1 min-w-[10rem] px-5 py-4">
                    <p class="text-[11px] font-medium text-slate-400">{{ __('حسابات تحتاج قراراً') }}</p>
                    <p class="mt-1 text-2xl font-bold text-white tabular-nums" dir="ltr">{{ $total }}</p>
                </div>
                <div class="flex-1 min-w-[12rem] px-5 py-4 border-t sm:border-t-0 sm:border-s border-slate-800">
                    <p class="text-[11px] font-medium text-slate-400">{{ __('موقوف على هذه الحسابات') }}</p>
                    <p class="mt-1 text-2xl font-bold text-white tabular-nums whitespace-nowrap" dir="ltr">{{ format_money($totalOwed) }}</p>
                </div>
                @if($overBilled > 0)
                    <div class="flex-1 min-w-[12rem] px-5 py-4 border-t sm:border-t-0 sm:border-s border-slate-800">
                        {{-- Not averaged into the debt above: this is money the
                             academy is asking for twice, and it is owed the other
                             way round. --}}
                        <p class="text-[11px] font-medium text-rose-300">{{ __('محاسَب زيادة — مستحق للأهالي') }}</p>
                        <p class="mt-1 text-2xl font-bold text-rose-300 tabular-nums whitespace-nowrap" dir="ltr">{{ format_money($overBilled) }}</p>
                    </div>
                @endif
                <div class="flex-1 min-w-[14rem] px-5 py-3.5 border-t sm:border-t-0 sm:border-s border-slate-800">
                    <label for="settlement-search" class="text-[11px] font-medium text-slate-400">{{ __('بحث بالاسم أو الهاتف') }}</label>
                    <div class="mt-1.5 relative">
                        <x-ui.icon name="magnifying-glass" class="w-4 h-4 absolute top-1/2 -translate-y-1/2 start-2.5 text-slate-500 pointer-events-none" />
                        <input id="settlement-search" type="text" wire:model.live.debounce.400ms="search"
                               placeholder="{{ __('اسم أو هاتف…') }}"
                               class="w-full ps-8 pe-3 py-1.5 rounded-lg text-sm bg-slate-800 border border-slate-700
                                      text-white placeholder-slate-500 focus:border-amber-500 focus:outline-none">
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-[19rem_minmax(0,1fr)] gap-5 items-start">

            {{-- ---- the case rail -------------------------------------- --}}
            <aside class="lg:sticky lg:top-4">
                <div class="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 overflow-hidden">
                    <div class="px-4 pt-3.5 pb-2 flex items-baseline justify-between">
                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">{{ __('أنواع الحالات') }}</h2>
                        @if($caseFilter !== '' || $search !== '')
                            <button type="button" wire:click="clearFilter"
                                    class="text-[11px] font-medium text-amber-700 dark:text-amber-400 hover:underline">
                                {{ __('عرض الكل') }}
                            </button>
                        @endif
                    </div>

                    @php
                        // Filtered here rather than with @continue inside the loop:
                        // a forelse whose every iteration continues still counts as
                        // non-empty, so a branch with clean books would have shown
                        // an unexplained blank panel instead of saying so.
                        $visibleCases = array_filter(
                            $cases,
                            fn ($case, $code) => ! empty($counts[$code]) || $caseFilter === $code,
                            ARRAY_FILTER_USE_BOTH
                        );
                    @endphp
                    <div class="rail max-h-[26rem] lg:max-h-[calc(100vh-16rem)] overflow-y-auto pb-2">
                        @forelse($visibleCases as $code => $case)
                            @php $b = $band($case['severity']); @endphp
                            <button type="button" wire:click="selectCase('{{ $code }}')"
                                    aria-pressed="{{ $caseFilter === $code ? 'true' : 'false' }}"
                                    class="w-full text-start px-4 py-2.5 flex items-center gap-2.5 border-t border-gray-100 dark:border-gray-800 transition-colors
                                           {{ $caseFilter === $code
                                               ? 'bg-amber-50 dark:bg-amber-950/40'
                                               : 'hover:bg-gray-50 dark:hover:bg-gray-800/60' }}">
                                <span class="w-1.5 h-1.5 rounded-full shrink-0 {{ $b['dot'] }}"></span>
                                <x-ui.icon :name="$case['icon']" class="w-4 h-4 shrink-0 {{ $caseFilter === $code ? 'text-amber-700 dark:text-amber-400' : 'text-gray-400 dark:text-gray-500' }}" />
                                <span class="flex-1 text-[13px] leading-snug {{ $caseFilter === $code ? 'font-semibold text-amber-900 dark:text-amber-200' : 'text-gray-700 dark:text-gray-300' }}">
                                    {{ $case['label'] }}
                                </span>
                                <span class="shrink-0 text-[12px] tabular-nums {{ $caseFilter === $code ? 'font-bold text-amber-800 dark:text-amber-300' : 'text-gray-400 dark:text-gray-500' }}" dir="ltr">
                                    {{ $counts[$code] ?? 0 }}
                                </span>
                            </button>
                        @empty
                            <p class="px-4 py-6 text-[13px] text-gray-500 dark:text-gray-400">
                                {{ __('لا توجد حالات مرصودة في هذا الفرع.') }}
                            </p>
                        @endforelse
                    </div>
                </div>

                @unless($guide)
                    <div class="mt-3 rounded-xl border border-dashed border-gray-300 dark:border-gray-700 px-4 py-3.5">
                        <p class="text-[13px] font-semibold text-gray-700 dark:text-gray-300">{{ __('كيف تُستخدم هذه الشاشة') }}</p>
                        <p class="mt-1.5 text-[12px] leading-relaxed text-gray-500 dark:text-gray-400">
                            {{ __('اختر نوع الحالة من القائمة أعلاه: تظهر لك شرحها وسببها وخطوات معالجتها، وتُفلتَر القائمة عليها. اضغط أي صف لتقرأ تفاصيل الحساب كاملة قبل أن تفتح المعالج.') }}
                        </p>
                        <p class="mt-2 text-[12px] leading-relaxed text-gray-500 dark:text-gray-400">
                            {{ __('القائمة مرتّبة بالأخطر أولاً: مال دخل ولم يُسجَّل، ثم مال طُلب مرتين، ثم ما لم يُطلب أصلاً.') }}
                        </p>
                    </div>
                @endunless
            </aside>

            {{-- ---- guide + worklist ----------------------------------- --}}
            <div class="min-w-0">

                @if($guide)
                    @php $gb = $band($guide['severity']); @endphp
                    <section class="reveal mb-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 overflow-hidden">
                        <div class="px-5 pt-4 pb-4 border-b border-gray-100 dark:border-gray-800">
                            <div class="flex items-start gap-3">
                                <span class="mt-0.5 shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-lg ring-1 {{ $gb['chip'] }}">
                                    <x-ui.icon :name="$guide['icon']" class="w-5 h-5" />
                                </span>
                                <div class="min-w-0">
                                    <h2 class="text-lg font-bold text-gray-900 dark:text-gray-50 leading-tight">{{ $guide['label'] }}</h2>
                                    <p class="mt-2 text-[13px] leading-relaxed text-gray-700 dark:text-gray-300 max-w-[70ch]">
                                        {{ $guide['meaning'] }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_20rem]">
                            <div class="px-5 py-4">
                                <h3 class="text-[12px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('كيف تُعالَج') }}</h3>
                                <ol class="mt-3 space-y-3">
                                    @foreach($guide['steps'] as $i => $step)
                                        <li class="flex gap-3">
                                            <span class="shrink-0 mt-px inline-flex items-center justify-center w-5 h-5 rounded-full
                                                         bg-amber-100 dark:bg-amber-900/60 text-amber-800 dark:text-amber-300
                                                         text-[11px] font-bold tabular-nums" dir="ltr">{{ $i + 1 }}</span>
                                            <span class="text-[13px] leading-relaxed text-gray-700 dark:text-gray-300 max-w-[68ch]">{{ $step }}</span>
                                        </li>
                                    @endforeach
                                </ol>
                            </div>

                            <div class="px-5 py-4 border-t lg:border-t-0 lg:border-s border-gray-100 dark:border-gray-800 bg-gray-50/70 dark:bg-gray-950/40">
                                <h3 class="text-[12px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('لماذا تحدث') }}</h3>
                                <p class="mt-2 text-[12px] leading-relaxed text-gray-600 dark:text-gray-400">{{ $guide['cause'] }}</p>

                                <h3 class="mt-5 text-[12px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('الأداة') }}</h3>
                                <p class="mt-2 text-[12px] leading-relaxed text-gray-600 dark:text-gray-400">{{ $guide['tool'] }}</p>

                                @if($caseFilter === 'no_enrollment')
                                    @can('enrollments.create')
                                        <a href="{{ route('receptionist.enroll-existing') }}" wire:navigate
                                           class="mt-3 inline-flex items-center gap-1.5 text-[12px] font-semibold text-amber-700 dark:text-amber-400 hover:underline">
                                            {{ __('افتح «تسجيل لاعب قائم»') }}
                                            <x-ui.icon name="chevron-down" class="w-3.5 h-3.5 rotate-90" />
                                        </a>
                                    @endcan
                                @endif
                            </div>
                        </div>
                    </section>
                @endif

                {{-- ---- the accounts ----------------------------------- --}}
                <div class="rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 overflow-hidden">
                    <div class="px-4 py-3 flex items-baseline justify-between border-b border-gray-100 dark:border-gray-800">
                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">
                            {{ $guide ? $guide['label'] : __('كل الحسابات المرصودة') }}
                        </h2>
                        <span class="text-[12px] text-gray-500 dark:text-gray-400 tabular-nums">
                            {{ count($rows) }} {{ __('من') }} {{ $total }}
                        </span>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="w-full min-w-[46rem] text-sm">
                            <thead class="bg-gray-50 dark:bg-gray-950/60 text-[11px] text-gray-500 dark:text-gray-400">
                                <tr>
                                    <th scope="col" class="ps-3 pe-2 py-2.5 text-start font-semibold">{{ __('المشترك') }}</th>
                                    <th scope="col" class="px-3 py-2.5 text-start font-semibold hidden md:table-cell">{{ __('البرنامج') }}</th>
                                    <th scope="col" class="px-3 py-2.5 text-start font-semibold">{{ __('ما الذي رُصد') }}</th>
                                    <th scope="col" class="px-3 py-2.5 text-center font-semibold whitespace-nowrap hidden sm:table-cell">{{ __('غير مسددة') }}</th>
                                    <th scope="col" class="px-3 py-2.5 text-center font-semibold whitespace-nowrap">{{ __('المستحق') }}</th>
                                    <th scope="col" class="px-3 py-2.5 text-center font-semibold whitespace-nowrap hidden sm:table-cell">{{ __('المحصَّل') }}</th>
                                    <th scope="col" class="px-3 py-2.5 text-end font-semibold"><span class="sr-only">{{ __('إجراء') }}</span></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                @forelse($rows as $row)
                                    @php
                                        $participant = $row['participant'];
                                        $detail = $row['detail'];
                                        $open = $expanded === $participant->id;
                                        $rb = $band($row['severity']);
                                        $program = $participant->enrollments->first()?->program?->name_ar
                                            ?? ($detail['no_enrollment']['last_program'] ?? null);
                                    @endphp

                                    <tr class="{{ $open ? 'bg-amber-50/60 dark:bg-amber-950/20' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50' }} transition-colors">
                                        <td class="ps-3 pe-2 py-2.5 align-top">
                                            <button type="button" wire:click="toggleRow({{ $participant->id }})"
                                                    aria-expanded="{{ $open ? 'true' : 'false' }}"
                                                    class="text-start group">
                                                <span class="flex items-center gap-1.5">
                                                    <x-ui.icon :name="$open ? 'chevron-up' : 'chevron-down'"
                                                               class="w-3.5 h-3.5 shrink-0 text-gray-400 group-hover:text-amber-600" />
                                                    <span class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-amber-700 dark:group-hover:text-amber-400">
                                                        {{ $participant->person?->name_ar ?? '—' }}
                                                    </span>
                                                </span>
                                                @if($participant->person?->phone)
                                                    <span class="block ms-5 text-[11px] text-gray-500 dark:text-gray-400" dir="ltr">{{ $participant->person->phone }}</span>
                                                @endif
                                            </button>
                                        </td>

                                        <td class="px-3 py-2.5 align-top text-[12px] text-gray-600 dark:text-gray-400 hidden md:table-cell">
                                            {{ $program ?? '—' }}
                                            @if(! $participant->enrollments->first() && $program)
                                                <span class="block mt-0.5 text-[10px] whitespace-nowrap text-rose-600 dark:text-rose-400">{{ __('من فاتورة سابقة — لا اشتراك') }}</span>
                                            @endif
                                        </td>

                                        <td class="px-3 py-2.5 align-top">
                                            <div class="flex flex-wrap gap-1">
                                                @foreach($row['cases'] as $case)
                                                    {{-- Severity is the point of the list; a duplicate billing and a
                                                         missing month reading identically is what made the operator
                                                         work top-to-bottom instead of worst-first. --}}
                                                    <span class="px-1.5 py-0.5 text-[10px] rounded-full ring-1 whitespace-nowrap {{ $band($cases[$case]['severity'] ?? 9)['chip'] }}">
                                                        {{ $cases[$case]['label'] }}
                                                    </span>
                                                @endforeach
                                            </div>
                                            @if(!empty($detail['over_billed_bundle']))
                                                {{-- The figure is the reason this row is here; making the operator
                                                     open the wizard to find out how much is a wasted click. --}}
                                                @foreach($detail['over_billed_bundle'] as $b)
                                                    <p class="mt-1 text-[11px] text-rose-700 dark:text-rose-400">
                                                        {{ \Illuminate\Support\Str::limit($b['product_name'], 26) }}:
                                                        {{ __('محاسَب') }} <span dir="ltr">{{ format_money($b['billed']) }}</span>
                                                        {{ __('وسعره') }} <span dir="ltr">{{ format_money($b['price']) }}</span> —
                                                        <span class="font-bold">{{ __('زيادة') }} <span dir="ltr">{{ format_money($b['over_billed']) }}</span></span>
                                                    </p>
                                                @endforeach
                                            @endif
                                        </td>

                                        <td class="px-3 py-2.5 align-top text-center tabular-nums whitespace-nowrap text-gray-700 dark:text-gray-300 hidden sm:table-cell">{{ $row['unpaid_invoices'] }}</td>
                                        <td class="px-3 py-2.5 align-top text-center tabular-nums whitespace-nowrap font-bold {{ $row['owed'] > 0 ? 'text-rose-700 dark:text-rose-400' : 'text-gray-400 dark:text-gray-600' }}" dir="ltr">
                                            {{ format_money($row['owed']) }}
                                        </td>
                                        <td class="px-3 py-2.5 align-top text-center tabular-nums whitespace-nowrap text-emerald-700 dark:text-emerald-400 hidden sm:table-cell" dir="ltr">{{ format_money($row['paid']) }}</td>

                                        <td class="px-3 py-2.5 align-top text-end whitespace-nowrap">
                                            <a href="{{ route('admin.account-settlement', ['participant' => $participant->id]) }}" wire:navigate
                                               class="inline-flex px-3 py-1.5 bg-amber-500 hover:bg-amber-600 active:bg-amber-700 text-white text-xs font-semibold rounded-lg transition-colors">
                                                {{ __('تسوية') }}
                                            </a>
                                        </td>
                                    </tr>

                                    @if($open)
                                        <tr class="bg-gray-50 dark:bg-gray-950/50">
                                            <td colspan="7" class="px-3 sm:px-5 py-4">
                                                <div class="reveal grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">

                                                    {{-- The account, in one line, before any case detail. --}}
                                                    <div class="md:col-span-2 xl:col-span-3 flex flex-wrap items-center gap-x-5 gap-y-1.5 text-[12px] pb-3 border-b border-gray-200 dark:border-gray-800">
                                                        <span class="text-gray-500 dark:text-gray-400">{{ __('رقم المشترك') }}
                                                            <span class="font-semibold text-gray-800 dark:text-gray-200 tabular-nums" dir="ltr">{{ $participant->participant_number ?: $participant->id }}</span>
                                                        </span>
                                                        <span class="text-gray-500 dark:text-gray-400">{{ __('المحصَّل') }}
                                                            <span class="font-semibold text-emerald-700 dark:text-emerald-400 tabular-nums" dir="ltr">{{ format_money($row['paid']) }}</span>
                                                        </span>
                                                        <span class="text-gray-500 dark:text-gray-400">{{ __('المستحق') }}
                                                            <span class="font-semibold text-rose-700 dark:text-rose-400 tabular-nums" dir="ltr">{{ format_money($row['owed']) }}</span>
                                                        </span>
                                                        <span class="text-gray-500 dark:text-gray-400">{{ __('فواتير غير مسددة') }}
                                                            <span class="font-semibold text-gray-800 dark:text-gray-200 tabular-nums" dir="ltr">{{ $row['unpaid_invoices'] }}</span>
                                                        </span>
                                                    </div>

                                                    @if(!empty($detail['no_enrollment']))
                                                        @php $orphan = $detail['no_enrollment']; @endphp
                                                        <div class="md:col-span-2 xl:col-span-3">
                                                            <h4 class="text-[11px] font-bold uppercase tracking-wide text-rose-700 dark:text-rose-400">{{ __('لا يوجد له اشتراك مسجَّل') }}</h4>
                                                            <p class="mt-1.5 text-[12px] leading-relaxed text-gray-700 dark:text-gray-300 max-w-[70ch]">
                                                                {{ __('لا شيء في النظام يحاسب هذا اللاعب. آخر فاتورة له في') }}
                                                                <span class="font-semibold tabular-nums" dir="ltr">{{ $orphan['last_month'] ?? '—' }}</span>،
                                                                {{ __('وله') }} <span class="font-semibold tabular-nums" dir="ltr">{{ $orphan['invoices'] }}</span> {{ __('فاتورة سابقة.') }}
                                                                @if($orphan['last_program'])
                                                                    {{ __('البرنامج المكتوب على آخر فاتورة:') }}
                                                                    <span class="font-semibold text-gray-900 dark:text-gray-100">«{{ $orphan['last_program'] }}»</span> —
                                                                    {{ __('سجِّله في البرنامج المقابل له اليوم.') }}
                                                                @else
                                                                    {{ __('فواتيره لا تسمّي برنامجاً — راجع كشف الحضور لتعرف مجموعته.') }}
                                                                @endif
                                                            </p>
                                                        </div>
                                                    @endif

                                                    @if(!empty($detail['unbilled_months']))
                                                        <div>
                                                            <h4 class="text-[11px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('شهور بلا فاتورة') }}</h4>
                                                            <div class="mt-2 flex flex-wrap gap-1.5">
                                                                @foreach($detail['unbilled_months'] as $month)
                                                                    <span class="px-2 py-0.5 rounded-md text-[11px] bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-700 text-gray-700 dark:text-gray-300">
                                                                        {{ $month['label'] }}
                                                                    </span>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    @endif

                                                    @if(!empty($detail['handtyped']))
                                                        <div>
                                                            <h4 class="text-[11px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('بنود يدوية تخص منتجاً') }}</h4>
                                                            <ul class="mt-2 space-y-1.5">
                                                                @foreach($detail['handtyped'] as $line)
                                                                    <li class="text-[12px] text-gray-700 dark:text-gray-300">
                                                                        <span class="text-gray-500 dark:text-gray-500 tabular-nums" dir="ltr">{{ $line['invoice_number'] }}</span>
                                                                        — {{ \Illuminate\Support\Str::limit($line['description'], 40) }}
                                                                        <span class="font-semibold tabular-nums" dir="ltr">{{ format_money($line['amount']) }}</span>
                                                                        <span class="text-gray-500 dark:text-gray-500">← {{ $line['product_name'] }}</span>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    @endif

                                                    @if(!empty($detail['bundle_status']))
                                                        <div>
                                                            <h4 class="text-[11px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('مستلزمات البرنامج') }}</h4>
                                                            <ul class="mt-2 space-y-1.5">
                                                                @foreach($detail['bundle_status'] as $bundle)
                                                                    <li class="text-[12px] text-gray-700 dark:text-gray-300">
                                                                        <span class="font-medium">{{ \Illuminate\Support\Str::limit($bundle['product_name'], 28) }}</span>:
                                                                        {{ __('مطلوب') }} <span class="tabular-nums" dir="ltr">{{ format_money($bundle['expected']) }}</span>،
                                                                        {{ __('مدفوع') }} <span class="tabular-nums font-semibold text-emerald-700 dark:text-emerald-400" dir="ltr">{{ format_money($bundle['paid']) }}</span>
                                                                        @if($bundle['status'] === 'paid')
                                                                            <span class="text-emerald-700 dark:text-emerald-400">— {{ __('مكتمل') }}</span>
                                                                        @elseif($bundle['status'] === 'missing')
                                                                            <span class="text-rose-700 dark:text-rose-400">— {{ __('لم يُحاسَب عليه') }}</span>
                                                                        @else
                                                                            <span class="text-amber-700 dark:text-amber-400">— {{ __('متبقٍ') }}
                                                                                <span class="tabular-nums" dir="ltr">{{ format_money(max(0, $bundle['expected'] - $bundle['paid'])) }}</span>
                                                                            </span>
                                                                        @endif
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    @endif

                                                    @if(!empty($detail['zero_invoices']))
                                                        <div>
                                                            <h4 class="text-[11px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('فواتير بقيمة صفر') }}</h4>
                                                            <p class="mt-2 text-[12px] text-gray-700 dark:text-gray-300">
                                                                <span class="font-semibold tabular-nums" dir="ltr">{{ $detail['zero_invoices'] }}</span>
                                                                {{ __('فاتورة صدرت بلا مبلغ — راجع سعر البرنامج قبل تصحيحها.') }}
                                                            </p>
                                                        </div>
                                                    @endif

                                                    @if(!empty($detail['duplicate_of']))
                                                        <div>
                                                            <h4 class="text-[11px] font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ __('سجلات أخرى بنفس الاسم') }}</h4>
                                                            <ul class="mt-2 space-y-1">
                                                                @foreach($detail['duplicate_of'] as $duplicate)
                                                                    <li>
                                                                        <a href="{{ route('admin.account-settlement', ['participant' => $duplicate['id']]) }}" wire:navigate
                                                                           class="text-[12px] text-amber-700 dark:text-amber-400 hover:underline">
                                                                            {{ $duplicate['name'] }}
                                                                            <span class="text-gray-500 dark:text-gray-500 tabular-nums" dir="ltr">#{{ $duplicate['id'] }}</span>
                                                                        </a>
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        </div>
                                                    @endif

                                                    {{-- What to do about the worst thing on this row, without
                                                         making the operator go and select the case first. --}}
                                                    @php $worst = collect($row['cases'])->sortBy(fn ($c) => $cases[$c]['severity'] ?? 9)->first(); @endphp
                                                    @if($worst && $caseFilter === '')
                                                        <div class="md:col-span-2 xl:col-span-3 pt-3 border-t border-gray-200 dark:border-gray-800">
                                                            <p class="text-[12px] leading-relaxed text-gray-600 dark:text-gray-400 max-w-[74ch]">
                                                                <span class="font-semibold text-gray-800 dark:text-gray-200">{{ __('الخطوة التالية:') }}</span>
                                                                {{ $cases[$worst]['steps'][0] }}
                                                                <button type="button" wire:click="selectCase('{{ $worst }}')"
                                                                        class="ms-1 font-semibold text-amber-700 dark:text-amber-400 hover:underline">
                                                                    {{ __('اقرأ المعالجة كاملة') }}
                                                                </button>
                                                            </p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                @empty
                                    <tr>
                                        <td colspan="7" class="px-4 py-12 text-center">
                                            @if($search !== '' || $caseFilter !== '')
                                                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('لا نتائج ضمن هذا الفلتر') }}</p>
                                                <p class="mt-1 text-[12px] text-gray-500 dark:text-gray-400">{{ __('جرّب اسماً آخر، أو اعرض كل الحالات.') }}</p>
                                                <button type="button" wire:click="clearFilter"
                                                        class="mt-3 inline-flex px-3 py-1.5 rounded-lg text-xs font-semibold border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800">
                                                    {{ __('عرض الكل') }}
                                                </button>
                                            @else
                                                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ __('لا توجد حالات تحتاج تسوية') }}</p>
                                                <p class="mt-1 text-[12px] text-gray-500 dark:text-gray-400 max-w-[52ch] mx-auto leading-relaxed">
                                                    {{ __('كل حساب في هذا الفرع متسق: لا مال حُصِّل بلا تسجيل، ولا شهر بلا فاتورة، ولا لاعب بلا اشتراك. تُعاد القراءة مع كل فتح للصفحة.') }}
                                                </p>
                                            @endif
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
