@php
    $isEditMode = isset($campaign);
@endphp

@extends('layouts.app')

@section('title', $isEditMode ? __('campaigns.edit_title') : __('campaigns.create_title'))

@push('styles')
    {{-- We'll use a library to make the multi-select dropdown look nice --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
    <div class="mb-6">
        <a href="{{ route('admin.campaigns.index') }}"
            class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-200 hover:underline">
            {!! __('campaigns.back_to_list') !!}
        </a>
    </div>

    @if ($isEditMode && isset($campaign))
        <div class="mb-4 flex flex-wrap gap-3">
            <a href="{{ route('admin.campaigns.products.edit', $campaign) }}"
                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <svg class="h-5 w-5 mr-2 -ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
                </svg>
                {{ __('campaigns.manage_products_long') }}
            </a>

            {{-- Quantity Limits Management Link --}}
            @if ($campaign->products->isNotEmpty())
                <a href="{{ route('admin.campaigns.products.edit', $campaign) }}#quantity-management"
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                    <svg class="h-5 w-5 mr-2 -ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
                    </svg>
                    Manage Quantity Limits
                </a>
            @endif
        </div>
    @endif

    <div
        class="max-w-xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 md:p-8 border border-gray-200 dark:border-gray-700 mt-4">

        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-6 text-center">
            {{ $isEditMode ? __('campaigns.form_title_edit') : __('campaigns.form_title_create') }}
        </h2>

        <form method="POST"
            action="{{ $isEditMode ? route('admin.campaigns.update', $campaign) : route('admin.campaigns.store') }}"
            class="space-y-6" enctype="multipart/form-data">
            @csrf
            @if ($isEditMode)
                @method('PUT')
            @endif

            {{-- Campaign Title, Description, etc. --}}
            <div>
                <label for="title"
                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('campaigns.campaign_title_label') }}
                    <span class="text-red-500">*</span></label>
                <input type="text" name="title" id="title" value="{{ old('title', $campaign->title ?? '') }}"
                    required
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('title') border-red-500 ring-1 ring-red-500 @enderror">
                @error('title')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Campaign Managers Selection --}}
            <div>
                <label for="manager_ids" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Campaign Managers
                </label>
                <select name="manager_ids[]" id="manager_ids" multiple="multiple"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('manager_ids') border-red-500 ring-1 ring-red-500 @enderror">
                    @foreach ($campaignManagers as $manager)
                        <option value="{{ $manager->id }}" @if ($isEditMode && in_array($manager->id, old('manager_ids', $assignedManagerIds ?? []))) selected @endif>
                            {{ $manager->name }}
                        </option>
                    @endforeach
                </select>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Select one or more managers for this campaign.</p>
                @error('manager_ids')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="description"
                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('campaigns.description_label') }}
                    <span class="text-red-500">*</span></label>
                <textarea name="description" id="description" rows="5" required
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('description') border-red-500 ring-1 ring-red-500 @enderror">{{ old('description', $campaign->description ?? '') }}</textarea>
                @error('description')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <input type="hidden" name="type" value="default">

            <div>
                <label for="po_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {{ __('campaigns.form_po_prefix_label') }}
                </label>
                <input type="text" name="po_number" id="po_number"
                    value="{{ old('po_number', $campaign->po_number ?? '') }}"
                    placeholder="e.g., PROJ2025, DONOR-A, CAMPAIGN-X"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 @error('po_number') border-red-500 ring-1 ring-red-500 @enderror">

                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    {{ __('campaigns.form_po_prefix_help') }}
                </p>

                @error('po_number')
                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            {{-- Example of how orders will be numbered --}}
            <div class="mt-2 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/30 rounded-md">
                <p class="text-sm text-blue-700 dark:text-blue-300">
                    <strong>{{ __('campaigns.form_po_example_title') }}</strong><br>
                    {{ __('campaigns.form_po_example_text') }}
                </p>
            </div>

            <div>
                <label for="address_id"
                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('campaigns.address_label') }}</label>
                <select name="address_id" id="address_id"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none @error('address_id') border-red-500 ring-1 ring-red-500 @enderror">
                    <option value="">{{ __('campaigns.address_none_selected') }}</option>
                    @foreach ($addresses as $addressOption)
                        <option value="{{ $addressOption->id }}" @selected(old('address_id', $campaign->address_id ?? '') == $addressOption->id)>
                            {{ $addressOption->nickname ? $addressOption->nickname . ' (' . $addressOption->address_line_1 . ')' : $addressOption->address_line_1 }}
                        </option>
                    @endforeach
                </select>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('campaigns.address_desc') }}</p>
                @error('address_id')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Show Address on Landing Page Toggle --}}
            <div>
                <div class="relative flex items-start">
                    <div class="flex items-center h-5">
                        <input id="show_address_on_landing_page" name="show_address_on_landing_page" type="checkbox"
                            value="1" @checked(old('show_address_on_landing_page', $campaign->show_address_on_landing_page ?? true))
                            class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 dark:bg-gray-700 dark:focus:ring-offset-gray-800">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="show_address_on_landing_page" class="font-medium text-gray-700 dark:text-gray-300">
                            {{ __('campaigns.show_address_on_landing_label') }}
                        </label>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('campaigns.show_address_on_landing_desc') }}</p>
                    </div>
                </div>
                @error('show_address_on_landing_page')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="selected_campaign_email_template_id"
                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('campaigns.email_template_label') }}</label>
                <select name="selected_campaign_email_template_id" id="selected_campaign_email_template_id"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm text-gray-900 dark:text-gray-100 appearance-none @error('selected_campaign_email_template_id') border-red-500 ring-1 ring-red-500 @enderror">
                    <option value="">{{ __('campaigns.email_template_default_option') }}</option>
                    @if (isset($emailTemplates))
                        @foreach ($emailTemplates as $template)
                            <option value="{{ $template->id }}" @selected(old('selected_campaign_email_template_id', $campaign->selected_campaign_email_template_id ?? '') == $template->id)>{{ $template->name }}
                            </option>
                        @endforeach
                    @endif
                </select>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('campaigns.email_template_desc') }}</p>
                @error('selected_campaign_email_template_id')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="notes"
                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('campaigns.notes_label') }}</label>
                <textarea name="notes" id="notes" rows="5"
                    class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('notes') border-red-500 ring-1 ring-red-500 @enderror">{{ old('notes', $campaign->notes ?? '') }}</textarea>
                @error('notes')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="campaign_image"
                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ __('campaigns.feature_image_label') }}</label>
                @if ($isEditMode && $campaign->image_path)
                    <div class="mb-2"> <img src="{{ asset('storage/' . $campaign->image_path) }}" alt="Current Image"
                            class="h-20 w-auto rounded"> <span
                            class="text-xs text-gray-500 mt-1 block">{{ __('campaigns.current_image') }}</span> </div>
                @endif
                <input type="file" name="campaign_image" id="campaign_image" accept="image/*"
                    class="block w-full text-sm px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('campaign_image') border-red-500 ring-1 ring-red-500 @enderror">
                @error('campaign_image')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ __('campaigns.image_upload_desc') }}</p>
            </div>

            <div class="flex justify-end pt-2">
                <button type="submit"
                    class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
                    @if ($isEditMode)
                        {{ __('campaigns.update_campaign_button') }}
                    @else
                        {{ __('campaigns.create_campaign_button') }}
                    @endif
                </button>
            </div>

            {{-- Quantity Limits Info --}}
            @if (!$isEditMode)
                <div
                    class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/30 rounded-md">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                                About Quantity Limits
                            </h3>
                            <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                                <p>
                                    After creating your campaign and adding products, you'll be able to set quantity limits
                                    for each product. This allows you to specify exactly how many of each item you need
                                    donated. Products automatically become unavailable when their donation goals are
                                    reached.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#manager_ids').select2({
                placeholder: "Select managers",
                allowClear: true
            });
        });
    </script>
@endpush