@extends("client.layouts.app")
@section("title", $current ? $current->name : __("client.order_a_new_product"))
@section("content")

{{-- The store, one category at a time: the categories down the side (a row
     of chips on a phone), the chosen one's plans beside them. --}}
<style>
    .st-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
    .st-layout>*{min-width:0}
    .st-head{margin-bottom:24px}
    .st-title{font-size:28px;font-weight:800;color:var(--text);letter-spacing:-0.5px;line-height:1.2}
    .st-tagline{font-size:14px;color:var(--muted);margin-top:6px}

    .st-cats{position:sticky;top:84px}
    .st-cats__title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:10px}
    .st-cats__list{list-style:none;display:flex;flex-direction:column;gap:2px}
    .st-cat{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);font-size:13.5px;color:var(--primary);text-decoration:none;transition:background .15s}
    .st-cat i{font-size:16px;flex:0 0 auto}
    .st-cat:hover{background:var(--primary-light)}
    .st-cat.is-active{background:var(--primary-light);font-weight:600}
    .st-cat__count{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:500}

    .st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
    .st-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 24px 24px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);transition:box-shadow .2s,border-color .2s}
    .st-card:hover{box-shadow:var(--shadow-md)}
    .st-card.is-featured{border-color:var(--primary)}
    .st-ribbon{position:absolute;top:14px;right:-34px;width:120px;transform:rotate(45deg);background:var(--primary);color:#fff;font-size:10px;font-weight:600;letter-spacing:.3px;padding:3px 0;text-align:center}
    .st-card__name{font-size:19px;font-weight:600;color:var(--text);line-height:1.3;padding:0 18px}
    .st-card__price{font-size:30px;font-weight:800;color:var(--text);letter-spacing:-0.5px;margin-top:12px;line-height:1.1}
    .st-card__cycle{font-size:12px;color:var(--muted);margin-top:4px}
    .st-card__desc{font-size:13px;color:var(--muted);line-height:1.6;margin-top:16px}
    .st-card__features{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text);line-height:1.4}
    .st-card__features i{color:var(--success);margin-right:4px}
    .st-card__spacer{flex:1;min-height:20px}
    .st-card__btn{justify-content:center;min-width:140px}

    @media(max-width:900px){
        .st-layout{grid-template-columns:1fr;gap:16px}
        .st-cats{position:static}
        .st-cats__title{display:none}
        .st-cats__list{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:thin}
        .st-cat{flex:0 0 auto;border:1px solid var(--border);background:var(--card);white-space:nowrap}
        .st-cat__count{display:none}
        .st-title{font-size:22px}
    }
</style>

@if(session("error"))
<div class="pn-alert pn-alert-error mb-16">{{ session("error") }}</div>
@endif

@if(! $current)
<div class="pn-card">
    <div class="pn-empty">
        <div class="pn-empty-icon">&#128722;</div>
        <p>{{ __('client.store.no_products_at_all') }}</p>
    </div>
</div>
@else
@php
    // An icon for a category, guessed from its name.
    $catIcon = function (string $name): string {
        $n = strtolower($name);
        foreach ([
            'ri-global-line' => ['domain'],
            'ri-shield-check-line' => ['ssl', 'certificate', 'security'],
            'ri-mail-line' => ['mail', 'workspace', 'workplace'],
            'ri-server-line' => ['vps', 'dedicated', 'server', 'cloud'],
            'ri-group-line' => ['reseller'],
            'ri-wordpress-line' => ['wordpress'],
            'ri-layout-line' => ['website', 'builder'],
            'ri-key-2-line' => ['licen'],
        ] as $icon => $words) {
            foreach ($words as $w) {
                if (str_contains($n, $w)) {
                    return $icon;
                }
            }
        }

        return 'ri-hard-drive-2-line';
    };
    $cycleLabel = fn (string $cycle) => __('common.billing.'.($cycle === 'semiannually' ? 'semi_annually' : $cycle));
@endphp
<div class="st-layout">
    <aside class="st-cats">
        <div class="st-cats__title">{{ __('client.store.categories') }}</div>
        <ul class="st-cats__list">
            @foreach($groups as $g)
            <li>
                <a href="{{ route('client.store', $g->storeKey()) }}" class="st-cat {{ $g->id === $current->id ? 'is-active' : '' }}" @if($g->id === $current->id) aria-current="page" @endif>
                    <i class="{{ $catIcon($g->name) }}"></i> {{ $g->name }}
                    <span class="st-cat__count">{{ $g->products_count }}</span>
                </a>
            </li>
            @endforeach
        </ul>
    </aside>

    <div>
        <div class="st-head">
            <h1 class="st-title">{{ $current->headline ?: $current->name }}</h1>
            @if($current->tagline)
            <p class="st-tagline">{{ $current->tagline }}</p>
            @elseif(! $current->headline)
            <p class="st-tagline">{{ __('client.store.subtitle') }}</p>
            @endif
        </div>

        <div class="st-grid">
            @foreach($products as $product)
            @php
                $pricedCycles = $product->pricedCycles($currency?->id);
                $startingCycle = (string) array_key_first($pricedCycles);
                $startingPrice = $pricedCycles[$startingCycle] ?? null;

                // What the card lists: the plan's feature lines when the
                // operator wrote them (f1-f7, as the homepage uses), else a
                // description written one feature a line, else the limits
                // the product enforces.
                $opts = is_array($product->config_options) ? $product->config_options : [];
                $features = [];
                for ($i = 1; $i <= 7; $i++) {
                    if (! empty($opts["f{$i}"])) {
                        $features[] = (string) $opts["f{$i}"];
                    }
                }
                $desc = trim(strip_tags(str_ireplace(['<br>', '<br/>', '<br />', '</p>', '</li>'], "\n", (string) $product->description)));
                $descLines = array_values(array_filter(array_map('trim', preg_split('/\R/', $desc))));
                $paragraph = null;
                if (! $features && count($descLines) > 1) {
                    $features = $descLines;
                } elseif ($desc !== '') {
                    $paragraph = \Illuminate\Support\Str::limit($desc, 160);
                }
                if (! $features) {
                    $features = array_map(fn ($r) => $r['text'], $product->resourceSummary());
                }
            @endphp
            <div class="st-card {{ $product->is_featured ? 'is-featured' : '' }}">
                @if($product->is_featured)
                <div class="st-ribbon">{{ __('client.store.featured') }}</div>
                @endif
                <div class="st-card__name">{{ $product->name }}</div>
                @if($startingPrice !== null)
                    <div class="st-card__price">{{ display_money_fmt($startingPrice) }}</div>
                    <div class="st-card__cycle">{{ $cycleLabel($startingCycle) }}</div>
                @else
                    <div class="st-card__price" style="font-size:22px">{{ __('client.store.contact_us') }}</div>
                @endif
                @if($paragraph)
                    <div class="st-card__desc">{{ $paragraph }}</div>
                @endif
                @if($features)
                    <ul class="st-card__features">
                        @foreach($features as $f)
                        <li>{{ $f }}</li>
                        @endforeach
                    </ul>
                @endif
                <div class="st-card__spacer"></div>
                @if($product->outOfStock())
                    <span class="btn btn-outline st-card__btn" style="opacity:.65;cursor:default">{{ __('client.cart.out_of_stock') }}</span>
                @else
                    <a href="{{ route('client.store.configure', $product) }}" class="btn btn-primary st-card__btn">{{ __('client.store.order_now') }}</a>
                @endif
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

@endsection