@extends('layouts.public')

@section('title', 'SYSTRONICS — '.$product->name)
@section('meta_description', $lede)

@php
    $hasOverview = $sections->has('overview');
    $hasWhy = $sections->has('why_to_buy');
    $hasBenefits = $sections->has('benefits');
    $hasHighlights = $sections->has('highlights') || count($highlightItems);
    $hasFaq = $sections->has('faq');
    $hasTips = $sections->has('tips');
    $hasCollateral = $sections->has('collateral');
    $hasHistory = $compatRows->isNotEmpty();
    $collateralItems = $collateralItems ?? [];
    $releaseNav = \App\Domain\Cms\Models\ReleasePage::navItem();
@endphp

@section('content')
    @if (strtolower($product->code) === 'da' || strtolower((string) $product->legacy_prefix) === 'da')
        <a class="da-applet-tab" href="{{ route('portal.applet-requests.create') }}">I didn't find the Applet I need</a>
    @endif

    <nav class="crumbs" aria-label="Breadcrumb">
        <a href="{{ route('public.home') }}">Home</a><span>/</span>
        <a href="{{ route('public.products.index') }}">Products</a><span>/</span>
        <strong>{{ $product->name }}</strong>
    </nav>

    <div class="phead-band">
        <div class="grid-lines"></div>
        <span class="eyebrow">Sage 300 SDK application</span>
        <h1>{{ $product->name }} for Sage 300</h1>
        @if ($slogan)
            <p class="tagline">{{ $slogan }}</p>
        @elseif ($lede)
            <p class="tagline">{{ $lede }}</p>
        @endif
        <dl class="band-meta">
            @if ($currentVersion)
                <div><dt>Current version</dt><dd>{{ $currentVersion->product_version }}</dd></div>
            @endif
            @if ($sageVersions->isNotEmpty())
                <div><dt>Compatible with</dt><dd>Sage 300 {{ $sageVersions->take(4)->implode(', ') }}</dd></div>
            @endif
            <div><dt>Code</dt><dd>{{ strtoupper($product->code) }}</dd></div>
            <div><dt>Delivery mode</dt><dd>Website download</dd></div>
        </dl>
    </div>

    <div class="toolstrip">
        <a class="tool" href="#downloads">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7.5 11l4.5 4.5 4.5-4.5M4.5 19.5h15"></path></svg>
            Downloads
        </a>
        <a class="tool" href="#prices">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.4 3.5H19A1.5 1.5 0 0 1 20.5 5v7.6a1.5 1.5 0 0 1-.44 1.06l-6.4 6.4a1.5 1.5 0 0 1-2.12 0l-7.1-7.1a1.5 1.5 0 0 1 0-2.12l6.4-6.4A1.5 1.5 0 0 1 11.4 3.5Z"></path><circle cx="16" cy="8" r="1.4"></circle></svg>
            Prices
        </a>
        <a class="tool" href="{{ route('portal.activation-requests.create') }}">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8.5" cy="15.5" r="3.5"></circle><path d="M11 13 19.5 4.5M16.5 4.5h3v3"></path></svg>
            Request an Activation Code
        </a>
        @if ($hasHistory)
            <a class="tool" href="#history">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"></circle><path d="M12 7.5V12l3 2"></path></svg>
                Old Versions
            </a>
        @endif
        <a class="tool" href="{{ route('public.support') }}">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 14.5A2.5 2.5 0 0 1 17.5 17H8l-4 3V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v8Z"></path></svg>
            Get Support
        </a>
    </div>

    @if (count($nav) > 0)
        <nav class="anchornav" aria-label="On this page">
            @foreach ($nav as $item)
                <a href="#{{ $item['id'] }}">{{ $item['label'] }}</a>
            @endforeach
        </nav>
    @endif

    @if ($hasOverview || $hasCollateral)
        <section class="section" id="overview">
            <div class="layout">
                <div>
                    @if ($hasOverview)
                        <span class="eyebrow">Overview</span>
                        <h2 class="section-title">Why SYSTRONICS {{ $product->name }}?</h2>
                        <div class="prose" style="margin-top:18px">
                            {!! $sections['overview']->safeHtml() !!}
                        </div>
                    @endif
                </div>
                <aside class="aside">
                    @if (count($highlightItems))
                        <div class="card">
                            <h3>{{ $product->name }} Highlights</h3>
                            <ul class="check-list" style="margin-top:16px">
                                @foreach ($highlightItems as $item)
                                    <li>@include('layouts.partials.icon-check'){{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="card card--soft">
                        <h3 style="font-size:15px">Partners Area</h3>
                        <div class="flex-col" style="gap:8px;margin-top:14px">
                            <a class="file" href="#downloads" style="grid-template-columns:1fr">Downloads</a>
                            <a class="file" href="#prices" style="grid-template-columns:1fr">Prices</a>
                            <a class="file" href="{{ route('portal.activation-requests.create') }}" style="grid-template-columns:1fr">Request activation</a>
                            @if (strtolower($product->code) === 'da' || strtolower((string) $product->legacy_prefix) === 'da')
                                <a class="file" href="{{ route('portal.applet-requests.create') }}" style="grid-template-columns:1fr">I didn't find the Applet I need</a>
                            @endif
                            @guest
                                <a class="file" href="{{ route('login') }}" style="grid-template-columns:1fr">Sign in</a>
                                <a class="file" href="{{ route('register') }}" style="grid-template-columns:1fr">Create partner account</a>
                            @endguest
                        </div>
                    </div>
                    @if ($hasCollateral)
                        <div class="card card--soft">
                            <h3 style="font-size:15px">{{ $sections['collateral']->title }}</h3>
                            @if (count($collateralItems))
                                <div class="flex-col" style="gap:8px;margin-top:14px">
                                    @foreach ($collateralItems as $item)
                                        <a class="file" href="{{ $item['url'] }}" @if (str_starts_with($item['url'], 'http')) target="_blank" rel="noopener" @endif>
                                            @include('public.products._collateral-icon', ['icon' => $item['icon']])
                                            <span>{{ $item['label'] }}</span>
                                        </a>
                                    @endforeach
                                </div>
                            @else
                                <div class="prose" style="margin-top:12px">{!! $sections['collateral']->safeHtml() !!}</div>
                            @endif
                        </div>
                    @endif
                </aside>
            </div>
        </section>
    @endif

    @if ($hasWhy || $hasBenefits || $hasHighlights)
        <section class="panel" id="benefits">
            <div class="section-head">
                <div>
                    <span class="eyebrow">Why to buy</span>
                    <h2 class="section-title">{{ $product->name }} Business Benefits</h2>
                </div>
            </div>
            <div class="grid-2">
                @if ($hasBenefits)
                    <div class="card" @if (! $hasWhy) style="grid-column:1 / -1" @endif>
                        <h3>{{ $sections['benefits']->title }}</h3>
                        <div class="prose" style="margin-top:12px">{!! $sections['benefits']->safeHtml() !!}</div>
                    </div>
                @endif
                @if ($hasWhy)
                    <div class="card" @if (! $hasBenefits) style="grid-column:1 / -1" @endif>
                        <h3>{{ $sections['why_to_buy']->title }}</h3>
                        <div class="prose" style="margin-top:12px">{!! $sections['why_to_buy']->safeHtml() !!}</div>
                    </div>
                @endif
                @if ($sections->has('highlights') && (! $hasOverview || count($highlightItems) === 0))
                    <div class="card" style="grid-column:1 / -1">
                        <h3>{{ $sections['highlights']->title }}</h3>
                        <div class="prose" style="margin-top:12px">{!! $sections['highlights']->safeHtml() !!}</div>
                    </div>
                @endif
            </div>
        </section>
    @endif

    @if ($compatRows->isNotEmpty())
        <section class="section" id="versions">
            <div class="section-head section-head--ruled">
                <div>
                    <span class="eyebrow">Sage 300 compatibility</span>
                    <h2 class="section-title">Currently Supported Versions</h2>
                </div>
                @if ($hasHistory)
                    <div class="section-links"><a href="#history">Version history →</a></div>
                @endif
            </div>
            <table class="spec">
                <tbody>
                    <tr>
                        <th scope="row">Currently supported</th>
                        <td>
                            @forelse ($supportedRows as $row)
                                {{ $row->product_version }}@if (! $loop->last) &nbsp;·&nbsp; @endif
                            @empty
                                See matrix below.
                            @endforelse
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Compatible with</th>
                        <td>
                            @forelse ($sageVersions as $ver)
                                Sage 300 {{ $ver }}@if (! $loop->last), @endif
                            @empty
                                Sage 300
                            @endforelse
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">Delivery Mode</th>
                        <td>Website download.</td>
                    </tr>
                </tbody>
            </table>
        </section>
    @endif

    <section class="section" id="downloads">
        <div class="section-head section-head--ruled">
            <div>
                <span class="eyebrow">Downloads</span>
                <h2 class="section-title">{{ $product->name }} Downloads</h2>
            </div>
        </div>

        <div class="callout" style="margin-bottom:20px">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0F62FE" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><rect x="5" y="10.5" width="14" height="9" rx="2"></rect><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"></path></svg>
            <div>
                Certain downloads are available to SYSTRONICS Partners only.
                @guest
                    Please <a href="{{ route('login') }}">log in</a> to the Partner Area. If you are not registered, <a href="{{ route('register') }}">create a partner account</a>.
                @else
                    @unless ($canDownloads)
                        Your account does not have download access.
                    @endunless
                @endguest
                By downloading this product you agree to the <a href="{{ route('public.company', 'eula') }}">Terms and Conditions</a>.
            </div>
        </div>

        @auth
            @if ($canDownloads)
                @if ($versionDownloads->isNotEmpty())
                    @foreach ($versionDownloads as $i => $version)
                        <details class="acc" @if ($i === 0) open @endif>
                            <summary>{{ $version->displayLabel() }} · Sage {{ $version->sage_version ?: '—' }}@include('layouts.partials.icon-chev')</summary>
                            <div class="acc-body">
                                @foreach ($version->versionContents->groupBy(fn ($tile) => $tile->category?->name ?: 'Downloads') as $categoryName => $tiles)
                                    <span class="eyebrow" @if (! $loop->first) style="display:block;margin-top:20px" @endif>{{ $categoryName }}</span>
                                    <div class="files" style="margin-top:12px">
                                        @foreach ($tiles as $tile)
                                            @php
                                                $url = $tile->partnerDownloadUrl();
                                                $asset = $tile->resolvedDownloadAsset();
                                                $ext = strtoupper($asset?->extension() ?: 'FILE');
                                                if ($ext === 'FILE' && preg_match('/\.([a-z0-9]{2,5})$/i', (string) $tile->download_title, $m)) {
                                                    $ext = strtoupper($m[1]);
                                                }
                                            @endphp
                                            @include('public.products._file', [
                                                'label' => $tile->download_title,
                                                'href' => $url,
                                                'ext' => $ext,
                                                'hint' => $tile->tooltip,
                                            ])
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </details>
                    @endforeach
                    <div class="rows" style="margin-top:20px">
                        <a class="row" href="{{ route('downloads', ['category' => strtoupper($product->code)]) }}">
                            <span class="row-title">Browse full downloads library</span>
                            <span class="row-date">Partner Area</span>
                        </a>
                    </div>
                @elseif ($productDownloads->isNotEmpty())
                    <div class="files">
                        @foreach ($productDownloads as $asset)
                            @include('public.products._file', [
                                'label' => $asset->displayName(),
                                'href' => route('portal.downloads.file', $asset),
                                'ext' => strtoupper($asset->extension() ?: 'FILE'),
                                'hint' => $asset->humanSize(),
                            ])
                        @endforeach
                    </div>
                    <p style="margin-top:16px"><a class="more" href="{{ route('downloads', ['category' => strtoupper($product->code)]) }}">View all {{ strtoupper($product->code) }} downloads →</a></p>
                @else
                    <p class="lede">No files are listed for this product yet, or none are entitled for your account.</p>
                    <p style="margin-top:12px"><a class="btn btn--outline" href="{{ route('downloads') }}">Open downloads library</a></p>
                @endif
            @endif
        @else
            <div class="rows">
                <a class="row" href="{{ route('login') }}">
                    <span class="row-title">Sign in to download installers, guides, and brochures</span>
                    <span class="row-date">Partner Area</span>
                </a>
            </div>
        @endauth
    </section>

    <section class="panel" id="prices">
        <div class="section-head">
            <div>
                <span class="eyebrow">Prices</span>
                <h2 class="section-title">{{ $product->name }} prices</h2>
            </div>
            @auth
                @if ($canPrices)
                    <div class="section-links"><a href="{{ route('portal.prices') }}">View all products →</a></div>
                @endif
            @endauth
        </div>

        @auth
            @if ($canPrices && $priceMatrix)
                <p class="lede" style="margin-bottom:18px">Your country price list: <strong>{{ $priceMatrix['price_list']->code }}</strong>.</p>
                @include('partials.prices.matrix', [
                    'matrix' => $priceMatrix,
                    'mode' => 'product',
                ])
            @elseif ($canPrices)
                <p class="lede">No published prices for this product on your list.</p>
                <p style="margin-top:12px"><a class="btn btn--primary" href="{{ route('portal.prices') }}">Open full price list</a></p>
            @else
                <p class="lede">Your account does not have price-list access.</p>
            @endif
        @else
            <div class="grid-2">
                <div class="card">
                    <span class="eyebrow">Subscription license</span>
                    <h3 style="margin-top:10px">Annual subscription</h3>
                    <p class="card-body">Entitles the End User to use any shipping version during the validity period, including updates, upgrades and unlimited offsite technical support direct from the SYSTRONICS Support Team.</p>
                </div>
                <div class="card">
                    <span class="eyebrow">Perpetual license</span>
                    <h3 style="margin-top:10px">Fixed license fee</h3>
                    <p class="card-body">Updates, upgrades and support are available under a valid Software Assurance Plan, mandatory for the first year and charged at 20% of the current product SRP.</p>
                </div>
                <div class="callout" style="grid-column:1 / -1">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0F62FE" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><rect x="5" y="10.5" width="14" height="9" rx="2"></rect><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"></path></svg>
                    <div>Please check the most recent prices on our website. To do so you should create an account and <a href="{{ route('login') }}">log in</a>.</div>
                </div>
            </div>
        @endauth
    </section>

    @if ($hasHistory)
        <section class="section" id="history">
            <div class="section-head section-head--ruled">
                <div>
                    <span class="eyebrow">Release history</span>
                    <h2 class="section-title">Version history</h2>
                </div>
                <div class="section-links"><a href="{{ $releaseNav['url'] }}">{{ $releaseNav['label'] }} →</a></div>
            </div>
            <div class="rows" style="margin-top:26px">
                @foreach ($compatRows->sortByDesc('product_version') as $row)
                    <div class="row">
                        <span class="row-title">{{ $product->name }} {{ $row->product_version }}</span>
                        <span class="row-date">Sage {{ $row->sage_version ?: '—' }} · {{ $row->is_currently_supported ? 'Supported' : 'Retired' }}</span>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    @if ($hasTips)
        <section class="section" id="tips">
            <div class="section-head">
                <div>
                    <span class="eyebrow">Tips</span>
                    <h2 class="section-title">{{ $sections['tips']->title }}</h2>
                </div>
            </div>
            <div class="prose">{!! $sections['tips']->safeHtml() !!}</div>
        </section>
    @endif

    @if ($hasFaq)
        <section class="section" id="faq">
            <div class="section-head section-head--ruled">
                <div>
                    <span class="eyebrow">FAQ</span>
                    <h2 class="section-title">{{ $sections['faq']->title }}</h2>
                </div>
            </div>
            @if (count($faqItems))
                <div style="margin-top:26px">
                    @foreach ($faqItems as $i => $item)
                        <details class="acc" @if ($i === 0) open @endif>
                            <summary>{{ $item['q'] }}@include('layouts.partials.icon-chev')</summary>
                            <div class="acc-body">{!! $item['a'] !!}</div>
                        </details>
                    @endforeach
                </div>
            @else
                <div class="prose" style="margin-top:18px">{!! $sections['faq']->safeHtml() !!}</div>
            @endif
        </section>
    @endif

    <section class="panel" id="demo">
        <div class="grid-2" style="gap:32px;align-items:start">
            <div>
                <span class="eyebrow">Request a demo</span>
                <h2 class="section-title section-title--sm" style="margin-top:10px">See {{ $product->name }} on your Sage 300</h2>
                <p class="lede">Tell us your Sage 300 version and how you plan to use {{ $product->name }}. The SYSTRONICS team will arrange an online demonstration.</p>
                <div class="callout callout--plain" style="margin-top:20px">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5A6879" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><path d="M4 6.5h16v11H4z"></path><path d="m4 7 8 6 8-6"></path></svg>
                    <div>Or write directly to <a href="mailto:sales@systronics.com">sales@systronics.com</a></div>
                </div>
            </div>
            <form class="form" method="POST" action="{{ route('public.products.demo', $product) }}">
                @csrf
                <div class="form-row @error('name') has-error @enderror">
                    <label for="d-name">Name</label>
                    <input id="d-name" name="name" type="text" value="{{ old('name') }}" placeholder="Full name" required>
                    @error('name')<span class="field-error">{{ $message }}</span>@enderror
                </div>
                <div class="form-row">
                    <label for="d-company">Company</label>
                    <input id="d-company" name="company" type="text" value="{{ old('company') }}" placeholder="Company name">
                </div>
                <div class="form-row @error('email') has-error @enderror">
                    <label for="d-email">E-mail</label>
                    <input id="d-email" name="email" type="email" value="{{ old('email') }}" placeholder="name@company.com" required>
                    @error('email')<span class="field-error">{{ $message }}</span>@enderror
                </div>
                <div class="form-row">
                    <label for="d-country">Country</label>
                    <input id="d-country" name="country" type="text" value="{{ old('country') }}" placeholder="Country">
                </div>
                <div class="form-row form-row--full">
                    <label for="d-version">Sage 300 version</label>
                    <select id="d-version" name="sage_version">
                        @forelse ($sageVersions as $ver)
                            <option value="{{ $ver }}" @selected(old('sage_version') === $ver)>Sage 300 {{ $ver }}</option>
                        @empty
                            <option value="Sage 300 2026">Sage 300 2026</option>
                            <option value="Sage 300 2025">Sage 300 2025</option>
                            <option value="Sage 300 2024">Sage 300 2024</option>
                            <option value="Other / not sure">Other / not sure</option>
                        @endforelse
                    </select>
                </div>
                <div class="form-row form-row--full">
                    <label for="d-msg">What would you like to see?</label>
                    <textarea id="d-msg" name="message" placeholder="Number of companies, modules, the process you want to improve…">{{ old('message') }}</textarea>
                </div>
                <div class="form-note">SYSTRONICS products are sold through authorized partners. Your request is routed to the partner covering your country.</div>
                <div class="form-row form-row--full">
                    <button class="btn btn--primary" type="submit">Request a demo</button>
                </div>
            </form>
        </div>
    </section>

    <div class="cta">
        <div class="cta-dots"></div>
        <div class="cta-copy">
            <h2>Ready to put {{ $product->name }} on Sage 300?</h2>
            <p>Download the current version, request an activation code, or ask the SYSTRONICS team for a walkthrough.</p>
        </div>
        <div class="cta-actions">
            <a class="solid" href="#downloads">Downloads</a>
            <a class="ghost" href="{{ route('portal.activation-requests.create') }}">Request an Activation Code</a>
        </div>
    </div>
@endsection