@extends('layouts.admin')

@section('title', 'Create Wedding - Admin')
@section('page-title', 'Create New Wedding')
@section('page-description', 'Add a new wedding to the platform')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="glass-card rounded-2xl p-8 border border-white/10" data-aos="fade-up">
        <form class="space-y-6">
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-white mb-2">Couple's Names *</label>
                    <input type="text" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="e.g., Emma & James">
                </div>
                <div>
                    <label class="block text-white mb-2">Wedding Date *</label>
                    <input type="date" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                </div>
                <div>
                    <label class="block text-white mb-2">Location *</label>
                    <input type="text" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="e.g., London, UK">
                </div>
                <div>
                    <label class="block text-white mb-2">Number of Guests *</label>
                    <input type="number" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="e.g., 150">
                </div>
                <div>
                    <label class="block text-white mb-2">Plan</label>
                    <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                        <option>Basic</option>
                        <option selected>Pro</option>
                        <option>Premium</option>
                    </select>
                </div>
                <div>
                    <label class="block text-white mb-2">Status</label>
                    <select class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition">
                        <option selected>Active</option>
                        <option>Pending</option>
                        <option>Cancelled</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Custom URL Slug</label>
                    <div class="flex items-center gap-2">
                        <span class="text-gray-400">wedbooker.com/</span>
                        <input type="text" class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="emma-james">
                    </div>
                    <p class="text-gray-500 text-xs mt-1">This will be the unique URL for the wedding page</p>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-white mb-2">Wedding Description</label>
                    <textarea rows="3" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:border-purple-500 transition" placeholder="Tell the story of the couple..."></textarea>
                </div>
            </div>
            <div class="flex gap-4">
                <button type="submit" class="flex-1 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-white font-semibold hover:shadow-2xl transition hover:scale-105">
                    <i class="fas fa-save mr-2"></i>Create Wedding
                </button>
                <a href="{{ route('admin.weddings.index') }}" class="px-6 py-3 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition text-center">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection