<section>
    <div class="mb-3 flex items-center justify-between gap-2">
        <h2 class="text-base font-semibold text-slate-900">Leave Balances</h2>
    </div>

    @if(empty($balances))
        <x-card>
            <p class="text-sm text-slate-500">No leave types configured.</p>
        </x-card>
    @else
        <div class="grid gap-4 sm:grid-cols-2">
            @foreach($balances as $row)
                @php
                    $isUnlimited = ! empty($row['is_unlimited']);
                    $available = $isUnlimited ? null : (float) ($row['available'] ?? 0);
                    $used = $isUnlimited ? null : (float) ($row['used'] ?? 0);
                    $accrued = $isUnlimited ? null : (float) ($row['accrued'] ?? ($row['earned_to_date'] ?? 0));
                    $earned = $isUnlimited ? null : (float) ($row['earned_to_date'] ?? $accrued);
                    $carry = $isUnlimited ? null : (float) ($row['carried_forward'] ?? 0);
                    $quota = $isUnlimited ? null : (float) ($row['entitlement'] ?? 0);
                    $hasNoData = $isUnlimited
                        ? false
                        : ($quota <= 0 && $available <= 0 && $used <= 0 && $accrued <= 0 && $carry <= 0);
                    $fmtDays = function (?float $value) use ($isUnlimited): string {
                        if ($isUnlimited) {
                            return '∞';
                        }
                        $n = round((float) $value, 2);
                        $label = abs($n - (int) $n) < 0.001
                            ? (string) (int) $n
                            : rtrim(rtrim(number_format($n, 2, '.', ''), '0'), '.');
                        $unit = abs($n) === 1.0 ? ' day' : ' days';

                        return $label.$unit;
                    };
                    $fmtNum = function (?float $value) use ($isUnlimited): string {
                        if ($isUnlimited) {
                            return '∞';
                        }
                        $n = round((float) $value, 2);

                        return abs($n - (int) $n) < 0.001
                            ? (string) (int) $n
                            : rtrim(rtrim(number_format($n, 2, '.', ''), '0'), '.');
                    };
                @endphp
                <div class="rounded border border-slate-200 bg-white p-4 shadow-sm" x-data="{ open: false }">
                    <div class="mb-3 flex items-start justify-between gap-2">
                        <div>
                            <p class="text-sm font-semibold text-slate-900">
                                {{ $row['name'] }}
                                @if(! empty($row['short_code']))
                                    <span class="font-normal text-slate-400">({{ $row['short_code'] }})</span>
                                @endif
                            </p>
                            @if(! empty($row['accrual_mode']))
                                <span class="mt-1 inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-[11px] uppercase text-slate-600">{{ $row['accrual_mode'] }}</span>
                            @endif
                        </div>
                        <button type="button" class="text-xs font-medium text-primary hover:underline" @click="open = !open" x-text="open ? 'Hide details' : 'View details'"></button>
                    </div>

                    <div class="mb-4 flex items-center gap-5">
                        <div class="relative h-36 w-36 shrink-0">
                            @php
                                $ringPct = 0;
                                if ($isUnlimited) {
                                    $ringPct = 100;
                                } elseif (! $hasNoData) {
                                    $ringTotal = max($available, 0) + max($used, 0);
                                    $ringPct = $ringTotal > 0
                                        ? (int) round((max($available, 0) / $ringTotal) * 100)
                                        : 0;
                                }
                                $ringCircumference = 2 * M_PI * 40;
                                $ringOffset = $ringCircumference * (1 - ($ringPct / 100));
                            @endphp
                            <svg class="h-full w-full -rotate-90" viewBox="0 0 100 100" aria-hidden="true">
                                <circle cx="50" cy="50" r="40" fill="none" stroke="#e2e8f0" stroke-width="9"></circle>
                                @if(! $hasNoData)
                                    <circle
                                        cx="50"
                                        cy="50"
                                        r="40"
                                        fill="none"
                                        stroke="#0c6e6d"
                                        stroke-width="9"
                                        stroke-linecap="round"
                                        stroke-dasharray="{{ $ringCircumference }}"
                                        stroke-dashoffset="{{ $isUnlimited ? 0 : $ringOffset }}"
                                    ></circle>
                                @endif
                            </svg>
                            <div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
                                @if($hasNoData)
                                    <span class="px-2 text-xs leading-tight text-slate-400">No data to display</span>
                                @elseif($isUnlimited)
                                    <span class="text-2xl font-bold text-slate-800">∞</span>
                                    <span class="text-xs text-slate-500">Available</span>
                                @else
                                    <span class="text-lg font-bold text-slate-900">{{ $fmtNum($available) }}</span>
                                    <span class="text-xs text-slate-500">Days Available</span>
                                @endif
                            </div>
                        </div>
                        <div class="grid flex-1 grid-cols-2 gap-x-4 gap-y-3 text-sm">
                            <div>
                                <p class="text-slate-500">Available</p>
                                <p class="font-semibold text-slate-800">{{ $fmtDays($available) }}</p>
                            </div>
                            <div>
                                <p class="text-slate-500">Consumed</p>
                                <p class="font-semibold text-slate-800">{{ $isUnlimited ? '—' : $fmtDays($used) }}</p>
                            </div>
                            <div>
                                <p class="text-slate-500">Accrued So Far</p>
                                <p class="font-semibold text-slate-800">{{ $isUnlimited ? '—' : $fmtDays($earned ?? $accrued) }}</p>
                            </div>
                            <div>
                                <p class="text-slate-500">Carryover</p>
                                <p class="font-semibold text-slate-800">{{ $isUnlimited ? '—' : $fmtDays($carry) }}</p>
                            </div>
                            <div class="col-span-2">
                                <p class="text-slate-500">Annual Quota</p>
                                <p class="font-semibold text-slate-800">{{ $fmtDays($quota) }}</p>
                            </div>
                        </div>
                    </div>

                    <div x-show="open" x-cloak class="border-t border-slate-100 pt-3 text-xs text-slate-600">
                        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
                            <div><span class="text-slate-500">Opening</span><br><strong>{{ $isUnlimited ? '—' : number_format((float) ($row['opening'] ?? 0), 2) }}</strong></div>
                            <div><span class="text-slate-500">Pending</span><br><strong>{{ $isUnlimited ? '—' : number_format((float) ($row['pending'] ?? 0), 2) }}</strong></div>
                            <div><span class="text-slate-500">Allocated</span><br><strong>{{ $isUnlimited ? '—' : number_format((float) ($row['allocated'] ?? 0), 2) }}</strong></div>
                            <div><span class="text-slate-500">Mode</span><br><strong>{{ $row['accrual_mode'] ?? ($isUnlimited ? 'unlimited' : '—') }}</strong></div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</section>
