{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: explainer.blade.php
------------------------------------------------------
Use: A self-contained "how is my good-standing calculated"
     button + modal. Shows the base score, what each action
     adds or removes (from the single source of truth in the
     service), the level ladder, and -- when a breakdown is
     passed -- the user's own current numbers.
=====================================================
--}}

@props([
    'breakdown' => null,
    'label' => null,
    // First-person copy ("your score") by default; admin screens pass false to
    // get third-person copy ("the user's score").
    'self' => true,
])

@php
    use App\Services\GoodStandingService;
    use App\Support\Format;
    use App\Support\GoodStanding;

    // Points per action, straight from the service constants, so the explainer
    // can never drift from the real formula.
    $rules = [
        ['key' => 'early', 'points' => GoodStandingService::EARLY_POINTS],
        ['key' => 'on_time', 'points' => GoodStandingService::ON_TIME_POINTS],
        ['key' => 'late_paid', 'points' => GoodStandingService::LATE_POINTS],
        ['key' => 'overdue', 'points' => GoodStandingService::OVERDUE_POINTS],
        ['key' => 'overdue_days', 'points' => GoodStandingService::OVERDUE_PER_DAY_POINTS],
        ['key' => 'expired', 'points' => GoodStandingService::EXPIRED_POINTS],
    ];

    $signed = static fn (int $n) => ($n > 0 ? '+' : ($n < 0 ? '−' : '')).Format::persianDigits((string) abs($n));
@endphp

<div x-data="{ open: false }" {{ $attributes }}>
    <button type="button" x-on:click="open = true"
            class="inline-flex items-center gap-2 rounded-xl border border-line bg-white px-4 py-2.5 text-[13px] font-bold text-primary-600 transition hover:bg-[#f2f0fa]">
        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><circle cx="12" cy="8" r="0.4"/></svg>
        {{ $label ?? __('front.standing.how_calculated') }}
    </button>

    <template x-teleport="body">
        <div x-show="open" x-cloak x-transition.opacity
             class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5"
             x-on:click.self="open = false" x-on:keydown.escape.window="open = false">
            <div class="flex max-h-[86vh] w-full max-w-[520px] flex-col overflow-hidden rounded-[22px] bg-white shadow-2xl" x-show="open" x-transition.scale.origin.center>
                <div class="flex items-center justify-between border-b border-line px-6 py-5">
                    <h3 class="text-[17px] font-bold">{{ __('front.standing.how_title') }}</h3>
                    <button type="button" x-on:click="open = false" class="flex size-8 items-center justify-center rounded-[9px] bg-[#f2f0fa] text-ink-soft transition hover:bg-[#e8e3f8]" aria-label="{{ __('front.actions.understood') }}">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
                    </button>
                </div>

                <div class="flex flex-col gap-5 overflow-y-auto px-6 py-5">
                    <p class="text-[13px] leading-7 text-ink-soft">{{ __($self ? 'front.standing.how_intro' : 'front.standing.how_intro_user', ['base' => Format::persianDigits((string) GoodStanding::BASE_SCORE)]) }}</p>

                    {{-- What changes the score --}}
                    <div>
                        <div class="mb-2.5 text-[13px] font-bold">{{ __('front.standing.how_factors') }}</div>
                        <div class="flex flex-col gap-2">
                            @foreach ($rules as $rule)
                                <div class="flex items-center justify-between gap-3 rounded-xl border border-line bg-[#faf9fd] px-4 py-2.5">
                                    <span class="text-[12.5px] text-ink-soft">{{ __('front.standing.factors.'.$rule['key']) }}</span>
                                    <span @class([
                                        'shrink-0 rounded-lg px-2.5 py-1 text-[12px] font-bold',
                                        'bg-[#e7f7ee] text-green-600' => $rule['points'] > 0,
                                        'bg-secondary-50 text-secondary-500' => $rule['points'] < 0,
                                    ])>{{ $signed($rule['points']) }} {{ __('front.standing.points') }}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- The level ladder --}}
                    <div>
                        <div class="mb-2.5 text-[13px] font-bold">{{ __('front.standing.how_levels') }}</div>
                        <div class="flex flex-col gap-1.5">
                            @foreach (array_reverse(GoodStanding::tiers()) as $tier)
                                <div class="flex items-center justify-between gap-3 rounded-lg px-3 py-2" style="background: {{ $tier['color'] }}14">
                                    <span class="inline-flex items-center gap-2 text-[12.5px] font-bold">
                                        <span class="size-2.5 rounded-full" style="background: {{ $tier['color'] }}"></span>
                                        {{ $tier['label'] }}
                                    </span>
                                    <span class="text-[11.5px] text-ink-faint" dir="ltr">{{ Format::persianDigits((string) $tier['min']) }}+</span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    @if ($breakdown !== null)
                        {{-- The user's own current tally --}}
                        <div class="rounded-2xl border border-primary-100 bg-primary-50 p-4">
                            <div class="mb-2 flex items-center justify-between">
                                <span class="text-[13px] font-bold text-primary-900">{{ $self ? __('front.standing.your_score') : __('front.standing.user_score') }}</span>
                                <span class="text-[15px] font-bold text-primary-600" dir="ltr">{{ Format::persianDigits((string) $breakdown['score']) }} / {{ Format::persianDigits((string) GoodStanding::MAX_SCORE) }}</span>
                            </div>
                            <div class="flex flex-col gap-1 text-[12px] text-primary-900/80">
                                <div class="flex items-center justify-between"><span>{{ __('front.standing.base') }}</span><span dir="ltr">{{ Format::persianDigits((string) $breakdown['base']) }}</span></div>
                                @foreach ($breakdown['factors'] as $factor)
                                    @if ($factor['count'] > 0)
                                        <div class="flex items-center justify-between">
                                            <span>{{ __('front.standing.factors.'.$factor['key']) }} (×{{ Format::persianDigits((string) $factor['count']) }})</span>
                                            <span dir="ltr">{{ $signed($factor['points']) }}</span>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <div class="border-t border-line px-6 py-4">
                    <button type="button" x-on:click="open = false" class="w-full rounded-xl bg-primary-600 py-3 text-sm font-bold text-white transition hover:bg-primary-700">
                        {{ __('front.actions.understood') }}
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>