<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Edit Announcement') }}
            </h2>
            <a href="{{ route('admin.announcements.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 transition ease-in-out duration-150">
                Back to Announcements
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-3xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">
                    <form method="POST" action="{{ route('admin.announcements.update', $announcement) }}" class="space-y-6">
                        @csrf
                        @method('PATCH')

                        <!-- Title -->
                        <div>
                            <x-input-label for="title" :value="__('Title')" />
                            <x-text-input id="title" class="block mt-1 w-full" type="text" name="title" :value="$announcement->title" required />
                            <x-input-error :messages="$errors->get('title')" class="mt-2" />
                        </div>

                        <!-- Body -->
                        <div>
                            <x-input-label for="body" :value="__('Body')" />
                            <textarea id="body" name="body" rows="6" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>{{ $announcement->body }}</textarea>
                            <p class="mt-1 text-sm text-gray-500">Basic HTML tags are allowed (strong, em, p, br, a, ul, li, etc.)</p>
                            <x-input-error :messages="$errors->get('body')" class="mt-2" />
                        </div>

                        <!-- Type -->
                        <div>
                            <x-input-label for="type" :value="__('Type')" />
                            <select id="type" name="type" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                <option value="info" {{ $announcement->type === 'info' ? 'selected' : '' }}>Info</option>
                                <option value="warning" {{ $announcement->type === 'warning' ? 'selected' : '' }}>Warning</option>
                                <option value="success" {{ $announcement->type === 'success' ? 'selected' : '' }}>Success</option>
                                <option value="promo" {{ $announcement->type === 'promo' ? 'selected' : '' }}>Promo</option>
                            </select>
                            <x-input-error :messages="$errors->get('type')" class="mt-2" />
                        </div>

                        <!-- Display Mode -->
                        <div>
                            <x-input-label for="display_mode" :value="__('Display Mode')" />
                            <select id="display_mode" name="display_mode" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                <option value="modal" {{ $announcement->display_mode === 'modal' ? 'selected' : '' }}>Modal (Pop-up)</option>
                                <option value="banner" {{ $announcement->display_mode === 'banner' ? 'selected' : '' }}>Banner (Bar)</option>
                                <option value="both" {{ $announcement->display_mode === 'both' ? 'selected' : '' }}>Both</option>
                            </select>
                            <x-input-error :messages="$errors->get('display_mode')" class="mt-2" />
                        </div>

                        <!-- Audience -->
                        <div>
                            <x-input-label for="audience" :value="__('Target Audience')" />
                            <select id="audience" name="audience" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                <option value="all" {{ $announcement->audience === 'all' ? 'selected' : '' }}>Everyone</option>
                                <option value="guests" {{ $announcement->audience === 'guests' ? 'selected' : '' }}>Guests (Not Logged In)</option>
                                <option value="authenticated" {{ $announcement->audience === 'authenticated' ? 'selected' : '' }}>Logged In Users</option>
                            </select>
                            <x-input-error :messages="$errors->get('audience')" class="mt-2" />
                        </div>

                        <div class="border-t pt-6">
                            <h3 class="text-lg font-semibold mb-4">Scheduling</h3>

                            <!-- Start Date -->
                            <div>
                                <x-input-label for="starts_at" :value="__('Starts At (Optional)')" />
                                <x-text-input id="starts_at" class="block mt-1 w-full" type="datetime-local" name="starts_at" :value="$announcement->starts_at?->format('Y-m-d\TH:i')" />
                                <p class="mt-1 text-sm text-gray-500">Leave empty to start immediately when activated</p>
                                <x-input-error :messages="$errors->get('starts_at')" class="mt-2" />
                            </div>

                            <!-- Expiration Date -->
                            <div class="mt-4">
                                <x-input-label for="expires_at" :value="__('Expires At (Optional)')" />
                                <x-text-input id="expires_at" class="block mt-1 w-full" type="datetime-local" name="expires_at" :value="$announcement->expires_at?->format('Y-m-d\TH:i')" />
                                <p class="mt-1 text-sm text-gray-500">Leave empty for no expiration</p>
                                <x-input-error :messages="$errors->get('expires_at')" class="mt-2" />
                            </div>
                        </div>

                        <div class="border-t pt-6">
                            <h3 class="text-lg font-semibold mb-4">Options</h3>

                            <!-- Is Active -->
                            <div class="flex items-center">
                                <input id="is_active" type="checkbox" name="is_active" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" {{ $announcement->is_active ? 'checked' : '' }}>
                                <label for="is_active" class="ml-2 block text-sm font-medium text-gray-900">
                                    Active
                                </label>
                            </div>

                            <!-- Is Dismissible -->
                            <div class="flex items-center mt-4">
                                <input id="is_dismissible" type="checkbox" name="is_dismissible" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" {{ $announcement->is_dismissible ? 'checked' : '' }}>
                                <label for="is_dismissible" class="ml-2 block text-sm font-medium text-gray-900">
                                    Allow Users to Dismiss
                                </label>
                            </div>
                        </div>

                        <!-- Submit -->
                        <div class="flex gap-4 justify-end border-t pt-6">
                            <a href="{{ route('admin.announcements.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition-colors">
                                Cancel
                            </a>
                            <x-primary-button>
                                {{ __('Update Announcement') }}
                            </x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
