{{--
    Welcome + base commission — the first thing a reseller sees on a panel that
    has stock and has never been priced. Rendered from the shell
    (panel.layouts.app), so it finds the reseller wherever they land: dashboard,
    My Services or Margins & Pricing.

    The whole component collapses to an empty root when it does not apply, which
    is the normal case for every reseller that already sells at a margin — and
    for the Business panel that has not connected a supplier yet, because a
    commission is a percentage over the cost of SOMETHING.

    The example recomputes in Alpine on every keystroke — no round-trip per key —
    with the SAME arithmetic the server applies (cost × (1 + pct/100)): on the
    platform catalogue that is PriceResolver::applyResellerMargin at checkout, on
    their own supply it is the sale price ResellerDefaultMargin::applyToOwnSupply
    writes when this modal is saved. Either way the number in the modal is the
    number the client will be charged.
--}}
<div>
@if ($eligible)
    <x-admin.modal wire-model="show" :title="__('Welcome to :name! 🎉', ['name' => $panelName])" size="md">
        <div class="space-y-5"
             x-data="{
                percent: @entangle('percent'),
                cost: {{ $sample ? (float) $sample['cost'] : 0 }},
                symbol: @js($symbol),
                decimals: {{ (int) $decimals }},
                tsep: @js($thousandsSep),
                dsep: @js($decimalSep),
                get pct() { const n = parseFloat(this.percent); return isFinite(n) && n > 0 ? n : 0 },
                get price() { return this.cost * (1 + this.pct / 100) },
                get profit() { return this.price - this.cost },
                fmt(v) {
                    const parts = Math.abs(v).toFixed(this.decimals).split('.');
                    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.tsep);
                    return (v < 0 ? '-' : '') + this.symbol + parts.join(this.dsep);
                },
             }">

            {{-- 1. The welcome: thanks for getting the panel.

                 Two starting points, two copies, and both describe a store that
                 ALREADY has something to sell — without that this modal never
                 renders. With the platform catalogue on, the store is born
                 full. A Business panel fills it themselves: they connect their
                 provider, sync, and that's when the welcome appears, talking
                 about THEIR supply and not a catalogue they chose not to carry. --}}
            <p class="text-sm" style="color:var(--color-text-muted);">
                @if ($usesOwnerCatalog)
                    {{ __('Thank you for getting your own panel. Your storefront is ready and the whole catalogue is already inside it, at your cost.') }}
                @else
                    {{ __('Thank you for getting your own panel. Your own providers are connected and their services are already in your storefront — right now they sell at exactly what your provider charges you.') }}
                @endif
            </p>

            {{-- 2. The missing step, explained in two lines. --}}
            <div>
                <h3 class="text-sm font-semibold" style="color:var(--color-text);">
                    {{ __('One last step: set your base commission') }}
                </h3>
                <p class="mt-1 text-sm" style="color:var(--color-text-muted);">
                    {{ __('It is the percentage added on top of your cost across the whole catalogue, and that difference is what you earn. Without it every service sells at cost and you make nothing. You can fine-tune single services later in Margins & Pricing.') }}
                </p>
            </div>

            {{-- 3. The percentage. --}}
            <div>
                <label class="rf-label" for="rf-onboarding-percent">{{ __('Base commission') }} *</label>
                <div class="flex items-center gap-2">
                    {{-- The max isn't cosmetic: without it, the field announces
                         itself as "spinbutton, minimum 0, maximum 0" to a screen
                         reader. It's the SAME ceiling the server validates on save. --}}
                    <input id="rf-onboarding-percent" type="number" step="0.01" min="0" max="{{ $maxPercent }}" x-model="percent"
                           class="rf-input @error('percent') rf-input-error @enderror"
                           style="max-width:150px;" autocomplete="off" data-lpignore="true">
                    <span class="text-sm font-medium" style="color:var(--color-text-muted);">%</span>
                </div>
                @error('percent')
                    <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p>
                @enderror
            </div>

            {{-- 4. The same percentage, said in money over a real service
                 from the supply the copy above is talking about. --}}
            @if ($sample)
                <div class="rounded-xl p-4" style="background:var(--color-surface-2);border:1px solid var(--color-border);">
                    <div class="text-xs" style="color:var(--color-text-subtle);">
                        {{ __('Live example — :service', ['service' => \Illuminate\Support\Str::limit($sample['name'], 44)]) }}
                        @if ($sample['per_1000'])
                            <span>· {{ __('per 1000') }}</span>
                        @endif
                    </div>

                    <div class="mt-3 space-y-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:space-y-0">
                        <div class="flex items-baseline justify-between gap-2 sm:flex-col sm:items-center sm:gap-1">
                            <div class="text-[11px] uppercase" style="color:var(--color-text-subtle);letter-spacing:.04em;">{{ __('Your cost') }}</div>
                            <div class="rf-mono tabular text-sm" style="color:var(--color-text-muted);" x-text="fmt(cost)"></div>
                        </div>
                        <div class="flex items-baseline justify-between gap-2 sm:flex-col sm:items-center sm:gap-1">
                            <div class="text-[11px] uppercase" style="color:var(--color-text-subtle);letter-spacing:.04em;">{{ __('You sell at') }}</div>
                            <div class="rf-mono tabular text-sm font-semibold" style="color:var(--color-text);" x-text="fmt(price)"></div>
                        </div>
                        <div class="flex items-baseline justify-between gap-2 sm:flex-col sm:items-center sm:gap-1">
                            <div class="text-[11px] uppercase" style="color:var(--color-text-subtle);letter-spacing:.04em;">{{ __('You earn') }}</div>
                            <div class="rf-mono tabular text-sm font-semibold" style="color:var(--state-success-fg);" x-text="fmt(profit)"></div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <x-slot:footer>
            <button type="button" class="rf-btn rf-btn-ghost" wire:click="later">{{ __('Later') }}</button>
            <button type="button" class="rf-btn rf-btn-primary" wire:click="save"
                    wire:loading.attr="disabled" wire:target="save">
                {{ __('Save and start selling') }}
            </button>
        </x-slot:footer>
    </x-admin.modal>
@endif
</div>