<x-app-layout>
<x-module-hero title="Edit Notification" :description="Str::limit($topbarNotification->content, 60)" icon="fa-edit">
    <x-slot name="backButton">
        <a href="{{ route('topbar-notifications.index') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
            <i class="fas fa-arrow-left"></i> Back to Notifications
        </a>
    </x-slot>
    <x-slot name="tabs">
        @can('view topbar notifications')
        <a href="{{ route('topbar-notifications.index') }}"
           class="module-hero-tab">
            <i class="fas fa-list"></i> All Notifications
        </a>
        @endcan
        @can('create topbar notifications')
        <a href="{{ route('topbar-notifications.create') }}"
           class="module-hero-tab">
            <i class="fas fa-plus"></i> Create New
        </a>
        @endcan
    </x-slot>
</x-module-hero>

<div class="p-6">
    @if($errors->any())
        <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            <div class="flex items-center gap-2 mb-2">
                <i class="fas fa-exclamation-circle"></i>
                <strong>Please fix the following errors:</strong>
            </div>
            <ul class="list-disc list-inside text-sm space-y-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('topbar-notifications.update', $topbarNotification) }}" method="POST">
        @csrf
        @method('PUT')

        {{-- Section: Content --}}
        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Notification Content</h3>
            @php $currentContent = old('content', $topbarNotification->content); @endphp
            <div x-data="{ count: {{ str_word_count($currentContent) }} }">
                <label for="content" class="block text-sm font-medium text-gray-700 mb-1">
                    Content <span class="text-red-500">*</span>
                </label>
                <input type="text" id="content" name="content"
                    value="{{ $currentContent }}"
                    maxlength="255"
                    required
                    placeholder="e.g. SSHIA Annual Health Conference 2026"
                    @input="count = $event.target.value.trim() === '' ? 0 : $event.target.value.trim().split(/\s+/).length"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('content') border-red-400 @enderror">
                <div class="flex items-center justify-between mt-1">
                    @error('content')
                        <p class="text-xs text-red-600">{{ $message }}</p>
                    @else
                        <p class="text-xs text-gray-400">Maximum 7 words recommended for topbar display.</p>
                    @enderror
                    <span class="text-xs font-medium ml-auto" :class="count > 7 ? 'text-red-500' : 'text-gray-400'">
                        <span x-text="count"></span>/7 words
                    </span>
                </div>
            </div>
        </div>

        {{-- Section: Button --}}
        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Call-to-Action Button</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="button_label" class="block text-sm font-medium text-gray-700 mb-1">
                        Button Label <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="button_label" name="button_label"
                        value="{{ old('button_label', $topbarNotification->button_label) }}"
                        maxlength="50"
                        required
                        placeholder="e.g. Register Now"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('button_label') border-red-400 @enderror">
                    @error('button_label')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="button_url" class="block text-sm font-medium text-gray-700 mb-1">
                        Button URL <span class="text-red-500">*</span>
                    </label>
                    <input type="url" id="button_url" name="button_url"
                        value="{{ old('button_url', $topbarNotification->button_url) }}"
                        maxlength="500"
                        required
                        placeholder="https://sshia.org/..."
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('button_url') border-red-400 @enderror">
                    @error('button_url')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>
        </div>

        {{-- Section: Schedule & Settings --}}
        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Schedule & Settings</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">
                        Start Date <span class="text-gray-400 text-xs">(optional)</span>
                    </label>
                    <input type="date" id="start_date" name="start_date"
                        value="{{ old('start_date', $topbarNotification->start_date?->format('Y-m-d')) }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('start_date') border-red-400 @enderror">
                    @error('start_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">
                        End Date <span class="text-gray-400 text-xs">(optional)</span>
                    </label>
                    <input type="date" id="end_date" name="end_date"
                        value="{{ old('end_date', $topbarNotification->end_date?->format('Y-m-d')) }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('end_date') border-red-400 @enderror">
                    @error('end_date')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    <p class="mt-1 text-xs text-gray-400">Must be on or after start date.</p>
                </div>
                <div>
                    <label for="order" class="block text-sm font-medium text-gray-700 mb-1">Display Order</label>
                    <input type="number" id="order" name="order"
                        value="{{ old('order', $topbarNotification->order) }}"
                        min="0"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500 @error('order') border-red-400 @enderror">
                    @error('order')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    <p class="mt-1 text-xs text-gray-400">Lower numbers appear first.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                    <label class="inline-flex items-center cursor-pointer mt-2">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" id="is_active" name="is_active" value="1"
                            {{ old('is_active', $topbarNotification->is_active) ? 'checked' : '' }}
                            class="sr-only peer">
                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                        <span class="ml-3 text-sm text-gray-700">Active (visible in topbar)</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="flex items-center justify-between pt-4 border-t border-gray-200">
            @can('delete topbar notifications')
                <form action="{{ route('topbar-notifications.destroy', $topbarNotification) }}" method="POST"
                      onsubmit="return confirm('Delete this notification? This cannot be undone.')">
                    @csrf @method('DELETE')
                    <button type="submit"
                        class="inline-flex items-center gap-1 px-4 py-2 bg-red-100 text-red-700 text-sm font-medium rounded-lg hover:bg-red-200 transition">
                        <i class="fas fa-trash"></i> Delete
                    </button>
                </form>
            @else
                <div></div>
            @endcan

            <div class="flex items-center gap-3">
                <a href="{{ route('topbar-notifications.index') }}"
                   class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50 transition">
                    Cancel
                </a>
                <button type="submit"
                    class="px-6 py-2 bg-[#1a4731] text-white text-sm font-semibold rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-save mr-1"></i> Update Notification
                </button>
            </div>
        </div>
    </form>
</div>
</x-app-layout>
