@extends('layouts.eventcraft')
@section('title', $event->title)
@push('head')
@if(!empty($isPreview))<meta name="robots" content="noindex,nofollow">@endif
@endpush
@section('body')
@php
 $typeLabels = ['wedding'=>'The Wedding Celebration','engagement'=>'The Traditional Celebration','birthday'=>'The Birthday Celebration','baby_shower'=>'A Baby Shower','graduation'=>'A Graduation Celebration','anniversary'=>'The Anniversary Celebration','memorial'=>'In Loving Memory','other'=>'A Special Celebration'];
 $inviteDate = \Carbon\Carbon::parse($event->event_date->format('Y-m-d H:i:s'), $event->timezone);
 $photoUrl = $event->photo_path ? Storage::disk('public')->url($event->photo_path) : null;
@endphp
<div class="invitation invitation-{{ $event->template }}">
 <div class="invitation-shell">
 @if(!empty($isPreview))<div class="preview-ribbon">PRIVATE PREVIEW · Guests cannot see this yet</div>@endif
 <div class="invitation-topline">INVITATION TO CELEBRATE</div>
 <div class="ornament">✧ &nbsp; ✿ &nbsp; ✧</div>
 <h1>{{ $event->host_one }}@if($event->host_two)<span class="couple-amp">&</span>{{ $event->host_two }}@endif</h1>
 <div class="invitation-kind">{{ $typeLabels[$event->event_type] ?? 'A Special Celebration' }}</div>
 @if($photoUrl)<div class="invite-photo"><img src="{{ $photoUrl }}" alt="Event photograph"></div>@endif
 <div class="invite-intro">{{ $event->message ?: 'With joy in our hearts, we invite you to join us for a wonderful celebration.' }}</div>
 <div class="invite-separator">──────── &nbsp; ✦ &nbsp; ────────</div>
 <div class="date-display"><span>{{ strtoupper($inviteDate->format('l')) }}</span><strong>{{ $inviteDate->format('d') }}</strong><span>{{ strtoupper($inviteDate->format('F Y')) }}</span></div>
 <div class="invite-time">{{ $inviteDate->format('g:i A') }} · {{ str_replace('_',' ', $event->timezone) }}</div>
 <h2>{{ $event->venue }}</h2><div class="invitation-city">{{ $event->city }} · {{ $event->country }}</div>
 @if($event->dress_code)<p class="invitation-dress">DRESS CODE · {{ $event->dress_code }}</p>@endif
 <div class="countdown-wrap"><div class="mini-title">THE CELEBRATION BEGINS IN</div><div id="event-countdown" class="countdown">—</div></div>
 @if(empty($isPreview))
 <section class="rsvp-form" id="rsvp"><div class="ornament">✧</div><h2>Will you join us?</h2><p>We'd love to celebrate with you. Kindly reply below.</p>
 @if(session('rsvp_ok'))<div class="alert alert-success">{{ session('rsvp_ok') }}</div>@endif
 @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif
 <form method="POST" action="{{ route('events.rsvp', $event->slug) }}">@csrf
  <label>Your name<input name="guest_name" required maxlength="120" placeholder="Your full name" value="{{ old('guest_name') }}"></label>
  <label>Email (optional)<input name="guest_email" type="email" maxlength="180" placeholder="you@example.com" value="{{ old('guest_email') }}"></label>
  <div class="fields two"><label>Your reply<select name="response" required><option value="yes">Joyfully accepts</option><option value="no">Regretfully declines</option><option value="maybe">Not sure yet</option></select></label><label>Number attending<select name="guest_count"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option></select></label></div>
  <label>A message for the host (optional)<textarea name="note" maxlength="500" rows="3" placeholder="Sending lots of love!"></textarea></label>
  <button class="button full" type="submit">Send my RSVP ♥</button>
 </form></section>
 @else<div class="invite-preview-note">This is your free private preview. Publish to accept guest replies.</div>@endif
 <div class="invite-end">WE CAN'T WAIT TO SEE YOU <span>♥</span></div>
 </div>
</div>
<script>
(()=>{const end=new Date(@json($inviteDate->utc()->toIso8601String())).getTime();const el=document.getElementById('event-countdown');function tick(){let t=Math.max(0,end-Date.now()),d=Math.floor(t/86400000),h=Math.floor(t%86400000/3600000),m=Math.floor(t%3600000/60000);el.textContent=t?`${d} days · ${h} hrs · ${m} min`:'The celebration is here!'}tick();setInterval(tick,60000)})();
</script>
@endsection