{{--
    New Order — IMPULSA skin (redesigned: compact 3-panel hero + 2-col form).
    Same Livewire component (Create) and the same real OrderCreator flow.
    All content fits on a desktop screen without vertical scroll.
--}}
@php
    use Illuminate\Support\Str;

    $total = $hero['total'] ?? 0;
    $pct   = fn ($v) => $total > 0 ? number_format($v / $total * 100, 2).'%' : '0.00%';

    // ---- Description → spec-sheet bullets (scraped text) ----
    $bullets = [];
    if ($service && trim((string) $service->description) !== '') {
        $emoji = '\x{1F000}-\x{1FAFF}\x{2600}-\x{27BF}\x{2B00}-\x{2BFF}\x{2190}-\x{21FF}\x{2300}-\x{23FF}\x{25A0}-\x{25FF}\x{2100}-\x{214F}\x{FE0F}';
        $norm  = preg_replace('/\s*(?=['.$emoji.'])/u', "\n", trim($service->description));
        $norm  = preg_replace('/\r\n|\r|•|\s\|\s?|\s-\s/u', "\n", $norm);
        foreach (preg_split('/\n+/u', $norm, -1, PREG_SPLIT_NO_EMPTY) as $frag) {
            $t = trim($frag);
            if ($t === '' || ! preg_match('/[\p{L}\p{N}]/u', $t)) { continue; }
            if (preg_match('/^['.$emoji.']+\s*(.*)$/u', $t, $m) && trim($m[1]) !== '') { $t = trim($m[1]); }
            $label = null; $value = $t;
            if (preg_match('/^([\p{L}\p{N}\/&.\s]{1,26}?)\s*:\s*(.+)$/u', $t, $m2)) {
                $label = trim($m2[1]); $value = trim($m2[2]);
            }
            $low   = Str::lower($t);
            $color = 'var(--color-primary-600)';
            if (Str::contains($low, ['velocidad','speed','día','day','boost','k/'])) { $color = '#12c2b8'; }
            if (Str::contains($t, ['♻']) || preg_match('/\b(refill|lifetime)\b/u', $low) || Str::contains($low, ['recarga','garantía'])) { $color = '#22c55e'; }
            if (Str::contains($t, ['⚠']) || Str::contains($low, ['drop','no refill','no realice','importante','notice','please read','read the'])) { $color = '#f59e0b'; }
            $bullets[] = ['label' => $label, 'value' => $value, 'color' => $color];
        }
        $bullets = array_slice($bullets, 0, 24);
    }

    // ---- Donut multi-color segments for hero panel 2 ----
    $dCompleted = $total > 0 ? round(($hero['completed'] ?? 0) / $total * 100) : 0;
    $dPending   = $total > 0 ? round(($hero['pending']   ?? 0) / $total * 100) : 0;
    $dCanceled  = $total > 0 ? round(($hero['canceled']  ?? 0) / $total * 100) : 0;
    $dPendEnd   = $dCompleted + $dPending;
    $dCanEnd    = $dPendEnd  + $dCanceled;
    $donutGrad  = $total === 0
        ? 'var(--color-surface-3) 0 100%'
        : "#22c55e 0 {$dCompleted}%, #f59e0b {$dCompleted}% {$dPendEnd}%, #ef4444 {$dPendEnd}% {$dCanEnd}%, var(--color-surface-3) {$dCanEnd}% 100%";

    // ---- Sparkline chart for hero panel 1 (vh matches hero height 155px) ----
    $chartSeries = $hero['series'] ?? [];
    $chart = count($chartSeries) >= 2
        ? impulsa_chart($chartSeries, ['vh' => 155, 'padX' => 22, 'padTop' => 48, 'padBottom' => 8, 'tension' => 0.42])
        : null;

    // ---- Hero networks (quick + more, up to 20 chips) ----
    $heroNets = array_slice(array_merge($networks['quick'], $networks['more']), 0, 20);
@endphp

{{-- Scoped styles for this page only --}}
<style>
/* Panel 3: uniform CSS Grid — all chips same width & height (repeat 8 cols) */
.rf-hero-solidnets {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
    overflow: hidden;
}
.rf-hero-solidnets .rf-imp-netchip {
    background: var(--net-color, var(--color-primary-600)) !important;
    border-color: transparent !important;
    color: #fff !important;
    height: 32px; padding: 0 5px; gap: 4px; border-radius: 7px;
    width: 100%; min-width: 0; justify-content: center;
}
.rf-hero-solidnets .rf-imp-netchip:hover { opacity:.88; box-shadow:none; }
.rf-hero-solidnets .rf-imp-netchip-off { opacity:.35; }
.rf-hero-solidnets .rf-imp-netchip-ic { color:#fff !important; width:14px; height:14px; flex:0 0 14px; }
.rf-hero-solidnets .rf-imp-netchip-ic svg { width:12px; height:12px; fill:#fff; }
.rf-hero-solidnets .rf-imp-netchip-ic i,
.rf-hero-solidnets .rf-imp-netchip-ic [data-lucide] { width:14px; height:14px; }
.rf-hero-solidnets .rf-imp-netchip-name {
    display: inline !important; font-size: 9px; font-weight: 700;
    color: #fff !important; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rf-hero-solidnets .rf-imp-netchip-mono { font-size:8px; color:#fff; }
@media (max-width: 767px) {
    .rf-no-hero  { grid-template-columns: 1fr !important; height: auto !important; }
    .rf-no-fgrid { flex-direction: column !important; }
    .rf-no-rcol  { border-left: none !important; border-top: 1px solid var(--color-border); }
}
</style>

{{-- Root: content-driven, no forced viewport height --}}
<div style="display:flex;flex-direction:column;gap:25px;">

    {{-- ══ HERO: 3 compact panels at fixed 155px ══ --}}
    <div class="rf-no-hero"
         style="height:155px;display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:20px;overflow:hidden;">

        {{-- Panel 1 — sparkline chart + CTA pill --}}
        <div class="rf-imp-card" style="position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-surface) 0%,color-mix(in oklab,var(--brand) 5%,var(--color-surface)) 100%);">
            {{-- Chart fills the card background --}}
            @if ($chart)
                @php $nhcMaxVal = max(1, max(array_column($chartSeries ?: [['value' => 0]], 'value'))); @endphp
                <svg viewBox="0 0 {{ $chart['vw'] }} {{ $chart['vh'] }}" preserveAspectRatio="none"
                     style="width:100%;height:100%;position:absolute;top:0;left:0;overflow:visible;">
                    <defs>
                        <linearGradient id="nhc-gr" x1="0" x2="0" y1="0" y2="1">
                            <stop offset="0%"   stop-color="var(--brand)" stop-opacity=".28"/>
                            <stop offset="60%"  stop-color="var(--brand)" stop-opacity=".07"/>
                            <stop offset="100%" stop-color="var(--brand)" stop-opacity="0"/>
                        </linearGradient>
                    </defs>
                    {{-- Subtle horizontal reference lines --}}
                    @foreach (array_slice($chart['gridYs'], 1, 2) as $gy)
                        <line x1="{{ $chart['padX'] }}" y1="{{ $gy }}"
                              x2="{{ $chart['vw'] - $chart['padX'] }}" y2="{{ $gy }}"
                              stroke="var(--brand)" stroke-opacity=".065" stroke-width="1"/>
                    @endforeach
                    {{-- Area gradient fill --}}
                    <path d="{{ $chart['area'] }}" fill="url(#nhc-gr)"/>
                    {{-- Soft glow layer (wider, low-opacity duplicate) --}}
                    <path d="{{ $chart['line'] }}" fill="none"
                          stroke="var(--brand)" stroke-width="10" stroke-opacity=".13"
                          stroke-linecap="round" stroke-linejoin="round"/>
                    {{-- Crisp main line --}}
                    <path d="{{ $chart['line'] }}" fill="none" stroke="var(--brand)"
                          stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                    {{-- Data point dots (non-zero values only) --}}
                    @foreach ($chart['coords'] as $nhcIdx => $nhcCoord)
                        @php $nhcVal = (int)($chartSeries[$nhcIdx]['value'] ?? 0); @endphp
                        @if ($nhcVal > 0)
                            @php $nhcIsPeak = ($nhcVal === $nhcMaxVal); @endphp
                            <circle cx="{{ $nhcCoord['x'] }}" cy="{{ $nhcCoord['y'] }}"
                                    r="{{ $nhcIsPeak ? 8 : 4.5 }}" fill="var(--brand)"
                                    fill-opacity="{{ $nhcIsPeak ? '.17' : '.11' }}"/>
                            <circle cx="{{ $nhcCoord['x'] }}" cy="{{ $nhcCoord['y'] }}"
                                    r="{{ $nhcIsPeak ? 3.5 : 2.5 }}" fill="var(--brand)" fill-opacity=".88"/>
                        @endif
                    @endforeach
                </svg>
            @else
                <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.06;">
                    <i data-lucide="trending-up" style="width:72px;height:72px;"></i>
                </div>
            @endif
            {{-- "Place an Order" pill — centered over the chart --}}
            <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;">
                <span style="display:inline-flex;align-items:center;gap:6px;
                             background:var(--brand);color:#fff;
                             font-family:var(--font-display);font-weight:700;font-size:13px;
                             padding:8px 20px;border-radius:28px;white-space:nowrap;
                             box-shadow:0 10px 24px -8px color-mix(in oklab,var(--brand) 65%,transparent),
                                        inset 0 1px 0 rgba(255,255,255,.22);">
                    <i data-lucide="sparkles" style="width:14px;height:14px;"></i>
                    {{ __('Place an Order') }}
                </span>
            </div>
            {{-- Orders label bottom-left --}}
            <div style="position:absolute;bottom:8px;left:12px;z-index:3;
                        font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
                        color:color-mix(in oklab,var(--brand) 70%,var(--color-text-muted));">
                {{ __('Orders · 14d') }}
            </div>
        </div>

        {{-- Panel 2 — donut + 7 status counters --}}
        <div class="rf-imp-card" style="display:flex;align-items:center;gap:10px;padding:10px 12px;">
            <div style="width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:flex;
                        align-items:center;justify-content:center;
                        background:conic-gradient({{ $donutGrad }})">
                <div style="width:32px;height:32px;border-radius:50%;
                            background:var(--color-surface);
                            box-shadow:inset 0 0 0 1.5px var(--color-border);
                            display:flex;align-items:center;justify-content:center;">
                    <i data-lucide="shopping-bag" style="width:13px;height:13px;color:var(--color-text-muted);"></i>
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;flex:1;min-width:0;">
                @foreach ([
                    [__('All'),         $total,                          '#6366f1'],
                    [__('Pending'),     $hero['pending']     ?? 0,       '#94a3b8'],
                    [__('Processing'),  $hero['processing']  ?? 0,       '#f59e0b'],
                    [__('In progress'), $hero['inProgress']  ?? 0,       '#3b82f6'],
                    [__('Completed'),   $hero['completed']   ?? 0,       '#22c55e'],
                    [__('Partial'),     $hero['partial']     ?? 0,       '#a855f7'],
                    [__('Canceled'),    $hero['canceled']    ?? 0,       '#ef4444'],
                ] as [$lbl, $val, $clr])
                    <div style="display:flex;align-items:center;gap:5px;min-width:0;">
                        <div style="width:5px;height:5px;border-radius:50%;flex:0 0 5px;background:{{ $clr }};"></div>
                        <div style="font-size:10px;font-weight:600;color:var(--color-text-muted);
                                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;">{{ $lbl }}</div>
                        <div style="font-weight:700;font-size:12px;color:var(--color-text);white-space:nowrap;">{{ number_format($val) }}</div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Panel 3 — network chips (solid brand colors) --}}
        <div class="rf-imp-card" style="padding:10px 14px;overflow:hidden;display:flex;flex-direction:column;">
            <div style="font-size:10.5px;font-weight:700;color:var(--color-text-muted);
                        margin-bottom:8px;display:flex;align-items:center;gap:5px;">
                <i data-lucide="layout-grid" style="width:11px;height:11px;"></i>
                {{ __('Social Networks') }}
            </div>
            <div class="rf-hero-solidnets" style="flex:1;min-height:0;">
                @foreach ($heroNets as $n)
                    @include('partials.impulsa-netchip', ['n' => $n])
                @endforeach
            </div>
        </div>
    </div>

    {{-- ══ FORM CARD: tabs + form body ══ --}}
    <div class="rf-imp-card"
         style="display:flex;flex-direction:column;">

        {{-- Tabs --}}
        <div style="flex:0 0 auto;display:flex;gap:4px;
                    padding:8px 14px;border-bottom:1px solid var(--color-border);">
            <button wire:click="$set('mode','single')"
                    class="rf-imp-tab {{ $mode === 'single' ? 'rf-imp-tab-active' : '' }}"
                    style="padding:6px 14px;font-size:12.5px;gap:5px;">
                <i data-lucide="copy" style="width:13px;height:13px;"></i>{{ __('Single Order') }}
            </button>
            <button wire:click="$set('mode','important')"
                    class="rf-imp-tab {{ $mode === 'important' ? 'rf-imp-tab-active' : '' }}"
                    style="padding:6px 14px;font-size:12.5px;gap:5px;">
                <i data-lucide="info" style="width:13px;height:13px;"></i>{{ __('Important') }}
            </button>
            <button wire:click="$set('mode','mass')"
                    class="rf-imp-tab {{ $mode === 'mass' ? 'rf-imp-tab-active' : '' }}"
                    style="padding:6px 14px;font-size:12.5px;gap:5px;">
                <i data-lucide="network" style="width:13px;height:13px;"></i>{{ __('Mass Order') }}
            </button>
        </div>

        {{-- ── Important tab ── --}}
        @if ($mode === 'important')
            <div style="flex:1;overflow-y:auto;padding:18px 22px;">
                <div class="rf-alert rf-alert-info" style="border-radius:14px;">
                    <i data-lucide="info" style="width:18px;height:18px;flex-shrink:0;"></i>
                    <div>
                        <p style="font-weight:700;margin-bottom:4px;">{{ __('Before you order') }}</p>
                        <ul style="list-style:disc;padding-left:18px;line-height:1.65;">
                            <li>{{ __('Make sure your profile is public — private accounts cannot be processed.') }}</li>
                            <li>{{ __('Do not place a second order on the same link until the first completes.') }}</li>
                            <li>{{ __('Check the service min/max and average time before confirming.') }}</li>
                            <li>{{ __('Orders cannot be canceled once sent to the provider.') }}</li>
                        </ul>
                    </div>
                </div>
            </div>

        {{-- ── Mass order tab ── --}}
        @elseif ($mode === 'mass')
            <div style="flex:1;overflow-y:auto;padding:16px 20px;">
                <label class="rf-imp-field" style="margin-bottom:4px;">
                    {{ __('One order per line, in the format') }}
                    <span class="rf-mono rf-imp-field-sub">service_id|link|quantity</span>
                </label>
                <textarea wire:model.live.debounce.500ms="massInput" rows="8"
                          class="rf-imp-input rf-mono @error('massInput') rf-imp-input-error @enderror"
                          style="height:auto;padding:10px 14px;line-height:1.5;resize:vertical;"
                          placeholder="1|https://instagram.com/user|1000&#10;4|https://tiktok.com/@user/video/123|5000"></textarea>
                @error('massInput')
                    <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:4px;">{{ $message }}</p>
                @enderror
                <label class="rf-imp-confirm" style="margin:14px 0 12px;">
                    <input type="checkbox" wire:model.live="massConfirmed">
                    <span>{{ __('I understand orders cannot be canceled after submission.') }}</span>
                </label>
                @error('massConfirmed')
                    <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:-8px;margin-bottom:10px;">{{ $message }}</p>
                @enderror
                <button wire:click="placeMass" wire:loading.attr="disabled"
                        class="rf-imp-submit" style="height:44px;" @disabled(! $massConfirmed)>
                    <i data-lucide="check" style="width:16px;height:16px;"></i>
                    <span wire:loading.remove wire:target="placeMass">{{ __('Place orders') }}</span>
                    <span wire:loading wire:target="placeMass">{{ __('Placing…') }}</span>
                </button>
            </div>

        {{-- ── Single order tab: 2-column compact form ── --}}
        @else
            <div class="rf-no-fgrid"
                 style="display:flex;flex-direction:row;align-items:start;">

                {{-- ═══ LEFT: form fields ═══ --}}
                <div style="flex:1;min-width:0;padding:14px 18px;display:flex;flex-direction:column;gap:10px;">

                    <div style="display:flex;align-items:center;gap:7px;font-family:var(--font-display);
                                font-weight:700;font-size:15px;">
                        <i data-lucide="shopping-cart" style="width:15px;height:15px;color:var(--color-primary-600);"></i>
                        {{ __('Add new') }}
                    </div>

                    {{-- Category — unified dropdown.
                         When a network is active: options are pre-filtered to that network's
                         categories and the auto-selected default stays highlighted.
                         Clicking the field opens the dropdown (keeps the selection visible);
                         only the × clears it. When no network is active: all categories shown. --}}
                    <div>
                        <label class="rf-imp-field" style="margin-bottom:4px;">{{ __('Category') }}</label>
                        <div x-data="{ open: false }"
                             @click.outside="open = false; $wire.categorySearch = ''"
                             class="rf-imp-select-wrap">

                            {{-- Trigger row: left = name (clickable, opens dropdown); right = × or chevron --}}
                            <div class="rf-imp-select rf-imp-select-btn"
                                 style="height:38px;cursor:pointer;"
                                 @click="open = !open">
                                <span style="display:flex;align-items:center;gap:7px;overflow:hidden;flex:1;min-width:0;">
                                    @if ($selectedCategoryName)
                                        @include('partials.impulsa-neticon', ['n' => $selectedCategoryNetworkMeta ?? $selectedNetworkMeta])
                                        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;">
                                            {{ $selectedCategoryName }}
                                        </span>
                                    @else
                                        <span class="rf-imp-select-placeholder">{{ __('Choose a category') }}</span>
                                    @endif
                                </span>
                                @if ($selectedCategoryName)
                                    {{-- × clears the category but keeps the network active --}}
                                    <button type="button"
                                            wire:click.stop="clearCategory"
                                            @click.stop="open = false"
                                            style="flex-shrink:0;padding:4px;border-radius:4px;
                                                   color:var(--color-text-subtle);line-height:0;"
                                            aria-label="{{ __('Clear category') }}">
                                        <i data-lucide="x" style="width:14px;height:14px;"></i>
                                    </button>
                                @else
                                    <i data-lucide="chevron-down"
                                       class="rf-imp-select-caret"
                                       style="width:14px;height:14px;flex-shrink:0;"></i>
                                @endif
                            </div>

                            {{-- Dropdown with sticky search + filtered options --}}
                            <div x-show="open" x-cloak x-transition class="rf-menu"
                                 style="position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;
                                        max-height:260px;overflow-y:auto;padding-top:0;">
                                {{-- Sticky search input --}}
                                <div style="padding:7px 7px 5px;position:sticky;top:0;
                                            background:var(--color-surface);z-index:1;
                                            border-bottom:1px solid var(--color-border);">
                                    <input type="text"
                                           wire:model.live.debounce.300ms="categorySearch"
                                           placeholder="{{ __('Search categories…') }}"
                                           class="rf-imp-ddsearch"
                                           style="width:100%;"
                                           @click.stop>
                                </div>
                                @forelse ($categoryOptions as $opt)
                                    <button type="button"
                                            class="rf-menu-item {{ $categoryId === $opt->id ? 'rf-menu-item-active' : '' }}"
                                            style="width:100%;text-align:left;display:flex;align-items:center;gap:7px;"
                                            wire:click="selectNetworkCategory({{ $opt->id }})"
                                            @click="open = false; $wire.categorySearch = ''">
                                        @include('partials.impulsa-neticon', ['n' => ($categoryNetMap[$opt->id] ?? $selectedNetworkMeta)])
                                        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;">
                                            {{ $opt->name }}
                                        </span>
                                        @if ($categoryId === $opt->id)
                                            <i data-lucide="check"
                                               style="width:13px;height:13px;flex-shrink:0;
                                                      color:var(--color-primary-600);"></i>
                                        @endif
                                    </button>
                                @empty
                                    <div class="px-3 py-2 text-xs" style="color:var(--color-text-subtle);">
                                        {{ $categorySearch === '' ? __('No categories available.') : __('No categories match.') }}
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>

                    {{-- Order Service --}}
                    <div>
                        <label class="rf-imp-field" style="margin-bottom:4px;">{{ __('Order Service') }}</label>
                        @if (! $categoryId)
                            <div class="rf-imp-select rf-imp-select-btn"
                                 style="height:38px;cursor:not-allowed;opacity:.65;">
                                <span class="rf-imp-select-placeholder">{{ __('Choose a category first') }}</span>
                                <i data-lucide="chevron-down" style="width:14px;height:14px;flex-shrink:0;color:var(--color-text-subtle);"></i>
                            </div>
                        @else
                            <div x-data="{ open: false, q: '' }" @click.outside="open = false"
                                 class="rf-imp-select-wrap">
                                <button type="button" @click="open = !open"
                                        class="rf-imp-select rf-imp-select-btn" style="height:38px;">
                                    <span class="{{ $service ? '' : 'rf-imp-select-placeholder' }}">
                                        {{ $service ? 'ID'.$service->id.' — '.Str::limit($service->name, 50) : __('Choose a service') }}
                                    </span>
                                    <i data-lucide="chevron-down" class="rf-imp-select-caret" style="width:14px;height:14px;"></i>
                                </button>
                                <div x-show="open" x-cloak x-transition class="rf-menu"
                                     style="position:absolute;z-index:40;top:calc(100% + 4px);left:0;right:0;
                                            max-height:280px;overflow-y:auto;padding:6px;">
                                    <input type="text" x-model="q" @click.stop
                                           placeholder="{{ __('Search services…') }}" class="rf-imp-ddsearch">
                                    @foreach ($services as $svc)
                                        <button type="button"
                                                wire:click="selectService({{ $svc->id }})"
                                                @click="open = false"
                                                wire:key="opt-svc-{{ $svc->id }}"
                                                x-show="q === '' || $el.dataset.s.includes(q.toLowerCase())"
                                                data-s="{{ Str::lower($svc->name).' id'.$svc->id }}"
                                                class="rf-menu-item {{ $serviceId === $svc->id ? 'rf-menu-item-active' : '' }}"
                                                style="width:100%;text-align:left;display:flex;align-items:center;
                                                       justify-content:space-between;gap:8px;">
                                            @include('partials.impulsa-neticon', ['n' => $selectedCategoryNetworkMeta ?? $selectedNetworkMeta])
                                            <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;">
                                                ID{{ $svc->id }} — {{ Str::limit($svc->name, 54) }}
                                            </span>
                                            <span style="flex:0 0 auto;font-weight:800;color:var(--rf-accent-2);">
                                                {{ client_rate_money($unitPriceMap[$svc->id] ?? $svc->owner_price) }}
                                            </span>
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>

                    @if ($isSubscription)
                        {{-- SUBSCRIPTION FIELDS --}}
                        <div style="border-radius:10px;padding:12px 14px;background:var(--color-surface-2);">
                            <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px;">
                                <i data-lucide="repeat" style="width:14px;height:14px;color:var(--color-primary-600);"></i>
                                <span style="font-size:12.5px;font-weight:700;">{{ __('Subscription settings') }}</span>
                            </div>

                            {{-- Username --}}
                            <div style="margin-bottom:8px;">
                                <label class="rf-imp-field" style="margin-bottom:3px;">{{ __('Username / Profile URL') }} <span style="color:var(--color-primary);">*</span></label>
                                <input type="text" wire:model.live.debounce.400ms="subUsername"
                                       class="rf-imp-input @error('subUsername') rf-imp-input-error @enderror"
                                       placeholder="@username" style="height:38px;">
                                @error('subUsername') <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:3px;">{{ $message }}</p> @enderror
                            </div>

                            {{-- Min / Max per post --}}
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;">
                                <div>
                                    <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Min per post') }} <span style="color:var(--color-primary);">*</span></label>
                                    <input type="number" min="1" wire:model.live="subMin"
                                           class="rf-imp-input @error('subMin') rf-imp-input-error @enderror"
                                           style="height:34px;" placeholder="{{ $service?->min }}">
                                    @error('subMin') <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:2px;font-size:10px;">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Max per post') }} <span style="color:var(--color-primary);">*</span></label>
                                    <input type="number" min="1" wire:model.live="subMax"
                                           class="rf-imp-input @error('subMax') rf-imp-input-error @enderror"
                                           style="height:34px;" placeholder="{{ $service?->min }}">
                                    @error('subMax') <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:2px;font-size:10px;">{{ $message }}</p> @enderror
                                </div>
                            </div>
                            @if ($service)
                                <p class="rf-imp-hint" style="margin-top:-4px;margin-bottom:8px;">{{ __('Service limit') }}: {{ number_format($service->min) }} – {{ number_format($service->max) }} {{ __('per post') }}</p>
                            @endif

                            {{-- Posts / Old posts --}}
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;">
                                <div>
                                    <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Next posts') }} <span style="color:var(--color-primary);">*</span></label>
                                    <input type="number" min="1" wire:model.live="subPosts"
                                           class="rf-imp-input @error('subPosts') rf-imp-input-error @enderror"
                                           style="height:34px;" placeholder="10">
                                    @error('subPosts') <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:2px;font-size:10px;">{{ $message }}</p> @enderror
                                </div>
                                <div>
                                    <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Old posts') }} <span class="rf-imp-hint" style="margin:0;">{{ __('opt.') }}</span></label>
                                    <input type="number" min="0" wire:model.blur="subOldPosts"
                                           class="rf-imp-input" style="height:34px;" placeholder="0">
                                </div>
                            </div>

                            {{-- Delay / Expiry --}}
                            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                                <div>
                                    <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Delay (min)') }} <span class="rf-imp-hint" style="margin:0;">{{ __('opt.') }}</span></label>
                                    <input type="number" min="0" wire:model.blur="subDelay"
                                           class="rf-imp-input" style="height:34px;" placeholder="0">
                                </div>
                                <div>
                                    <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Expiry') }} <span class="rf-imp-hint" style="margin:0;">{{ __('opt.') }}</span></label>
                                    <input type="date" wire:model.blur="subExpiry"
                                           class="rf-imp-input" style="height:34px;" min="{{ now()->addDay()->toDateString() }}">
                                </div>
                            </div>
                        </div>

                        {{-- Subscription charge chip --}}
                        @if ($subMax && $subPosts)
                            <div style="display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;
                                        background:var(--color-primary-soft);font-size:12px;color:var(--color-primary-600);">
                                <span>{{ number_format((int)$subMax) }} × {{ number_format((int)$subPosts) }} = {{ number_format((int)$subMax * (int)$subPosts) }} {{ __('units') }}</span>
                                <span style="margin-left:auto;font-weight:800;font-size:14px;font-family:var(--font-display);">{{ client_money($charge) }}</span>
                            </div>
                        @endif
                    @else
                        {{-- Link --}}
                        <div>
                            <label class="rf-imp-field" style="margin-bottom:4px;">{{ __('Link') }}</label>
                            <input type="text" wire:model.blur="link"
                                   class="rf-imp-input @error('link') rf-imp-input-error @enderror"
                                   placeholder="https://" style="height:38px;">
                            @error('link')
                                <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:3px;">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Drip-feed toggle --}}
                        @if ($service && $service->dripfeed)
                            <div style="border-radius:10px;padding:10px 12px;
                                        background:var(--color-surface-2);">
                                <label style="display:flex;cursor:pointer;align-items:center;gap:8px;">
                                    <input type="checkbox"
                                           @checked($dripFeed)
                                           x-on:change="$wire.set('dripFeed', $event.target.checked)"
                                           class="rf-checkbox">
                                    <span style="font-size:12.5px;font-weight:600;">{{ __('Enable drip-feed') }}</span>
                                    <span class="rf-imp-hint" style="margin:0;">{{ __('Deliver gradually in runs') }}</span>
                                </label>
                                @if ($dripFeed)
                                    <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                                        <div>
                                            <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Runs') }}</label>
                                            <input type="number" min="2" max="100" wire:model.blur="runs"
                                                   class="rf-imp-input" style="height:34px;" placeholder="10">
                                        </div>
                                        <div>
                                            <label class="rf-imp-field" style="margin-bottom:3px;font-size:11px;">{{ __('Interval') }}</label>
                                            <input type="number" min="1" max="1440" wire:model.blur="interval"
                                                   class="rf-imp-input" style="height:34px;" placeholder="30">
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif

                        {{-- Quantity + Total Charge --}}
                        <div>
                            <label class="rf-imp-field" style="margin-bottom:4px;">
                                {{ $dripFeed ? __('Quantity per run') : __('Quantity') }}
                                @if ($service)
                                    <span class="rf-imp-field-sub">
                                        · {{ __('min') }} {{ number_format($service->min) }}
                                        / {{ __('max') }} {{ number_format($service->max) }}
                                    </span>
                                @endif
                            </label>
                            <div style="display:flex;gap:10px;align-items:center;">
                                <input type="number" min="1"
                                       wire:model.live.debounce.300ms="quantity"
                                       class="rf-imp-input {{ ($belowMin || $aboveMax) ? 'rf-imp-input-error' : '' }}"
                                       style="height:38px;flex:1;"
                                       placeholder="0"
                                       @if (! $service) disabled @endif>
                                <div style="flex:0 0 auto;display:flex;align-items:center;gap:6px;height:38px;
                                            padding:0 12px;border:1.5px solid var(--color-border-strong);
                                            border-radius:10px;background:var(--color-surface-2);">
                                    <span style="font-weight:700;font-size:11.5px;color:var(--color-text-muted);">{{ __('Total') }}:</span>
                                    <span style="font-family:var(--font-display);font-weight:800;font-size:15px;">{{ client_money($charge) }}</span>
                                </div>
                            </div>
                            @if ($dripFeed && $runs && $interval && $quantity)
                                @php
                                    $dfTotalQty = (int)$runs * (int)$quantity;
                                    $dfTotalMin = max(0, ((int)$runs - 1) * (int)$interval);
                                    $dfH = intdiv($dfTotalMin, 60);
                                    $dfM = $dfTotalMin % 60;
                                    if ($dfH > 0 && $dfM > 0) {
                                        $dfDuration = __(':hours hours and :minutes minutes', ['hours' => $dfH, 'minutes' => $dfM]);
                                    } elseif ($dfH > 0) {
                                        $dfDuration = __(':hours hours', ['hours' => $dfH]);
                                    } else {
                                        $dfDuration = __(':minutes minutes', ['minutes' => $dfM]);
                                    }
                                @endphp
                                <div style="margin-top:6px;padding:8px 10px;border-radius:8px;
                                            background:var(--color-primary-soft);font-size:12px;
                                            color:var(--color-primary-600);line-height:1.7;">
                                    <div>{{ __(':runs deliveries of :qty every :interval min', ['runs' => number_format((int)$runs), 'qty' => number_format((int)$quantity), 'interval' => (int)$interval]) }}</div>
                                    <div>{{ __('Total quantity: :total', ['total' => number_format($dfTotalQty)]) }}</div>
                                    <div>{{ __('Approximate duration: :duration', ['duration' => $dfDuration]) }}</div>
                                    <div>{{ __('Total price: :price', ['price' => client_money($charge)]) }}</div>
                                </div>
                            @endif
                            @if ($belowMin)
                                <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:3px;">
                                    {{ __('Quantity is below the minimum of :min.', ['min' => number_format($service->min)]) }}
                                </p>
                            @endif
                            @if ($aboveMax)
                                <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:3px;">
                                    {{ __('Quantity is above the maximum of :max.', ['max' => number_format($service->max)]) }}
                                </p>
                            @endif
                        </div>
                    @endif

                    {{-- Insufficient funds alert --}}
                    @if ($insufficient)
                        <div class="rf-alert rf-alert-danger" style="border-radius:10px;padding:9px 12px;">
                            <i data-lucide="alert-triangle" style="width:14px;height:14px;flex-shrink:0;"></i>
                            <div style="font-size:13px;">
                                {{ __('Order amount exceeds available funds.') }}
                                <a href="{{ route('app.funds') }}" class="font-semibold underline">{{ __('Add funds') }}</a>
                            </div>
                        </div>
                    @endif

                    {{-- Confirm checkbox --}}
                    <label class="rf-imp-confirm" style="margin-bottom:2px;">
                        <input type="checkbox" wire:model.live="confirmed">
                        <span style="text-transform:uppercase;font-weight:800;letter-spacing:.3px;font-size:12px;">
                            {{ __('Yes, I have confirmed the order!') }}
                        </span>
                    </label>
                    @error('confirmed')
                        <p class="rf-imp-hint rf-imp-hint-error" style="margin-top:-6px;margin-bottom:8px;">{{ $message }}</p>
                    @enderror

                    {{-- Place Order (always visible at bottom of column) --}}
                    <button wire:click="place" wire:loading.attr="disabled"
                            class="rf-imp-submit" style="height:44px;"
                            @disabled(! $canPlace || ! $confirmed)>
                        <i data-lucide="check" style="width:16px;height:16px;"></i>
                        <span wire:loading.remove wire:target="place">
                            {{ $canPlace ? __('Place order') : __('Confirm to continue') }}
                        </span>
                        <span wire:loading wire:target="place">{{ __('Placing…') }}</span>
                    </button>
                </div>

                {{-- ═══ RIGHT: order summary ═══ --}}
                <div class="rf-no-rcol"
                     style="flex:1;min-width:0;border-left:1px solid var(--color-border);
                            padding:14px 18px;display:flex;flex-direction:column;gap:10px;">

                    <div style="display:flex;align-items:center;gap:7px;font-family:var(--font-display);
                                font-weight:700;font-size:15px;">
                        <i data-lucide="clipboard-list" style="width:15px;height:15px;color:var(--color-primary-600);"></i>
                        {{ __('Order Summary') }}
                    </div>

                    {{-- Service name --}}
                    <div>
                        <label class="rf-imp-field" style="margin-bottom:4px;font-size:11px;">{{ __('Service name') }}</label>
                        <div class="rf-imp-sumbox" style="min-height:40px;padding:8px 12px;font-size:13px;">
                            {{ $service?->name ?? __('Choose a service to see its details.') }}
                        </div>
                    </div>

                    {{-- Meta tiles: 4 cols, compact --}}
                    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;">
                        <div class="rf-imp-metatile-group">
                            <div class="rf-imp-metatile-label">{{ __('Avg. time') }}</div>
                            <div class="rf-imp-metatile" style="height:36px;font-size:12px;padding:0 8px;">
                                {{ $service && $service->average_time ? $service->average_time : '—' }}
                            </div>
                        </div>
                        <div class="rf-imp-metatile-group">
                            <div class="rf-imp-metatile-label">{{ __('Min') }}</div>
                            <div class="rf-imp-metatile" style="height:36px;font-size:12px;padding:0 8px;">
                                {{ $service ? number_format($service->min) : '—' }}
                            </div>
                        </div>
                        <div class="rf-imp-metatile-group">
                            <div class="rf-imp-metatile-label">{{ __('Max') }}</div>
                            <div class="rf-imp-metatile" style="height:36px;font-size:12px;padding:0 8px;">
                                {{ $service ? number_format($service->max) : '—' }}
                            </div>
                        </div>
                        <div class="rf-imp-metatile-group">
                            <div class="rf-imp-metatile-label">{{ __('Per 1000') }}</div>
                            <div class="rf-imp-metatile" style="height:36px;font-size:12px;padding:0 8px;">
                                {{ $unitPrice ? client_rate_money($unitPrice) : '—' }}
                            </div>
                        </div>
                    </div>

                    {{-- Description: grows with content, no internal scroll --}}
                    <div>
                        <label class="rf-imp-field" style="margin-bottom:4px;font-size:11px;">{{ __('Description') }}</label>
                        <div class="rf-imp-desc"
                             style="height:auto;min-height:120px;max-height:none;overflow:visible;gap:8px;padding:11px 13px;word-break:break-word;white-space:normal;">
                            @if (count($bullets))
                                @foreach ($bullets as $b)
                                    <div class="rf-imp-desc-item">
                                        <span class="rf-imp-desc-dot" style="background:{{ $b['color'] }};margin-top:5px;"></span>
                                        <span class="rf-imp-desc-text" style="font-size:12.5px;">
                                            @if ($b['label'])<span class="rf-imp-desc-label">{{ $b['label'] }}:</span>@endif{{ $b['value'] }}
                                        </span>
                                    </div>
                                @endforeach
                            @else
                                <span class="rf-imp-desc-text" style="font-size:12.5px;">
                                    {{ $service ? __('This service has no description.') : __('Select a service to read its description.') }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>{{-- /form card --}}

</div>{{-- /root --}}

{{-- Modal is rendered by the parent create.blade.php (shared across all skins) --}}