@extends('layouts.main')

@section('title')
    {{ __('campaigns.create') }}
@endsection

@section('page_title')
    {{ __('campaigns.create') }}
@endsection

@php
    $breadcrumbs = [
        ['url' => route('events.index'), 'label' => __('events.title')],
        ['url' => route('campaigns.index', $event->id), 'label' => __('campaigns.title')],
        ['url' => '', 'label' => __('campaigns.create')],
    ];
@endphp

@section('content')
    <div class="space-y-8">
        <!-- Header Section -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold text-gray-700">{{ __('campaigns.create') }}</h1>
                <p class="text-gray-600 mt-1">{{ __('campaigns.setup_description') }}</p>
            </div>
            <div class="flex items-center space-x-3">
                <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                    <i class="fas fa-bullhorn text-primary"></i>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-gray-700">{{ __('campaigns.title') }}</h3>
                    <p class="text-xs text-gray-500">{{ __('campaigns.new_campaign') }}</p>
                </div>
            </div>
        </div>

        <!-- Event Information Card -->
        <div class="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-4 sm:p-6 border border-primary/20">
            <div class="flex items-start space-x-3 sm:space-x-4">
                <div class="w-10 h-10 sm:w-12 sm:h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm flex-shrink-0 mt-2 sm:mt-0">
                    <i class="fas fa-calendar-alt text-white text-lg sm:text-xl"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="text-lg sm:text-xl font-semibold text-gray-700">{{ __('campaigns.creating_campaign_for_event') }}</h3>
                    <p class="text-sm sm:text-base text-gray-600 font-medium truncate">{{ $event->name }} - {{ __('campaigns.event_id') }}: #{{ $event->id }}</p>
                    <div class="flex items-center flex-wrap gap-y-1 gap-2 sm:gap-3 mt-2 sm:mt-3 text-xs sm:text-sm text-gray-500">
                        <div class="flex items-center space-x-1 sm:space-x-2">
                            <i class="fas fa-phone text-primary text-xs sm:text-sm"></i>
                            <span class="font-medium">+{{ $event->mobile_number }}</span>
                        </div>
                        <div class="flex items-center space-x-1 sm:space-x-2">
                            <i class="fas fa-clock text-primary text-xs sm:text-sm"></i>
                            <span class="font-medium">@localDateTime($event->formatted_created_date) </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if (Session::has('message'))
            <div class="alert alert-danger">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle mr-3"></i>
                    <div class="alert-body">{{ Session::get('message') }}</div>
                </div>
            </div>
        @endif

        <!-- Draft Campaign Alert (Hidden by default, shown by JavaScript) -->
        <div id="draft-alert" class="hidden bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg border border-primary/20 shadow-sm">
            <div class="md:p-6 p-4">
                <div class="flex items-start space-x-4">
                    <div class="min-w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                        <i class="fas fa-save text-primary text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold text-gray-700">
                                <i class="fas fa-info-circle text-primary mr-2"></i>
                                {{ __('campaigns.draft_campaign_found') }}
                            </h3>
                            <button id="close-draft-alert" class="text-gray-400 hover:text-gray-600 transition-colors">
                                <i class="fas fa-times text-xl"></i>
                            </button>
                        </div>
                        <div class="mt-3 space-y-2">
                            <p class="text-sm text-gray-700">
                                {!! __('campaigns.draft_found_message', ['name' => '<span id="draft-campaign-name-inline" class="font-semibold text-primary"></span>', 'time' => '<span id="draft-updated-at-inline" class="font-semibold text-primary"></span>']) !!}
                            </p>
                            <p class="text-sm text-gray-600">
                                {{ __('campaigns.continue_or_new') }}
                            </p>
                        </div>
                        <div class="mt-4 flex flex-col sm:flex-row gap-3">
                            <button id="continue-draft-btn-inline" class="btn btn-primary">
                                <i class="fas fa-play-circle mr-2"></i>
                                {{ __('campaigns.continue_draft') }}
                            </button>
                            <button id="new-campaign-btn-inline" class="btn btn-outline-secondary">
                                <i class="fas fa-plus-circle mr-2"></i>
                                {{ __('campaigns.start_new_campaign') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Campaign Form Card -->
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
            <div class="md:p-6 p-4">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                        <i class="fas fa-plus text-primary"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700">{{ __('campaigns.campaign_details_section') }}</h3>
                        <p class="text-sm text-gray-600">{{ __('campaigns.enter_campaign_information') }}</p>
                    </div>
                </div>
                
                <form method="post" action="{{ route('campaigns.store') }}" id="campaign-form" class="space-y-6">
                    @csrf
                    <input type="hidden" name="event_id" value="{{ $event->id }}">
                    
                    <!-- Campaign Name Section -->
                    <div class="space-y-4">
                        <div class="space-y-3">
                            <label class="form-label" for="name">
                                <i class="fas fa-bookmark mr-2"></i>
                                {{ __('campaigns.name') }}
                            </label>
                            <input type="text" 
                                   id="name" 
                                   class="form-control !mt-0 @error('name') is-invalid @enderror" 
                                   name="name" 
                                   placeholder="{{ __('campaigns.name_placeholder') }}" 
                                   value="{{ old('name') }}"
                                   required />
                            @error('name')
                                <span class="invalid-feedback">
                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                    {{ $message }}
                                </span>
                            @enderror
                            <div class="flex items-start space-x-2">
                                <i class="fas fa-info-circle text-blue-500 mt-0.5"></i>
                                <p class="text-sm text-gray-600">
                                    {{ __('campaigns.descriptive_name_help') }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information Section -->
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 md:p-6 p-4">
                        <div class="flex items-center space-x-3 mb-6">
                            <div class="min-w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-info-circle text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="text-lg font-semibold text-gray-700">{{ __('campaigns.additional_information') }}</h4>
                                <p class="text-sm text-gray-600">{{ __('campaigns.event_details_and_device_status') }}</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-3">
                                <label class="form-label">
                                    <i class="fas fa-calendar mr-2"></i>
                                    {{ __('campaigns.event_date') }}
                                </label>
                                <input type="text" 
                                       class="form-control !mt-0 bg-white" 
                                       value="{{ $event->created_at->format('d/m/Y') }}" 
                                       disabled />
                                <div class="flex items-center space-x-2">
                                    <i class="fas fa-clock text-blue-500 text-sm"></i>
                                    <span class="text-sm text-gray-600">{{ __('campaigns.event_creation_date') }}</span>
                                </div>
                            </div>
                            <div class="space-y-3">
                                <label class="form-label">
                                    <i class="fas fa-mobile-alt mr-2"></i>
                                    {{ __('campaigns.device_status') }}
                                </label>
                                <div class="space-y-3">
                                    @if ($event->device_connected == 1)
                                        <div class="inline-flex items-center space-x-2 bg-green-100 text-sm border border-green-600 text-green-800 px-3 py-1.5 rounded-lg">
                                            <i class="fas fa-check-circle text-green-600"></i>
                                            <span class="font-medium">{{ __('events.device_connected') }}</span>
                                        </div>
                                    @else
                                        <div class="inline-flex items-center space-x-2 bg-yellow-100 text-yellow-800 px-3 py-2 rounded-lg">
                                            <i class="fas fa-mobile-alt text-yellow-600"></i>
                                            <span class="font-medium">{{ __('campaigns.not_connected') }}</span>
                                        </div>
                                    @endif
                                    <div class="flex items-center space-x-2">
                                        <i class="fas fa-info-circle text-blue-500 text-sm"></i>
                                        <span class="text-sm text-gray-600">{{ __('campaigns.whatsapp_device_status') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row justify-end gap-3 pt-6 border-t border-gray-200">
                        <a href="{{ route('campaigns.index', $event->id) }}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left mr-2"></i>
                            {{ __('campaigns.back_to_campaigns') }}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-plus mr-2"></i>
                            {{ __('campaigns.create') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Quick Tips Card -->
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200 md:p-6 p-4">
            <div class="flex items-start gap-4">
                <div class="hidden min-w-12 h-12 bg-green-100 rounded-lg sm:flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-lightbulb text-green-600"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-700 mb-3">{{ __('campaigns.campaign_tips') }}</h3>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('campaigns.tip_1') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('campaigns.tip_2') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('campaigns.tip_3') }}
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check text-green-500 mr-3"></i>
                            {{ __('campaigns.tip_4') }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_scripts')
<script>
    $(document).ready(function() {
        // Initialize tooltips
        // Initialize custom tooltips
        initCustomTooltips();
        
        // Check for existing drafts on page load
        checkForDrafts();
        
        // Form validation enhancement
        $('#campaign-form').on('submit', function(e) {
            const campaignName = $('#name').val().trim();
            
            if (!campaignName) {
                e.preventDefault();
                $('#name').addClass('is-invalid');
                if (!$('#name').next('.invalid-feedback').length) {
                    $('#name').after('<span class="invalid-feedback"><i class="fas fa-exclamation-circle mr-1"></i>Campaign name is required</span>');
                }
                $('#name').focus();
                return false;
            }
            
            // Show loading state
            const submitBtn = $(this).find('button[type="submit"]');
            const originalText = submitBtn.html();
            submitBtn.html('<i class="fas fa-spinner fa-spin mr-2"></i>Creating Campaign...');
            submitBtn.prop('disabled', true);
            
            // Re-enable after 3 seconds (in case of slow response)
            setTimeout(function() {
                submitBtn.html(originalText);
                submitBtn.prop('disabled', false);
            }, 3000);
        });
        
        // Real-time validation
        $('#name').on('input', function() {
            const value = $(this).val().trim();
            if (value.length > 0) {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            }
        });
        
        // Enhanced form feedback
        $('#name').on('focus', function() {
            $(this).removeClass('is-invalid');
        });
        
        // Campaign name suggestions
        const suggestions = [
            'Wedding Invitations',
            'Birthday Party',
            'Anniversary Celebration',
            'Corporate Event',
            'Graduation Party',
            'Holiday Gathering'
        ];
        
        $('#name').on('focus', function() {
            if (!$(this).val()) {
                const randomSuggestion = suggestions[Math.floor(Math.random() * suggestions.length)];
                $(this).attr('placeholder', `e.g., ${randomSuggestion}`);
            }
        });
        
        /**
         * Check for existing draft campaigns
         */
        async function checkForDrafts() {
            try {
                const eventId = {{ $event->id }};
                const response = await fetch(`${window.location.origin}/admin/campaigns/check-drafts/${eventId}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                });
                
                const result = await response.json();
                
                if (result.success && result.has_draft) {
                    const draft = result.draft_campaign;
                    showDraftModal(draft);
                }
            } catch (error) {
                console.error('Error checking for drafts:', error);
            }
        }
        
        /**
         * Show draft detection alert inline
         */
        function showDraftModal(draft) {
            const alert = document.getElementById('draft-alert');
            const draftName = document.getElementById('draft-campaign-name-inline');
            const draftUpdated = document.getElementById('draft-updated-at-inline');
            
            if (draftName) draftName.textContent = draft.name;
            if (draftUpdated) {
                const updatedDate = new Date(draft.updated_at);
                const timeAgo = getTimeAgo(updatedDate);
                draftUpdated.textContent = timeAgo;
            }
            
            // Store draft ID for later use
            window.draftCampaignId = draft.id;
            
            // Show alert with smooth animation
            alert.classList.remove('hidden');
            setTimeout(() => {
                alert.style.opacity = '0';
                alert.style.transform = 'translateY(-10px)';
                alert.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                setTimeout(() => {
                    alert.style.opacity = '1';
                    alert.style.transform = 'translateY(0)';
                }, 10);
            }, 10);
        }
        
        /**
         * Hide draft alert
         */
        function hideDraftAlert() {
            const alert = document.getElementById('draft-alert');
            alert.style.opacity = '0';
            alert.style.transform = 'translateY(-10px)';
            setTimeout(() => {
                alert.classList.add('hidden');
            }, 300);
        }
        
        /**
         * Get time ago string from date
         */
        function getTimeAgo(date) {
            const seconds = Math.floor((new Date() - date) / 1000);
            const intervals = {
                year: 31536000,
                month: 2592000,
                week: 604800,
                day: 86400,
                hour: 3600,
                minute: 60
            };
            
            for (const [unit, secondsInUnit] of Object.entries(intervals)) {
                const interval = Math.floor(seconds / secondsInUnit);
                if (interval >= 1) {
                    return interval === 1 ? `1 ${unit} ago` : `${interval} ${unit}s ago`;
                }
            }
            return 'just now';
        }
        
        /**
         * Handle continue draft button
         */
        $('#continue-draft-btn-inline').on('click', function() {
            if (window.draftCampaignId) {
                // Show loading state
                $(this).html('<i class="fas fa-spinner fa-spin mr-2"></i>Loading...');
                // Redirect to invitation wizard for this campaign
                window.location.href = `{{ url('/admin/campaigns') }}/${window.draftCampaignId}/invitation/create`;
            }
        });
        
        /**
         * Handle new campaign button
         */
        $('#new-campaign-btn-inline').on('click', async function() {
            if (window.draftCampaignId) {
                // Show loading state
                const originalText = $(this).html();
                $(this).html('<i class="fas fa-spinner fa-spin mr-2"></i>Deleting draft...');
                $(this).prop('disabled', true);
                
                // Delete the draft campaign
                try {
                    const response = await fetch(`{{ url('/admin/campaigns') }}/${window.draftCampaignId}/delete-draft`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        },
                    });
                    
                    const result = await response.json();
                    
                    if (result.success) {
                        console.log('Draft deleted successfully');
                        // Show success message briefly
                        $(this).html('<i class="fas fa-check mr-2"></i>Draft Deleted');
                        setTimeout(() => {
                            hideDraftAlert();
                        }, 500);
                    } else {
                        $(this).html(originalText);
                        $(this).prop('disabled', false);
                    }
                } catch (error) {
                    console.error('Error deleting draft:', error);
                    $(this).html(originalText);
                    $(this).prop('disabled', false);
                }
            } else {
                // No draft ID, just hide the alert
                hideDraftAlert();
            }
        });
        
        /**
         * Handle close button on alert
         */
        $('#close-draft-alert').on('click', function() {
            hideDraftAlert();
        });
    });

</script>
@endpush