@extends('layouts.app')

@section('title', 'Invitation Template - WedBooker')
@section('page-title', 'Invitation Template')
@section('page-description', 'Customize your invitation design')

@section('content')
<div class="grid lg:grid-cols-2 gap-6">
    <!-- Template Editor -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-right">
        <h3 class="text-xl font-bold text-white mb-4">Customize Template</h3>
        <form class="space-y-4">
            <div>
                <label class="block text-white mb-2">Subject Line</label>
                <input type="text" value="You're Invited to Emma & James's Wedding!" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">Header Image URL</label>
                <input type="url" value="https://images.unsplash.com/photo-1519741497674-611481863552" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <div>
                <label class="block text-white mb-2">Welcome Message</label>
                <textarea rows="4" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">We're getting married! Join us to celebrate our special day...</textarea>
            </div>
            <div>
                <label class="block text-white mb-2">RSVP Button Text</label>
                <input type="text" value="RSVP Now" class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white">
            </div>
            <button class="px-6 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">Save Template</button>
        </form>
    </div>
    
    <!-- Preview -->
    <div class="glass-card rounded-2xl p-6 border border-white/10" data-aos="fade-left">
        <h3 class="text-xl font-bold text-white mb-4">Live Preview</h3>
        <div class="bg-white/5 rounded-xl p-6">
            <img src="https://images.unsplash.com/photo-1519741497674-611481863552" class="w-full h-40 object-cover rounded-lg mb-4">
            <h2 class="text-2xl font-bold text-white mb-2">You're Invited!</h2>
            <p class="text-gray-300">Emma & James are getting married</p>
            <p class="text-gray-400 text-sm mt-2">June 15, 2024 • London, UK</p>
            <button class="mt-4 px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white w-full">RSVP Now</button>
        </div>
    </div>
</div>
@endsection