@extends('layouts.eventcraft')
@section('title', 'Create your invitation')
@section('body')
<section class="shell form-wrap"><div class="form-heading"><div class="eyebrow">LET'S MAKE IT SPECIAL</div><h1>Tell us about <em>your event.</em></h1><p>Fill in the details, choose a style and preview your invitation for free.</p></div>
@if ($errors->any())<div class="alert alert-error"><strong>Please review:</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
<form action="{{ route('events.store') }}" method="POST" class="builder-card">@csrf
 <div class="form-section-header"><span class="number">01</span><div><h2>The occasion</h2><p>What are we celebrating?</p></div></div>
 <div class="fields two"><label>Event type<select name="event_type" required>@foreach(['wedding'=>'Wedding','engagement'=>'Traditional wedding / engagement','birthday'=>'Birthday','baby_shower'=>'Baby shower','graduation'=>'Graduation','anniversary'=>'Anniversary','memorial'=>'Memorial','other'=>'Other celebration'] as $key=>$label)<option value="{{ $key }}" @selected(old('event_type')===$key)>{{ $label }}</option>@endforeach</select></label><label>Country<select name="country" required>@foreach(['GH'=>'Ghana','NG'=>'Nigeria','GB'=>'United Kingdom','US'=>'United States','CA'=>'Canada','KE'=>'Kenya','ZA'=>'South Africa','OTHER'=>'Other'] as $key=>$label)<option value="{{ $key }}" @selected(old('country','GH')===$key)>{{ $label }}</option>@endforeach</select></label></div>
 <div class="fields"><label>Event title<input name="title" required maxlength="150" placeholder="The wedding of Amara & Daniel" value="{{ old('title') }}"></label></div>
 <div class="fields two"><label>First person / host<input name="host_one" required maxlength="100" placeholder="Amara" value="{{ old('host_one') }}"></label><label>Second person (optional)<input name="host_two" maxlength="100" placeholder="Daniel" value="{{ old('host_two') }}"></label></div>
 <div class="form-section-header spaced"><span class="number">02</span><div><h2>Time and place</h2><p>Where should your guests be?</p></div></div>
 <div class="fields two"><label>Date and time<input type="datetime-local" name="event_date" required value="{{ old('event_date') }}"></label><label>Event time zone<select name="timezone" required>@foreach(['Africa/Accra'=>'Ghana time','Africa/Lagos'=>'Nigeria time','Europe/London'=>'UK time','America/New_York'=>'US Eastern time','America/Chicago'=>'US Central time','America/Los_Angeles'=>'US Pacific time','America/Toronto'=>'Toronto time','Africa/Nairobi'=>'Kenya time','Africa/Johannesburg'=>'South Africa time'] as $key=>$label)<option value="{{ $key }}" @selected(old('timezone','Africa/Accra')===$key)>{{ $label }}</option>@endforeach</select></label></div>
 <div class="fields two"><label>Venue<input name="venue" required maxlength="180" placeholder="The Grand Palm Hotel" value="{{ old('venue') }}"></label><label>City<input name="city" required maxlength="100" placeholder="Accra" value="{{ old('city') }}"></label></div>
 <div class="fields"><label>Dress code (optional)<input name="dress_code" maxlength="120" placeholder="Formal · Champagne & gold" value="{{ old('dress_code') }}"></label></div>
 <div class="form-section-header spaced"><span class="number">03</span><div><h2>The finishing touches</h2><p>Make it yours.</p></div></div>
 <div class="fields"><label>Personal invitation message<textarea name="message" maxlength="1200" rows="4" placeholder="With full hearts, we would love you to celebrate with us...">{{ old('message') }}</textarea></label></div>
 <div class="fields"><label>Your email (for checkout)<input type="email" name="email" required maxlength="180" autocomplete="email" placeholder="you@example.com" value="{{ old('email') }}"></label></div>
 <div class="fields two"><label>Design theme<select name="template"><option value="garden">Botanical Garden</option><option value="royal">Royal Romance</option><option value="modern">Modern Minimal</option></select></label><label>Choose your package<select name="package"><option value="basic">Invitation website · GH₵199</option><option value="video">Website + save-the-date video · GH₵299</option></select></label></div>
 <div class="form-foot"><span>✦ No payment required to preview.</span><button type="submit" class="button">Create my preview ↗</button></div>
</form></section>
@endsection