{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: bar.blade.php
------------------------------------------------------
Use: The multi-colour good-standing meter. Six
     tier segments sized by their score span, with a marker
     at the user's score, so a user sees at a glance which
     level they are on and how far into it. Reused on the
     dashboard and wherever a plan is locked by standing.
     The meter runs low(left) -> high(right); the labels are
     Persian.
=====================================================
--}}

@props([
    'score' => 0,
    'level' => 0,
    'showMeta' => true,
    // The label above the meter. Defaults to the first-person "your level";
    // admin screens pass a third-person heading.
    'heading' => null,
    // Optional Alpine expression (0..100) for a second, distinct marker showing
    // a plan's required level. Null hides it; used on the standing-lock modal.
    'requiredPercentVar' => null,
])

@php
    use App\Support\GoodStanding;

    $score = (int) $score;
    $level = (int) $level;
    $tiers = GoodStanding::tiers();
    $count = count($tiers);
    $percent = GoodStanding::percent($score);
    $color = GoodStanding::color($level);
    $label = GoodStanding::label($level);

    // Segment widths follow each tier's score span so the marker lands exactly
    // on the boundary between levels.
    $segments = [];
    foreach ($tiers as $i => $tier) {
        $next = $i + 1 < $count ? $tiers[$i + 1]['min'] : GoodStanding::MAX_SCORE;
        $segments[] = [
            'color' => $tier['color'],
            'width' => ($next - $tier['min']) / GoodStanding::MAX_SCORE * 100,
        ];
    }
@endphp

<div {{ $attributes }}>
    @if ($showMeta)
        <div class="mb-2 flex items-center justify-between gap-2">
            <span class="text-[12.5px] text-ink-muted">{{ $heading ?? __('front.standing.your_level') }}</span>
            <span class="inline-flex items-center gap-1.5 text-[13px] font-bold" style="color: {{ $color }}">
                <span class="size-2 rounded-full" style="background: {{ $color }}"></span>
                {{ $label }}
            </span>
        </div>
    @endif

    <div dir="ltr" class="relative py-1">
        {{-- Required-level marker (dynamic): a distinct dark flag pointing down,
             so it never reads as the user's own round marker. --}}
        @if ($requiredPercentVar)
            <template x-if="{{ $requiredPercentVar }} !== null && {{ $requiredPercentVar }} !== ''">
                <div class="pointer-events-none absolute inset-y-0 z-10 -translate-x-1/2" x-bind:style="'left: ' + {{ $requiredPercentVar }} + '%'" aria-hidden="true">
                    <div class="absolute inset-y-[3px] left-1/2 w-0.5 -translate-x-1/2 rounded bg-ink/75"></div>
                    <svg class="absolute -top-[9px] left-1/2 size-3 -translate-x-1/2 text-ink" viewBox="0 0 12 12" fill="currentColor"><path d="M6 11 1 3.5h10z"/></svg>
                </div>
            </template>
        @endif

        <div class="flex h-2.5 overflow-hidden rounded-full">
            @foreach ($segments as $segment)
                <span style="width: {{ $segment['width'] }}%; background: {{ $segment['color'] }}"></span>
            @endforeach
        </div>
        <span
            class="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-[3px] border-white shadow-md"
            style="left: {{ $percent }}%; background: {{ $color }}"
            aria-hidden="true"
        ></span>
    </div>

    @if ($showMeta)
        <div dir="ltr" class="mt-1.5 flex items-center justify-between text-[10px] text-ink-faint">
            <span>{{ $tiers[0]['label'] }}</span>
            <span>{{ $tiers[$count - 1]['label'] }}</span>
        </div>
    @endif
</div>