{{--
    Services — IMPULSA skin. The same paginated Index component (per-user pricing
    via PriceResolver, real $svc->average_time, real $svc->description); this
    partial re-skins the page into category-grouped cards with a "Ver" modal.
--}}
@php
    use Illuminate\Support\Str;

    $groups = $services->getCollection()->groupBy('category_id');

    $legend = [
        ['icon' => '⭐', 'text' => __('Top seller')],
        ['icon' => '⚡', 'text' => __('Speed')],
        ['icon' => '🔥', 'text' => __('Popular')],
        ['icon' => '💎', 'text' => __('Best service')],
    ];
@endphp

<div x-data="{ svc: null }">
    {{-- Header: title · legend · platform filter --}}
    <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px">
        <div class="rf-imp-h1">
            <i data-lucide="list" style="width:24px;height:24px;color:var(--color-primary-600);"></i>{{ __('Services') }}
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap">
            @foreach ($legend as $l)
                <span class="rf-imp-legend">{{ $l['icon'] }} {{ $l['text'] }}</span>
            @endforeach
        </div>
        <div style="flex:1"></div>
        <div class="rf-imp-select-wrap" style="min-width:200px">
            <input type="search" wire:model.live.debounce.400ms="search" placeholder="{{ __('Search services…') }}" class="rf-imp-input" style="height:44px;">
        </div>
        <div class="rf-imp-select-wrap">
            <select wire:model.live="platformId" class="rf-imp-select" style="height:44px;min-width:190px;">
                <option value="">{{ __('All platforms') }}</option>
                @foreach ($platforms as $platform)
                    <option value="{{ $platform->id }}">{{ $platform->name }}</option>
                @endforeach
            </select>
            <i data-lucide="chevron-down" class="rf-imp-select-caret" style="width:15px;height:15px;"></i>
        </div>
    </div>

    {{-- Grouped services --}}
    <div style="display:flex;flex-direction:column;gap:18px">
        @forelse ($groups as $categoryId => $rows)
            @php
                $first   = $rows->first();
                $gnet    = $serviceNetMap[$first->id] ?? null;
                $gdot    = $gnet ? "var(--net-{$gnet['key']})" : 'var(--color-primary-600)';
            @endphp
            <div class="rf-imp-svcgroup" wire:key="grp-{{ $categoryId }}">
                <div class="rf-imp-svcgroup-head">
                    @if ($gnet && $gnet['sprite'])
                        <span class="rf-imp-dot" style="display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--net-{{ $gnet['key'] }});">
                            <svg aria-hidden="true" style="width:14px;height:14px;"><use href="#si-{{ $gnet['key'] }}"></use></svg>
                        </span>
                    @else
                        <span class="rf-imp-dot" style="width:9px;height:9px;background:{{ $gdot }}"></span>
                    @endif
                    <span class="rf-imp-svcgroup-title">{{ $first->category?->name ?? __('Uncategorised') }}</span>
                    <span class="rf-imp-newchip">NEW</span>
                </div>
                <div class="rf-imp-svcscroll">
                    <div class="rf-imp-svctable">
                        <div class="rf-imp-svchead">
                            <div>{{ __('ID') }}</div>
                            <div>{{ __('Name') }}</div>
                            <div style="text-align:right">{{ __('Rate/1000') }}</div>
                            <div style="text-align:right">{{ __('Min / Max') }}</div>
                            <div style="text-align:right">{{ __('Avg. time') }}</div>
                            <div></div>
                        </div>
                        @foreach ($rows as $svc)
                            @php
                                $net = $serviceNetMap[$svc->id] ?? null;
                                $svcData = \Illuminate\Support\Js::from([
                                    'id' => $svc->id,
                                    'name' => $svc->name,
                                    'desc' => $svc->description,
                                    'time' => $svc->average_time,
                                    'rate' => client_rate_money($svc->client_price),
                                    'min' => number_format($svc->min),
                                    'max' => number_format($svc->max),
                                ]);
                            @endphp
                            <div class="rf-imp-svcrow" wire:key="svc-{{ $svc->id }}">
                                <div class="rf-imp-svcid">{{ $svc->id }}</div>
                                <div class="rf-imp-svcname">
                                    <span class="rf-imp-platmono" style="background:{{ $net ? "var(--net-{$net['key']}-grad)" : 'var(--color-surface-3)' }};{{ $net ? '' : 'color:var(--color-text-muted);' }}">
                                        @if ($net && $net['sprite'])
                                            <svg aria-hidden="true"><use href="#si-{{ $net['key'] }}"></use></svg>
                                        @else
                                            {{ $net['mono'] ?? Str::upper(Str::substr($svc->category?->platform?->name ?? '?', 0, 1)) }}
                                        @endif
                                    </span>
                                    <span class="rf-imp-svcname-text" title="{{ $svc->name }}">{{ $svc->name }}</span>
                                </div>
                                <div class="rf-imp-svcrate">{{ client_rate_money($svc->client_price) }}</div>
                                <div class="rf-imp-svcmm">{{ number_format($svc->min) }} / {{ number_format($svc->max) }}</div>
                                <div class="rf-imp-svctime">{{ $svc->average_time ?: '—' }}</div>
                                <div style="text-align:right">
                                    <button type="button" class="rf-imp-verbtn" @click="svc = {{ $svcData }}">{{ __('View') }}</button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @empty
            <div class="rf-imp-card rf-imp-empty">
                <i data-lucide="layers" style="width:32px;height:32px;color:var(--color-text-subtle);"></i>
                <p style="font-weight:700;color:var(--color-text);">{{ __('No services found') }}</p>
                <p>{{ __('Try a different platform or search term.') }}</p>
            </div>
        @endforelse
    </div>

    @if ($services->hasPages())
        <div style="margin-top:18px">{{ $services->links() }}</div>
    @endif

    {{-- Service description modal ("Ver") --}}
    <div x-show="svc" x-cloak class="rf-modal-backdrop" @click.self="svc = null" x-transition.opacity style="z-index:70;">
        <div class="rf-modal rf-modal-md" x-show="svc" x-transition style="border-radius:20px;">
            <div class="rf-modal-header">
                <div style="display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:16px;">
                    <i data-lucide="info" style="width:18px;height:18px;color:var(--color-primary-600);"></i><span x-text="svc?.name"></span>
                </div>
                <button @click="svc = null" class="rf-icon-btn"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
            </div>
            <div class="rf-modal-body">
                <div class="rf-imp-metagrid" style="margin-bottom:18px">
                    <div class="rf-imp-metatile"><div class="rf-imp-metatile-label">{{ __('Average time') }}</div><div class="rf-imp-metatile-value" x-text="svc?.time || '—'"></div></div>
                    <div class="rf-imp-metatile"><div class="rf-imp-metatile-label">{{ __('Min.') }}</div><div class="rf-imp-metatile-value" x-text="svc?.min"></div></div>
                    <div class="rf-imp-metatile"><div class="rf-imp-metatile-label">{{ __('Max.') }}</div><div class="rf-imp-metatile-value" x-text="svc?.max"></div></div>
                    <div class="rf-imp-metatile"><div class="rf-imp-metatile-label">{{ __('Rate/1000') }}</div><div class="rf-imp-metatile-value" x-text="svc?.rate"></div></div>
                </div>
                <label class="rf-imp-field">{{ __('Description') }}</label>
                <div class="rf-imp-desc" style="max-height:40vh;overflow-y:auto;">
                    <span class="rf-imp-desc-text" style="white-space:pre-line" x-text="(svc && svc.desc) ? svc.desc : @js(__('This service has no description.'))"></span>
                </div>
            </div>
            <div class="rf-modal-footer">
                <button @click="svc = null" class="rf-btn rf-btn-secondary">{{ __('Close') }}</button>
                <a :href="svc ? '{{ route('app.orders.create') }}?service=' + svc.id : '#'" class="rf-imp-verbtn" style="padding:10px 18px;border-radius:12px;">{{ __('Place order') }}</a>
            </div>
        </div>
    </div>
</div>