@extends('layouts.app')

@section('title', 'Gästebuch – ' . config('hof.name'))
@section('description', 'Das Gästebuch des Regenbogenhofs Rudelswalde: Lesen Sie, was unsere Gäste erlebt haben – und hinterlassen Sie selbst einen Gruß.')

@section('content')

<section class="page-hero">
    <div class="container">
        <p class="crumbs"><a href="{{ route('home') }}">Start</a> · Gästebuch</p>
        <span class="eyebrow">Gästebuch</span>
        <h1>Grüße von unseren Gästen.</h1>
        <p>Sie waren bei uns zu Gast, haben gefeiert oder unser Eis genossen? Wir freuen uns über jeden Gruß im Gästebuch.</p>
    </div>
</section>

<section class="section" style="padding-top:clamp(24px,3vw,40px)">
    <div class="container">
        <div class="contact-grid" style="align-items:start">
            {{-- Form --}}
            <div class="form-card reveal" style="position:sticky;top:96px">
                <h2 style="font-size:1.6rem;margin-bottom:6px">Eintrag schreiben</h2>
                <p style="color:var(--ink-2);margin-bottom:22px">Ihr Gruß erscheint direkt im Gästebuch.</p>

                @if(session('gb_status'))
                    <div class="alert alert--ok">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                        {{ session('gb_status') }}
                    </div>
                @endif

                <form action="{{ route('guestbook.store') }}" method="POST" novalidate>
                    @csrf
                    <div class="hp" aria-hidden="true">
                        <label>Bitte leer lassen <input type="text" name="website" tabindex="-1" autocomplete="off"></label>
                    </div>
                    <div class="field-row">
                        <div class="field">
                            <label for="gname">Name <span class="req">*</span></label>
                            <input type="text" id="gname" name="name" value="{{ old('name') }}" required>
                            @error('name')<div class="err">{{ $message }}</div>@enderror
                        </div>
                        <div class="field">
                            <label for="glocation">Ort</label>
                            <input type="text" id="glocation" name="location" value="{{ old('location') }}" placeholder="z. B. Zwickau">
                        </div>
                    </div>
                    <div class="field">
                        <label for="gmessage">Ihr Gruß <span class="req">*</span></label>
                        <textarea id="gmessage" name="message" required placeholder="Wie war Ihr Aufenthalt bei uns?">{{ old('message') }}</textarea>
                        @error('message')<div class="err">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="btn btn--primary btn--block">Gruß veröffentlichen</button>
                </form>
            </div>

            {{-- Entries --}}
            <div class="reveal">
                @forelse($entries as $entry)
                    <div class="gb-entry" style="margin-bottom:20px">
                        <p>{{ $entry->message }}</p>
                        <div class="who">
                            {{ $entry->name }}
                            <span>{{ $entry->location ? $entry->location . ' · ' : '' }}{{ $entry->created_at->translatedFormat('d. F Y') }}</span>
                        </div>
                    </div>
                @empty
                    <div class="gb-empty">
                        <p style="font-size:1.1rem">Noch kein Eintrag – seien Sie die/der Erste und hinterlassen Sie einen Gruß! 🌈</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</section>

@endsection