@extends('layouts.app')

@section('title','Cadeaubon')
@section('meta_title','Cadeaubon | Genkai Grill & Sushi Hasselt')
@section('meta_description','Geef Genkai cadeau. Maak online een persoonlijke Genkai cadeaubon met eigen bedrag, ontvanger en gelegenheid.')

@php
    $g = config('genkai', []);
    $minAmount = (float)($settings['gift_min_amount'] ?? 10);
    $maxAmount = (float)($settings['gift_max_amount'] ?? 500);
    $validityMonths = (int)($settings['gift_validity_months'] ?? 12);
    $enabled = ($settings['gift_vouchers_enabled'] ?? '1') === '1';
    $mollieEnabled = $mollieEnabled ?? false;
@endphp

@push('head')
<link rel="preload" as="image" href="{{ $g['images']['food_2'] }}" fetchpriority="high">
<link rel="stylesheet" href="{{ asset('css/pages/gift.css') }}?v={{ @filemtime(public_path('css/pages/gift.css')) ?: time() }}">
@endpush

@section('content')
<div class="gift-page" data-gift-page>
    <section class="gift-hero">
        <div class="gift-hero__media" aria-hidden="true"><img src="{{ $g['images']['food_2'] }}" alt="" fetchpriority="high"></div>
        <div class="gift-hero__overlay" aria-hidden="true"></div>
        <div class="container gift-hero__inner">
            <div class="gift-hero__copy reveal">
                <nav class="gift-breadcrumb"><a href="{{ route('home') }}">Home</a><span>/</span><span>Cadeaubon</span></nav>
                <span class="gift-kicker">Een avond Genkai cadeau</span>
                <h1>Geef iets dat<br><span>geproefd wordt.</span></h1>
                <p>Maak een persoonlijke cadeaubon voor sushi, grill en Japanese fusion. Kies zelf voor wie, het bedrag en de gelegenheid.</p>
                <div class="gift-hero__facts">
                    <span><i>01</i> Persoonlijke code</span>
                    <span><i>02</i> {{ $validityMonths }} maanden geldig</span>
                    <span><i>03</i> Deels te gebruiken</span>
                </div>
            </div>

            <div class="gift-preview reveal delay-1" aria-label="Voorbeeld cadeaubon">
                <div class="gift-preview__top"><img src="{{ asset('images/genkai-logo.png') }}" alt="Genkai"><span>GIFT VOUCHER</span></div>
                <div class="gift-preview__amount" data-gift-preview-amount>€ {{ number_format($minAmount, 0, ',', '.') }}</div>
                <dl>
                    <div><dt>Voor</dt><dd data-gift-preview-recipient>Jouw gast</dd></div>
                    <div><dt>Gelegenheid</dt><dd data-gift-preview-occasion>Een bijzonder moment</dd></div>
                </dl>
                <small>Genkai · Grill & Sushi · Hasselt</small>
            </div>
        </div>
    </section>

    <section class="gift-builder" id="cadeaubon-maken">
        <div class="container gift-builder__grid">
            <div class="gift-builder__intro reveal">
                <span class="eyebrow dark">MAAK JE CADEAUBON</span>
                <h2>Persoonlijk in een paar stappen.</h2>
                <p>De cadeaubon krijgt na aanmaak een unieke, willekeurige Genkai-code. Het saldo blijft bewaard wanneer de bon niet volledig in één keer wordt gebruikt.</p>
                <div class="gift-builder__rules">
                    <div><strong>€ {{ number_format($minAmount, 0, ',', '.') }} – € {{ number_format($maxAmount, 0, ',', '.') }}</strong><span>instelbaar bedrag</span></div>
                    <div><strong>{{ $validityMonths }} maanden</strong><span>geldig vanaf activatie</span></div>
                    <div><strong>Saldo blijft staan</strong><span>bij gedeeltelijk gebruik</span></div>
                </div>
            </div>

            <div class="gift-form-card reveal delay-1">
                @if(!$enabled)
                    <div class="gift-disabled"><strong>Online cadeaubonnen zijn tijdelijk niet beschikbaar.</strong><p>Neem contact op met Genkai voor meer informatie.</p></div>
                @else
                    @if($errors->any())
                        <div class="gift-errors"><strong>Controleer je gegevens.</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
                    @endif

                    <form method="POST" action="{{ route('gift.store') }}" class="gift-form" data-gift-form>
                        @csrf
                        <fieldset>
                            <legend>Jouw gegevens</legend>
                            <div class="gift-form__two">
                                <label><span>Voornaam</span><input name="purchaser_first_name" value="{{ old('purchaser_first_name') }}" autocomplete="given-name" required></label>
                                <label><span>Achternaam</span><input name="purchaser_last_name" value="{{ old('purchaser_last_name') }}" autocomplete="family-name" required></label>
                            </div>
                            <label><span>E-mailadres</span><input type="email" name="purchaser_email" value="{{ old('purchaser_email') }}" autocomplete="email" required></label>
                            <label><span>Telefoon <small>optioneel</small></span><input name="purchaser_phone" value="{{ old('purchaser_phone') }}" autocomplete="tel"></label>
                            <label><span>Straat + nummer <small>optioneel</small></span><input name="purchaser_street" value="{{ old('purchaser_street') }}" autocomplete="street-address"></label>
                            <div class="gift-form__two gift-form__two--address">
                                <label><span>Postcode</span><input name="purchaser_postal_code" value="{{ old('purchaser_postal_code') }}" autocomplete="postal-code"></label>
                                <label><span>Gemeente</span><input name="purchaser_city" value="{{ old('purchaser_city') }}" autocomplete="address-level2"></label>
                            </div>
                        </fieldset>

                        <fieldset>
                            <legend>De cadeaubon</legend>
                            <label><span>Voor</span><input name="recipient_name" data-gift-recipient value="{{ old('recipient_name') }}" placeholder="Naam van de ontvanger" required></label>
                            <div class="gift-form__two">
                                <label><span>Bedrag (€)</span><input type="number" step="0.01" min="{{ $minAmount }}" max="{{ $maxAmount }}" name="amount" data-gift-amount value="{{ old('amount', $minAmount) }}" required></label>
                                <label><span>Gelegenheid</span><input name="occasion" data-gift-occasion value="{{ old('occasion') }}" placeholder="Verjaardag, huwelijk…" required></label>
                            </div>
                            <label><span>Persoonlijke boodschap <small>optioneel</small></span><textarea name="message" rows="4" maxlength="1000" placeholder="Schrijf iets voor de ontvanger…">{{ old('message') }}</textarea></label>
                        </fieldset>

                        <label class="gift-consent"><input type="checkbox" name="privacy" value="1" @checked(old('privacy')) required><span>Ik ga akkoord met de <a href="{{ route('privacy') }}" target="_blank">privacyverklaring</a> en begrijp dat de cadeaubon {{ $validityMonths }} maanden geldig is na activatie.</span></label>

                        <button type="submit" class="gift-submit">
                            <span>{{ $mollieEnabled ? 'Doorgaan naar betaling' : 'Cadeaubon aanmaken' }}</span>
                            <i>→</i>
                        </button>
                        <p class="gift-form__footnote">{{ $mollieEnabled ? 'Betaling wordt veilig afgehandeld via Mollie. De bon wordt actief zodra de betaling bevestigd is.' : 'De bon wordt na aanmaak onmiddellijk actief. Online betaling via Mollie kan in het eigenaarspaneel worden ingeschakeld.' }}</p>
                    </form>
                @endif
            </div>
        </div>
    </section>

    <section class="gift-how">
        <div class="container gift-how__grid">
            <article><span>01</span><h3>Maak hem persoonlijk</h3><p>Vul de ontvanger, het bedrag en de gelegenheid in.</p></article>
            <article><span>02</span><h3>Unieke code</h3><p>Het systeem genereert automatisch een veilige, unieke cadeauboncode.</p></article>
            <article><span>03</span><h3>Gebruik aan tafel</h3><p>Een medewerker wisselt de code in bij de tafelsessie en ziet meteen wat nog openstaat.</p></article>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/pages/gift.js') }}?v={{ @filemtime(public_path('js/pages/gift.js')) ?: time() }}" defer></script>
@endpush