@extends('layouts.admin')

@section('title', 'Edit Wedding - Admin')
@section('page-title', 'Edit Wedding')
@section('page-description', 'Update wedding information')

@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" value="Emma & James" 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">Wedding Date *</label>
                    <input type="date" value="2024-06-15" 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" value="London, UK" 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">Number of Guests *</label>
                    <input type="number" value="156" 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">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" value="emma-james" 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">
                    </div>
                </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">We met 5 years ago and fell in love. Join us as we celebrate our special day!</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>Update 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 class="mt-8 pt-6 border-t border-red-500/20">
            <h4 class="text-red-400 font-semibold mb-3">Danger Zone</h4>
            <button onclick="deleteWedding(1)" class="px-4 py-2 bg-red-600/20 text-red-400 rounded-lg hover:bg-red-600/30 transition">
                <i class="fas fa-trash mr-2"></i>Delete Wedding
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function submitForm(action, method = 'POST') {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = action;
        form.style.display = 'none';
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        if (method !== 'POST') {
            const methodField = document.createElement('input');
            methodField.type = 'hidden';
            methodField.name = '_method';
            methodField.value = method;
            form.appendChild(methodField);
        }
        
        document.body.appendChild(form);
        form.submit();
    }
    
    function deleteWedding(weddingId) {
        if(confirm('Are you sure you want to delete this wedding? This action cannot be undone.')) {
            submitForm('{{ url("admin/weddings") }}/' + weddingId, 'DELETE');
        }
    }
</script>
@endpush
@endsection