@php
    $editing = $plan !== null;
    $burstPartial = collect([$burst_limit, $burst_threshold, $burst_time])
        ->map(fn ($v) => trim((string) $v) !== '')
        ->pipe(fn ($f) => $f->contains(true) && $f->contains(false));
@endphp

<div class="plans pform">
    <div class="pform-head">
        <h1 class="pform-title">
            {{ $editing ? __('Edit') : __('Create') }} {{ __('a') }} <em>{{ __('package.') }}</em>
        </h1>
        <p class="pform-lead">{{ __('Speed limits, scheduling, and NAS restrictions.') }}</p>
    </div>

    <form wire:submit="save">
        {{-- ── Identity ─────────────────────────────────────────────── --}}
        <section class="pform-sec">
            <div class="pform-sec__head"><h6>{{ __('Identity') }}</h6></div>
            <div class="pform-sec__body">
                <div class="pform-grid">
                    <div class="pform-field">
                        <label class="pform-label" for="package">{{ __('Name') }} <b>*</b></label>
                        <input id="package" type="text" class="form-control form-control-sm"
                            wire:model="package" placeholder="{{ __('e.g. Home 10 Mbps') }}">
                        <x-input-error for="package" />
                    </div>

                    <div class="pform-field">
                        <label class="pform-label" for="type">{{ __('Type') }} <b>*</b></label>
                        <select id="type" class="form-select form-select-sm" wire:model="type">
                            @foreach (\App\Models\PackageList::TYPES as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="type" />
                    </div>

                    <div class="pform-field pform-field--full">
                        <label class="pform-label">{{ __('Availability') }}</label>
                        <div class="pform-seg">
                            @foreach (\App\Models\PackageList::AVAILABILITY as $key => $label)
                                <button type="button" class="{{ $availability === $key ? 'is-on' : '' }}"
                                    wire:click="$set('availability','{{ $key }}')">{{ $label }}</button>
                            @endforeach
                        </div>
                        <span class="pform-hint">
                            @switch($availability)
                                @case('live')
                                    {{ __('Visible to customers and accepting signups.') }}
                                    @break
                                @case('hidden')
                                    {{ __('Existing subscribers keep it; nobody new can buy it.') }}
                                    @break
                                @default
                                    {{ __('Withdrawn — nobody can buy or use it.') }}
                            @endswitch
                        </span>
                    </div>
                </div>
            </div>
        </section>

        {{-- ── Pricing ──────────────────────────────────────────────── --}}
        <section class="pform-sec">
            <div class="pform-sec__head"><h6>{{ __('Pricing') }}</h6></div>
            <div class="pform-sec__body">
                <div class="pform-grid">
                    <div class="pform-field">
                        <label class="pform-label" for="price">{{ __('Price') }} <b>*</b></label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">{{ __('Ksh') }}</span>
                            <input id="price" type="number" min="0" step="1" class="form-control"
                                wire:model="price" placeholder="0">
                        </div>
                        @if ($type !== 'trial' && (int) $price === 0 && $price !== '')
                            {{-- Not a validation error: a free plan is legitimate,
                                 but it is almost never what someone meant to type. --}}
                            <span class="pform-warn">
                                {{ __('Priced at zero — this plan gives away internet for free. Set the type to Trial if that is the intent.') }}
                            </span>
                        @endif
                        <x-input-error for="price" />
                    </div>

                    <div class="pform-field">
                        <label class="pform-label" for="duration">{{ __('Duration') }} <b>*</b></label>
                        <select id="duration" class="form-select form-select-sm" wire:model="duration_seconds">
                            <option value="">{{ __('Pick a duration…') }}</option>
                            @foreach (\App\Models\PackageList::DURATIONS as $seconds => $label)
                                <option value="{{ $seconds }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <span class="pform-hint">
                            {{ __('How long the plan grants access from activation. This drives the router limit, the remembered-device window and the expiry sweep.') }}
                        </span>
                        <x-input-error for="duration_seconds" />
                    </div>
                </div>
            </div>
        </section>

        {{-- ── Speed ────────────────────────────────────────────────── --}}
        <section class="pform-sec">
            <div class="pform-sec__head"><h6>{{ __('Speed') }}</h6></div>
            <div class="pform-sec__body">
                <div class="pform-grid">
                    <div class="pform-field">
                        <label class="pform-label" for="rate">{{ __('Rate-limit') }} <b>*</b></label>
                        <input id="rate" type="text" class="form-control form-control-sm"
                            wire:model="mikrotik_rate_limit" placeholder="5M/5M" spellcheck="false">
                        <span class="pform-hint">{{ __('MikroTik rate-limit string, e.g. 5M/5M (down/up).') }}</span>
                        <x-input-error for="mikrotik_rate_limit" />
                    </div>

                    <div class="pform-field">
                        <label class="pform-label" for="devices">{{ __('Devices per account') }}</label>
                        <input id="devices" type="number" min="1" max="50" class="form-control form-control-sm"
                            wire:model="shared_users">
                        <span class="pform-hint">{{ __('How many devices may share one login at the same time.') }}</span>
                        <x-input-error for="shared_users" />
                    </div>
                </div>
            </div>
        </section>

        {{-- ── Burst ────────────────────────────────────────────────── --}}
        <section class="pform-sec">
            <div class="pform-sec__head">
                <h6>{{ __('Burst') }}</h6>
                <span>{{ __('optional') }}</span>
            </div>
            <div class="pform-sec__body">
                <p class="pform-hint" style="margin-top:0">
                    {{ __('MikroTik burst lets a subscriber briefly exceed their rate-limit. Fill all three to enable, or leave all blank to disable.') }}
                </p>

                @if ($burstPartial)
                    {{-- RouterOS ignores an incomplete burst without complaining,
                         so say it here rather than let it look configured. --}}
                    <span class="pform-warn" style="margin-bottom:.6rem">
                        {{ __('Burst needs all three values. As it stands none of them will be applied.') }}
                    </span>
                @endif

                <div class="pform-grid">
                    <div class="pform-field">
                        <label class="pform-label" for="blimit">{{ __('Burst limit') }}</label>
                        <input id="blimit" type="text" class="form-control form-control-sm"
                            wire:model.live.debounce.500ms="burst_limit" placeholder="10M/10M" spellcheck="false">
                        <x-input-error for="burst_limit" />
                    </div>
                    <div class="pform-field">
                        <label class="pform-label" for="bthresh">{{ __('Burst threshold') }}</label>
                        <input id="bthresh" type="text" class="form-control form-control-sm"
                            wire:model.live.debounce.500ms="burst_threshold" placeholder="5M/5M" spellcheck="false">
                        <x-input-error for="burst_threshold" />
                    </div>
                    <div class="pform-field">
                        <label class="pform-label" for="btime">{{ __('Burst time') }}</label>
                        <div class="input-group input-group-sm">
                            <input id="btime" type="number" min="1" max="3600" class="form-control"
                                wire:model.live.debounce.500ms="burst_time" placeholder="30">
                            <span class="input-group-text">{{ __('seconds') }}</span>
                        </div>
                        <x-input-error for="burst_time" />
                    </div>
                </div>
            </div>
        </section>

        {{-- ── Fair use ─────────────────────────────────────────────── --}}
        <section class="pform-sec">
            <div class="pform-sec__head"><h6>{{ __('Fair Use Policy') }}</h6></div>
            <div class="pform-sec__body">
                <label class="pform-toggle">
                    <span class="pform-toggle__body">
                        <span class="pform-toggle__label">{{ __('Enforce FUP') }}</span>
                        <span class="pform-toggle__hint">{{ __('Trigger an action when monthly data usage crosses the limit below.') }}</span>
                    </span>
                    <span class="pform-toggle__state">{{ $fup_enabled ? __('On') : __('Off') }}</span>
                    <input class="pform-switch form-check-input" type="checkbox" role="switch"
                        wire:model.live="fup_enabled">
                </label>

                @if ($fup_enabled)
                    <div class="pform-grid" style="margin-top:1rem">
                        <div class="pform-field">
                            <label class="pform-label" for="fuplimit">{{ __('Monthly limit') }} <b>*</b></label>
                            <div class="input-group input-group-sm">
                                <input id="fuplimit" type="number" min="1" class="form-control"
                                    wire:model="fup_limit_mb" placeholder="20000">
                                <span class="input-group-text">MB</span>
                            </div>
                            <x-input-error for="fup_limit_mb" />
                        </div>
                        <div class="pform-field">
                            <label class="pform-label" for="fupaction">{{ __('Then') }}</label>
                            <select id="fupaction" class="form-select form-select-sm" wire:model.live="fup_action">
                                @foreach (\App\Models\PackageList::FUP_ACTIONS as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="fup_action" />
                        </div>
                        @if ($fup_action === 'throttle')
                            <div class="pform-field">
                                <label class="pform-label" for="fuprate">{{ __('Reduced speed') }} <b>*</b></label>
                                <input id="fuprate" type="text" class="form-control form-control-sm"
                                    wire:model="fup_rate_limit" placeholder="1M/1M" spellcheck="false">
                                <x-input-error for="fup_rate_limit" />
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </section>

        {{-- ── Schedule ─────────────────────────────────────────────── --}}
        <section class="pform-sec">
            <div class="pform-sec__head"><h6>{{ __('Schedule') }}</h6></div>
            <div class="pform-sec__body">
                <label class="pform-toggle">
                    <span class="pform-toggle__body">
                        <span class="pform-toggle__label">{{ __('Restrict to a schedule') }}</span>
                        <span class="pform-toggle__hint">{{ __('Limit when this plan is usable — e.g. a "night plan" only available 11pm–6am.') }}</span>
                    </span>
                    <span class="pform-toggle__state">{{ $schedule_enabled ? __('On') : __('Off') }}</span>
                    <input class="pform-switch form-check-input" type="checkbox" role="switch"
                        wire:model.live="schedule_enabled">
                </label>

                @if ($schedule_enabled)
                    <div class="pform-grid" style="margin-top:1rem">
                        <div class="pform-field">
                            <label class="pform-label" for="from">{{ __('From') }} <b>*</b></label>
                            <input id="from" type="time" class="form-control form-control-sm" wire:model="schedule_from">
                            <x-input-error for="schedule_from" />
                        </div>
                        <div class="pform-field">
                            <label class="pform-label" for="to">{{ __('To') }} <b>*</b></label>
                            <input id="to" type="time" class="form-control form-control-sm" wire:model="schedule_to">
                            <span class="pform-hint">{{ __('A "to" earlier than "from" is read as crossing midnight.') }}</span>
                            <x-input-error for="schedule_to" />
                        </div>
                    </div>
                @endif
            </div>
        </section>

        {{-- ── NAS restriction ──────────────────────────────────────── --}}
        <section class="pform-sec">
            <div class="pform-sec__head">
                <h6>{{ __('NAS restriction') }}</h6>
                <span>{{ __('optional') }}</span>
            </div>
            <div class="pform-sec__body">
                <p class="pform-hint" style="margin-top:0;margin-bottom:.7rem">
                    {{ __('Limit this plan to specific routers. Leave empty to allow on every NAS.') }}
                </p>

                @if ($this->routers->isEmpty())
                    <p class="pform-hint" style="margin:0">{{ __('No routers linked yet.') }}</p>
                @else
                    <div class="pform-nas">
                        @foreach ($this->routers as $router)
                            <label class="pform-nas__item" wire:key="nas-{{ $router->id }}">
                                <input type="checkbox" value="{{ $router->id }}" wire:model="nas_router_ids">
                                <b>{{ $router->router_name }}</b>
                                <span>{{ $router->managementAddress() }}</span>
                            </label>
                        @endforeach
                    </div>
                @endif
                <x-input-error for="nas_router_ids" />
                {{-- The per-item message too: a bad id lands on
                     `nas_router_ids.0`, and without this the form refused to
                     save while showing nothing at all. --}}
                @foreach ($errors->get('nas_router_ids.*') as $messages)
                    @foreach ($messages as $message)
                        <div class="pform-warn">{{ $message }}</div>
                    @endforeach
                @endforeach
            </div>
        </section>

        <div class="pform-foot">
            <a class="btn btn-sm btn-secondary" href="{{ route('package-list-setup') }}" wire:navigate>
                {{ __('Cancel') }}
            </a>
            <button type="submit" class="btn btn-sm btn-primary" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">
                    <i class="bi bi-check-lg me-1"></i>{{ $editing ? __('Save changes') : __('Create package') }}
                </span>
                <span wire:loading wire:target="save">
                    <span class="spinner-border spinner-border-sm me-1"></span>{{ __('Saving…') }}
                </span>
            </button>
        </div>
    </form>
</div>