@php
    $theme = $this->draft;
    $brand = $this->brandName;
    $active = $this->activePreset;
    $platform = \App\Models\MainSiteData::getValue('site_name') ?: 'Bilipoa';
@endphp

{{-- No <x-slot name="header"> here on purpose: the layout header and
     x-page-head both print the page name, so this screen was opening with
     "Portal designer" written twice above a breadcrumb saying it a third
     time. --}}
<div class="pd">
    <x-page-head :group="__('Hotspot')" :title="__('Portal designer')"
        :lead="__('Style the login pages your customers see, then push them to your routers.')">
        <x-slot name="actions">
            <a class="btn btn-sm btn-outline-secondary" href="{{ route('hotspot.home') }}" target="_blank" rel="noopener">
                <i class="bi bi-box-arrow-up-right me-1"></i>{{ __('Open portal') }}
            </a>
            <button class="btn btn-sm btn-link text-secondary text-decoration-none" wire:click="resetToDefaults"
                wire:confirm="{{ __('Discard your styling and go back to the defaults?') }}">
                {{ __('Reset') }}
            </button>
            <button class="btn btn-sm btn-primary" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                <i class="bi bi-check-lg me-1"></i>{{ __('Save') }}
            </button>
        </x-slot>
    </x-page-head>

    @if (session('portal-saved'))
        <div class="alert alert-success border-0 rounded-3 py-2 small d-flex align-items-center gap-2">
            <i class="bi bi-check-circle"></i>{{ session('portal-saved') }}
        </div>
    @endif

    <div class="pd-grid">
        {{-- ─────────────── Controls ─────────────── --}}
        {{-- One panel with sections rather than four stacked cards. The card
             class carries height:100% for dashboard tiles, so four of them in a
             single column each stretched to the full height of the preview —
             about a thousand pixels of empty box between every heading. --}}
        <div class="pd-work">

            <section class="pd-sec">
                <div class="pd-sec__head">
                    <h6>{{ __('Palette') }}</h6>
                    <span>{{ __('Pick a look, then fine-tune below') }}</span>
                </div>
                <div class="pd-presets">
                    @foreach (\App\Livewire\Hotspot\Designer::PRESETS as $key => $preset)
                        <button type="button" class="pd-preset {{ $active === $key ? 'is-on' : '' }}"
                            wire:click="applyPreset('{{ $key }}')" title="{{ $preset['label'] }}">
                            <span class="pd-preset__chips" style="background:{{ $preset['background'] }}">
                                <i style="background:{{ $preset['primary'] }}"></i>
                                <i style="background:{{ $preset['accent'] }}"></i>
                                <i style="background:{{ $preset['tertiary'] }}"></i>
                            </span>
                            <span class="pd-preset__name">{{ $preset['label'] }}</span>
                        </button>
                    @endforeach
                </div>
            </section>

            <section class="pd-sec">
                <div class="pd-sec__head"><h6>{{ __('Colour') }}</h6></div>
                <div class="pd-fields">
                    @foreach ([
                        'primary'    => [__('Primary'), __('Prices, links and the main button')],
                        'accent'     => [__('Accent'), __('Second colour in gradients')],
                        'tertiary'   => [__('Gradient end'), __('Where the gradient finishes')],
                        'background' => [__('Page background'), __('Behind everything')],
                        'card'       => [__('Card'), __('The panel the content sits on')],
                        'text'       => [__('Text'), __('Body copy')],
                    ] as $field => [$label, $hint])
                        <div class="pd-field">
                            <label class="pd-field__label">
                                {{ $label }}
                                <span>{{ $hint }}</span>
                            </label>
                            <div class="pd-colour">
                                <input type="color" wire:model.live="{{ $field }}" aria-label="{{ $label }}">
                                <input type="text" class="form-control form-control-sm"
                                    wire:model.live.debounce.500ms="{{ $field }}" spellcheck="false">
                            </div>
                            <x-input-error for="{{ $field }}" />
                        </div>
                    @endforeach

                    <div class="pd-field pd-field--full">
                        <label class="pd-field__label">
                            {{ __('Corner rounding') }}
                            <span>{{ $radius }}px — {{ __('0 is square, 32 is very round') }}</span>
                        </label>
                        <input type="range" class="form-range" min="0" max="32" wire:model.live="radius">
                        <x-input-error for="radius" />
                    </div>
                </div>
            </section>

            <section class="pd-sec">
                <div class="pd-sec__head"><h6>{{ __('Wording') }}</h6></div>
                <div class="pd-fields">
                    <div class="pd-field">
                        <label class="pd-field__label">{{ __('Welcome line') }}</label>
                        <input type="text" class="form-control form-control-sm"
                            wire:model.live.debounce.500ms="welcome"
                            placeholder="{{ __('Welcome to') }} {{ Str::upper($brand) }}">
                        <x-input-error for="welcome" />
                    </div>
                    <div class="pd-field">
                        <label class="pd-field__label">{{ __('Tagline') }}</label>
                        <input type="text" class="form-control form-control-sm"
                            wire:model.live.debounce.500ms="tagline"
                            placeholder="{{ __('Select a package to get started') }}">
                        <x-input-error for="tagline" />
                    </div>
                    <div class="pd-field">
                        <label class="pd-field__label">{{ __('Help heading') }}</label>
                        <input type="text" class="form-control form-control-sm"
                            wire:model.live.debounce.500ms="help_label"
                            placeholder="{{ __('Need help? Call or WhatsApp') }}">
                        <x-input-error for="help_label" />
                    </div>
                    <div class="pd-field">
                        <label class="pd-field__label">
                            {{ __('Help phone number') }}
                            <span>{{ __('Your customers call this') }}</span>
                        </label>
                        <input type="text" class="form-control form-control-sm"
                            wire:model.live.debounce.500ms="support_phone"
                            placeholder="254722000000">
                        <x-input-error for="support_phone" />
                    </div>
                </div>
            </section>

            <section class="pd-sec">
                <div class="pd-sec__head">
                    <h6>{{ __('What customers are offered') }}</h6>
                    <span>{{ __('Switch off anything you do not run yet') }}</span>
                </div>
                <div class="pd-toggles">
                    @foreach ([
                        'show_help'       => [__('Help / WhatsApp card'), __('Your support number, shown at the top.')],
                        'show_trial'      => [__('Free trial'), __('Only appears if you have a trial package.')],
                        'show_vouchers'   => [__('Voucher redemption'), __('Turn off until you are issuing voucher codes.')],
                        'show_mpesa_code' => [__('Reconnect with M-Pesa code'), __('Lets a customer back on with their receipt.')],
                        'show_account'    => [__('Username & password'), __('For customers you created accounts for.')],
                        'show_tv'         => [__('TV / streaming setup'), __('Directs them to call you to register a MAC.')],
                    ] as $field => [$label, $hint])
                        <label class="pd-toggle">
                            <input type="checkbox" wire:model.live="{{ $field }}">
                            <span class="pd-toggle__body">
                                <span class="pd-toggle__label">{{ $label }}</span>
                                <span class="pd-toggle__hint">{{ $hint }}</span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </section>

            {{-- Pushing is separate from saving on purpose: it needs the tunnel
                 up and takes a few seconds per router. --}}
            <section class="pd-sec">
                <div class="pd-sec__head">
                    <h6>{{ __('Push to routers') }}</h6>
                    <span>{{ trans_choice(':count router|:count routers', $this->routers->count(), ['count' => $this->routers->count()]) }}</span>
                </div>
                <div class="pd-sec__body">
                    <p class="small text-secondary mb-3">
                        {{ __('Your online portal updates the moment you save. Each router also keeps its own offline copy of the login page — push to refresh those.') }}
                    </p>

                    <button class="btn btn-sm btn-primary" wire:click="pushToRouters"
                        wire:loading.attr="disabled" wire:target="pushToRouters">
                        <span wire:loading.remove wire:target="pushToRouters">
                            <i class="bi bi-arrow-up-circle me-1"></i>{{ __('Save and push') }}
                        </span>
                        <span wire:loading wire:target="pushToRouters">
                            <span class="spinner-border spinner-border-sm me-1"></span>{{ __('Pushing...') }}
                        </span>
                    </button>

                    @if ($pushLog)
                        <ul class="pd-log mt-3">
                            @foreach ($pushLog as $line)
                                <li>{{ $line }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </section>
        </div>

        {{-- ─────────────── Live preview ─────────────── --}}
        <div class="pd-side">
            <div class="pd-preview-wrap">
                <div class="pd-preview__head">
                    <h6>{{ __('Preview') }}</h6>
                    <span>{{ __('What a phone sees') }}</span>
                </div>

                {{-- Rendered from the same PortalTheme the real portal uses, so
                     it cannot drift from the live page. --}}
                <div class="pd-phone" style="{{ $theme->cssVariables() }}">
                    <div class="pd-phone__screen">
                        <div class="pd-card">
                            <div class="pd-brand">{{ Str::upper($brand) }}</div>
                            <div class="pd-welcome">
                                {{ $theme->get('welcome') ?: 'Welcome to '.Str::upper($brand) }}
                            </div>
                            <div class="pd-tagline">{{ $theme->get('tagline') }}</div>

                            @if ($theme->get('show_help'))
                                <div class="pd-help">
                                    <strong>{{ $theme->get('help_label') }}</strong>
                                    {{-- The field being edited, not the saved value: a preview that
                                         ignores what you just typed is not a preview. --}}
                                    <span>{{ $support_phone ?: (siteUrlSettings('site_phone') ?: '0700 000 000') }}</span>
                                </div>
                            @endif

                            <div class="pd-btn">{{ __('Access network') }}</div>

                            @if ($theme->get('show_trial'))
                                <div class="pd-trial">
                                    <span>{{ __('Free Trial') }}</span>
                                    <span class="pd-chip">{{ __('TRIAL') }}</span>
                                </div>
                            @endif

                            <div class="pd-rule">{{ __('Available plans') }}</div>

                            @foreach (['1 Hour' => 5, '1 Day' => 30, '1 Week' => 150] as $name => $price)
                                <div class="pd-plan">
                                    <span>
                                        <b>{{ $name }}</b>
                                        <em>Ksh {{ $price }}</em>
                                    </span>
                                    <span class="pd-buy">{{ __('Buy') }}</span>
                                </div>
                            @endforeach

                            @if ($theme->get('show_tv'))
                                <div class="pd-tile">{{ __('Set up a TV or streaming device') }} &rsaquo;</div>
                            @endif

                            {{-- Fixed, and shown here so an operator is not
                                 surprised by it on their own portal. --}}
                            <div class="pd-foot">Powered by {{ $platform }}</div>
                        </div>
                    </div>
                </div>

                <p class="pd-preview__note">
                    {{ __('Reconnect options') }}:
                    @php
                        $on = collect([
                            'show_vouchers' => __('Voucher'),
                            'show_mpesa_code' => __('M-Pesa code'),
                            'show_account' => __('Username & password'),
                        ])->filter(fn ($l, $k) => $theme->get($k))->values();
                    @endphp
                    {{ $on->isEmpty() ? __('none — customers can only buy a package') : $on->join(', ') }}
                </p>
            </div>
        </div>
    </div>
</div>