<x-app-layout>

    <x-module-hero
        title="Edit Campaign: {{ Str::limit($campaign->title, 45) }}"
        description="{{ Str::limit($campaign->title, 55) }}"
        icon="fa-edit">

        <x-slot name="backButton">
            <a href="{{ route('advocacy.campaigns.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Campaigns
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view campaigns')
            <a href="{{ route('advocacy.campaigns.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.campaigns.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-bullhorn text-sm"></i> Campaigns
            </a>
            @endcan
            @can('view polls')
            <a href="{{ route('advocacy.polls.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.polls.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-poll text-sm"></i> Polls
            </a>
            @endcan
            @can('view stories')
            <a href="{{ route('advocacy.stories.index') }}"
               class="module-hero-tab {{ request()->routeIs('advocacy.stories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-newspaper text-sm"></i> Health Stories
            </a>
            @endcan
        </x-slot>

    </x-module-hero>

    <div class="p-6">

        @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg text-sm">
            <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
        </div>
        @endif

        <form action="{{ route('advocacy.campaigns.update', $campaign) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            {{-- Campaign Information --}}
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-info-circle text-teal-600 mr-2"></i> Campaign Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                            Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="title" id="title" value="{{ old('title', $campaign->title) }}" required
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">
                        @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">
                            Description <span class="text-red-500">*</span>
                        </label>
                        <textarea name="description" id="description" rows="4" required
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">{{ old('description', $campaign->description) }}</textarea>
                        @error('description')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="objectives" class="block text-sm font-medium text-gray-700 mb-1">Objectives</label>
                        <textarea name="objectives" id="objectives" rows="3"
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">{{ old('objectives', $campaign->objectives) }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Media --}}
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-images text-teal-600 mr-2"></i> Media
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Banner Image</label>
                        @if($campaign->banner_image)
                        <img src="{{ asset('storage/' . $campaign->banner_image) }}"
                             class="w-full h-20 object-cover rounded mb-2">
                        @endif
                        <input type="file" name="banner_image" accept="image/*"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Thumbnail</label>
                        @if($campaign->thumbnail)
                        <img src="{{ asset('storage/' . $campaign->thumbnail) }}"
                             class="w-full h-20 object-cover rounded mb-2">
                        @endif
                        <input type="file" name="thumbnail" accept="image/*"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">
                    </div>
                </div>
            </div>

            {{-- Settings --}}
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-2 mb-4">
                    <i class="fas fa-cog text-teal-600 mr-2"></i> Settings
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                        <select name="status" id="status"
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">
                            <option value="draft"     {{ old('status', $campaign->status) == 'draft'     ? 'selected' : '' }}>Draft</option>
                            <option value="active"    {{ old('status', $campaign->status) == 'active'    ? 'selected' : '' }}>Active</option>
                            <option value="paused"    {{ old('status', $campaign->status) == 'paused'    ? 'selected' : '' }}>Paused</option>
                            <option value="completed" {{ old('status', $campaign->status) == 'completed' ? 'selected' : '' }}>Completed</option>
                        </select>
                    </div>
                    <div>
                        <label for="target_audience" class="block text-sm font-medium text-gray-700 mb-1">Target Audience</label>
                        <input type="text" name="target_audience" id="target_audience"
                               value="{{ old('target_audience', $campaign->target_audience) }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">
                    </div>
                    <div>
                        <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
                        <input type="date" name="start_date" id="start_date"
                               value="{{ old('start_date', $campaign->start_date?->format('Y-m-d')) }}" required
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">
                        @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</label>
                        <input type="date" name="end_date" id="end_date"
                               value="{{ old('end_date', $campaign->end_date?->format('Y-m-d')) }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-sm">
                    </div>
                    <div class="md:col-span-2">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="is_featured" value="1"
                                   {{ old('is_featured', $campaign->is_featured) ? 'checked' : '' }}
                                   class="w-4 h-4 text-teal-600 border-gray-300 rounded focus:ring-teal-500">
                            <span class="text-sm text-gray-700">Feature this campaign</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
                <a href="{{ route('advocacy.campaigns.show', $campaign) }}"
                   class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm font-medium">
                    Cancel
                </a>
                <button type="submit"
                        class="px-5 py-2.5 bg-teal-700 text-white rounded-lg hover:bg-teal-800 transition text-sm font-medium">
                    <i class="fas fa-save mr-2"></i> Update Campaign
                </button>
            </div>

        </form>
    </div>

</x-app-layout>
