@extends('layouts.site', ['title' => 'Edit Site Content | MuxiYeto'])

@push('styles')
<style>
    .editor-shell { background:var(--soft); padding:44px 0 70px; }
    .editor-head { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:24px; }
    .editor-head h1 { margin:0 0 6px; font-size:clamp(32px, 5vw, 52px); }
    .editor-head p { margin:0; color:var(--muted); }
    .editor-form { display:grid; gap:18px; }
    .panel { border:1px solid var(--line); border-radius:8px; background:#fff; padding:24px; }
    .panel h2 { margin:0 0 18px; font-size:25px; }
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
    label { display:block; color:#314258; font-weight:800; margin-bottom:14px; }
    input, textarea { width:100%; margin-top:7px; border:1px solid #cdd7e5; border-radius:6px; padding:12px 14px; font:inherit; color:var(--ink); background:#fff; }
    input { min-height:46px; }
    textarea { min-height:110px; resize:vertical; }
    .help { color:var(--muted); font-size:13px; font-weight:500; margin-top:5px; }
    .actions { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; background:var(--soft); }
    .plain-link { font-weight:800; color:var(--teal); }
    .notice { padding:14px 16px; border-radius:6px; background:#e9f8f5; color:#075f56; font-weight:800; }
    @media (max-width:900px) { .grid-2, .grid-3 { grid-template-columns:1fr; } .editor-head { flex-direction:column; } }
</style>
@endpush

@php
    $footerGroups = data_get($content, 'footer.groups', []);
@endphp

@section('content')
    <section class="editor-shell">
        <div class="container">
            <div class="editor-head">
                <div>
                    <h1>Edit Site Content</h1>
                    <p>Change the frontend content here. Save once and the public homepage updates immediately.</p>
                </div>
                <a class="plain-link" href="{{ route('admin.dashboard') }}">Back to admin</a>
            </div>

            @if (session('status'))
                <div class="notice">{{ session('status') }}</div>
            @endif

            <form class="editor-form" method="post" action="{{ route('admin.content.update') }}">
                @csrf

                <section class="panel">
                    <h2>SEO and Brand</h2>
                    <div class="grid-2">
                        <label>SEO title<input name="seo[title]" value="{{ data_get($content, 'seo.title') }}"></label>
                        <label>SEO description<input name="seo[description]" value="{{ data_get($content, 'seo.description') }}"></label>
                        <label>Brand name<input name="brand[name]" value="{{ data_get($content, 'brand.name') }}"></label>
                        <label>Brand tagline<input name="brand[tagline]" value="{{ data_get($content, 'brand.tagline') }}"></label>
                        <label>Brand mark<input name="brand[mark]" value="{{ data_get($content, 'brand.mark') }}"></label>
                    </div>
                </section>

                <section class="panel">
                    <h2>Main Menu</h2>
                    <div class="grid-2">
                        @for ($i = 0; $i < 6; $i++)
                            <label>Menu label {{ $i + 1 }}<input name="menu[{{ $i }}][label]" value="{{ data_get($content, "menu.$i.label") }}"></label>
                            <label>Menu URL {{ $i + 1 }}<input name="menu[{{ $i }}][url]" value="{{ data_get($content, "menu.$i.url") }}"></label>
                        @endfor
                    </div>
                </section>

                <section class="panel">
                    <h2>Hero Section</h2>
                    <label>Eyebrow<input name="hero[eyebrow]" value="{{ data_get($content, 'hero.eyebrow') }}"></label>
                    <label>Title<textarea name="hero[title]">{{ data_get($content, 'hero.title') }}</textarea></label>
                    <label>Body<textarea name="hero[body]">{{ data_get($content, 'hero.body') }}</textarea></label>
                    <div class="grid-2">
                        <label>Button label<input name="hero[button_label]" value="{{ data_get($content, 'hero.button_label') }}"></label>
                        <label>Button URL<input name="hero[button_url]" value="{{ data_get($content, 'hero.button_url') }}"></label>
                    </div>
                    <label>Panel title<input name="hero[panel_title]" value="{{ data_get($content, 'hero.panel_title') }}"></label>
                    <label>Panel bullet items<textarea name="hero[panel_items]">{{ data_get($content, 'hero.panel_items') }}</textarea><span class="help">Use one line per bullet.</span></label>
                </section>

                <section class="panel">
                    <h2>Project Focus</h2>
                    <label>Eyebrow<input name="focus[eyebrow]" value="{{ data_get($content, 'focus.eyebrow') }}"></label>
                    <label>Title<textarea name="focus[title]">{{ data_get($content, 'focus.title') }}</textarea></label>
                    <label>Body<textarea name="focus[body]">{{ data_get($content, 'focus.body') }}</textarea></label>
                    <div class="grid-3">
                        @for ($i = 0; $i < 3; $i++)
                            <div>
                                <label>Card {{ $i + 1 }} title<input name="focus[cards][{{ $i }}][title]" value="{{ data_get($content, "focus.cards.$i.title") }}"></label>
                                <label>Card {{ $i + 1 }} body<textarea name="focus[cards][{{ $i }}][body]">{{ data_get($content, "focus.cards.$i.body") }}</textarea></label>
                            </div>
                        @endfor
                    </div>
                </section>

                <section class="panel">
                    <h2>Free Trial Form</h2>
                    <label>Eyebrow<input name="trial[eyebrow]" value="{{ data_get($content, 'trial.eyebrow') }}"></label>
                    <label>Title<textarea name="trial[title]">{{ data_get($content, 'trial.title') }}</textarea></label>
                    <label>Body<textarea name="trial[body]">{{ data_get($content, 'trial.body') }}</textarea></label>
                    <div class="grid-2">
                        <label>Button label<input name="trial[button_label]" value="{{ data_get($content, 'trial.button_label') }}"></label>
                        <label>Success message<input name="trial[success_message]" value="{{ data_get($content, 'trial.success_message') }}"></label>
                    </div>
                </section>

                <section class="panel">
                    <h2>Video Section</h2>
                    <label>Eyebrow<input name="video[eyebrow]" value="{{ data_get($content, 'video.eyebrow') }}"></label>
                    <label>Title<textarea name="video[title]">{{ data_get($content, 'video.title') }}</textarea></label>
                    <label>Body<textarea name="video[body]">{{ data_get($content, 'video.body') }}</textarea></label>
                    <label>YouTube or embed URL<input name="video[embed_url]" value="{{ data_get($content, 'video.embed_url') }}"><span class="help">Leave empty to show the placeholder.</span></label>
                    <div class="grid-2">
                        <label>Placeholder title<input name="video[placeholder_title]" value="{{ data_get($content, 'video.placeholder_title') }}"></label>
                        <label>Placeholder body<input name="video[placeholder_body]" value="{{ data_get($content, 'video.placeholder_body') }}"></label>
                    </div>
                </section>

                <section class="panel">
                    <h2>Support Section</h2>
                    <label>Eyebrow<input name="support[eyebrow]" value="{{ data_get($content, 'support.eyebrow') }}"></label>
                    <label>Title<textarea name="support[title]">{{ data_get($content, 'support.title') }}</textarea></label>
                    <label>Body<textarea name="support[body]">{{ data_get($content, 'support.body') }}</textarea></label>
                </section>

                <section class="panel">
                    <h2>Footer</h2>
                    <label>Footer intro<textarea name="footer[body]">{{ data_get($content, 'footer.body') }}</textarea></label>
                    <label>Footer bottom line<input name="footer[bottom]" value="{{ data_get($content, 'footer.bottom') }}"></label>
                    <div class="grid-2">
                        @for ($i = 0; $i < 5; $i++)
                            @php($linksText = collect(data_get($footerGroups, "$i.links", []))->map(fn($link) => data_get($link, 'label').'|'.data_get($link, 'url'))->implode("\n"))
                            <div>
                                <label>Footer group {{ $i + 1 }} title<input name="footer[groups][{{ $i }}][title]" value="{{ data_get($footerGroups, "$i.title") }}"></label>
                                <label>Footer group {{ $i + 1 }} links<textarea name="footer[groups][{{ $i }}][links_text]">{{ $linksText }}</textarea><span class="help">Use one link per line as Label|URL.</span></label>
                            </div>
                        @endfor
                    </div>
                </section>

                <div class="actions">
                    <a class="plain-link" href="{{ route('home') }}" target="_blank">View frontend</a>
                    <button class="button" type="submit">Save Site Content</button>
                </div>
            </form>
        </div>
    </section>
@endsection