@extends('client.layouts.app')
@section('title', __('client.cart.configure') . ': '. $product->name)
@section('styles')
<style>
    .config-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
    @media (max-width: 900px) { .config-layout { grid-template-columns: minmax(0, 1fr); } }
    .cycle-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cycle-option { border: 1px solid #ddd; border-radius: 4px; padding: 10px; cursor: pointer; text-align: center; transition: all 0.15s; }
    .cycle-option:hover { border-color: #337ab7; background: #f0f6ff; }
    .cycle-option input[type=radio] { display: none; }
    .cycle-option.selected { border-color: #337ab7; background: #e8f0fe; }
    .cycle-price { font-size: 16px; font-weight: 600; color: #1a4d80; }
    .cycle-label { font-size: 11px; color: #777; margin-top: 3px; text-transform: capitalize; }
    .order-summary { position: sticky; top: 70px; }
    .summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
    .summary-row:last-child { border-bottom: none; font-weight: 600; }
    #summaryExtras .summary-row:last-child { border-bottom: 1px solid #f0f0f0; font-weight: 400; }
</style>
@endsection
@section('content')

<div class="page-header">
    <h1>{{ __('client.cart.configure') }}: {{ $product->name }}</h1>
    <a href="{{ route('client.store') }}" class="btn btn-outline btn-sm">&larr; {{ __('client.actions.back') }}</a>
</div>

<form method="POST" action="{{ route('client.cart.add') }}" id="configForm">
    @csrf
    <input type="hidden" name="product_id" value="{{ $product->id }}">

    @php $res = $product->resourceSummary(); @endphp
    @if($res)
    {{-- The limits the order actually buys, so the choice of app can be made
         against them rather than after the fact. --}}
    <div class="pn-card" style="margin-bottom:16px;">
        <div class="pn-card-header">{{ __('client.store.included_resources') }}</div>
        <div class="pn-card-body">
            <ul class="pn-res-row">
                @foreach($res as $r)
                <li><i class="{{ $r['icon'] }}"></i>{{ $r['text'] }}</li>
                @endforeach
            </ul>
            <p class="pn-res-note">{{ __('client.store.res_shared_note') }}</p>
        </div>
    </div>
    @endif

    @if(! empty($apps))
    {{-- One product, any app. Selling ninety-eight apps as ninety-eight
         products does not scale, so the choice is made here and the order
         installs it. --}}
    <div class="pn-card" style="margin-bottom:16px;">
        <div class="pn-card-header">{{ __('client.cart.choose_app') }} <span class="ap-opt">{{ __('client.cart.app_optional') }}</span></div>
        <div class="pn-card-body">
            <p class="ap-intro">{{ __('client.cart.app_intro') }}</p>
            <div class="ap-search">
                <input type="text" id="ap-q" class="form-control" autocomplete="off"
                       placeholder="{{ __('client.cart.app_search_ph') }}" oninput="apFilter()"
                       onkeydown="if(event.key==='Enter')event.preventDefault()">
                <span class="ap-count" id="ap-count">{{ __('client.cart.app_count', ['count' => count($apps)]) }}</span>
            </div>
            <input type="hidden" name="app_slug" id="ap-slug" value="{{ old('app_slug') }}">
            <div class="ap-grid">
                @foreach($apps as $a)
                @php
                    $hue = crc32($a['slug']) % 360;
                    $initial = mb_strtoupper(mb_substr(trim($a['name']) ?: $a['slug'], 0, 1));
                    $line = $a['tagline'] ?: $a['description'];
                @endphp
                <div class="ap-app{{ old('app_slug') === $a['slug'] ? ' on' : '' }}" data-slug="{{ $a['slug'] }}"
                     data-find="{{ mb_strtolower($a['name'].' '.$a['slug'].' '.$line.' '.implode(' ', $a['categories'] ?? [])) }}"
                     onclick="apPick(this)" title="{{ $line }}">
                    @if($a['is_featured'])<span class="ap-star" title="{{ __('client.cart.app_featured') }}">&#9733;</span>@endif
                    @if($a['logo_url_local'])
                        <img src="{{ $a['logo_url_local'] }}" alt="" loading="lazy" class="ap-logo">
                    @else
                        <div class="ap-mark" style="background:hsl({{ $hue }},62%,94%);color:hsl({{ $hue }},52%,34%);border-color:hsl({{ $hue }},45%,84%)">{{ $initial }}</div>
                    @endif
                    <div class="ap-nm">{{ $a['name'] }}</div>
                    <div class="ap-ds">{{ $line }}</div>
                    @if(($a['extra_services'] ?? 0) > 0 || ($a['min_memory_mb'] ?? 0) > 0)
                    <div class="ap-req">
                        @if(($a['min_memory_mb'] ?? 0) > 0)<span>{{ $a['min_memory_mb'] >= 1024 ? round($a['min_memory_mb']/1024, 1).' GB' : $a['min_memory_mb'].' MB' }}</span>@endif
                        @if(($a['extra_services'] ?? 0) > 0)<span>{{ trans_choice('client.hosting.containers.services', $a['extra_services'] + 1, ['count' => $a['extra_services'] + 1]) }}</span>@endif
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
            <div class="ap-none" id="ap-none" hidden>{{ __('client.cart.app_search_none') }}</div>
            <div class="ap-clearpick" id="ap-clearpick" hidden>
                <span id="ap-picked"></span>
                <button type="button" onclick="apClear()">{{ __('client.cart.app_clear') }}</button>
            </div>
            @error('app_slug')<div class="text-danger" style="font-size:12px;margin-top:8px">{{ $message }}</div>@enderror
        </div>
    </div>
    @endif

    <div class="config-layout">
        <div>
            {{-- Billing Cycle --}}
            <div class="pn-card" style="margin-bottom:16px;">
                <div class="pn-card-header">{{ __('client.cart.billing_cycle') }}</div>
                <div class="pn-card-body">
                    @php $pricedCycles = $product->pricedCycles($currency?->id); @endphp
                    <div class="cycle-options">
                        @if($pricedCycles !== [])
                            {{-- Only the cycles the product is sold on, so the first one
                                 really is the one that comes up selected. --}}
                            @foreach($pricedCycles as $cycle => $cyclePrice)
                                <label class="cycle-option {{ $loop->first ? 'selected' : '' }}">
                                    <input type="radio" name="billing_cycle" value="{{ $cycle }}" data-price="{{ display_price($cyclePrice) }}" {{ $loop->first ? 'checked' : '' }}
                                        onchange="document.querySelectorAll('.cycle-option').forEach(e=>e.classList.remove('selected')); this.closest('.cycle-option').classList.add('selected')">
                                    <div class="cycle-price">{{ display_money_fmt($cyclePrice) }}</div>
                                    <div class="cycle-label">{{ $cycle }}</div>
                                </label>
                            @endforeach
                        @else
                            <div style="color:var(--muted); font-size:13px; grid-column:1/-1;">{{ __('client.cart.no_pricing') }}</div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Configurable Options --}}
            @if(($optionGroups ?? collect())->isNotEmpty())
            <div class="pn-card" style="margin-bottom:16px;">
                <div class="pn-card-header">{{ __('client.cart.configurable_options') }}</div>
                <div class="pn-card-body">
                    @foreach($optionGroups as $group)
                        @foreach($group->options as $option)
                            @continue($option->subs->isEmpty())
                            @php
                                $selectedCycle = old('billing_cycle', (string) (array_key_first($pricedCycles) ?: 'monthly'));
                                $previous = old('config_options.'.$option->id);
                            @endphp
                            <div class="form-group" style="margin-bottom:14px;">
                                <label class="form-label" for="opt-{{ $option->id }}">{{ $option->displayName() }}</label>

                                @if($option->isQuantity())
                                    @php $unit = $option->subs->first(); @endphp
                                    <input type="number" id="opt-{{ $option->id }}"
                                           name="config_options[{{ $option->id }}]"
                                           class="form-control config-option"
                                           data-name="{{ $option->displayName() }}"
                                           data-prices="{{ json_encode(collect($pricedCycles)->map(fn ($p, $c) => display_price($unit?->priceFor($c) ?? 0))) }}"
                                           data-unit-price="{{ display_price($unit?->priceFor($selectedCycle) ?? 0) }}"
                                           value="{{ $previous ?? $option->qty_minimum ?? 0 }}"
                                           min="{{ $option->qty_minimum ?? 0 }}"
                                           @if($option->qty_maximum) max="{{ $option->qty_maximum }}" @endif>
                                    <small style="color:var(--muted);">
                                        {{ display_money_fmt($unit?->priceFor($selectedCycle) ?? 0) }}
                                        {{ __('client.cart.per_unit') }}
                                    </small>

                                @elseif($option->isCheckbox())
                                    @php $sub = $option->subs->first(); @endphp
                                    <label style="display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;">
                                        <input type="checkbox" id="opt-{{ $option->id }}"
                                               name="config_options[{{ $option->id }}]" value="1"
                                               class="config-option"
                                               data-name="{{ $option->displayName() }}"
                                               data-prices="{{ json_encode(collect($pricedCycles)->map(fn ($p, $c) => display_price($sub?->priceFor($c) ?? 0))) }}"
                                               data-unit-price="{{ display_price($sub?->priceFor($selectedCycle) ?? 0) }}"
                                               @checked($previous)>
                                        <span>{{ $sub?->displayName() ?? $option->displayName() }}
                                            @if(($sub?->priceFor($selectedCycle) ?? 0) > 0)
                                                (+{{ display_money_fmt($sub->priceFor($selectedCycle)) }})
                                            @endif
                                        </span>
                                    </label>

                                @else
                                    <select id="opt-{{ $option->id }}"
                                            name="config_options[{{ $option->id }}]"
                                            data-name="{{ $option->displayName() }}"
                                            class="form-control config-option" required>
                                        @foreach($option->subs as $sub)
                                            @php $price = $sub->priceFor($selectedCycle); @endphp
                                            <option value="{{ $sub->id }}"
                                                    data-label="{{ $sub->displayName() }}"
                                                    data-prices="{{ json_encode(collect($pricedCycles)->map(fn ($p, $c) => $sub->priceFor($c) === null ? null : display_price($sub->priceFor($c)))) }}"
                                                    data-unit-price="{{ display_price($price) }}"
                                                    @selected((string) $previous === (string) $sub->id)>
                                                {{ $sub->displayName() }}@if($price > 0) (+{{ display_money_fmt($price) }})@endif
                                            </option>
                                        @endforeach
                                    </select>
                                @endif

                                @error('config_options.'.$option->id)
                                    <div style="color:#c0392b; font-size:12px; margin-top:4px;">{{ $message }}</div>
                                @enderror
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
            @endif


            {{-- Addons --}}
            @if(($addons ?? collect())->isNotEmpty())
            <div class="pn-card" style="margin-bottom:16px;">
                <div class="pn-card-header">{{ __('client.cart.addons') }}</div>
                <div class="pn-card-body">
                    @php $selectedCycle = old('billing_cycle', (string) (array_key_first($pricedCycles) ?: 'monthly')); @endphp
                    @php $previousAddons = array_map('intval', (array) old('addons', [])); @endphp
                    @foreach($addons as $addon)
                        @php $addonPrice = $addon->priceFor($selectedCycle); @endphp
                        <label style="display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; cursor:pointer;">
                            <input type="checkbox" name="addons[]" value="{{ $addon->id }}"
                                   class="cart-addon" data-unit-price="{{ display_price($addonPrice) }}"
                                   data-name="{{ $addon->name }}"
                                   data-prices="{{ json_encode(collect($pricedCycles)->map(fn ($p, $c) => $addon->priceFor($c) === null ? null : display_price($addon->priceFor($c)))) }}"
                                   @checked(in_array($addon->id, $previousAddons, true))>
                            <span>
                                <strong>{{ $addon->name }}</strong>
                                @if($addonPrice > 0)
                                    <span style="color:var(--muted);">(+{{ display_money_fmt($addonPrice) }})</span>
                                @endif
                                @if($addon->description)
                                    <br><small style="color:var(--muted);">{{ $addon->description }}</small>
                                @endif
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>
            @endif
            {{-- Hostname: a virtual server is named, not sold a domain. --}}
            @if(strtolower((string) $product->server_type) === 'proxmox')
            <div class="pn-card" style="margin-bottom:16px;">
                <div class="pn-card-header">{{ __('proxmox.client.order_hostname') }} <span style="font-weight:400; color:var(--muted);">({{ __('client.form.optional') }})</span></div>
                <div class="pn-card-body">
                    <input type="hidden" name="domain_option" value="own">
                    <input type="text" name="domain" id="vpsHostname" class="form-control" value="{{ old('domain') }}" autocomplete="off" maxlength="63" pattern="[A-Za-z0-9]([A-Za-z0-9\-\.]*[A-Za-z0-9])?" aria-label="{{ __('proxmox.client.order_hostname') }}">
                    <div class="text-muted text-sm" style="margin-top:6px;">{{ __('proxmox.client.order_hostname_hint') }}</div>
                    @error('domain')<div class="text-sm" style="color:var(--danger);margin-top:6px;">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="pn-card" style="margin-bottom:16px;">
                <div class="pn-card-header">{{ __('proxmox.client.ssh_keys') }} <span style="font-weight:400; color:var(--muted);">({{ __('client.form.optional') }})</span></div>
                <div class="pn-card-body">
                    <textarea name="ssh_keys" id="vpsSshKeys" class="form-control" rows="3" spellcheck="false" style="font-family:monospace;font-size:12px;" aria-label="{{ __('proxmox.client.ssh_keys') }}">{{ old('ssh_keys') }}</textarea>
                    <div class="text-muted text-sm" style="margin-top:6px;">{{ __('proxmox.client.ssh_keys_hint') }}</div>
                    @error('ssh_keys')<div class="text-sm" style="color:var(--danger);margin-top:6px;">{{ $message }}</div>@enderror
                </div>
            </div>
            {{-- Domain --}}
            @elseif($product->show_domain_options)
            <div class="pn-card" style="margin-bottom:16px;">
                <div class="pn-card-header">{{ __('client.cart.domain') }}</div>
                <div class="pn-card-body">
                    @if($product->free_domain && $product->freeDomainTlds())
                    @php($ikaCycles = $product->freeDomainCycles())
                    <p class="text-sm" style="margin-top:0;">{{ __('client.cart.free_domain_note', ['tlds' => implode(', ', $product->freeDomainTlds())]) }}@if($ikaCycles) {{ __('client.cart.free_domain_cycles', ['cycles' => implode(', ', array_map(fn ($c) => __('common.billing.'.str_replace('semiannually', 'semi_annually', $c)), $ikaCycles))]) }}@endif</p>
                    @endif
                    <div style="display:flex; gap:8px; margin-bottom:12px;">
                        <label style="display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;">
                            <input type="radio" name="domain_option" value="register" @checked(old('domain_option', 'register') === 'register')> {{ __('client.cart.register_new_domain') }}
                        </label>
                        <label style="display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;">
                            <input type="radio" name="domain_option" value="transfer" @checked(old('domain_option') === 'transfer')> {{ __('client.cart.transfer_existing') }}
                        </label>
                        <label style="display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;">
                            <input type="radio" name="domain_option" value="own" @checked(old('domain_option') === 'own')> {{ __('client.cart.use_own_domain') }}
                        </label>
                        @php($freeSubdomains = \App\Support\FreeSubdomains::parents())
                        @if($freeSubdomains)
                        <label style="display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;">
                            <input type="radio" name="domain_option" value="subdomain" @checked(old('domain_option') === 'subdomain')> {{ __('client.cart.free_subdomain') }}
                        </label>
                        @endif
                    </div>
                    <div class="form-group">
                        {{-- Without free subdomain domains the field is the one it always was. --}}
                        @if($freeSubdomains)<div style="display:flex; gap:8px; align-items:center;">@endif
                        <input type="text" name="domain" id="domainInput" class="form-control" placeholder="yourdomain.com"@if($freeSubdomains) data-subdomain-placeholder="{{ __('client.cart.subdomain_placeholder') }}"@endif value="{{ old('domain') }}" autocomplete="off">
                        @if($freeSubdomains)
                        <select name="subdomain_parent" id="subdomainParent" class="form-control" style="width:auto;" aria-label="{{ __('client.cart.free_subdomain') }}" @if(old('domain_option') !== 'subdomain') hidden @endif>
                            @foreach($freeSubdomains as $parent)
                            <option value="{{ $parent }}" @selected(old('subdomain_parent') === $parent)>.{{ $parent }}</option>
                            @endforeach
                        </select>
                        </div>
                        @endif
                        @error('domain')<div class="text-sm" style="color:var(--danger);margin-top:6px;">{{ $message }}</div>@enderror
                        {{-- Whether the name can be had and what it costs: a new
                             domain or a transfer is bought with the hosting. --}}
                        <div id="domainStatus" class="text-sm" style="margin-top:6px;" aria-live="polite"></div>
                    </div>
                    <div class="form-group" id="eppField" @if(old('domain_option') !== 'transfer') hidden @endif>
                        <label class="form-label" for="epp_code">{{ __('client.domains.epp_code') }}</label>
                        <input type="text" name="epp_code" id="epp_code" class="form-control" value="{{ old('epp_code') }}" autocomplete="off">
                        <div class="text-muted text-sm" style="margin-top:4px;">{{ __('client.domains.epp_code_transfer_hint') }}</div>
                        @error('epp_code')<div class="text-sm" style="color:var(--danger);margin-top:6px;">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
            @endif

            {{-- The product's own questions, answered for this order. --}}
            @if(($productFields ?? collect())->isNotEmpty())
            <div class="pn-card">
                <div class="pn-card-header">{{ __('client.cart.order_questions') }}</div>
                <div class="pn-card-body">
                    @include('client.partials.custom-fields', ['fields' => $productFields, 'clientId' => null])
                </div>
            </div>
            @endif

            {{-- Additional Notes --}}
            <div class="pn-card">
                <div class="pn-card-header">{{ __('client.cart.additional_notes') }} <span style="font-weight:400; color:var(--muted);">({{ __('client.form.optional') }})</span></div>
                <div class="pn-card-body">
                    <textarea name="notes" rows="3" class="form-control" placeholder="{{ __('client.cart.special_requirements') }}">{{ old('notes') }}</textarea>
                </div>
            </div>
        </div>

        {{-- Order Summary --}}
        <div class="order-summary">
            <div class="pn-card">
                <div class="pn-card-header">{{ __('client.cart.order_summary') }}</div>
                <div class="pn-card-body">
                    <div class="summary-row">
                        <span style="color:var(--muted);">{{ __('client.cart.product') }}</span>
                        <span style="font-weight:500;">{{ $product->name }}</span>
                    </div>
                    <div class="summary-row">
                        <span style="color:var(--muted);">{{ __('client.cart.billing_cycle') }}</span>
                        <span id="summaryBilling">&mdash;</span>
                    </div>
                    <div id="summaryExtras"></div>
                    <div class="summary-row" id="summaryDomainRow" style="display:none;">
                        <span style="color:var(--muted);">{{ __('client.cart.domain') }}</span>
                        <span id="summaryDomain"></span>
                    </div>
                    <div class="summary-row">
                        <span>{{ __('client.cart.total') }}</span>
                        <span id="summaryTotal" style="color:#1a4d80;">&mdash;</span>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width:100%; margin-top:14px; justify-content:center;">{{ __('client.cart.add_to_cart') }} &rarr;</button>
                </div>
            </div>
        </div>
    </div>
</form>

@section('scripts')
<script>
// The total is the cycle's price plus every chosen option and addon, for
// that cycle, plus a domain being bought with it.
(function () {
    var cur = @json(display_currency_affixes());
    function money(n) { var p = Number(n).toFixed(2).split('.'); return cur.prefix + p[0].replace(/\B(?=(\d{3})+(?!\d))/g, cur.thousands) + cur.decimal + p[1] + cur.suffix; }
    function esc(t) { return String(t).replace(/[&<>"']/g, function (c) { return '&#' + c.charCodeAt(0) + ';'; }); }
    function priceOf(el, cycle) {
        try { var p = JSON.parse(el.getAttribute('data-prices') || '{}'); if (cycle in p) { return Number(p[cycle]) || 0; } } catch (e) {}
        return Number(el.getAttribute('data-unit-price') || 0);
    }
    window.pnlcsDomainPrice = 0;
    window.pnlcsUpdateTotal = function () {
        var c = document.querySelector('input[name=billing_cycle]:checked');
        var cycle = c ? c.value : 'monthly', total = c ? parseFloat(c.getAttribute('data-price') || '0') : 0, rows = '';
        document.querySelectorAll('select.config-option').forEach(function (sel) {
            sel.querySelectorAll('option').forEach(function (o) {
                var p = priceOf(o, cycle);
                o.textContent = (o.getAttribute('data-label') || o.textContent) + (p > 0 ? ' (+' + money(p) + ')' : '');
            });
            var o = sel.options[sel.selectedIndex]; if (!o) { return; }
            var p = priceOf(o, cycle); total += p;
            rows += '<div class="summary-row"><span style="color:var(--muted);">' + esc(sel.getAttribute('data-name')) + '</span><span>' + esc(o.getAttribute('data-label') || '') + (p > 0 ? ' <small style="color:var(--muted)">+' + esc(money(p)) + '</small>' : '') + '</span></div>';
        });
        document.querySelectorAll('input.config-option').forEach(function (el) {
            var qty = el.type === 'checkbox' ? (el.checked ? 1 : 0) : Math.max(0, parseInt(el.value || '0', 10));
            if (!qty) { return; }
            var p = priceOf(el, cycle) * qty; total += p;
            rows += '<div class="summary-row"><span style="color:var(--muted);">' + esc(el.getAttribute('data-name')) + (el.type === 'checkbox' ? '' : ' x' + qty) + '</span><span>' + (p > 0 ? '+' + esc(money(p)) : '') + '</span></div>';
        });
        document.querySelectorAll('input.cart-addon:checked').forEach(function (el) {
            var p = priceOf(el, cycle); total += p;
            rows += '<div class="summary-row"><span style="color:var(--muted);">' + esc(el.getAttribute('data-name')) + '</span><span>' + (p > 0 ? '+' + esc(money(p)) : '') + '</span></div>';
        });
        var box = document.getElementById('summaryExtras'); if (box) { box.innerHTML = rows; }
        document.getElementById('summaryTotal').textContent = money(total + (window.pnlcsDomainPrice || 0));
    };
    document.addEventListener('change', function (e) { if (e.target.closest('.config-option, .cart-addon')) { window.pnlcsUpdateTotal(); } });
    document.addEventListener('input', function (e) { if (e.target.matches('input.config-option[type=number]')) { window.pnlcsUpdateTotal(); } });
})();
document.querySelectorAll('input[name=billing_cycle]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        var labels = { monthly: '{{ __("client.cart.cycle_monthly") }}', quarterly: '{{ __("client.cart.cycle_quarterly") }}', semiannually: '{{ __("client.cart.cycle_semiannually") }}', annually: '{{ __("client.cart.cycle_annually") }}', biennially: '{{ __("client.cart.cycle_biennially") }}', triennially: '{{ __("client.cart.cycle_triennially") }}' };
        document.getElementById('summaryBilling').textContent = labels[this.value] || this.value;
        // With a domain being bought the total is both; the domain script
        // below owns that sum once it has loaded.
        window.pnlcsUpdateTotal();
    });
});
// A new domain or a transfer is bought with the hosting (issue #48): check the
// name, show its price in the summary and add it to the total. The cart checks
// it again when the form is sent, so this is information, not the gate.
(function () {
    var input = document.getElementById('domainInput');
    if (!input) return;
    var status = document.getElementById('domainStatus'), epp = document.getElementById('eppField');
    var row = document.getElementById('summaryDomainRow'), cell = document.getElementById('summaryDomain');
    var token = (document.querySelector('#configForm input[name=_token]') || {}).value;
    var cur = @json(display_currency_affixes());
    var texts = { checking: @json(__('client.cart.domain_checking')), unchecked: @json(__('client.cart.domain_unchecked')) };
    var domainPrice = 0, timer = null, seq = 0;
    function option() { var r = document.querySelector('input[name=domain_option]:checked'); return r ? r.value : 'own'; }
    function money(n) { var p = Number(n).toFixed(2).split('.'); return cur.prefix + p[0].replace(/\B(?=(\d{3})+(?!\d))/g, cur.thousands) + cur.decimal + p[1] + cur.suffix; }
    function show(text, color, price, formatted) {
        domainPrice = price; window.pnlcsDomainPrice = price;
        status.textContent = text; status.style.color = color;
        row.style.display = price > 0 ? '' : 'none'; cell.textContent = formatted || '';
        window.pnlcsUpdateTotal();
    }
    function quote() {
        var opt = option(), name = input.value.trim(), mine = ++seq;
        epp.hidden = opt !== 'transfer';
        @if(! empty($freeSubdomains))
        // A free subdomain: the first label here, one of the shop's domains beside it.
        document.getElementById('subdomainParent').hidden = opt !== 'subdomain';
        input.dataset.placeholder = input.dataset.placeholder || input.placeholder;
        input.placeholder = opt === 'subdomain' ? input.dataset.subdomainPlaceholder : input.dataset.placeholder;
        if (opt === 'subdomain') { show('', '', 0); return; }
        @endif
        if (opt === 'own' || name.indexOf('.') < 1) { show('', '', 0); return; }
        status.textContent = texts.checking; status.style.color = 'var(--muted)';
        fetch(@json(route('client.cart.domain-quote')), {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': token },
            body: JSON.stringify({ domain: name, type: opt })
        }).then(function (r) { return r.ok ? r.json() : Promise.reject(r); })
          .then(function (q) {
              if (mine !== seq) return;
              if (q.status === 'ok') { show(q.message, 'var(--success)', Number(q.price), q.price_formatted); }
              else { show(q.message, 'var(--danger)', 0); }
          })
          .catch(function () { if (mine === seq) show(texts.unchecked.replace(':domain', name), 'var(--danger)', 0); });
    }
    input.addEventListener('input', function () { clearTimeout(timer); timer = setTimeout(quote, 600); });
    document.querySelectorAll('input[name=domain_option]').forEach(function (r) { r.addEventListener('change', quote); });
    quote();
})();

var first = document.querySelector('input[name=billing_cycle]:checked');
if (first) { first.dispatchEvent(new Event('change')); }

function apPick(el){
    document.querySelectorAll('.ap-app').forEach(function(a){ a.classList.remove('on'); });
    el.classList.add('on');
    document.getElementById('ap-slug').value = el.getAttribute('data-slug') || '';
    var name = (el.querySelector('.ap-nm') || {}).textContent || '';
    document.getElementById('ap-picked').textContent = name;
    document.getElementById('ap-clearpick').hidden = false;
}

// Choosing an app is optional: the hosting is the product, so it has to be
// possible to change your mind and order without one.
function apClear(){
    document.querySelectorAll('.ap-app').forEach(function(a){ a.classList.remove('on'); });
    document.getElementById('ap-slug').value = '';
    document.getElementById('ap-clearpick').hidden = true;
}
function apFilter(){
    var q = (document.getElementById('ap-q').value || '').toLowerCase().trim();
    var terms = q ? q.split(/\s+/) : [];
    var shown = 0;
    document.querySelectorAll('.ap-app').forEach(function(a){
        var hay = a.getAttribute('data-find') || '';
        var ok = terms.every(function(t){ return hay.indexOf(t) !== -1; });
        a.hidden = !ok;
        if (ok) shown++;
    });
    document.getElementById('ap-none').hidden = shown !== 0;
    var c = document.getElementById('ap-count');
    c.textContent = c.getAttribute('data-tpl').replace(':count', shown);
}
document.addEventListener('DOMContentLoaded', function(){
    var c = document.getElementById('ap-count');
    if (c) c.setAttribute('data-tpl', @json(__('client.cart.app_count', ['count' => ':count'])));
});
</script>
<style>
    .ap-search{display:flex;align-items:center;gap:10px;margin-bottom:12px}
    .ap-count{font-size:11.5px;color:var(--muted);white-space:nowrap}
    .ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
    .ap-app{border:1px solid var(--border);border-radius:11px;padding:12px 10px;text-align:center;cursor:pointer;
        background:var(--bg);transition:transform .14s,border-color .14s;position:relative}
    .ap-app:hover{transform:translateY(-2px);border-color:var(--primary)}
    .ap-app.on{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 1px var(--primary) inset}
    .ap-logo,.ap-mark{width:38px;height:38px;margin:0 auto 8px;display:block;object-fit:contain}
    .ap-mark{border-radius:10px;border:1px solid;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
    .ap-nm{font-size:12.5px;font-weight:700;line-height:1.25;color:var(--text)}
    .ap-ds{font-size:10.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ap-star{position:absolute;top:6px;right:7px;color:#f0a92b;font-size:11px;line-height:1}
    .pn-res-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
    .pn-res-row li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text)}
    .pn-res-row i{font-size:15px;color:var(--primary)}
    .pn-res-note{font-size:11.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}
    .ap-req{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:6px}
    .ap-req span{font-size:10px;font-weight:600;color:var(--muted);background:rgba(127,127,127,.09);border-radius:5px;padding:2px 5px}
    .ap-opt{font-size:11px;font-weight:600;color:var(--muted);margin-left:6px}
    .ap-intro{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
    .ap-clearpick{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12.5px}
    .ap-clearpick span{font-weight:700}
    .ap-clearpick button{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
    .ap-none{padding:18px;text-align:center;color:var(--muted);font-size:13px}
</style>
@endsection

@endsection