@extends('layouts.app')
@section('title', 'Landing page')
@section('content')
@include('partials.admin-nav')
@include('partials.cms-tabs')
@php
    $feat = old('features', $l['features']);
    $steps = old('steps', $l['steps']);
    $adv = old('advisory_items', $l['advisory_items']);
    $rowPair = function (string $name, $i, $title = '', $body = '') {
        return view('partials.cms-pair-row', compact('name', 'i', 'title', 'body'))->render();
    };
@endphp
<form method="POST" action="{{ route('admin.cms.landing.update') }}" class="space-y-6">
    @csrf
    <div class="card">
        <h2 class="card-title">Top of page</h2>
        <div class="grid gap-4">
            <div><label class="label">Warning bar (leave empty to hide)</label><input name="risk_bar" class="input" maxlength="300" value="{{ old('risk_bar', $l['risk_bar']) }}"></div>
            <div><label class="label">Headline</label><input name="hero_title" class="input" required maxlength="160" value="{{ old('hero_title', $l['hero_title']) }}"></div>
            <div><label class="label">Sub-headline</label><textarea name="hero_subtitle" rows="2" class="input" maxlength="400">{{ old('hero_subtitle', $l['hero_subtitle']) }}</textarea></div>
            <div class="grid gap-4 sm:grid-cols-2">
                <div><label class="label">Main button text</label><input name="cta_primary" class="input" required maxlength="40" value="{{ old('cta_primary', $l['cta_primary']) }}"></div>
                <div><label class="label">Second button text (empty = hide)</label><input name="cta_secondary" class="input" maxlength="40" value="{{ old('cta_secondary', $l['cta_secondary']) }}"></div>
            </div>
        </div>
    </div>

    <div class="card" data-repeater="features" data-max="6">
        <h2 class="card-title">Feature cards (up to 6)</h2>
        <div data-rows class="space-y-3">@foreach($feat as $i => $f){!! $rowPair('features', $i, $f['title'] ?? '', $f['body'] ?? '') !!}@endforeach</div>
        <template>{!! $rowPair('features', '__i__') !!}</template>
        <button type="button" class="btn-secondary btn-sm mt-3" data-add>+ Add card</button>
    </div>

    <div class="card" data-repeater="steps" data-max="8">
        <h2 class="card-title">Steps</h2>
        <div class="mb-3"><label class="label">Section heading</label><input name="steps_title" class="input" maxlength="80" value="{{ old('steps_title', $l['steps_title']) }}"></div>
        <div data-rows class="space-y-2">@foreach($steps as $i => $st)<div class="flex gap-2" data-row><input name="steps[{{ $i }}]" class="input" maxlength="240" value="{{ $st }}"><button type="button" class="btn-danger btn-sm" data-remove>✕</button></div>@endforeach</div>
        <template><div class="flex gap-2" data-row><input name="steps[__i__]" class="input" maxlength="240"><button type="button" class="btn-danger btn-sm" data-remove>✕</button></div></template>
        <button type="button" class="btn-secondary btn-sm mt-3" data-add>+ Add step</button>
    </div>

    <div class="card" data-repeater="advisory_items" data-max="15">
        <h2 class="card-title">Risk advisory</h2>
        <div class="mb-3 grid gap-3">
            <div><label class="label">Heading</label><input name="advisory_title" class="input" maxlength="100" value="{{ old('advisory_title', $l['advisory_title']) }}"></div>
        </div>
        <div data-rows class="space-y-3">@foreach($adv as $i => $a){!! $rowPair('advisory_items', $i, $a['title'] ?? '', $a['body'] ?? '') !!}@endforeach</div>
        <template>{!! $rowPair('advisory_items', '__i__') !!}</template>
        <button type="button" class="btn-secondary btn-sm mt-3" data-add>+ Add point</button>
        <div class="mt-4 grid gap-3">
            <div><label class="label">Closing note (empty = hide)</label><textarea name="advisory_note" rows="2" class="input" maxlength="400">{{ old('advisory_note', $l['advisory_note']) }}</textarea></div>
            <div><label class="label">Button under the advisory (empty = hide)</label><input name="advisory_cta" class="input" maxlength="60" value="{{ old('advisory_cta', $l['advisory_cta']) }}"></div>
        </div>
    </div>

    <div class="flex items-center gap-3">
        <button class="btn-primary">Save landing page</button>
        <button type="submit" form="reset-landing" class="btn-secondary" onclick="return confirm('Discard all your landing-page edits and go back to the built-in text?')">Reset to default</button>
    </div>
</form>
<form id="reset-landing" method="POST" action="{{ route('admin.cms.landing.reset') }}">@csrf @method('DELETE')</form>

<script>
document.querySelectorAll('[data-repeater]').forEach(function (box) {
    var rows = box.querySelector('[data-rows]'), tpl = box.querySelector('template'), max = +box.dataset.max, n = rows.children.length + 100;
    box.querySelector('[data-add]').addEventListener('click', function () {
        if (rows.children.length >= max) { alert('Maximum ' + max + ' rows.'); return; }
        rows.insertAdjacentHTML('beforeend', tpl.innerHTML.split('__i__').join(n++));
    });
    box.addEventListener('click', function (e) { var b = e.target.closest('[data-remove]'); if (b) b.closest('[data-row]').remove(); });
});
</script>
@endsection