@extends('layouts.main')

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

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

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

@push('custom_styles')
    {{-- <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/forms/wizard/bs-stepper.min.css') }}"> --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/plugins/forms/form-validation.css') }}">
    {{-- <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/plugins/forms/form-wizard.css') }}"> --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/admin/prettify.min.css') }}">
    {{-- <link rel="stylesheet" type="text/css" href="{{ asset('css/admin/event-invitation-wizard.css') }}"> --}}
@endpush

@section('content')
    <div class="content-wrapper container-xxl">
        <div class="content-body">
            @if (Session::has('message'))
                <div class="alert alert-success" role="alert">
                    <div class="alert-body">{{ Session::get('message') }}</div>
                </div>
            @endif

            <!-- Horizontal Wizard -->
            <section class="horizontal-wizard">
                <div id="tw-stepper" class="w-100">
                    <!-- Desktop Wizard Steps -->
                    <div class="w-full hidden md:block">
                        <ol class="flex items-stretch w-full border border-white bg-fl-gray-extra-light/40 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow">
                            <li class="flex-1 relative border-r !border-gray-300 rounded-24 overflow-hidden" data-step-index="0" id="import-numbers-trigger">
                                <div class="flex items-center gap-4 py-5 px-6">
                                    <span
                                        class="inline-flex items-center justify-center min-w-10 h-10 rounded-24 border border-primary bg-fl-gray-extra-light/60 backdrop-blur-sm step-circle shadow-sm ring-0"
                                        data-active="true">
                                        <span class="step-num text-sm font-medium">01</span>
                                        <svg class="step-check hidden" xmlns="http://www.w3.org/2000/svg" width="16"
                                            height="16" viewBox="0 0 24 24">
                                            <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" />
                                        </svg>
                                    </span>
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-lg text-gray-700">{{ __('campaigns.import_numbers') }}</span>
                                        <span class="text-xs text-gray-500">{{ __('campaigns.enter_whatsapp_numbers') }}</span>
                                    </div>
                                </div>
                                <div class="h-[3px] rounded-full bg-primary underline-bar"></div>
                            </li>
                            <li class="flex-1 relative border-r !border-gray-300 rounded-24 overflow-hidden" data-step-index="1"
                                id="import-file-trigger">
                                <div class="flex items-center gap-4 py-5 px-6">
                                    <span
                                        class="inline-flex items-center justify-center min-w-10 h-10 rounded-24 border border-primary bg-fl-gray-extra-light/40 backdrop-blur-sm step-circle shadow-sm ring-0">
                                        <span class="step-num text-sm font-medium">02</span>
                                        <svg class="step-check hidden" xmlns="http://www.w3.org/2000/svg" width="16"
                                            height="16" viewBox="0 0 24 24">
                                            <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" />
                                        </svg>
                                    </span>
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-lg text-gray-700">{{ __('campaigns.import_file') }}</span>
                                        <span class="text-xs text-gray-500">{{ __('campaigns.add_pdf') }}</span>
                                    </div>
                                </div>
                                <div class="h-[3px] rounded-full bg-transparent underline-bar"></div>
                            </li>
                            <li class="flex-1 relative border-r !border-gray-300 rounded-24 overflow-hidden" data-step-index="2"
                                id="add-message-trigger">
                                <div class="flex items-center gap-4 py-5 px-6">
                                    <span
                                        class="inline-flex items-center justify-center min-w-10 h-10 rounded-24 border border-primary bg-fl-gray-extra-light/40 backdrop-blur-sm step-circle shadow-sm ring-0">
                                        <span class="step-num text-sm font-medium">03</span>
                                        <svg class="step-check hidden" xmlns="http://www.w3.org/2000/svg" width="16"
                                            height="16" viewBox="0 0 24 24">
                                            <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" />
                                        </svg>
                                    </span>
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-lg text-gray-700">{{ __('campaigns.add_message') }}</span>
                                        <span class="text-xs text-gray-500">{{ __('campaigns.create_message') }}</span>
                                    </div>
                                </div>
                                <div class="h-[3px] rounded-full bg-transparent underline-bar"></div>
                            </li>
                            <li class="flex-1 relative rounded-24 overflow-hidden" data-step-index="3"
                                id="send-invitation-trigger">
                                <div class="flex items-center gap-4 py-5 px-6">
                                    <span
                                        class="inline-flex items-center justify-center min-w-10 h-10 rounded-24 border border-primary bg-fl-gray-extra-light/40 backdrop-blur-sm step-circle shadow-sm ring-0">
                                        <span class="step-num text-sm font-medium">04</span>
                                        <svg class="step-check hidden" xmlns="http://www.w3.org/2000/svg" width="16"
                                            height="16" viewBox="0 0 24 24">
                                            <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" />
                                        </svg>
                                    </span>
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-lg text-gray-700">{{ __('campaigns.send_invitation') }}</span>
                                        <span class="text-xs text-gray-500">{{ __('campaigns.send_invitation') }}</span>
                                    </div>
                                </div>
                                <div class="h-[3px] rounded-full bg-transparent underline-bar"></div>
                            </li>
                        </ol>
                    </div>

                    <!-- Mobile Wizard Steps -->
                    <div class="w-full block md:hidden">
                        <div class="border border-white bg-fl-gray-extra-light/40 backdrop-blur-xl rounded-24 p-4 shadow-front-box-shadow-glow">
                            <div class="flex items-center justify-between mb-4 flex-wrap">
                                <div class="flex items-center space-x-3">
                                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-24 border border-primary bg-primary text-white shadow-front-box-shadow-glow" id="mobile-step-circle">
                                        <span class="step-num text-sm font-medium" id="mobile-step-number">01</span>
                                    </span>
                                    <div>
                                        <h3 class="font-semibold text-base text-gray-700" id="mobile-step-title">{{ __('campaigns.import_numbers') }}</h3>
                                        <p class="text-xs text-gray-500" id="mobile-step-subtitle">{{ __('campaigns.enter_whatsapp_numbers') }}</p>
                                    </div>
                                </div>
                            </div>
                            <!-- Progress Bar -->
                            <div class="w-full bg-white/30 rounded-full h-1 mb-4 mobile-progress-bar">
                                <div class="bg-primary h-1 rounded-full transition-all duration-500 ease-out" id="mobile-progress-fill" style="width: 25%"></div>
                            </div>
                            
                            <!-- Progress Dots -->
                            <div class="flex justify-center space-x-2" id="mobile-progress-dots">
                                <div class="w-2 h-2 bg-primary rounded-full step-dot active" data-step="0"></div>
                                <div class="w-2 h-2 bg-white/40 rounded-full step-dot" data-step="1"></div>
                                <div class="w-2 h-2 bg-white/40 rounded-full step-dot" data-step="2"></div>
                                <div class="w-2 h-2 bg-white/40 rounded-full step-dot" data-step="3"></div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6">
                        <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow p-4 md:p-6">
                            <div class="tw-stepper-content">

                                <div id="import-numbers" class="content" role="tabpanel"
                                    aria-labelledby="import-numbers-trigger">
                                    <div class="mb-4 border-b border-white/20 pb-4">
                                        <h3 class="text-lg font-semibold text-gray-700">{{ __('campaigns.import_numbers') }}</h3>
                                        <p class="text-sm text-gray-600">{{ __('campaigns.upload_sheet_or_paste') }}</p>
                                    </div>
                                    <form class="space-y-2">
                                        <div class="row gap-2">
                                            <div class="flex flex-col text-sm gap-1 w-full md:w-1/2">
                                                <label class="form-label fs-6 text-sm font-medium text-gray-800 mb-1"
                                                    for="import_type">{{ __('campaigns.import_types') }}</label>
                                                <select class="form-control !w-full !mt-0" name="import_type" id="import_type"
                                                    onchange="importType(this)">
                                                    <option value="">{{ __('campaigns.select') }}</option>
                                                    <option value="1" selected>{{ __('campaigns.import_from_file') }}</option>
                                                    <option value="2">{{ __('campaigns.manually_import') }}</option>
                                                </select>
                                            </div>

                                            <div class="mb-1 col-md-12">
                                                <section id="import-contacts" class="d-none">
                                                    <div>
                                                        <h4 class="card-title"></h4>
                                                        <div>
                                                            <div class="my-6 text-sm" id="import-excel">
                                                                <label
                                                                    class="form-label fs-6 text-sm font-medium text-gray-800 mb-3"
                                                                    for="excel_file">{{ __('campaigns.excel_file') }}</label>                                                                
                                                                <!-- Enhanced File Upload Area -->
                                                                <div class="relative">
                                                                    <div id="file-drop-zone" 
                                                                        class="border-2 border-dashed border-gray-300 rounded-24 p-6 text-center bg-fl-gray-extra-light/40 backdrop-blur-sm hover:border-primary hover:bg-primary/10 transition-all duration-200 cursor-pointer"
                                                                        onclick="document.getElementById('excel_file').click()">
                                                                        <div class="flex flex-col items-center space-y-3">
                                                                            <div class="w-12 h-12 bg-white/60 backdrop-blur-sm rounded-full flex items-center justify-center border border-white/40">
                                                                                <i class="fas fa-file-excel text-green-600 text-xl"></i>
                                                                            </div>
                                                                            <div>
                                                                                <p class="text-sm font-medium text-gray-700 mb-1">
                                                                                    <span class="text-primary">{{ __('campaigns.click_to_upload') }}</span> {{ __('campaigns.drag_and_drop') }}
                                                                                </p>
                                                                                <p class="text-xs text-gray-500">
                                                                                    {{ __('campaigns.excel_csv_files') }}
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                        <input type="file" id="excel_file"
                                                                            class="hidden"
                                                                            name="excel_file"
                                                                            onchange="handleExcelData(event)"
                                                                            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                                                                    </div>
                                                                    
                                                                    <!-- File Info Display -->
                                                                    <div id="file-info" class="mt-3 hidden">
                                                                        <div class="flex items-center justify-between bg-green-50/80 backdrop-blur-sm border border-white/40 rounded-16 p-3">
                                                                            <div class="flex items-center space-x-3">
                                                                                <i class="fas fa-check-circle text-green-600 text-xl"></i>
                                                                                <div>
                                                                                    <p class="text-sm font-medium text-green-800" id="file-name"></p>
                                                                                    <p class="text-xs text-green-600" id="file-size"></p>
                                                                                </div>
                                                                            </div>
                                                                            <button type="button" onclick="clearExcelFile()" 
                                                                                class="text-red-500 hover:text-red-700 transition-colors">
                                                                                <i class="fas fa-times"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                    
                                                                    <!-- Error Display -->
                                                                    <div id="file-error" class="mt-3 hidden">
                                                                        <div class="flex items-center space-x-2 bg-red-50/80 backdrop-blur-sm border border-white/40 rounded-16 p-3">
                                                                            <i class="fas fa-exclamation-circle text-red-600"></i>
                                                                            <p class="text-sm text-red-800" id="error-message"></p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="" id="import-manually">
                                                                <div class="mt-6">
                                                                    <div class="mb-3 border border-white/40 bg-fl-gray-extra-light/40 backdrop-blur-sm rounded-24 p-4 md:p-6 shadow-front-box-shadow-glow"
                                                                         role="alert">
                                                                        <div class="">
                                                                            <label
                                                                                class="text-lg font-semibold text-primary">{{ __('campaigns.instructions') }}</label>
                                                                            <p class="text-sm text-gray-600 mb-1 mt-4">{{ __('campaigns.enter_contact_format') }}</p>
                                                                            <ul class="text-sm text-gray-600 space-y-1 mb-6">
                                                                                <li>{{ __('campaigns.first_row_headings') }}</li>
                                                                                <li>{{ __('campaigns.subsequent_rows') }}</li>
                                                                                <li>{{ __('campaigns.values_separated') }}</li>
                                                                            </ul>
                                                                            <label
                                                                                class="text-lg font-semibold text-primary mb-3">{{ __('campaigns.example') }}</label>
                                                                            <div
                                                                                class="bg-white w-full p-4 border border-primary rounded text-start example-wrapper space-y-1 mt-4 overflow-x-auto">
                                                                                <p class="text-sm text-gray-600">Test1, 789-654-123, one, two, three</p>
                                                                                <p class="text-sm text-gray-600">Test2, 789-654-123, one, two, three</p>
                                                                                <p class="text-sm text-gray-600">Test3, 789-654-123, one, two, three</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <label
                                                                        class="form-label fs-6 text-sm font-medium text-gray-800 mb-1 mt-6"
                                                                        for="contact_textarea">{{ __('campaigns.enter_contact') }}</label>
                                                                    <textarea
                                                                        class="form-control"
                                                                        id="contact_textarea" name="contact_textarea" rows="5" placeholder="{{ __('campaigns.enter_contact_placeholder') }}"></textarea>
                                                                    <span class="text-danger"
                                                                        id="error-contact_textarea"></span>
                                                                </div>
                                                                    <div class="text-end mb-4">
                                                                    <a href="javascript:void(0);"
                                                                        class="btn btn-primary flex items-center px-4 py-2 md:px-6 md:py-3 text-sm md:text-base"
                                                                        onclick="handleTextareaData()">{{ __('campaigns.table_view') }}</a>
                                                                </div>
                                                            </div>

                                                            <div class="row table-data" id="table-data-row">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </section>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="flex justify-end mt-6 items-center gap-3">
                                        <button
                                            class="btn btn-outline-secondary btn-prev flex items-center px-6 py-3 gap-2"
                                            disabled>
                                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                            <span class="align-middle d-sm-inline-block d-none">{{ __('campaigns.previous') }}</span>
                                        </button>
                                        <button
                                            class="btn btn-primary btn-next flex items-center px-6 py-3 gap-2 ">
                                            <span class="align-middle d-sm-inline-block d-none">{{ __('campaigns.next') }}</span>
                                            <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                        </button>
                                    </div>
                                </div>

                                <div id="import-file" class="content" role="tabpanel"
                                    aria-labelledby="import-file-trigger">
                                    <div class="mb-4 border-b border-gray-200 pb-4">
                                        <h3 class="text-lg font-semibold text-gray-700">{{ __('campaigns.attach_pdf') }}</h3>
                                        <p class="text-sm text-gray-600">{{ __('campaigns.select_pdf_description') }}
                                        </p>
                                    </div>
                                    <form class="space-y-2">
                                        <div class="row gap-1">
                                            <div class="mb-3 text-sm">
                                                <label class="form-label fs-6 text-sm font-medium text-gray-800 mb-3"
                                                    for="pdf_file">{{ __('campaigns.select_pdf') }}</label>
                                                
                                                <!-- Enhanced PDF Upload Area -->
                                                <div class="relative">
                                                    <div id="pdf-drop-zone" 
                                                        class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary hover:bg-primary/5 transition-all duration-200 cursor-pointer"
                                                        onclick="document.getElementById('pdf_file').click()">
                                                        <div class="flex flex-col items-center space-y-3">
                                                            <div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
                                                                <i class="fas fa-file-pdf text-red-600 text-xl"></i>
                                                            </div>
                                                            <div>
                                                                <p class="text-sm font-medium text-gray-700 mb-1">
                                                                    <span class="text-primary">{{ __('campaigns.click_to_upload') }}</span> {{ __('campaigns.drag_and_drop') }}
                                                                </p>
                                                                <p class="text-xs text-gray-500">
                                                                    {{ __('campaigns.pdf_files_only') }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <input type="file" id="pdf_file"
                                                            class="hidden"
                                                            name="pdf_file" onchange="pdfPreview(event)"
                                                            accept="application/pdf" />
                                                    </div>
                                                    
                                                    <!-- PDF File Info Display -->
                                                    <div id="pdf-file-info" class="mt-3 hidden">
                                                        <div class="flex items-center justify-between bg-blue-50 border border-blue-200 rounded-md p-3 flex-wrap gap-4">
                                                            <div class="flex items-center space-x-3">
                                                                <i class="fas fa-file-pdf text-red-600 text-xl"></i>
                                                                <div>
                                                                    <p class="text-sm font-medium text-blue-800" id="pdf-file-name"></p>
                                                                    <p class="text-xs text-blue-600" id="pdf-file-size"></p>
                                                                </div>
                                                            </div>
                                                            <div class="flex items-center space-x-2">
                                                                <button type="button" id="preview-pdf-btn" 
                                                                    class="btn btn-outline-primary flex items-center gap-2 px-3 py-1 rounded-md border border-primary text-primary hover:bg-primary hover:text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed text-xs"
                                                                    onclick="openPDFPreviewModal()" disabled>
                                                                    <i class="fas fa-eye"></i>
                                                                    <span>{{ __('campaigns.preview') }}</span>
                                                                </button>
                                                                <button type="button" onclick="clearPDFFile()" 
                                                                    class="text-red-500 hover:text-red-700 transition-colors">
                                                                    <i class="fas fa-times"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <!-- PDF Error Display -->
                                                    <div id="pdf-file-error" class="mt-3 hidden">
                                                        <div class="flex items-center space-x-2 bg-red-50 border border-red-200 rounded-md p-3">
                                                            <i class="fas fa-exclamation-circle text-red-600"></i>
                                                            <p class="text-sm text-red-800" id="pdf-error-message"></p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="flex justify-end items-center gap-4 mt-6">
                                        <button
                                            class="btn btn-outline-secondary btn-prev flex items-center px-6 py-3 gap-2 ">
                                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                            <span class="align-middle d-sm-inline-block d-none">{{ __('campaigns.previous') }}</span>
                                        </button>
                                        <button
                                            class="btn btn-primary btn-next flex items-center px-6 py-3 gap-2">
                                            <span class="align-middle d-sm-inline-block d-none">{{ __('campaigns.next') }}</span>
                                            <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                        </button>
                                    </div>
                                </div>

                                <div id="add-message" class="content" role="tabpanel"
                                    aria-labelledby="add-message-trigger">
                                    <div class="mb-4 border-b border-gray-200 pb-4">
                                        <h3 class="text-lg font-semibold text-gray-700">{{ __('campaigns.compose_message') }}</h3>
                                        <p class="text-sm text-gray-600">{{ __('campaigns.use_variables_formatting') }}</p>
                                    </div>
                                    <form>
                                        <div class="mx-0">
                                            <div class="mb-1 text-sm">
                                                <label class="form-label text-sm font-medium text-gray-800 mb-1"
                                                    for="dynamic_msg">{{ __('campaigns.message') }}</label>
                                                <textarea
                                                    class="form-control mb-3"
                                                    id="dynamic_msg" name="dynamic_msg" rows="5" placeholder="{{ __('campaigns.enter_message') }}">{{ $campaign->message_template ?? $setting->default_message }}</textarea>
                                                    <div class="text-end">
                                                        <a class="btn btn-primary flex items-center gap-2 px-6 py-3"
                                                            style="top: -18px;" onclick="clearDynamicMsg()">{{ __('campaigns.clear') }}</a>
                                                    </div>
                                            </div>
                                        </div>

                                        <div class="mx-0 mt-4">
                                            <div
                                                class="flex items-center justify-between message-box  border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow p-4 md:p-6">
                                                <div id="dynamic-variables" class="flex gap-2"></div>
                                                <div class="message-formatting flex items-center gap-2">
                                                    <a class="cursor-pointer inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-gray-100"
                                                        onclick="applyMessageFormatting('*')">
                                                        <i data-feather='bold'></i>
                                                    </a>
                                                    <a class="cursor-pointer inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-gray-100"
                                                        onclick="applyMessageFormatting('_')">
                                                        <i data-feather='italic'></i>
                                                    </a>
                                                    <a class="cursor-pointer inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-gray-100"
                                                        onclick="applyMessageFormatting('~')"><s>S</s></a>
                                                    <!-- Emoji Picker Button -->
                                                    <a class="cursor-pointer emoji-picker-element inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-gray-100"
                                                        id="emoji-btn">😊</a>
                                                </div>
                                            </div>
                                            <emoji-picker id="emoji-picker"></emoji-picker>
                                        </div>
                                    </form>
                                    <div class="flex justify-end items-center gap-4 mt-6">
                                        <button
                                            class="btn btn-outline-secondary btn-prev flex items-center px-6 py-3 gap-2">
                                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                            <span class="align-middle d-sm-inline-block d-none">{{ __('campaigns.previous') }}</span>
                                        </button>
                                        <button
                                            class="btn btn-primary btn-next flex items-center px-6 py-3 gap-2">
                                            <span class="align-middle d-sm-inline-block d-none">{{ __('campaigns.next') }}</span>
                                            <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                        </button>
                                    </div>
                                </div>

                                <div id="send-invitation" class="content" role="tabpanel"
                                    aria-labelledby="send-invitation-trigger">
                                    <!-- Enhanced Header Section -->
                                    <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow mb-6">
                                        <div class="md:p-6 p-4">
                                            <div class="flex items-start flex-col sm:flex-row gap-4 flex-wrap">
                                                <div class="flex items-start gap-4 flex-1 sm:min-w-[428px]">
                                                    <div class="min-w-12 h-12 bg-primary/10 backdrop-blur-sm mt-2 rounded-lg flex items-center justify-center border border-white/50">
                                                        <i class="fas fa-paper-plane text-primary text-lg"></i>
                                                    </div>
                                                    <div class="flex-1">
                                                        <h3 class="text-lg font-semibold text-gray-700">{{ __('campaigns.preview_send') }}</h3>
                                                        <p class="text-gray-600 font-medium">{{ __('campaigns.position_variables_test') }}</p>
                                                        <div class="flex items-center flex-wrap gap-y-1 gap-3 mt-3 text-sm text-gray-500">
                                                            <div class="flex items-center space-x-2">
                                                                <i class="fas fa-eye text-primary"></i>
                                                                <span class="font-medium">{{ __('campaigns.preview_invitations') }}</span>
                                                            </div>
                                                            <div class="flex items-center space-x-2">
                                                                <i class="fas fa-rocket text-primary"></i>
                                                                <span class="font-medium">{{ __('campaigns.send_in_batches') }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Actions -->
                                                <div class="flex flex-col lg:flex-row items-center justify-between gap-4">
                                                    <div class="flex items-center gap-2 w-full lg:w-auto">
                                                        <button class="btn btn-outline-secondary btn-refresh flex items-center gap-2 px-6 py-3">
                                                            <i data-feather="refresh-ccw" class="align-middle"></i>
                                                            <span class="align-middle hidden sm:inline whitespace-nowrap">{{ __('campaigns.refresh') }}</span>
                                                        </button>
                                                        <button class="btn btn-outline-info btn-download flex items-center gap-2 px-6 py-3">
                                                            <i data-feather="download" class="align-middle"></i>
                                                            <span class="align-middle hidden sm:inline whitespace-nowrap">{{ __('campaigns.download') }}</span>
                                                        </button>
                                                        <button class="btn btn-outline-primary btn-test flex items-center gap-2 px-6 py-3" onclick="showModal(document.getElementById('testMessageModal'))">
                                                            <i data-feather="send" class="align-middle me-1"></i>
                                                            <span class="align-middle hidden sm:inline whitespace-nowrap">{{ __('campaigns.test') }}</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Credits Section -->
                                    <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow mb-6">
                                        <div class="md:p-6 p-4">
                                            <div class="flex items-center space-x-4">
                                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center shadow-sm">
                                                    <i class="fas fa-wallet text-blue-600 text-xl"></i>
                                                </div>
                                                <div class="flex-1">
                                                    <h4 class="text-lg font-semibold text-gray-700">{{ __('campaigns.available_credits') }}</h4>
                                                    <div class="">
                                                        <span class="text-2xl font-semibold text-blue-700">{{ auth()->user()->availableCredits() }}</span>
                                                        <span class="text-sm text-gray-500 ml-2">{{ __('campaigns.credits_remaining') }}</span>
                                                    </div>
                                                </div>
                                                <a href="{{ route('credits.packages') }}"
                                                   class="btn btn-primary shadow-sm hover:shadow-md transition-all">
                                                    <i class="fas fa-plus mr-2"></i>
                                                    {{ __('campaigns.buy_credits') }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Dynamic Variables Section -->
                                    <div class="relative z-20 border border-white/40 bg-fl-gray-extra-light/50 backdrop-blur-sm rounded-24 shadow-front-box-shadow-glow mb-6">
                                        <div class="md:p-6 p-4">
                                            <div class="flex items-center space-x-3 mb-4">
                                                <div class="min-w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                                    <i class="fas fa-tags text-primary"></i>
                                                </div>
                                                <div>
                                                    <h4 class="text-lg font-semibold text-gray-700">{{ __('campaigns.dynamic_variables') }}</h4>
                                                    <p class="text-sm text-gray-600">{{ __('campaigns.customize_text_styling') }}</p>
                                                </div>
                                            </div>
                                            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4" id="dynamic-values"></div>
                                        </div>
                                    </div>

                                    <!-- PDF Preview Section -->
                                    <div class="border border-white bg-fl-gray-extra-light/50 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow mb-6">
                                        <div class="md:p-6 p-4">
                                            <div class="flex items-center justify-between mb-4 flex-wrap gap-4">
                                                <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-file-pdf text-primary"></i>
                                                    </div>
                                                    <div>
                                                        <h4 class="text-lg font-semibold text-gray-700">{{ __('campaigns.pdf_preview') }}</h4>
                                                        <p class="text-sm text-gray-600">{{ __('campaigns.navigate_through_pdf_pages') }}</p>
                                                    </div>
                                                </div>
                                                
                                                <!-- PDF Controls -->
                                                <div class="flex items-center gap-2 flex-wrap">
                                                    <!-- Zoom Controls -->
                                                    <div class="flex items-center gap-2 ml-4 flex-wrap">
                                                        <button type="button" id="inline-zoom-out" class="btn btn-outline-secondary">
                                                            <i class="fas fa-search-minus"></i>
                                                        </button>
                                                        <span id="inline-zoom-label" class="text-sm w-12 text-center font-medium">100%</span>
                                                        <button type="button" id="inline-zoom-in" class="btn btn-outline-secondary">
                                                            <i class="fas fa-search-plus"></i>
                                                        </button>
                                                        <button type="button" id="inline-fit-width" class="btn btn-outline-primary">
                                                            <i class="fas fa-arrows-alt-h mr-1"></i> {{ __('campaigns.fit_width') }}
                                                        </button>
                                                        <button type="button" id="inline-fit-page" class="btn btn-outline-primary">
                                                            <i class="fas fa-expand-arrows-alt mr-1"></i> {{ __('campaigns.fit_page') }}
                                                        </button>
                                                        <button type="button" id="inline-zoom-reset" class="btn btn-outline-secondary">{{ __('campaigns.reset') }}</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- PDF Container -->
                                                <div class="flex items-center justify-center mt-6"
                                                    style="overflow-y: auto; min-height: 400px;"
                                                    id="pdf-container"></div>

                                                    <!-- Navigation Controls -->
                                                <div class="flex items-center justify-end mt-4 gap-2">
                                                    <button type="button"
                                                        class="btn btn-outline-primary flex items-center justify-center px-3 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                                        id="prevPage">
                                                        <i class="fas fa-chevron-left mr-1"></i>
                                                        {{ __('campaigns.previous_page') }}
                                                    </button>
                                                    <span id="inline-page-info" class="text-sm font-medium text-gray-700 px-2"></span>
                                                    <button type="button"
                                                        class="btn btn-outline-primary flex items-center justify-center px-3 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                                        id="nextPage">
                                                        {{ __('campaigns.next_page') }}
                                                        <i class="fas fa-chevron-right ml-1"></i>
                                                    </button>
                                                </div>


                                    </div>
                                </div>
                                <div class="flex items-center justify-between flex-wrap gap-4">
                                    <!-- Message type toggle -->
                                    <div class="flex items-center justify-between mb-4">
                                        <div class="form-check form-switch">
                                            <input class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" type="checkbox" id="sendAsSingleMessage" checked>
                                            <label class="form-check-label fw-medium !text-sm ml-1" for="sendAsSingleMessage">{{ __('campaigns.send_as_single_message') }}</label>
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-end gap-4">
                                        <button class="btn btn-outline-secondary btn-prev flex items-center gap-2 px-6 py-3">
                                            <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                            <span class="align-middle">{{ __('campaigns.previous') }}</span>
                                        </button>
                                        <!-- Send button with dropdown -->
                                        <div class="relative inline-flex shadow-sm" role="group">
                                            <button type="button" data-tooltip="Send Now" class="btn btn-outline-success border border-white/40 backdrop-blur-sm rounded-24 btn-send-now flex items-center gap-2 px-6 py-3 transition-all duration-200 !rounded-r-none !border-r-0">
                                                <i data-feather="send" class="w-4 h-4"></i>
                                                <span class="hidden sm:inline whitespace-nowrap font-medium">{{ __('campaigns.send_now') }}</span>
                                            </button>
                                            <button type="button" id="dropdown-toggle" data-tooltip="Send in Batches" class="btn btn-outline-success border border-white/40 backdrop-blur-sm px-3 py-3 transition-all duration-200 !rounded-l-none"
                                                    onclick="toggleDropdown()" aria-expanded="false">
                                                <i class="fas fa-chevron-down w-3 h-3 transition-transform duration-300" id="dropdown-icon"></i>
                                                <span class="sr-only">{{ __('campaigns.toggle_dropdown') }}</span>
                                            </button>
                                            <ul id="dropdown-menu" class="absolute right-0 bottom-full mb-2 w-56 border border-white/40 bg-fl-gray-extra-light/80 backdrop-blur-xl rounded-24 shadow-front-box-shadow-glow opacity-0 invisible transform scale-95 transition-all duration-300 origin-top-right z-50 overflow-hidden">
                                                <li class="border-b border-gray-100">
                                                    <a class="btn-schedule flex items-center gap-3 px-4 py-3 text-sm text-gray-700 hover:bg-green-50 hover:text-green-700 transition-all duration-200 cursor-pointer group"
                                                       href="javascript:void(0);">
                                                        <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center group-hover:bg-green-200 transition-colors duration-200">
                                                            <i data-feather="clock" class="w-4 h-4 text-green-600"></i>
                                                        </div>
                                                        <div class="flex-1">
                                                            <div class="font-medium">{{ __('campaigns.schedule_campaign') }}</div>
                                                            <div class="text-xs text-gray-500">{{ __('campaigns.send_at_specific_time') }}</div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- /Horizontal Wizard -->

            <!-- formatting modal  -->
            <div class="modal" id="formattingModal" tabindex="-1" aria-labelledby="formattingModalTitle"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg w-full max-w-4xl mx-4">
                    <div class="modal-content border-0 shadow-xl">
                        <!-- Modern Header -->
                        <div class="modal-header border-0 bg-gradient-to-r from-primary to-primary-600 text-white">
                            <div class="flex items-center">
                                <div class="min-w-10 h-10 bg-primary rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-font text-white text-lg"></i>
                                </div>
                                <div>
                                    <h5 class="modal-title text-xl font-semibold mb-0">{{ __('campaigns.text_formatting') }}</h5>
                                    <p class="text-gray-700 text-sm mb-0">{{ __('campaigns.customize_text_appearance') }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Modern Body -->
                        <div class="modal-body p-4 md:p-8">
                            <form id="formattingModalForm" onsubmit="return false">
                                <!-- Font Family Section -->
                                <div class="mb-6">
                                    <label class="form-label text-gray-700 font-medium mb-3 flex items-center">
                                        <i class="fas fa-font mr-2 text-primary"></i>
                                        {{ __('campaigns.font_family') }}
                                    </label>
                                    <select class="form-control custom-dropdown w-full" id="font_family" name="font_family" 
                                            data-placeholder="{{ __('campaigns.select_font_family') }}" data-searchable="true">
                                        <option value="Arial">Arial</option>
                                        <option value="Times New Roman">Times New Roman</option>
                                        <option value="Courier New">Courier New</option>
                                        <option value="Helvetica">Helvetica</option>
                                        <option value="Georgia">Georgia</option>
                                        <option value="Verdana">Verdana</option>
                                        <option value="Calibri">Calibri</option>
                                    </select>
                                </div>

                                <!-- Font Size and Color Row -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-6">
                                    <div>
                                        <label class="form-label text-gray-700 font-medium mb-3 flex items-center">
                                            <i class="fas fa-text-height mr-2 text-primary"></i>
                                            {{ __('campaigns.font_size') }}
                                        </label>
                                        <select class="form-control custom-dropdown" id="font_size" name="font_size" 
                                                data-placeholder="{{ __('campaigns.select_font_size') }}">
                                            @for ($size = 12; $size <= 72; $size += 2)
                                                <option value="{{ $size }}">{{ $size }}px</option>
                                            @endfor
                                        </select>
                                    </div>
                                    
                                    <div>
                                        <label class="form-label text-gray-700 font-medium mb-3 flex items-center">
                                            <i class="fas fa-palette mr-2 text-primary"></i>
                                            {{ __('campaigns.font_color') }}
                                        </label>
                                        <div class="relative">
                                            <input type="color" class="form-control h-12 !py-2 cursor-pointer" 
                                                   id="font_color" name="font_color" value="#000000">
                                            <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                                                <span class="text-white text-sm">{{ __('campaigns.choose_color') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Preview Section -->
                                <div class="mb-6">
                                    <label class="form-label text-gray-700 font-medium mb-3 flex items-center">
                                        <i class="fas fa-eye mr-2 text-primary"></i>
                                        {{ __('campaigns.preview') }}
                                    </label>
                                    <div class="bg-gray-50 border-2 border-dashed border-gray-200 rounded-lg p-4">
                                        <div id="textPreview" class="text-center text-gray-600" style="font-family: Arial; font-size: 16px; color: #000000;">
                                            {{ __('campaigns.your_text_will_appear_here') }}
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-gray-200">
                                    <button type="button" class="btn btn-outline-secondary px-4 py-2 md:px-6 md:py-2.5 rounded-lg font-medium w-full sm:w-auto" 
                                            data-bs-dismiss="modal">
                                        <i class="fas fa-times mr-2"></i>
                                        {{ __('campaigns.cancel') }}
                                    </button>
                                    <button id="applyFormatting" class="btn btn-primary px-4 py-2 md:px-6 md:py-2.5 rounded-lg font-medium w-full sm:w-auto"
                                            onclick="applyTextFormatting()">
                                        <i class="fas fa-check mr-2"></i>
                                        {{ __('campaigns.apply_formatting') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ formatting modal  -->

            <!-- Test Message Modal -->
            <div class="modal text-start" id="testMessageModal" tabindex="-1"
                aria-labelledby="testMessageModalTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered w-full max-w-md mx-4">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title text-lg md:text-xl" id="testMessageModalTitle">{{ __('campaigns.test_message') }}</h4>
                        </div>
                        <form id="testMessageForm" action="#">
                            <div class="modal-body p-4 md:p-6">
                                <label class="form-label text-sm md:text-base">{{ __('campaigns.enter_mobile_number') }} </label>
                                <div class="mb-1">
                                    <input type="text" id="mobile_number" name="mobile_number"
                                        placeholder="{{ __('campaigns.enter_mobile_number_placeholder') }}" class="form-control w-full" />
                                    <div class="invalid-feedback" id="mobileError">{{ __('campaigns.please_enter_valid_mobile') }}
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer p-4 md:p-6">
                                <button type="button" class="btn btn-primary w-full sm:w-auto px-4 py-2 md:px-6 md:py-3"
                                    onclick="window.sendTestMessage();">{{ __('campaigns.ok') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Test Message Modal -->

            <!-- Credit Warning Modal -->
            <div class="modal text-start" id="creditWarningModal" tabindex="-1" aria-labelledby="creditWarningModalTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered w-full max-w-lg mx-4">
                    <div class="modal-content">
                        <!-- Clean Header matching Create Event Modal -->
                        <div class="modal-header">
                            <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-exclamation-triangle text-primary"></i>
                                </div>
                                <div>
                                    <h5 class="text-xl font-semibold" id="creditWarningModalTitle">{{ __('campaigns.insufficient_credits') }}</h5>
                                    <p class="text-sm text-gray-600">{{ __('campaigns.action_required_to_proceed') }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Clean Body matching Create Event Modal -->
                        <div class="modal-body">
                            <!-- Warning Alert -->
                            <div class="alert alert-warning bg-orange-50 border-l-4 border-orange-400 mb-4">
                                <div class="flex items-center">
                                    <i class="fas fa-info-circle text-orange-600 mr-3 text-xl"></i>
                                    <div>
                                        <span class="text-orange-800 font-semibold text-sm">{{ __('campaigns.you_dont_have_enough_credits') }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Credit Statistics Cards -->
                            <div class="grid grid-cols-2 gap-3 mb-4">
                                <div class="bg-blue-50 rounded-lg p-4 border border-blue-200 flex gap-4">
                                    <div class="flex items-center h-10 min-w-10 px-4 bg-blue-200 rounded-lg justify-center">
                                        {{-- <i class="fas fa-wallet text-blue-600 text-xl"></i> --}}
                                        <p class="text-2xl font-semibold text-blue-700" id="modal-available-credits">0</p>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm text-blue-600 uppercase font-semibold">{{ __('campaigns.available') }}</span>
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm text-blue-600">{{ __('campaigns.credits_required') }}</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-purple-50 rounded-lg p-4 border border-purple-200 flex gap-4">
                                    <div class="flex items-center h-10 min-w-10 px-4 bg-purple-200 rounded-lg justify-center">
                                        <p class="text-2xl font-semibold text-purple-700" id="modal-total-contacts">0</p>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm text-purple-600 uppercase font-semibold">{{ __('campaigns.total') }}</span>
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm text-purple-600">{{ __('campaigns.contacts') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-2 gap-3 mb-4">
                                <div class="bg-orange-50 rounded-lg p-4 border border-orange-200 flex gap-4">
                                    <div class="flex items-center h-10 min-w-10 px-4 bg-orange-200 rounded-lg justify-center">
                                        <p class="text-2xl font-semibold text-orange-700" id="modal-required-credits">0</p>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm text-orange-600 uppercase font-semibold">{{ __('campaigns.required_credits_label') }}</span>
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm text-orange-600">{{ __('campaigns.credits_required') }}</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-red-50 rounded-lg p-4 border border-red-200 flex gap-4">
                                    <div class="flex items-center h-10 min-w-10 px-4 bg-red-200 rounded-lg justify-center">
                                        <p class="text-2xl font-semibold text-red-700" id="modal-credit-shortfall">0</p>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm text-red-600 uppercase font-semibold">{{ __('campaigns.shortfall') }}</span>
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm text-red-600">{{ __('campaigns.credits_required') }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Information Message -->
                            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                                <div class="flex items-start">
                                    <i class="fas fa-info-circle text-gray-600 mr-3 mt-1"></i>
                                    <div class="text-sm text-gray-700">
                                        <p class="mb-2">{{ __('campaigns.if_you_proceed_without_buying') }} 
                                            <strong class="text-primary"><span id="modal-can-send-to">0</span> {{ __('campaigns.contacts_label') }}</strong>.
                                        </p>
                                        <p class="mb-0">{{ __('campaigns.remaining_contacts_will_be_skipped') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Clean Footer matching Create Event Modal -->
                        <div class="modal-footer">
                            <div class="flex flex-col sm:flex-row w-full gap-3">
                                <button type="button" class="btn btn-outline-secondary flex-1 px-4 py-2 md:px-6 md:py-2.5 rounded-lg font-medium" data-modal-close>
                                    <i class="fas fa-times mr-2"></i>
                                    {{ __('campaigns.cancel') }}
                                </button>
                                <button type="button" class="btn btn-outline-warning flex-1 px-4 py-2 md:px-6 md:py-2.5 rounded-lg font-medium text-white" id="proceedAnywayBtn">
                                    <i class="fas fa-paper-plane mr-2"></i>
                                    {{ __('campaigns.send_to') }} <span id="proceed-count" class="ml-1">0</span>
                                </button>
                                <button type="button" class="btn btn-primary flex-1 px-4 py-2 md:px-6 md:py-2.5 rounded-lg font-medium" id="buyCreditsBtn">
                                    <i class="fas fa-shopping-cart mr-2"></i>
                                    {{ __('campaigns.buy_more_credits') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Credit Warning Modal -->

            <!-- Schedule Campaign Modal -->
            <div class="modal fade" id="scheduleCampaignModal" tabindex="-1" aria-labelledby="scheduleCampaignModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content border-0 shadow-xl rounded-lg">
                        <!-- Clean Header -->
                        <div class="modal-header border-bottom bg-white pb-3 pt-4 px-5">
                            <div class="flex items-center space-x-3 w-full">
                                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-clock text-primary"></i>
                                </div>
                                <div class="flex-1">
                                    <h5 class="text-lg font-semibold text-gray-900 mb-0" id="scheduleCampaignModalLabel">{{ __('campaigns.schedule_campaign') }}</h5>
                                    <p class="text-sm text-gray-500 mb-0 mt-1">{{ __('campaigns.choose_perfect_time') }}</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Clean Body -->
                        <div class="modal-body p-5 bg-white">
                            <div class="space-y-5">
                                <!-- Date Time Picker Section -->
                                <div>
                                    <label for="scheduledDateTime" class="text-sm font-semibold text-gray-700 mb-2 block">
                                        {{ __('campaigns.select_date_time') }}
                                    </label>
                                    <div class="relative">
                                        <input type="datetime-local" 
                                               class="form-control border border-gray-300 rounded-lg px-4 py-2.5 text-gray-700 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 w-full" 
                                               id="scheduledDateTime" 
                                               name="scheduled_at"
                                               step="60"
                                               required>
                                    </div>
                                    
                                    <!-- Info Messages -->
                                    <div class="mt-3 space-y-2">
                                        <div class="flex items-center text-sm text-gray-600">
                                            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                                            <span>{{ __('campaigns.schedule_between_minutes_days') }}</span>
                                        </div>
                                        <div class="flex items-center text-sm text-gray-600">
                                            <i class="fas fa-globe text-green-500 mr-2"></i>
                                            <span>{{ __('campaigns.your_timezone') }} <span id="userTimezoneDisplay" class="font-medium text-gray-700">Asia/Kolkata</span></span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Validation Error Display -->
                                <div id="scheduleValidationError" class="alert alert-danger border border-red-200 bg-red-50 rounded-lg p-3" style="display: none;">
                                    <div class="flex items-center">
                                        <i class="fas fa-exclamation-triangle text-red-600 mr-2"></i>
                                        <span id="scheduleErrorMessage" class="text-red-700 text-sm"></span>
                                    </div>
                                </div>

                                <!-- Campaign Summary -->
                                <div class="border-t border-gray-200 pt-4">
                                    <h6 class="text-sm font-semibold text-gray-700 mb-3">{{ __('campaigns.campaign_summary') }}</h6>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                                                        <i class="fas fa-users text-blue-600"></i>
                                                    </div>
                                                    <span class="text-sm font-medium text-gray-700">{{ __('campaigns.total_recipients') }}</span>
                                                </div>
                                                <span class="text-2xl font-bold text-gray-900" id="scheduleTotalContacts">0</span>
                                            </div>
                                        </div>
                                        <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center">
                                                    <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                                        <i class="fas fa-coins text-green-600"></i>
                                                    </div>
                                                    <span class="text-sm font-medium text-gray-700">{{ __('campaigns.required_credits_label') }}</span>
                                                </div>
                                                <span class="text-2xl font-bold text-gray-900" id="scheduleRequiredCredits">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Clean Footer -->
                        <div class="modal-footer border-top bg-gray-50 px-5 py-3">
                            <div class="flex flex-col sm:flex-row w-full gap-3 justify-end">
                                <button type="button" class="btn btn-outline-secondary flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" data-bs-dismiss="modal">
                                    <i class="fas fa-times mr-2"></i>
                                    {{ __('campaigns.cancel') }}
                                </button>
                                <button type="button" class="btn btn-primary flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" id="confirmScheduleBtn">
                                    <i class="fas fa-check mr-2"></i>
                                    {{ __('campaigns.confirm_schedule') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Schedule Campaign Modal -->

            <!-- PDF Preview Modal -->
            <div class="modal" id="pdfPreviewModal" tabindex="-1" aria-labelledby="pdfPreviewModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content border-0 shadow-xl">
                        <div class="modal-header border-0 bg-gradient-to-r from-primary/10 to-secondary/10">
                            <div class="flex items-center space-x-3">
                                <div class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center shadow-sm">
                                    <i class="fas fa-file-pdf text-white text-xl"></i>
                                </div>
                                <div>
                                    <h5 class="text-xl font-semibold text-gray-700" id="pdfPreviewModalLabel">{{ __('campaigns.pdf_preview') }}</h5>
                                    <p class="text-sm text-gray-600" id="pdfFileName">{{ __('campaigns.no_pdf_loaded') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-body p-0">
                            <div id="pdf-preview-container" class="w-full h-[600px] bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
                                <div class="text-center text-gray-500">
                                    <div class="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-file-pdf text-4xl text-gray-400"></i>
                                    </div>
                                    <p class="text-lg font-medium text-gray-700">{{ __('campaigns.no_pdf_file_selected') }}</p>
                                    <p class="text-sm text-gray-500">{{ __('campaigns.please_select_pdf_file_first') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-0 bg-gray-50 p-4 md:p-6">
                            <div class="flex justify-end gap-3 w-full">
                                <button type="button" class="btn btn-outline-secondary px-4 py-2 md:px-6 md:py-2.5 rounded-lg font-medium" data-modal-close>
                                    <i class="fas fa-times mr-2"></i>
                                    {{ __('campaigns.close') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /PDF Preview Modal -->

        </div>
    </div>
@endsection

@push('custom_styles')
<style>
    body.blockui-blur-active {
        overflow: hidden;
    }

    /* Enhanced blur effect for background */
    body.blockui-blur-active .content-wrapper,
    body.blockui-blur-active .horizontal-wizard,
    body.blockui-blur-active #tw-stepper,
    body.blockui-blur-active .content-body,
    body.blockui-blur-active .container-xxl,
    body.blockui-blur-active #sidebar,
    body.blockui-blur-active nav {
        filter: blur(8px) brightness(0.95);
        transition: filter 0.4s ease;
        pointer-events: none;
    }

    body.blockui-blur-active #sidebar,
    body.blockui-blur-active nav {
        pointer-events: none;
    }

    /* Enhanced loading overlay backdrop */
    .blockUI.blockOverlay {
        background-color: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Center PDF content */
    /* #pdf-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    } */

    
    /* Ensure PDF preview container is centered */
    #pdf-preview-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    
    /* PDF Modal Toolbar Styles */
    #pdf-preview-container .btn {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
        border-radius: 0.375rem !important;
    }
    
    #pdf-preview-container .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    #pdf-preview-container .form-control-sm {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* Ensure toolbar is always visible */
    #pdf-preview-container .bg-gray-50 {
        background-color: #f9fafb !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* Make sure buttons are clickable */
    #pdf-preview-container button {
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    /* PDF Container centering and layout */
    #pdf-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 400px !important;
        width: 100% !important;
        overflow: auto !important; /* Allow scrolling when zoomed */
    }

    /* PDF Canvas centering */
    #pdf-container .pdf-canvas {
        display: block !important;
        margin: 0 auto !important;
        /* Remove max-width constraint to allow proper zooming */
        /* max-width: 100% !important; */
        /* height: auto !important; */
        /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; */
        border-radius: 8px !important;
    }
</style>
@endpush

@push('custom_scripts')
    <script>
        // Ensure a valid base URL for AJAX endpoints used on this page
        window.SITE_URL = window.SITE_URL || @json(url('/'));
        window.siteurl = window.SITE_URL;
        var eventId = {{ $event->id }};
        var eventName = '{{ $event->name }}';
        var campaignId = {{ $campaign->id }};
        var campaignName = '{{ $campaign->name }}';
        window.WHATSAPP_BATCH_SIZE = {{ config('whatsapp.batch_size') }};
        
        // Make campaignId available globally for draft functions
        window.campaignId = campaignId;
        window.eventId = eventId;
        window.WHATSAPP_BATCH_DELAY_SECONDS = {{ config('whatsapp.batch_delay_seconds') }};
        window.WHATSAPP_INTRA_DELAY_SECONDS = {{ config('whatsapp.intra_delay_seconds') }};
        window.REPORT_ROUTE = `{{ route('campaigns.invitation.report', $campaign->id) }}`;
        window.CREDITS_PACKAGES_URL = @json(route('credits.packages'));
    </script>

    <script src="{{ asset('app-assets/vendors/js/forms/validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/forms/validation/additional-methods.min.js') }}"></script>
    <script src="{{ asset('js/admin/xlsx.full.min.js') }}"></script>
    <script src="{{ asset('js/admin/prettify.min.js') }}"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>

    <script src="{{ asset('js/admin/pdf-lib/pdf.min.js') }}"></script>
    <script>
        pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ asset('js/admin/pdf-lib/pdf.worker.min.js') }}';
    </script>
    <script src="{{ asset('js/admin/pdf-lib/fabric.min.js') }}"></script>
    <script src="{{ asset('js/admin/pdf-lib/jspdf.umd.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>

    <script src="{{ asset('js/admin/event-invitation-wizard.js') }}"></script>
    <script src="{{ asset('js/datepicker.js') }}"></script>

    <script type="text/javascript">
        var PDFAnnotate = function(container_id, url, options = {}) {
            this.number_of_pages = 0;
            this.active_tool = 1;
            this.fabricObjects = [];
            this.savedStates = {};
            this.color = '#212121';
            this.font_size = 16;
            this.active_canvas = 0;
            this.container_id = container_id;
            this.url = url;
            this.current_page = 1;
            this.current_scale = options.scale ? options.scale : 1.0;

            this.pageImageCompression = options.pageImageCompression ?
                options.pageImageCompression.toUpperCase() :
                "MEDIUM";

            var inst = this;
            // Load PDF
            var loadingTask = pdfjsLib.getDocument(this.url);
            loadingTask.promise.then(function(pdf) {
                // Use the configured scale; do not clamp so Fit Width/Page works on mobile
                var scale = inst.current_scale || 1.0;
                inst.number_of_pages = pdf.numPages;
                inst.pdf = pdf;
                inst.renderPage(inst.current_page, scale);
                inst.updatePaginationButtons();
                inst.updateInlineUI();
            }, function(reason) {
                console.error(reason);
            });

            this.renderPage = function(pageNum, scale) {
                // Save current state before changing
                if (inst.fabricObjects[inst.current_page - 1]) {
                    inst.savedStates[inst.current_page] = inst.fabricObjects[inst.current_page - 1].toJSON();
                }

                // Clear the container completely
                document.getElementById(inst.container_id).innerHTML = '';

                this.pdf.getPage(pageNum).then(function(page) {
                    inst.current_scale = scale;
                    var viewport = page.getViewport({
                        scale: inst.current_scale
                    });
                    var canvas = document.createElement('canvas');
                    document.getElementById(inst.container_id).appendChild(canvas);
                    canvas.className = 'pdf-canvas';
                    
                    // Ensure canvas is properly centered and styled
                    canvas.style.display = 'block';
                    canvas.style.margin = '0 auto';
                    // Remove maxWidth constraint to allow proper zooming
                    // canvas.style.maxWidth = '100%';
                    // canvas.style.height = 'auto';
                    
                    // Set canvas size to match viewport width/height (no devicePixelRatio scaling)
                    var outputScale = 1;
                    canvas.width = Math.floor(viewport.width);
                    canvas.height = Math.floor(viewport.height);
                    canvas.style.width = Math.floor(viewport.width) + "px";
                    canvas.style.height = Math.floor(viewport.height) + "px";
                    
                    console.log('Canvas dimensions:', {
                        viewportWidth: viewport.width,
                        viewportHeight: viewport.height,
                        canvasWidth: canvas.width,
                        canvasHeight: canvas.height,
                        styleWidth: canvas.style.width,
                        styleHeight: canvas.style.height,
                        scale: inst.current_scale
                    });
                    
                    var context = canvas.getContext('2d');

                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    var renderTask = page.render(renderContext);
                    renderTask.promise.then(function() {
                        canvas.id = 'page-' + pageNum + '-canvas';
                        
                        // Small delay to ensure canvas is fully rendered
                        setTimeout(function() {
                            console.log('Initializing fabric for page', pageNum, 'with scale', inst.current_scale);
                            inst.initFabric(canvas, pageNum);
                            inst.active_canvas = pageNum - 1;
                            inst.updatePaginationButtons();
                            inst.updateInlineUI();
                            console.log('Fabric initialization complete for page', pageNum);
                        }, 50);
                    });
                });
            };

            this.initFabric = function(canvas, pageNum) {
                console.log('initFabric called for page', pageNum, 'canvas dimensions:', canvas.width, 'x', canvas.height);
                
                // Dispose of existing fabric object if it exists
                if (inst.fabricObjects[pageNum - 1]) {
                    console.log('Disposing existing fabric object for page', pageNum);
                    inst.fabricObjects[pageNum - 1].dispose();
                }

                // Export canvas at maximum quality with high DPI
                var background = canvas.toDataURL("image/png", 1.0);
                var fabricObj = new fabric.Canvas(canvas.id, {
                    freeDrawingBrush: {
                        width: 1,
                        color: inst.color
                    },
                    enableRetinaScaling: false,
                    width: canvas.width,
                    height: canvas.height
                });

                console.log('Created fabric canvas with dimensions:', fabricObj.width, 'x', fabricObj.height);
                inst.fabricObjects[pageNum - 1] = fabricObj;
                fabricObj.setBackgroundImage(background, fabricObj.renderAll.bind(fabricObj));
                if (inst.savedStates[pageNum]) {
                    console.log('Loading saved state for page', pageNum);
                    fabricObj.loadFromJSON(inst.savedStates[pageNum], fabricObj.renderAll.bind(fabricObj));
                }

            };

            this.nextPage = function() {
                if (this.current_page < this.number_of_pages) {
                    this.current_page++;
                    this.renderPage(this.current_page, this.current_scale || 1.0);
                }
            };

            this.previousPage = function() {
                if (this.current_page > 1) {
                    this.current_page--;
                    this.renderPage(this.current_page, this.current_scale || 1.0);
                }
            };

            this.updatePaginationButtons = function() {
                document.getElementById('prevPage').disabled = this.current_page === 1;
                document.getElementById('nextPage').disabled = this.current_page === this.number_of_pages;
            };

            this.updateInlineUI = function() {
                var pageInfoEl = document.getElementById('inline-page-info');
                if (pageInfoEl) pageInfoEl.textContent = @json(__('campaigns.page')) + ' ' + this.current_page + ' ' + @json(__('campaigns.of')) + ' ' + this.number_of_pages;
                var zoomLabelEl = document.getElementById('inline-zoom-label');
                if (zoomLabelEl) zoomLabelEl.textContent = Math.round(this.current_scale * 100) + '%';
                var pageInput = document.getElementById('inline-page-input');
                if (pageInput) pageInput.max = this.number_of_pages;
            };

            this.setScale = function(newScale) {
                if (newScale < 0.25) newScale = 0.25;
                if (newScale > 5) newScale = 5;
                this.current_scale = newScale;
                this.renderPage(this.current_page, this.current_scale);
            };

            this.zoomIn = function() {
                this.setScale(this.current_scale + 0.1);
            };

            this.zoomOut = function() {
                this.setScale(this.current_scale - 0.1);
            };

            this.zoomReset = function() {
                this.setScale(1.0);
            };

            this.fitWidth = function() {
                var inst = this;
                this.pdf.getPage(this.current_page).then(function(page) {
                    var containerEl = document.getElementById(inst.container_id);
                    // Prefer clientWidth (content box) to avoid padding discrepancies
                    var availableWidth = (containerEl && containerEl.clientWidth) ? containerEl.clientWidth : 0;
                    if (!availableWidth) {
                        // Fallback: walk up a few ancestors to find a non-zero clientWidth
                        var node = containerEl ? containerEl.parentElement : null;
                        for (var i = 0; i < 5 && node && !availableWidth; i++) {
                            availableWidth = node.clientWidth || 0;
                            node = node.parentElement;
                        }
                    }
                    if (!availableWidth) availableWidth = 800;
                    // Guard against rounding overflow on mobile
                    availableWidth = Math.max(1, Math.floor(availableWidth - 2));
                    var viewport = page.getViewport({ scale: 1 });
                    var scale = availableWidth / viewport.width;
                    inst.setScale(scale);
                    // Remember mode for resize/nav
                    try { window.PDF_FIT_MODE = 'width'; } catch(e) {}
                });
            };

            this.fitPage = function() {
                var inst = this;
                this.pdf.getPage(this.current_page).then(function(page) {
                    var containerEl = document.getElementById(inst.container_id);
                    var parent = containerEl ? containerEl.parentElement : null;
                    var availableWidth = parent ? parent.clientWidth - 30 : 800;
                    var availableHeight = parent ? Math.max(parent.clientHeight - 30, 400) : 600;
                    var viewport = page.getViewport({ scale: 1 });
                    var scaleW = availableWidth / viewport.width;
                    var scaleH = availableHeight / viewport.height;
                    var scale = Math.min(scaleW, scaleH);
                    inst.setScale(scale);
                });
            };

        };

        PDFAnnotate.prototype.addVariableOnPreview = function() {
            var inst = this;
            inst.active_tool = 2;
            if (inst.fabricObjects.length > 0) {
                $.each(inst.fabricObjects, function(index, fabricObj) {
                    fabricObj.isDrawingMode = false;
                });
            }
        }

        PDFAnnotate.prototype.savePdf = async function(fileName) {
            var inst = this;
            
            if (typeof fileName === 'undefined') {
                fileName = `${new Date().getTime()}.pdf`;
            }

            // Check if PDF-lib is available
            if (typeof PDFLib === 'undefined') {
                console.warn('PDFLib library is not loaded - links will not be preserved. Please ensure the PDF-lib script is loaded.');
            } else {
                console.log('PDFLib library is available');
            }
            
            // Try to preserve links using PDF-lib if available
            if (typeof PDFLib !== 'undefined' && inst.pdf && inst.url) {
                try {
                    console.log('Attempting to preserve links using PDF-lib...');
                    
                    // Load the original PDF to preserve structure
                    var originalPdfBytes;
                    if (inst.url.startsWith('data:')) {
                        var base64Data = inst.url.split(',')[1];
                        var binaryString = atob(base64Data);
                        originalPdfBytes = new Uint8Array(binaryString.length);
                        for (var k = 0; k < binaryString.length; k++) {
                            originalPdfBytes[k] = binaryString.charCodeAt(k);
                        }
                    } else {
                        var response = await fetch(inst.url);
                        var arrayBuffer = await response.arrayBuffer();
                        originalPdfBytes = new Uint8Array(arrayBuffer);
                    }
                    
                    console.log('Original PDF loaded, size:', originalPdfBytes.length, 'bytes');
                    
                    // Load original PDF with PDF-lib to copy structure
                    var originalPdfDoc = await PDFLib.PDFDocument.load(originalPdfBytes);
                    console.log('Original PDF document loaded, pages:', originalPdfDoc.getPageCount());
                    
                    // Create new PDF by copying pages from original (this preserves all links/annotations)
                    var newPdfDoc = await PDFLib.PDFDocument.create();
                    
                    // Process each page
                    for (var i = 0; i < inst.fabricObjects.length && i < originalPdfDoc.getPageCount(); i++) {
                        var fabricObj = inst.fabricObjects[i];
                        var originalPage = originalPdfDoc.getPage(i);
                        var pageSize = originalPage.getSize();
                        
                        // Create new page with same size as original
                        var page = newPdfDoc.addPage([pageSize.width, pageSize.height]);
                        
                        // Export canvas as image (this is the edited version)
                        var imageData = fabricObj.toDataURL({
                            format: 'jpeg',
                            quality: 0.92, // Higher quality
                            multiplier: 1.5
                        });
                        
                        // Convert base64 image to Uint8Array
                        var base64Image = imageData.split(',')[1];
                        var imageBytes = Uint8Array.from(atob(base64Image), function(c) { return c.charCodeAt(0); });
                        
                        // Embed image in PDF
                        var pdfImage = await newPdfDoc.embedJpg(imageBytes);
                        
                        // Draw the edited canvas image first (as background)
                        page.drawImage(pdfImage, {
                            x: 0,
                            y: 0,
                            width: pageSize.width,
                            height: pageSize.height
                        });
                        
                        // Now extract and copy links from original page using pdf.js (more reliable)
                        try {
                            var pdfPage = await inst.pdf.getPage(i + 1);
                            var annotations = await pdfPage.getAnnotations();
                            
                            console.log('Page', i + 1, 'has', annotations.length, 'annotations');
                            
                            var linkAnnotations = [];
                            for (var j = 0; j < annotations.length; j++) {
                                var annotation = annotations[j];
                                
                                if (annotation.subtype === 'Link') {
                                    var url = annotation.url || annotation.unsafeUrl;
                                    
                                    if (url) {
                                        // Get rectangle coordinates (PDF coordinates: [x0, y0, x1, y1])
                                        var rect = annotation.rect;
                                        
                                        if (rect && rect.length >= 4) {
                                            // PDF coordinates: bottom-left is (0,0)
                                            // rect from pdf.js is [x0, y0, x1, y1] where y0 and y1 are from bottom
                                            // These are already in correct PDF coordinate format, no flipping needed
                                            var x0 = rect[0];
                                            var y0 = rect[1]; // Already from bottom
                                            var x1 = rect[2];
                                            var y1 = rect[3]; // Already from bottom
                                            
                                            // Ensure coordinates are in correct order (x0 < x1, y0 < y1)
                                            if (x0 > x1) { var temp = x0; x0 = x1; x1 = temp; }
                                            if (y0 > y1) { var temp = y0; y0 = y1; y1 = temp; }
                                            
                                            // Create link annotation dictionary
                                            var linkAnnotDict = {
                                                Type: 'Annot',
                                                Subtype: 'Link',
                                                Rect: [x0, y0, x1, y1],
                                                Border: [0, 0, 0], // No visible border
                                                A: {
                                                    Type: 'Action',
                                                    S: 'URI',
                                                    URI: PDFLib.PDFString.of(url)
                                                }
                                            };
                                            
                                            // Register annotation
                                            var linkAnnotRef = newPdfDoc.context.register(
                                                newPdfDoc.context.obj(linkAnnotDict)
                                            );
                                            linkAnnotations.push(linkAnnotRef);
                                            
                                            console.log('Added link annotation:', url, 'at', [x0, y0, x1, y1]);
                                        }
                                    }
                                }
                            }
                            
                            // Add all link annotations to the page
                            if (linkAnnotations.length > 0) {
                                // Get existing annotations if any
                                var existingAnnotsRef = page.node.get(PDFLib.PDFName.of('Annots'));
                                var allAnnots = linkAnnotations.slice();
                                
                                if (existingAnnotsRef) {
                                    var existingAnnots = newPdfDoc.context.lookup(existingAnnotsRef);
                                    if (existingAnnots && existingAnnots.array) {
                                        // Add existing annotations too
                                        for (var k = 0; k < existingAnnots.array.length; k++) {
                                            allAnnots.push(existingAnnots.array[k]);
                                        }
                                    }
                                }
                                
                                page.node.set(
                                    PDFLib.PDFName.of('Annots'),
                                    newPdfDoc.context.obj(allAnnots)
                                );
                                console.log('Added', linkAnnotations.length, 'link annotations to page', i + 1);
                            }
                        } catch (annotError) {
                            console.error('Error copying annotations from page', i + 1, ':', annotError);
                        }
                    }
                    
                    // Handle case where there are more fabric objects than original pages
                    if (inst.fabricObjects.length > originalPdfDoc.getPageCount()) {
                        var firstPage = originalPdfDoc.getPage(0);
                        var pageSize = firstPage.getSize();
                        
                        for (var i = originalPdfDoc.getPageCount(); i < inst.fabricObjects.length; i++) {
                            var fabricObj = inst.fabricObjects[i];
                            var page = newPdfDoc.addPage([pageSize.width, pageSize.height]);
                            
                            var imageData = fabricObj.toDataURL({
                                format: 'jpeg',
                                quality: 0.92,
                                multiplier: 1.5
                            });
                            
                            var base64Image = imageData.split(',')[1];
                            var imageBytes = Uint8Array.from(atob(base64Image), function(c) { return c.charCodeAt(0); });
                            var pdfImage = await newPdfDoc.embedJpg(imageBytes);
                            
                            page.drawImage(pdfImage, {
                                x: 0,
                                y: 0,
                                width: pageSize.width,
                                height: pageSize.height
                            });
                        }
                    }
                    
                    console.log('PDF created with links preserved');
                    
                    // Save PDF and return as base64
                    var pdfBytes = await newPdfDoc.save();
                    var binary = '';
                    for (var i = 0; i < pdfBytes.length; i++) {
                        binary += String.fromCharCode(pdfBytes[i]);
                    }
                    return btoa(binary);
                    
                } catch (error) {
                    console.error('Error preserving links from original PDF:', error);
                    console.error('Error stack:', error.stack);
                    console.warn('Falling back to jsPDF without link preservation');
                    // Fall through to jsPDF implementation
                }
            } else {
                if (!inst.pdf) {
                    console.warn('PDF instance not available - links will not be preserved');
                }
                if (!inst.url) {
                    console.warn('PDF URL not available - links will not be preserved');
                }
            }
            
            // Fallback to original jsPDF implementation (without link preservation)
            var doc = new jspdf.jsPDF({
                compress: true,
                unit: 'pt',
                format: 'a4'
            });

            var pdfBase64 = '';

            inst.fabricObjects.forEach(function(fabricObj, index) {
                if (index != 0) {
                    doc.addPage();
                    doc.setPage(index + 1);
                }
                
                var imageData = fabricObj.toDataURL({
                    format: 'jpeg',
                    quality: 0.85,
                    multiplier: 1.5
                });
                
                doc.addImage(
                    imageData,
                    'JPEG',
                    0,
                    0,
                    doc.internal.pageSize.getWidth(),
                    doc.internal.pageSize.getHeight(),
                    `page-${index + 1}`,
                    'MEDIUM'
                );
                if (index === inst.fabricObjects.length - 1) {
                    pdfBase64 = doc.output('datauristring').split(',')[1];
                }
            });
            return pdfBase64;
        }

        PDFAnnotate.prototype.downloadPDF = async function(fileName) {
            var inst = this;
            
            if (typeof fileName === 'undefined') {
                fileName = `${new Date().getTime()}.pdf`;
            }

            // Try to preserve links using PDF-lib if available
            if (typeof PDFLib !== 'undefined' && inst.pdf && inst.url) {
                try {
                    // Load the original PDF to extract links
                    var originalPdfBytes;
                    if (inst.url.startsWith('data:')) {
                        var base64Data = inst.url.split(',')[1];
                        var binaryString = atob(base64Data);
                        originalPdfBytes = new Uint8Array(binaryString.length);
                        for (var k = 0; k < binaryString.length; k++) {
                            originalPdfBytes[k] = binaryString.charCodeAt(k);
                        }
                    } else {
                        var response = await fetch(inst.url);
                        var arrayBuffer = await response.arrayBuffer();
                        originalPdfBytes = new Uint8Array(arrayBuffer);
                    }
                    
                    // Load original PDF with PDF-lib
                    var originalPdfDoc = await PDFLib.PDFDocument.load(originalPdfBytes);
                    
                    // Create new PDF with PDF-lib
                    var newPdfDoc = await PDFLib.PDFDocument.create();
                    
                    // Get page dimensions from first page of original PDF
                    var firstPage = originalPdfDoc.getPage(0);
                    var originalSize = firstPage.getSize();
                    var pageWidth = originalSize.width;
                    var pageHeight = originalSize.height;
                    
                    // Process each page
                    for (var i = 0; i < inst.fabricObjects.length; i++) {
                        var fabricObj = inst.fabricObjects[i];
                        var page = newPdfDoc.addPage([pageWidth, pageHeight]);
                        
                        // Export canvas as image
                        var imageData = fabricObj.toDataURL({
                            format: 'jpeg',
                            quality: 0.85,
                            multiplier: 1.5
                        });
                        
                        // Convert base64 image to Uint8Array
                        var base64Image = imageData.split(',')[1];
                        var imageBytes = Uint8Array.from(atob(base64Image), function(c) { return c.charCodeAt(0); });
                        
                        // Embed image in PDF
                        var pdfImage = await newPdfDoc.embedJpg(imageBytes);
                        page.drawImage(pdfImage, {
                            x: 0,
                            y: 0,
                            width: pageWidth,
                            height: pageHeight
                        });
                        
                        // Copy links from original page to new page if original has this page
                        if (i < originalPdfDoc.getPageCount()) {
                            // Extract link annotations from original page using pdf.js
                            try {
                                var pdfPage = await inst.pdf.getPage(i + 1);
                                var annotations = await pdfPage.getAnnotations();
                                
                                var linkAnnotations = [];
                                for (var j = 0; j < annotations.length; j++) {
                                    var annotation = annotations[j];
                                    
                                    if (annotation.subtype === 'Link') {
                                        var url = annotation.url || annotation.unsafeUrl;
                                        
                                        if (url) {
                                            var rect = annotation.rect;
                                            
                                            if (rect && rect.length >= 4) {
                                                // PDF coordinates: bottom-left is (0,0)
                                                // rect is [x0, y0, x1, y1] where y0 and y1 are from bottom
                                                var x0 = rect[0];
                                                var y0 = rect[1];
                                                var x1 = rect[2];
                                                var y1 = rect[3];
                                                
                                                // Ensure coordinates are in correct order
                                                if (x0 > x1) { var temp = x0; x0 = x1; x1 = temp; }
                                                if (y0 > y1) { var temp = y0; y0 = y1; y1 = temp; }
                                                
                                                // Create link annotation dictionary
                                                var linkAnnotDict = {
                                                    Type: 'Annot',
                                                    Subtype: 'Link',
                                                    Rect: [x0, y0, x1, y1],
                                                    Border: [0, 0, 0],
                                                    A: {
                                                        Type: 'Action',
                                                        S: 'URI',
                                                        URI: PDFLib.PDFString.of(url)
                                                    }
                                                };
                                                
                                                // Register annotation
                                                var linkAnnotRef = newPdfDoc.context.register(
                                                    newPdfDoc.context.obj(linkAnnotDict)
                                                );
                                                linkAnnotations.push(linkAnnotRef);
                                            }
                                        }
                                    }
                                }
                                
                                // Add all link annotations to the page
                                if (linkAnnotations.length > 0) {
                                    // Get existing annotations if any
                                    var existingAnnotsRef = page.node.get(PDFLib.PDFName.of('Annots'));
                                    var allAnnots = linkAnnotations.slice();
                                    
                                    if (existingAnnotsRef) {
                                        var existingAnnots = newPdfDoc.context.lookup(existingAnnotsRef);
                                        if (existingAnnots && existingAnnots.array) {
                                            for (var k = 0; k < existingAnnots.array.length; k++) {
                                                allAnnots.push(existingAnnots.array[k]);
                                            }
                                        }
                                    }
                                    
                                    page.node.set(
                                        PDFLib.PDFName.of('Annots'),
                                        newPdfDoc.context.obj(allAnnots)
                                    );
                                }
                            } catch (annotError) {
                                console.warn('Could not extract annotations from page', i + 1, ':', annotError);
                            }
                        }
                    }
                    
                    // Save PDF and download
                    var pdfBytes = await newPdfDoc.save();
                    var blob = new Blob([pdfBytes], { type: 'application/pdf' });
                    var url = URL.createObjectURL(blob);
                    var link = document.createElement('a');
                    link.href = url;
                    link.download = fileName;
                    link.click();
                    URL.revokeObjectURL(url);
                    return;
                    
                } catch (error) {
                    console.warn('Could not preserve links from original PDF, falling back to jsPDF:', error);
                    // Fall through to jsPDF implementation
                }
            }
            
            // Fallback to original jsPDF implementation (without link preservation)
            var doc = new jspdf.jsPDF({
                compress: true,
                unit: 'pt',
                format: 'a4'
            });

            inst.fabricObjects.forEach(function(fabricObj, index) {
                if (index != 0) {
                    doc.addPage();
                    doc.setPage(index + 1);
                }
                
                var imageData = fabricObj.toDataURL({
                    format: 'jpeg',
                    quality: 0.85,
                    multiplier: 1.5
                });
                
                doc.addImage(
                    imageData,
                    'JPEG',
                    0,
                    0,
                    doc.internal.pageSize.getWidth(),
                    doc.internal.pageSize.getHeight(),
                    `page-${index + 1}`,
                    'MEDIUM'
                );
                if (index === inst.fabricObjects.length - 1) {
                    doc.save(fileName);
                }
            });
        }

        PDFAnnotate.prototype.refreshPDF = function() {
            var inst = this;
            if (confirm('Are you sure?')) {
                inst.fabricObjects.forEach(function(fabricObj) {
                    var bg = fabricObj.backgroundImage;
                    fabricObj.clear();
                    fabricObj.setBackgroundImage(bg, fabricObj.renderAll.bind(fabricObj));
                });
            }
            displayHeadingValues();
        }

        /**
         * Ensure all PDF pages are rendered into fabricObjects array
         * This is crucial for sending complete PDFs via WhatsApp
         * Preserves user edits on already-rendered pages
         * @param {Function} progressCallback - Optional callback for progress updates
         * @returns {Promise<void>}
         */
        PDFAnnotate.prototype.ensureAllPagesRendered = async function(progressCallback) {
            var inst = this;
            
            return new Promise(async (resolve, reject) => {
                try {
                    console.log('Ensuring all pages are rendered...');
                    console.log(`Total pages: ${inst.number_of_pages}, Currently rendered: ${inst.fabricObjects.length}`);
                    
                    // Save the current page to restore later
                    const originalPage = inst.current_page;
                    const scale = inst.current_scale || 1.0;
                    
                    // Process each page
                    for (let pageNum = 1; pageNum <= inst.number_of_pages; pageNum++) {
                        const pageIndex = pageNum - 1;
                        
                        // Skip if this page is already rendered (preserves user edits)
                        if (inst.fabricObjects[pageIndex]) {
                            console.log(`Page ${pageNum} already rendered, skipping...`);
                            if (progressCallback) {
                                progressCallback(pageNum, inst.number_of_pages, 'cached');
                            }
                            continue;
                        }
                        
                        console.log(`Rendering page ${pageNum} in background...`);
                        if (progressCallback) {
                            progressCallback(pageNum, inst.number_of_pages, 'rendering');
                        }
                        
                        // Render the page in background
                        await new Promise((resolveRender, rejectRender) => {
                            inst.pdf.getPage(pageNum).then(function(page) {
                                var viewport = page.getViewport({ scale: scale });
                                
                                // Create a temporary canvas for this page
                                var canvas = document.createElement('canvas');
                                canvas.id = 'page-' + pageNum + '-canvas';
                                canvas.className = 'pdf-canvas';
                                
                                // Set canvas size to match viewport width/height (no devicePixelRatio scaling)
                                var outputScale = 1;
                                canvas.width = Math.floor(viewport.width);
                                canvas.height = Math.floor(viewport.height);
                                canvas.style.width = Math.floor(viewport.width) + "px";
                                canvas.style.height = Math.floor(viewport.height) + "px";
                                
                                var context = canvas.getContext('2d');
                                // no DPI scaling
                                
                                var renderContext = {
                                    canvasContext: context,
                                    viewport: viewport
                                };
                                
                                var renderTask = page.render(renderContext);
                                renderTask.promise.then(function() {
                                    // Create fabric object for this page
                                    var background = canvas.toDataURL("image/png", 1.0);
                                    var fabricObj = new fabric.Canvas(canvas.id, {
                                        freeDrawingBrush: {
                                            width: 1,
                                            color: inst.color
                                        },
                                        enableRetinaScaling: false,
                                        width: canvas.width,
                                        height: canvas.height
                                    });
                                    
                                    // Store the fabric object
                                    inst.fabricObjects[pageIndex] = fabricObj;
                                    fabricObj.setBackgroundImage(background, fabricObj.renderAll.bind(fabricObj));
                                    
                                    console.log(`Page ${pageNum} rendered successfully in background`);
                                    resolveRender();
                                }).catch(rejectRender);
                            }).catch(rejectRender);
                        });
                    }
                    
                    console.log(`All pages rendered. Total fabricObjects: ${inst.fabricObjects.length}`);
                    
                    // Restore the original page view if it changed
                    if (inst.current_page !== originalPage) {
                        inst.current_page = originalPage;
                        inst.renderPage(originalPage, scale);
                    }
                    
                    if (progressCallback) {
                        progressCallback(inst.number_of_pages, inst.number_of_pages, 'complete');
                    }
                    
                    resolve();
                } catch (error) {
                    console.error('Error ensuring all pages rendered:', error);
                    reject(error);
                }
            });
        }

        // PDF Preview Modal Functions - Define globally so they're available immediately
        window.openPDFPreviewModal = function() {
            const fileInput = document.getElementById('pdf_file');
            const file = fileInput.files[0];
            
            if (!file) {
                window.showToastr('error', 'Please select a PDF file first');
                return;
            }
            
            if (file.type !== 'application/pdf') {
                window.showToastr('error', 'Please select a valid PDF file');
                return;
            }
            
            // Update modal title with filename
            document.getElementById('pdfFileName').textContent = file.name;
            
            // Show modal
            showModal(document.getElementById('pdfPreviewModal'));
            
            // Load PDF in modal
            loadPDFInModal(file);
        };
        
        window.loadPDFInModal = async function(file) {
            const container = document.getElementById('pdf-preview-container');
            container.innerHTML = '<div class="flex items-center justify-center h-[600px]"><div class="text-center"><i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i><p class="text-lg font-medium">Loading PDF...</p></div></div>';
            
            try {
                const fileReader = new FileReader();
                fileReader.onload = async function() {
                    const pdfData = new Uint8Array(this.result);
                    
                    if (typeof pdfjsLib === 'undefined' || !pdfjsLib || !pdfjsLib.getDocument) {
                        throw new Error('PDF viewer is not loaded on this page.');
                    }
                    
                    const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise;
                    const totalPages = pdf.numPages;
                    
                    // Create PDF viewer with navigation + zoom + page jump
                    container.innerHTML = `
                        <div class="w-full h-[600px] flex flex-col">
                            <div class="bg-gray-50 border-b p-2">
                                <!-- Navigation Row -->
                                <div class="flex items-center justify-between mb-2 flex-wrap gap-4">
                                    <div class="flex items-center gap-2">
                                        <button type="button" id="modal-prev-page" class="btn btn-outline-primary btn-sm disabled:opacity-50" disabled>
                                            <i class="fas fa-chevron-left mr-1"></i>
                                            ${@json(__('campaigns.previous_page'))}
                                        </button>
                                        <span id="modal-page-info" class="text-sm font-medium text-gray-700">${@json(__('campaigns.page'))} 1 ${@json(__('campaigns.of'))} ${totalPages}</span>
                                        <button type="button" id="modal-next-page" class="btn btn-outline-primary btn-sm ${totalPages <= 1 ? 'disabled:opacity-50' : ''}" ${totalPages <= 1 ? 'disabled' : ''}>
                                            ${@json(__('campaigns.next_page'))}
                                            <i class="fas fa-chevron-right ml-1"></i>
                                        </button>
                                    </div>
                                    <!-- Zoom Controls Row -->
                                    <div class="flex items-center justify-center gap-2 flex-wrap">
                                        <button type="button" id="modal-zoom-out" class="btn btn-outline-secondary btn-sm">
                                            <i class="fas fa-search-minus"></i>
                                        </button>
                                        <span id="modal-zoom-label" class="text-sm w-12 text-center font-medium">100%</span>
                                        <button type="button" id="modal-zoom-in" class="btn btn-outline-secondary btn-sm">
                                            <i class="fas fa-search-plus"></i>
                                        </button>
                                        <button type="button" id="modal-fit-width" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-arrows-alt-h mr-1"></i> ${@json(__('campaigns.fit_width'))}
                                        </button>
                                        <button type="button" id="modal-fit-page" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-expand-arrows-alt mr-1"></i> ${@json(__('campaigns.fit_page'))}
                                        </button>
                                        <button type="button" id="modal-zoom-reset" class="btn btn-outline-secondary btn-sm">${@json(__('campaigns.reset'))}</button>
                                    </div>
                                </div>
                                
                            </div>
                            <div id="modal-viewer-wrapper" class="flex-1 overflow-auto bg-gray-100 p-2 md:p-4">
                                <div id="modal-canvas-container">
                                    <canvas id="modal-pdf-canvas" class="border border-gray-300 shadow-lg bg-white"></canvas>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    let currentPage = 1;
                    let scale = 1.0;
                    const MIN_SCALE = 0.25;
                    const MAX_SCALE = 5.0;
                    const SCALE_STEP = 0.1;
                    
                    const renderPage = async (pageNum) => {
                        const canvas = document.getElementById('modal-pdf-canvas');
                        const context = canvas.getContext('2d');
                        
                        const page = await pdf.getPage(pageNum);
                        const viewport = page.getViewport({ scale: scale });
                        
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        
                        const renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        
                        await page.render(renderContext).promise;
                        
                        // Update page info
                        document.getElementById('modal-page-info').textContent = @json(__('campaigns.page')) + ` ${pageNum} ` + @json(__('campaigns.of')) + ` ${totalPages}`;
                        const zoomPercent = Math.round(scale * 100);
                        const zoomLabelEl = document.getElementById('modal-zoom-label');
                        if (zoomLabelEl) zoomLabelEl.textContent = `${zoomPercent}%`;
                        
                        // Update navigation buttons
                        document.getElementById('modal-prev-page').disabled = pageNum <= 1;
                        document.getElementById('modal-next-page').disabled = pageNum >= totalPages;
                        
                    };
                    
                    // Render first page
                    await renderPage(1);
                    
                    // Add event listeners
                    document.getElementById('modal-prev-page').addEventListener('click', async () => {
                        if (currentPage > 1) {
                            currentPage--;
                            await renderPage(currentPage);
                        }
                    });
                    
                    document.getElementById('modal-next-page').addEventListener('click', async () => {
                        if (currentPage < totalPages) {
                            currentPage++;
                            await renderPage(currentPage);
                        }
                    });

                    // Zoom controls
                    const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
                    const rerender = async () => { await renderPage(currentPage); };

                    const fitWidth = async () => {
                        const page = await pdf.getPage(currentPage);
                        const containerEl = document.getElementById('modal-canvas-container');
                        const availableWidth = containerEl ? containerEl.clientWidth : 800;
                        const viewport = page.getViewport({ scale: 1 });
                        scale = clamp(availableWidth / viewport.width, MIN_SCALE, MAX_SCALE);
                        await rerender();
                    };

                    const fitPage = async () => {
                        const page = await pdf.getPage(currentPage);
                        const wrapper = document.getElementById('modal-viewer-wrapper');
                        const availableWidth = wrapper ? wrapper.clientWidth - 24 : 800; // padding
                        const availableHeight = wrapper ? wrapper.clientHeight - 24 : 560;
                        const viewport = page.getViewport({ scale: 1 });
                        const scaleW = availableWidth / viewport.width;
                        const scaleH = availableHeight / viewport.height;
                        scale = clamp(Math.min(scaleW, scaleH), MIN_SCALE, MAX_SCALE);
                        await rerender();
                    };

                    const zoomIn = async () => { scale = clamp(scale + SCALE_STEP, MIN_SCALE, MAX_SCALE); await rerender(); };
                    const zoomOut = async () => { scale = clamp(scale - SCALE_STEP, MIN_SCALE, MAX_SCALE); await rerender(); };
                    const zoomReset = async () => { scale = 1.0; await rerender(); };

                    document.getElementById('modal-zoom-in').addEventListener('click', zoomIn);
                    document.getElementById('modal-zoom-out').addEventListener('click', zoomOut);
                    document.getElementById('modal-zoom-reset').addEventListener('click', zoomReset);
                    document.getElementById('modal-fit-width').addEventListener('click', fitWidth);
                    document.getElementById('modal-fit-page').addEventListener('click', fitPage);

                    // Page jump
                    const pageInput = document.getElementById('modal-page-input');
                    document.getElementById('modal-go-page').addEventListener('click', async () => {
                        const val = parseInt(pageInput.value, 10);
                        if (!isNaN(val)) {
                            const target = clamp(val, 1, totalPages);
                            if (target !== currentPage) {
                                currentPage = target;
                                await rerender();
                            }
                        }
                    });
                    pageInput.addEventListener('keydown', async (e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            const val = parseInt(pageInput.value, 10);
                            if (!isNaN(val)) {
                                const target = clamp(val, 1, totalPages);
                                if (target !== currentPage) {
                                    currentPage = target;
                                    await rerender();
                                }
                            }
                        }
                    });

                    // Keyboard shortcuts
                    const keyHandler = async (e) => {
                        if (e.ctrlKey || e.metaKey) {
                            if (e.key === '=' || e.key === '+') { e.preventDefault(); await zoomIn(); }
                            if (e.key === '-') { e.preventDefault(); await zoomOut(); }
                            if (e.key === '0') { e.preventDefault(); await zoomReset(); }
                        } else {
                            if (e.key === 'ArrowRight' || e.key === 'PageDown') {
                                if (currentPage < totalPages) { currentPage++; await rerender(); }
                            }
                            if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
                                if (currentPage > 1) { currentPage--; await rerender(); }
                            }
                        }
                    };
                    const modalEl = document.getElementById('pdfPreviewModal');
                    modalEl.addEventListener('keydown', keyHandler);

                    // Mouse wheel zoom with Ctrl/Cmd
                    const wrapperEl = document.getElementById('modal-viewer-wrapper');
                    wrapperEl.addEventListener('wheel', async (e) => {
                        if (e.ctrlKey || e.metaKey) {
                            e.preventDefault();
                            if (e.deltaY < 0) { await zoomIn(); } else { await zoomOut(); }
                        }
                    }, { passive: false });

                    // Fit to width on first open for better UX
                    await fitWidth();
                    
                };
                fileReader.readAsArrayBuffer(file);
                
            } catch (error) {
                console.error('Error loading PDF:', error);
                container.innerHTML = `
                    <div class="flex items-center justify-center h-[600px]">
                            <div class="text-center text-red-500">
                                <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
                                <p class="text-lg font-medium">${@json(__('campaigns.error_loading_pdf'))}</p>
                                <p class="text-sm">${error.message}</p>
                            </div>
                    </div>
                `;
            }
        };

        $(function() {
            // Mobile Stepper Animation
            let currentMobileStep = 0;
            const mobileSteps = [
                { number: '01', title: @json(__('campaigns.import_numbers')), subtitle: @json(__('campaigns.enter_whatsapp_numbers')) },
                { number: '02', title: @json(__('campaigns.import_file')), subtitle: @json(__('campaigns.add_pdf')) },
                { number: '03', title: @json(__('campaigns.add_message')), subtitle: @json(__('campaigns.create_message')) },
                { number: '04', title: @json(__('campaigns.send_invitation')), subtitle: @json(__('campaigns.send_invitation')) }
            ];

            function updateMobileStepper(stepIndex) {
                const step = mobileSteps[stepIndex];
                const circle = document.getElementById('mobile-step-circle');
                const number = document.getElementById('mobile-step-number');
                const title = document.getElementById('mobile-step-title');
                const subtitle = document.getElementById('mobile-step-subtitle');
                const dots = document.querySelectorAll('.step-dot');
                const progressFill = document.getElementById('mobile-progress-fill');

                // Add slide animation
                if (circle) {
                    circle.style.transform = 'scale(0.8)';
                    circle.style.transition = 'all 0.3s ease';
                    
                    setTimeout(() => {
                        if (number) number.textContent = step.number;
                        if (title) title.textContent = step.title;
                        if (subtitle) subtitle.textContent = step.subtitle;
                        
                        circle.style.transform = 'scale(1)';
                    }, 150);
                }

                // Update progress bar
                if (progressFill) {
                    const progressWidth = ((stepIndex + 1) / mobileSteps.length) * 100;
                    progressFill.style.width = progressWidth + '%';
                }

                // Update progress dots with animation
                dots.forEach((dot, index) => {
                    if (index <= stepIndex) {
                        dot.classList.remove('bg-gray-300');
                        dot.classList.add('bg-primary', 'active');
                        // Add bounce animation for active dots
                        if (index === stepIndex) {
                            dot.style.animation = 'none';
                            setTimeout(() => {
                                dot.style.animation = 'pulse 0.6s ease-out';
                            }, 10);
                        }
                    } else {
                        dot.classList.remove('bg-primary', 'active');
                        dot.classList.add('bg-gray-300');
                        dot.style.animation = 'none';
                    }
                });

                // Add slide animation to the entire stepper
                const stepperContainer = document.querySelector('.bg-surface-2\\/30');
                if (stepperContainer) {
                    stepperContainer.classList.add('mobile-stepper-slide');
                    setTimeout(() => {
                        stepperContainer.classList.remove('mobile-stepper-slide');
                    }, 500);
                }
            }

            // Function to sync mobile stepper with actual step content
            function syncMobileStepperWithContent() {
                console.log('Syncing mobile stepper...');
                
                // Method 1: Check which content is currently visible
                const contents = [
                    document.getElementById('import-numbers'),
                    document.getElementById('import-file'),
                    document.getElementById('add-message'),
                    document.getElementById('send-invitation')
                ];
                
                let activeStepIndex = 0;
                let foundVisible = false;
                
                // Check each content div to see which one is visible
                contents.forEach((content, index) => {
                    if (content) {
                        const computedStyle = window.getComputedStyle(content);
                        const isVisible = computedStyle.display !== 'none' && 
                                        !content.classList.contains('d-none') && 
                                        computedStyle.visibility !== 'hidden' &&
                                        computedStyle.opacity !== '0';
                        
                        console.log(`Step ${index}: ${content.id} - visible: ${isVisible}, display: ${computedStyle.display}`);
                        
                        if (isVisible) {
                            activeStepIndex = index;
                            foundVisible = true;
                        }
                    }
                });
                
                // Method 2: Check for active step in the stepper
                const activeStep = document.querySelector('.step.active, [data-step-index].active');
                if (activeStep) {
                    const stepIndex = parseInt(activeStep.getAttribute('data-step-index'));
                    if (!isNaN(stepIndex)) {
                        activeStepIndex = stepIndex;
                        foundVisible = true;
                        console.log(`Found active step: ${stepIndex}`);
                    }
                }
                
                // Method 3: Check for any content with display: block or visible
                const allContents = document.querySelectorAll('.content');
                allContents.forEach((content, index) => {
                    const computedStyle = window.getComputedStyle(content);
                    if (computedStyle.display === 'block' || 
                        computedStyle.display === 'flex' || 
                        computedStyle.display === 'grid') {
                        activeStepIndex = index;
                        foundVisible = true;
                        console.log(`Found visible content at index: ${index}`);
                    }
                });
                
                console.log(`Active step index: ${activeStepIndex}, Current mobile step: ${currentMobileStep}`);
                
                // Update mobile stepper if step has changed
                if (activeStepIndex !== currentMobileStep) {
                    console.log(`Updating mobile stepper from ${currentMobileStep} to ${activeStepIndex}`);
                    currentMobileStep = activeStepIndex;
                    updateMobileStepper(currentMobileStep);
                }
            }

            // Simple approach: Control mobile stepper directly with Next/Previous buttons
            // Override the existing stepper functions to update mobile stepper
            const originalNextStep = window.nextStep;
            const originalPrevStep = window.prevStep;

            window.nextStep = function() {
                if (originalNextStep) originalNextStep();
                if (currentMobileStep < mobileSteps.length - 1) {
                    currentMobileStep++;
                    updateMobileStepper(currentMobileStep);
                }
            };

            window.prevStep = function() {
                if (originalPrevStep) originalPrevStep();
                if (currentMobileStep > 0) {
                    currentMobileStep--;
                    updateMobileStepper(currentMobileStep);
                }
            };

            // Also listen for Next/Previous button clicks directly
            document.addEventListener('click', function(e) {
                if (e.target.closest('.btn-next') || e.target.closest('[onclick*="nextStep"]')) {
                    if (currentMobileStep < mobileSteps.length - 1) {
                        currentMobileStep++;
                        updateMobileStepper(currentMobileStep);
                    }
                }
                if (e.target.closest('.btn-prev') || e.target.closest('[onclick*="prevStep"]')) {
                    if (currentMobileStep > 0) {
                        currentMobileStep--;
                        updateMobileStepper(currentMobileStep);
                    }
                }
            });

            // Listen for step changes in the existing stepper
            document.addEventListener('DOMContentLoaded', function() {
                // Initial sync with delay to ensure DOM is ready
                setTimeout(syncMobileStepperWithContent, 100);
                setTimeout(syncMobileStepperWithContent, 500);
                setTimeout(syncMobileStepperWithContent, 1000);
                
                // Check for step changes every 200ms (more frequent)
                setInterval(syncMobileStepperWithContent, 200);
                
                // Also listen for clicks on step triggers
                document.querySelectorAll('[data-step-index]').forEach(trigger => {
                    trigger.addEventListener('click', function() {
                        const stepIndex = parseInt(this.getAttribute('data-step-index'));
                        currentMobileStep = stepIndex;
                        updateMobileStepper(currentMobileStep);
                    });
                });
                
                // Watch for DOM changes to detect step changes
                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && 
                            (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
                            // Check if any step became active
                            setTimeout(syncMobileStepperWithContent, 50);
                        }
                    });
                });
                
                // Observe the stepper container for changes
                const stepperContainer = document.querySelector('.bs-stepper, .tw-stepper');
                if (stepperContainer) {
                    observer.observe(stepperContainer, {
                        attributes: true,
                        childList: true,
                        subtree: true
                    });
                }
                
                // Also observe all content divs
                const contentDivs = document.querySelectorAll('.content');
                contentDivs.forEach(div => {
                    observer.observe(div, {
                        attributes: true,
                        attributeFilter: ['style', 'class']
                    });
                });
            });
            
            // Add manual sync function for debugging
            window.syncMobileStepper = syncMobileStepperWithContent;
            
            // Add manual step override function
            window.setMobileStep = function(stepIndex) {
                if (stepIndex >= 0 && stepIndex < mobileSteps.length) {
                    currentMobileStep = stepIndex;
                    updateMobileStepper(currentMobileStep);
                    console.log(`Manually set mobile step to: ${stepIndex}`);
                }
            };
            
            // Add function to check current step
            window.getCurrentStep = function() {
                console.log(`Current mobile step: ${currentMobileStep}`);
                console.log(`Current step content: ${mobileSteps[currentMobileStep].title}`);
                return currentMobileStep;
            };

            // Initialize mobile stepper - check what content is actually visible
            // If "Attach PDF" content is visible, start at step 2
            const importFileContent = document.getElementById('import-file');
            if (importFileContent) {
                const computedStyle = window.getComputedStyle(importFileContent);
                if (computedStyle.display !== 'none' && !importFileContent.classList.contains('d-none')) {
                    // Step 2 is visible, so start mobile stepper at step 2
                    currentMobileStep = 1;
                    updateMobileStepper(1);
                } else {
                    // Step 1 is visible, start at step 1
                    updateMobileStepper(0);
                }
            } else {
                updateMobileStepper(0);
            }

            // Preserve page scroll while invoking PDF actions
            const runWithoutPageScroll = async (event, action) => {
                if (event && typeof event.preventDefault === 'function') event.preventDefault();
                if (event && typeof event.stopPropagation === 'function') event.stopPropagation();
                const prevX = window.scrollX;
                const prevY = window.scrollY;
                try {
                    const result = action && action();
                    if (result && typeof result.then === 'function') await result;
                } finally {
                    window.scrollTo(prevX, prevY);
                }
            };

            // PDF Controls Event Listeners for Step 4 (using PDF.js like step 2)
            const MIN_SCALE = 0.25;
            const MAX_SCALE = 5.0;
            const SCALE_STEP = 0.1;
            const clamp = (val, min, max) => Math.min(Math.max(val, min), max);

            document.getElementById('nextPage').onclick = function(e) {
                runWithoutPageScroll(e, async function() {
                    if (!(await ensureStep4Loaded())) {
                        window.showToastr('error', 'PDF not loaded yet');
                        return;
                    }
                    
                    // Handle PDFAnnotate
                    if (window.PDFAnnotateInstance) {
                        if (window.PDFAnnotateInstance.current_page < window.PDFAnnotateInstance.number_of_pages) {
                            window.PDFAnnotateInstance.current_page++;
                            if (window.PDF_FIT_MODE === 'width') {
                                await window.PDFAnnotateInstance.fitWidth();
                            } else if (window.PDF_FIT_MODE === 'page') {
                                await window.PDFAnnotateInstance.fitPage();
                            } else {
                                window.PDFAnnotateInstance.renderPage(window.PDFAnnotateInstance.current_page, window.PDFAnnotateInstance.current_scale);
                            }
                            window.PDFAnnotateInstance.updatePaginationButtons();
                            window.PDFAnnotateInstance.updateInlineUI();
                        }
                    }
                    // Handle PDF.js fallback
                    else if (step4CurrentPage < step4TotalPages) {
                        step4CurrentPage++;
                        if (window.PDF_FIT_MODE === 'width') {
                            const page = await step4PDF.getPage(step4CurrentPage);
                            const containerEl = document.getElementById('step4-canvas-container');
                            const availableWidth = containerEl ? containerEl.clientWidth : 800;
                            const viewport = page.getViewport({ scale: 1 });
                            step4Scale = Math.min(Math.max(availableWidth / viewport.width, 0.25), 5);
                        } else if (window.PDF_FIT_MODE === 'page') {
                            const page = await step4PDF.getPage(step4CurrentPage);
                            const wrapper = document.getElementById('step4-viewer-wrapper');
                            const availableWidth = wrapper ? wrapper.clientWidth - 24 : 800;
                            const availableHeight = wrapper ? wrapper.clientHeight - 24 : 400;
                            const viewport = page.getViewport({ scale: 1 });
                            const scaleW = availableWidth / viewport.width;
                            const scaleH = availableHeight / viewport.height;
                            step4Scale = Math.min(Math.max(Math.min(scaleW, scaleH), 0.25), 5);
                        }
                        await renderStep4Page(step4CurrentPage);
                    }
                });
            };

            document.getElementById('prevPage').onclick = function(e) {
                runWithoutPageScroll(e, async function() {
                    if (!(await ensureStep4Loaded())) {
                        window.showToastr('error', 'PDF not loaded yet');
                        return;
                    }
                    
                    // Handle PDFAnnotate
                    if (window.PDFAnnotateInstance) {
                        if (window.PDFAnnotateInstance.current_page > 1) {
                            window.PDFAnnotateInstance.current_page--;
                            if (window.PDF_FIT_MODE === 'width') {
                                await window.PDFAnnotateInstance.fitWidth();
                            } else if (window.PDF_FIT_MODE === 'page') {
                                await window.PDFAnnotateInstance.fitPage();
                            } else {
                                window.PDFAnnotateInstance.renderPage(window.PDFAnnotateInstance.current_page, window.PDFAnnotateInstance.current_scale);
                            }
                            window.PDFAnnotateInstance.updatePaginationButtons();
                            window.PDFAnnotateInstance.updateInlineUI();
                        }
                    }
                    // Handle PDF.js fallback
                    else if (step4CurrentPage > 1) {
                        step4CurrentPage--;
                        if (window.PDF_FIT_MODE === 'width') {
                            const page = await step4PDF.getPage(step4CurrentPage);
                            const containerEl = document.getElementById('step4-canvas-container');
                            const availableWidth = containerEl ? containerEl.clientWidth : 800;
                            const viewport = page.getViewport({ scale: 1 });
                            step4Scale = Math.min(Math.max(availableWidth / viewport.width, 0.25), 5);
                        } else if (window.PDF_FIT_MODE === 'page') {
                            const page = await step4PDF.getPage(step4CurrentPage);
                            const wrapper = document.getElementById('step4-viewer-wrapper');
                            const availableWidth = wrapper ? wrapper.clientWidth - 24 : 800;
                            const availableHeight = wrapper ? wrapper.clientHeight - 24 : 400;
                            const viewport = page.getViewport({ scale: 1 });
                            const scaleW = availableWidth / viewport.width;
                            const scaleH = availableHeight / viewport.height;
                            step4Scale = Math.min(Math.max(Math.min(scaleW, scaleH), 0.25), 5);
                        }
                        await renderStep4Page(step4CurrentPage);
                    }
                });
            };

            document.getElementById('inline-zoom-in').onclick = function(e) {
                runWithoutPageScroll(e, async function() {
                    if (!(await ensureStep4Loaded())) {
                        window.showToastr('error', 'PDF not loaded yet');
                        return;
                    }
                    
                    // Handle PDFAnnotate
                    if (window.PDFAnnotateInstance) {
                        const oldScale = window.PDFAnnotateInstance.current_scale;
                        window.PDFAnnotateInstance.current_scale = clamp(window.PDFAnnotateInstance.current_scale + SCALE_STEP, MIN_SCALE, MAX_SCALE);
                        console.log('Zoom In: Scale changed from', oldScale, 'to', window.PDFAnnotateInstance.current_scale);
                        window.PDFAnnotateInstance.renderPage(window.PDFAnnotateInstance.current_page, window.PDFAnnotateInstance.current_scale);
                        window.PDFAnnotateInstance.updateInlineUI();
                    }
                    // Handle PDF.js fallback
                    else {
                        step4Scale = clamp(step4Scale + SCALE_STEP, MIN_SCALE, MAX_SCALE);
                        await renderStep4Page(step4CurrentPage);
                    }
                });
            };

            document.getElementById('inline-zoom-out').onclick = function(e) {
                runWithoutPageScroll(e, async function() {
                    if (!(await ensureStep4Loaded())) {
                        window.showToastr('error', 'PDF not loaded yet');
                        return;
                    }
                    
                    // Handle PDFAnnotate
                    if (window.PDFAnnotateInstance) {
                        const oldScale = window.PDFAnnotateInstance.current_scale;
                        window.PDFAnnotateInstance.current_scale = clamp(window.PDFAnnotateInstance.current_scale - SCALE_STEP, MIN_SCALE, MAX_SCALE);
                        console.log('Zoom Out: Scale changed from', oldScale, 'to', window.PDFAnnotateInstance.current_scale);
                        window.PDFAnnotateInstance.renderPage(window.PDFAnnotateInstance.current_page, window.PDFAnnotateInstance.current_scale);
                        window.PDFAnnotateInstance.updateInlineUI();
                    }
                    // Handle PDF.js fallback
                    else {
                        step4Scale = clamp(step4Scale - SCALE_STEP, MIN_SCALE, MAX_SCALE);
                        await renderStep4Page(step4CurrentPage);
                    }
                });
            };

            document.getElementById('inline-zoom-reset').onclick = function(e) {
                runWithoutPageScroll(e, async function() {
                    if (!(await ensureStep4Loaded())) {
                        window.showToastr('error', 'PDF not loaded yet');
                        return;
                    }
                    
                    // Handle PDFAnnotate
                    if (window.PDFAnnotateInstance) {
                        window.PDFAnnotateInstance.current_scale = 1.0;
                        window.PDFAnnotateInstance.current_page = 1;
                        window.PDFAnnotateInstance.renderPage(window.PDFAnnotateInstance.current_page, window.PDFAnnotateInstance.current_scale);
                        window.PDFAnnotateInstance.updatePaginationButtons();
                        window.PDFAnnotateInstance.updateInlineUI();
                    }
                    // Handle PDF.js fallback
                    else {
                        step4Scale = 1.0;
                        step4CurrentPage = 1;
                        await renderStep4Page(step4CurrentPage);
                    }
                    window.showToastr('success', 'All controls reset successfully');
                });
            };

            document.getElementById('inline-fit-width').onclick = function(e) {
                runWithoutPageScroll(e, async function() {
                    if (!(await ensureStep4Loaded())) {
                        window.showToastr('error', 'PDF not loaded yet');
                        return;
                    }
                    
                    // Handle PDFAnnotate
                    if (window.PDFAnnotateInstance) {
                        try {
                            window.PDF_FIT_MODE = 'width';
                            await window.PDFAnnotateInstance.fitWidth();
                            window.PDFAnnotateInstance.updateInlineUI();
                        } catch (error) {
                            console.error('Error in fit width:', error);
                            window.showToastr('error', 'Error fitting to width');
                        }
                    }
                    // Handle PDF.js fallback
                    else {
                        window.PDF_FIT_MODE = 'width';
                        const page = await step4PDF.getPage(step4CurrentPage);
                        const containerEl = document.getElementById('step4-canvas-container');
                        const availableWidth = containerEl ? containerEl.clientWidth : 800;
                        const viewport = page.getViewport({ scale: 1 });
                        step4Scale = clamp(availableWidth / viewport.width, MIN_SCALE, MAX_SCALE);
                        await renderStep4Page(step4CurrentPage);
                    }
                });
            };

            document.getElementById('inline-fit-page').onclick = function(e) {
                runWithoutPageScroll(e, async function() {
                    if (!(await ensureStep4Loaded())) {
                        window.showToastr('error', 'PDF not loaded yet');
                        return;
                    }
                    
                    // Handle PDFAnnotate
                    if (window.PDFAnnotateInstance) {
                        try {
                            window.PDF_FIT_MODE = 'page';
                            await window.PDFAnnotateInstance.fitPage();
                            window.PDFAnnotateInstance.updateInlineUI();
                        } catch (error) {
                            console.error('Error in fit page:', error);
                            window.showToastr('error', 'Error fitting to page');
                        }
                    }
                    // Handle PDF.js fallback
                    else {
                        window.PDF_FIT_MODE = 'page';
                        const page = await step4PDF.getPage(step4CurrentPage);
                        const wrapper = document.getElementById('step4-viewer-wrapper');
                        const availableWidth = wrapper ? wrapper.clientWidth - 24 : 800;
                        const availableHeight = wrapper ? wrapper.clientHeight - 24 : 400;
                        const viewport = page.getViewport({ scale: 1 });
                        const scaleW = availableWidth / viewport.width;
                        const scaleH = availableHeight / viewport.height;
                        step4Scale = clamp(Math.min(scaleW, scaleH), MIN_SCALE, MAX_SCALE);
                        await renderStep4Page(step4CurrentPage);
                    }
                });
            };

            window.addVariableOnPreview = function(text) {
                if (!window.PDFAnnotateInstance) {
                    console.error("PDFAnnotateInstance is not initialized.");
                    window.showToastr('error', 'PDFAnnotateInstance is not initialized.');
                    return;
                }

                let inst = window.PDFAnnotateInstance;
                inst.active_tool = 2;

                if (inst.fabricObjects.length > 0) {
                    let fabricObj = inst.fabricObjects[inst.active_canvas];

                    let textObject = new fabric.IText(text, {
                        left: 100,
                        top: 100,
                        fill: inst.color,
                        fontSize: inst.font_size,
                        selectable: true,
                        editable: false,
                    });
                    fabricObj.add(textObject);
                    fabricObj.setActiveObject(textObject);
                    fabricObj.renderAll();

                    hideShowIcons('plus', text);
                    
                    // Show the formatting controls for this variable (accordion)
                    const variableName = text.replace(/[{}]/g, '');
                    const accordionContent = document.getElementById(`accordion-content-${variableName}`);
                    if (accordionContent) {
                        accordionContent.classList.remove('hidden');
                        const arrow = document.getElementById(`accordion-arrow-${variableName}`);
                        if (arrow) {
                            arrow.classList.remove('fa-chevron-down');
                            arrow.classList.add('fa-chevron-up');
                        }
                    }
                }
            };

            window.openTextFormattingPopup = function(variableText) {
                let activeCanvas = window.PDFAnnotateInstance.fabricObjects[window.PDFAnnotateInstance
                    .active_canvas];
                let targetObject = null;

                activeCanvas.getObjects().forEach((obj) => {
                    if (obj.type === "i-text" && obj.text === variableText) {
                        targetObject = obj;
                    }
                });

                if (targetObject) {
                    document.getElementById("font_family").value = targetObject.fontFamily || "Arial";
                    document.getElementById("font_size").value = targetObject.fontSize || 16;
                    document.getElementById("font_color").value = targetObject.fill || "#000000";
                } else {
                    $('#formattingModalForm')[0].reset();
                }

                $('#applyFormatting').attr('data-variable', variableText);
                showModal(document.getElementById('formattingModal'));
            };

            // Update text preview function
            function updateTextPreview() {
                const fontFamily = document.getElementById('font_family').value || 'Arial';
                const fontSize = document.getElementById('font_size').value || '16';
                const fontColor = document.getElementById('font_color').value || '#000000';
                
                const preview = document.getElementById('textPreview');
                if (preview) {
                    preview.style.fontFamily = fontFamily;
                    preview.style.fontSize = fontSize + 'px';
                    preview.style.color = fontColor;
                    preview.textContent = 'Your text will appear here';
                }
            }

            // Add event listeners for real-time preview when modal is shown
            $('#formattingModal').on('modal.shown', function() {
                const fontFamily = document.getElementById('font_family');
                const fontSize = document.getElementById('font_size');
                const fontColor = document.getElementById('font_color');

                if (fontFamily) {
                    fontFamily.removeEventListener('change', updateTextPreview);
                    fontFamily.addEventListener('change', updateTextPreview);
                    // Also listen for input events for custom dropdowns
                    fontFamily.addEventListener('input', updateTextPreview);
                }
                if (fontSize) {
                    fontSize.removeEventListener('change', updateTextPreview);
                    fontSize.addEventListener('change', updateTextPreview);
                    fontSize.addEventListener('input', updateTextPreview);
                }
                if (fontColor) {
                    fontColor.removeEventListener('change', updateTextPreview);
                    fontColor.addEventListener('change', updateTextPreview);
                    fontColor.addEventListener('input', updateTextPreview);
                }
                
                // Initial preview update
                setTimeout(updateTextPreview, 100);
            });

            // Also add a general event listener for any changes
            $(document).on('change input', '#font_family, #font_size, #font_color', function() {
                updateTextPreview();
            });

            window.applyTextFormatting = function() {
                let variableText = document.getElementById("applyFormatting").getAttribute("data-variable");
                let selectedFont = document.getElementById("font_family").value;
                let fontSize = document.getElementById("font_size").value;
                let color = document.getElementById("font_color").value;

                let activeCanvas = window.PDFAnnotateInstance.fabricObjects[window.PDFAnnotateInstance
                    .active_canvas];

                let targetObject = null;
                activeCanvas.getObjects().forEach((obj) => {
                    if (obj.type === "i-text" && obj.text === variableText) {
                        targetObject = obj;
                        obj.set({
                            fontFamily: selectedFont,
                            fontSize: parseInt(fontSize),
                            fill: color,
                            // fontWeight: isBold ? "bold" : "normal",
                            // fontStyle: isItalic ? "italic" : "normal",
                            // underline: isUnderline
                        });
                    }
                });

                if (targetObject) {
                    activeCanvas.setActiveObject(targetObject);
                }

                activeCanvas.renderAll();
                hideModal(document.getElementById('formattingModal'));
            };

            window.deleteVariable = function(variableText) {
                let activeCanvas = window.PDFAnnotateInstance.fabricObjects[window.PDFAnnotateInstance
                    .active_canvas];
                let activeObject = activeCanvas.getActiveObject();

                if (activeObject && activeObject.type === "i-text" && activeObject.text === variableText) {
                    activeCanvas.remove(activeObject);
                } else {
                    let objectsToRemove = activeCanvas.getObjects().filter(obj => obj.type === "i-text" && obj
                        .text === variableText);
                    objectsToRemove.forEach(obj => activeCanvas.remove(obj));
                }
                activeCanvas.renderAll();

                hideShowIcons('delete', variableText);
            };

            window.refreshPDF = function() {
                if (window.PDFAnnotateInstance) {
                    window.PDFAnnotateInstance.refreshPDF();
                } else {
                    console.error('PDFAnnotateInstance not initialized');
                    window.showToastr('error', 'PDF viewer not initialized. Please upload a PDF first.');
                }
            }

            window.getPersonNameForFile = function(replacements, fallbackLabel = @json(__('campaigns.guest'))) {
                const guestLabel = @json(__('campaigns.guest'));
                const ensureSafe = (text) => {
                    if (!text) return guestLabel;
                    // Remove only characters that are invalid in filenames, but keep Unicode letters
                    return text.replace(/[\/\\:*?"<>|]/g, '')  // Remove invalid filename characters
                        .replace(/\s+/g, '_')  // Replace spaces with underscores
                        .replace(/_+/g, '_')   // Collapse multiple underscores
                        .replace(/^_|_$/g, '') // Remove leading/trailing underscores
                        || guestLabel;
                };

                const defaultDisplay = fallbackLabel || guestLabel;
                const defaultSafe = ensureSafe(defaultDisplay);

                if (!replacements || typeof replacements !== 'object') {
                    return {
                        displayName: defaultDisplay,
                        safeName: defaultSafe,
                    };
                }

                const entries = Object.entries(replacements)
                    .map(([key, value]) => {
                        const stringValue = value !== undefined && value !== null ? String(value).trim() : '';
                        return {
                            key,
                            value: stringValue,
                            originalValue: value,
                        };
                    })
                    .filter(({ value }) => value.length > 0);

                const findByKey = (patterns) =>
                    entries.find(({ key }) => {
                        const lowerKey = key.toLowerCase();
                        return patterns.some((pattern) => lowerKey.includes(pattern));
                    });

                let candidate = findByKey(['name']);
                if (!candidate) {
                    candidate = findByKey(['guest', 'contact', 'recipient']);
                }
                if (!candidate && entries.length > 0) {
                    candidate = entries[0];
                }

                const cleanedDisplay = candidate && candidate.value ? candidate.value.trim() : defaultDisplay;
                const safeName = ensureSafe(cleanedDisplay);

                return {
                    displayName: cleanedDisplay || defaultDisplay,
                    safeName: safeName || defaultSafe,
                };
            };

            window.downloadPDF = async function() {
                let pdfData;
                let originalTexts;

                try {
                    showBlockUILoader();

                    // Fetch data from database instead of localStorage
                    const campaignData = await window.fetchCampaignDataFromDatabase();
                    
                    if (!campaignData) {
                        window.showToastr('error', 'Failed to fetch campaign data.');
                        hideBlockUILoader();
                        return;
                    }

                    const excelData = campaignData.contacts_data;
                    const dynamicMsgContent = campaignData.message_template;
                    const sendAsSingleMessage = document.getElementById("sendAsSingleMessage")?.checked ?? true;

                    if (!excelData || excelData.length === 0) {
                        window.showToastr('error', 'No contact data found. Please import contacts in step 1.');
                        hideBlockUILoader();
                        return;
                    }

                    pdfData = window.PDFAnnotateInstance;
                    if (!pdfData) {
                        hideBlockUILoader();
                        window.showToastr('error', 'PDF data is not loaded.');
                        return;
                    }

                    console.log('Download PDF - Ensuring all pages are rendered...');
                    console.log('Download PDF - Total pages in document:', pdfData.number_of_pages);
                    console.log('Download PDF - Currently rendered pages:', pdfData.fabricObjects.length);

                    // Ensure all pages are rendered before processing
                    if (typeof pdfData.ensureAllPagesRendered === 'function') {
                        await pdfData.ensureAllPagesRendered();
                        console.log('Download PDF - All pages now rendered:', pdfData.fabricObjects.length);
                    }

                    originalTexts = pdfData.fabricObjects.map((fabricObj) =>
                        fabricObj.getObjects().map((obj) => (obj.type === "i-text" || obj.type ===
                            "text" ? obj.text : null))
                    );

                    const replacements = excelData[0];
                    console.log('Replacements data:', replacements);

                    pdfData.fabricObjects.forEach((fabricObj, pageIndex) => {
                        console.log(`Processing page ${pageIndex + 1}`);
                        
                        fabricObj.getObjects().forEach((obj, objIndex) => {
                            if (obj.type === "i-text" || obj.type === "text") {
                                obj.text = originalTexts[pageIndex][objIndex];
                            }
                        });

                        fabricObj.getObjects().forEach((obj) => {
                            if (obj.type === "i-text" || obj.type === "text") {
                                const originalText = obj.text;
                                Object.keys(replacements).forEach((placeholder) => {
                                    const regex = new RegExp(
                                        `\\{\\{${placeholder}\\}\\}`, "g");
                                    obj.text = obj.text.replace(regex,
                                        replacements[placeholder]);
                                });
                                if (originalText !== obj.text) {
                                    console.log(`Replaced on page ${pageIndex + 1}: "${originalText}" -> "${obj.text}"`);
                                }
                            }
                        });

                        fabricObj.renderAll();
                    });

                    // Wait for all canvases to finish rendering
                    await new Promise(resolve => setTimeout(resolve, 500));

                    // Generate filename with person's name
                    const { displayName: personName, safeName: safePersonName } = window.getPersonNameForFile(replacements, @json(__('campaigns.guest')));
                    console.log('Download - Person name selected:', personName, 'Safe name:', safePersonName);
                    const fileName = `${safePersonName}.pdf`;
                    console.log('Download - Final filename:', fileName);
                    console.log('Downloading PDF with', pdfData.fabricObjects.length, 'pages');
                    pdfData.downloadPDF(fileName);
                } catch (error) {
                    console.error('Download PDF error:', error);
                    window.showToastr('error', `An error occurred while downloading the PDF: ${error}`);
                } finally {
                    if (pdfData && originalTexts) {
                        pdfData.fabricObjects.forEach((fabricObj, pageIndex) => {
                            fabricObj.getObjects().forEach((obj, objIndex) => {
                                if (obj.type === "i-text" || obj.type === "text") {
                                    obj.text = originalTexts[pageIndex][objIndex];
                                }
                            });
                            fabricObj.renderAll();
                        });
                    }
                    hideBlockUILoader();
                }
            };

            window.sendTestMessage = async function() {
                let pdfData;
                let originalTexts;

                try {
                    const mobileInput = document.getElementById('mobile_number');
                    const mobileNumber = mobileInput.value.trim();

                    const mobileRegex = /^[0-9]{12}$/;
                    if (!mobileRegex.test(mobileNumber)) {
                        mobileInput.classList.add('is-invalid');
                        $('#mobileError').show();
                        return;
                    } else {
                        mobileInput.classList.remove('is-invalid');
                        $('#mobileError').hide();
                    }

                    $('#testMessageModal').block({
                        message: '<div class="spinner-border text-white" role="status"></div>',
                        css: {
                            backgroundColor: 'transparent',
                            border: '0'
                        },
                        overlayCSS: {
                            opacity: 0.5
                        }
                    });

                    // Fetch data from database instead of localStorage
                    const campaignData = await window.fetchCampaignDataFromDatabase();
                    
                    if (!campaignData) {
                        $('#testMessageModal').unblock();
                        window.showToastr('error', 'Failed to fetch campaign data.');
                        return;
                    }

                    const excelData = campaignData.contacts_data;
                    const dynamicMsgContent = campaignData.message_template;
                    const sendAsSingleMessage = document.getElementById("sendAsSingleMessage")?.checked ?? true;

                    if (!excelData || excelData.length === 0) {
                        $('#testMessageModal').unblock();
                        window.showToastr('error', 'No contact data found. Please import contacts in step 1.');
                        return;
                    }

                    if (!dynamicMsgContent) {
                        $('#testMessageModal').unblock();
                        window.showToastr('error', 'No message template found. Please add a message in step 3.');
                        return;
                    }

                    pdfData = window.PDFAnnotateInstance;
                    if (!pdfData) {
                        $('#testMessageModal').unblock();
                        window.showToastr('error', 'PDF data is not loaded.');
                        return;
                    }

                    console.log('Test Message - Ensuring all pages are rendered...');
                    console.log('Test Message - Total pages in document:', pdfData.number_of_pages);
                    console.log('Test Message - Currently rendered pages:', pdfData.fabricObjects.length);

                    // Ensure all pages are rendered before processing
                    if (typeof pdfData.ensureAllPagesRendered === 'function') {
                        await pdfData.ensureAllPagesRendered();
                        console.log('Test Message - All pages now rendered:', pdfData.fabricObjects.length);
                    }

                    originalTexts = pdfData.fabricObjects.map((fabricObj) =>
                        fabricObj.getObjects().map((obj) => (obj.type === "i-text" || obj.type ===
                            "text" ? obj.text : null))
                    );

                    const replacements = excelData[0];
                    console.log('Test Message - Replacements data:', replacements);

                    pdfData.fabricObjects.forEach((fabricObj, pageIndex) => {
                        console.log(`Test Message - Processing page ${pageIndex + 1}`);
                        
                        fabricObj.getObjects().forEach((obj, objIndex) => {
                            if (obj.type === "i-text" || obj.type === "text") {
                                obj.text = originalTexts[pageIndex][objIndex];
                            }
                        });

                        fabricObj.getObjects().forEach((obj) => {
                            if (obj.type === "i-text" || obj.type === "text") {
                                const originalText = obj.text;
                                Object.keys(replacements).forEach((placeholder) => {
                                    const regex = new RegExp(
                                        `\\{\\{${placeholder}\\}\\}`, "g");
                                    obj.text = obj.text.replace(regex,
                                        replacements[placeholder]);
                                });
                                if (originalText !== obj.text) {
                                    console.log(`Test Message - Replaced on page ${pageIndex + 1}: "${originalText}" -> "${obj.text}"`);
                                }
                            }
                        });

                        fabricObj.renderAll();
                    });

                    // Wait for all canvases to finish rendering
                    await new Promise(resolve => setTimeout(resolve, 500));

                    // Generate filename with person's name
                    const { displayName: personName, safeName: safePersonName } = window.getPersonNameForFile(replacements, @json(__('campaigns.guest')));
                    console.log('Test Message - Person name selected:', personName, 'Safe name:', safePersonName);
                    const fileName = `${safePersonName}.pdf`;
                    console.log('Test Message - Final filename:', fileName);
                    console.log('Test Message - Generating PDF with', pdfData.fabricObjects.length, 'pages');
                    const pdfBase64 = await pdfData.savePdf(fileName);

                    const response = await fetch(
                        `${window.siteurl}/admin/events/${eventId}/campaigns/${campaignId}/send-test-message`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                    .content,
                            },
                            body: JSON.stringify({
                                pdf: pdfBase64,
                                fileName: fileName,
                                excelRowData: replacements,
                                dynamicMsgContent: dynamicMsgContent,
                                mobileNumber: mobileNumber,
                                sendAsSingleMessage: sendAsSingleMessage,
                            }),
                        });

                    const data = await response.json();
                    if (data.success) {
                        window.showToastr('success', `${data.message}`);
                        hideModal(document.getElementById('testMessageModal'));
                        $('#testMessageForm')[0].reset();
                        $('#mobileError').hide();
                    } else {
                        const errorMessage = data.error || data.message || 'Unknown error';
                        console.error(`Error saving PDF for test message:`, errorMessage, data);
                        window.showToastr('error', `Error saving PDF for test message: ${errorMessage}`);
                    }

                } catch (error) {
                    console.error('Test Message error:', error);
                    window.showToastr('error', `An error occurred while saving the PDF: ${error}`);
                } finally {
                    if (pdfData && originalTexts) {
                        pdfData.fabricObjects.forEach((fabricObj, pageIndex) => {
                            fabricObj.getObjects().forEach((obj, objIndex) => {
                                if (obj.type === "i-text" || obj.type === "text") {
                                    obj.text = originalTexts[pageIndex][objIndex];
                                }
                            });
                            fabricObj.renderAll();
                        });
                    }
                    $('#testMessageModal').unblock();
                }
            };

            window.savePDF = async function() {
                try {
                    showBlockUILoader();

                    // Fetch data from database instead of localStorage
                    const campaignData = await window.fetchCampaignDataFromDatabase();
                    
                    if (!campaignData) {
                        console.error("Failed to fetch campaign data.");
                        hideBlockUILoader();
                        window.showToastr('error', 'Failed to fetch campaign data.');
                        return;
                    }

                    const excelData = campaignData.contacts_data;
                    const dynamicMsgContent = campaignData.message_template;

                    if (!excelData || excelData.length === 0) {
                        console.error("No contact data found in database.");
                        hideBlockUILoader();
                        window.showToastr('error', 'No contact data found. Please import contacts in step 1.');
                        return;
                    }

                    const pdfData = window.PDFAnnotateInstance;
                    if (!pdfData) {
                        console.error("PDF data is not loaded.");
                        hideBlockUILoader();
                        window.showToastr('error', 'PDF data is not loaded.');
                        return;
                    }

                    console.log('Save PDF - Ensuring all pages are rendered...');
                    console.log('Save PDF - Total pages in document:', pdfData.number_of_pages);
                    console.log('Save PDF - Currently rendered pages:', pdfData.fabricObjects.length);
                    console.log('Save PDF - Total contacts:', excelData.length);

                    // Ensure all pages are rendered before processing
                    if (typeof pdfData.ensureAllPagesRendered === 'function') {
                        await pdfData.ensureAllPagesRendered();
                        console.log('Save PDF - All pages now rendered:', pdfData.fabricObjects.length);
                    }

                    const originalTexts = pdfData.fabricObjects.map((fabricObj) =>
                        fabricObj.getObjects().map((obj) => (obj.type === "i-text" || obj.type ===
                            "text" ? obj.text : null))
                    );

                    // Process all PDFs in parallel to speed up execution
                    const promises = excelData.map(async (replacements, i) => {
                        console.log(`Save PDF - Processing contact ${i + 1}/${excelData.length}`);
                        
                        pdfData.fabricObjects.forEach((fabricObj, pageIndex) => {
                            fabricObj.getObjects().forEach((obj, objIndex) => {
                                if (obj.type === "i-text" || obj.type ===
                                    "text") {
                                    obj.text = originalTexts[pageIndex][
                                        objIndex];
                                }
                            });

                            fabricObj.getObjects().forEach((obj) => {
                                if (obj.type === "i-text" || obj.type ===
                                    "text") {
                                    const originalText = obj.text;
                                    Object.keys(replacements).forEach((
                                        placeholder) => {
                                        const regex = new RegExp(
                                            `\\{\\{${placeholder}\\}\\}`,
                                            "g");
                                        obj.text = obj.text.replace(
                                            regex, replacements[
                                                placeholder]);
                                    });
                                    if (i === 0 && originalText !== obj.text && pageIndex === 0) {
                                        console.log(`Save PDF - Replaced on page ${pageIndex + 1}: "${originalText}" -> "${obj.text}"`);
                                    }
                                }
                            });

                            fabricObj.renderAll();
                        });

                        // Wait for canvas to render
                        await new Promise(resolve => setTimeout(resolve, 300));

                        // Generate filename with person's name
                        const { displayName: personName, safeName: safePersonName } = window.getPersonNameForFile(replacements, `Contact_${i + 1}`);
                        const fileName = `${safePersonName}.pdf`;
                        console.log(`Save PDF - Generating PDF ${i + 1} (${personName}) with ${pdfData.fabricObjects.length} pages`);
                        const pdfBase64 = await pdfData.savePdf(fileName);

                        try {
                            const response = await fetch(
                                `${window.siteurl}/admin/events/${eventId}/campaigns/${campaignId}/send-updated-pdf`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': document.querySelector(
                                            'meta[name="csrf-token"]').content,
                                    },
                                    body: JSON.stringify({
                                        pdf: pdfBase64,
                                        fileName: fileName,
                                        excelRowData: replacements,
                                        dynamicMsgContent: dynamicMsgContent,
                                    }),
                                });

                            const data = await response.json();
                            if (data.success) {} else {
                                console.error(`Error saving PDF for record ${i + 1}:`, data
                                    .error);
                                window.showToastr('error',
                                    `Error saving PDF for record ${i + 1}: ${data.error}`);
                            }
                        } catch (error) {
                            console.error(
                                `Error occurred while saving PDF for record ${i + 1}:`,
                                error);
                            window.showToastr('error',
                                `Error occurred while saving PDF for record ${i + 1}: ${error}`
                                );
                        }
                    });

                    // Wait for all PDFs to be processed in parallel
                    await Promise.allSettled(promises);

                    window.location.href = `{{ route('campaigns.invitation.report', $campaign->id) }}`;

                } catch (error) {
                    console.error("An error occurred while saving the PDFs:", error);
                    window.showToastr('error', `An error occurred while saving the PDFs: ${error}`);
                } finally {
                    hideBlockUILoader();
                }
            };

            // Step 4 PDF viewer using same approach as step 2 modal
            let step4PDF = null;
            let step4CurrentPage = 1;
            let step4Scale = 1.0;
            let step4TotalPages = 0;
            // Track how the canvas should adapt on resize: 'width' | 'page' | null
            window.PDF_FIT_MODE = window.PDF_FIT_MODE || null;

            window.loadPDFFromStep2 = async function() {
                const container = document.getElementById('pdf-container');
                if (!container) return;

                // Try to get PDF file from step 2 input
                const pdfFileInput = document.getElementById('pdf_file');
                if (pdfFileInput && pdfFileInput.files && pdfFileInput.files[0]) {
                    const pdfFile = pdfFileInput.files[0];
                    await loadPDFInStep4(pdfFile);
                    return;
                }

                // Fallback: try database loading using PDF.js
                await loadPDFFromDatabaseWithPDFJS();

                // Show no PDF message
                container.innerHTML = `
                    <div class="flex items-center justify-center h-[400px]">
                        <div class="text-center text-gray-500">
                            <i class="fas fa-file-pdf text-4xl mb-4"></i>
                            <p class="text-lg font-medium">${@json(__('campaigns.no_pdf_loaded'))}</p>
                            <p class="text-sm">${@json(__('campaigns.please_upload_pdf_step_2'))}</p>
                        </div>
                    </div>
                `;
            };

            const loadPDFFromDatabaseWithPDFJS = async function() {
                try {
                    if (typeof window.fetchCampaignDataFromDatabase !== 'function') return;
                    const container = document.getElementById('pdf-container');
                    if (container) {
                        container.innerHTML = '<div class="flex items-center justify-center h-[400px]"><div class="text-center"><i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i><p class="text-lg font-medium">Loading PDF...</p></div></div>';
                    }
                    const data = await window.fetchCampaignDataFromDatabase();
                    if (!data || !data.pdf_path) return;
                    const pdfUrl = (window.siteurl || '') + '/storage/' + data.pdf_path;
                    
                    // Try to load with PDFAnnotate first
                    try {
                        // Clear the container and reuse existing element
                        container.innerHTML = '';
                        
                        // Initialize PDFAnnotate instance
                        if (window.PDFAnnotateInstance) {
                            window.PDFAnnotateInstance = null;
                        }
                        
                        window.PDFAnnotateInstance = new PDFAnnotate('pdf-container', pdfUrl, {
                            scale: 1.4,
                            pageImageCompression: "MEDIUM"
                        });
                        
                        console.log('PDF loaded successfully with PDFAnnotate from database');
                        
                        // Wait a bit for PDFAnnotate to initialize, then auto fit to width and update UI
                        setTimeout(async () => {
                            try {
                                window.PDF_FIT_MODE = 'width';
                                await window.PDFAnnotateInstance.fitWidth();
                            } catch (e) {}
                            updateStep4UI();
                        }, 500);
                        
                        // Load dynamic variables after PDF is loaded
                        if (typeof window.displayHeadingValues === 'function') {
                            await window.displayHeadingValues();
                        }
                        
                    } catch (pdfAnnotateError) {
                        console.log('PDFAnnotate failed, falling back to PDF.js:', pdfAnnotateError);
                        // Fallback to PDF.js
                        const resp = await fetch(pdfUrl, { credentials: 'same-origin' });
                        const buf = await resp.arrayBuffer();
                        const file = new Blob([buf], { type: 'application/pdf' });
                        await loadPDFInStep4WithPDFJS(file);
                    }
                } catch (e) {
                    console.error('Failed loading PDF from DB:', e);
                }
            };

            const loadPDFInStep4 = async function(file) {
                return new Promise((resolve, reject) => {
            const container = document.getElementById('pdf-container');
            container.innerHTML = '<div class="flex items-center justify-center h-[400px]"><div class="text-center"><i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i><p class="text-lg font-medium">' + @json(__('campaigns.loading_pdf')) + '</p></div></div>';

                    try {
                        const fileReader = new FileReader();
                        fileReader.onload = async function() {
                            try {
                                // Create a blob URL for the PDF file
                                const blob = new Blob([this.result], { type: 'application/pdf' });
                                const pdfUrl = URL.createObjectURL(blob);
                                
                                // Clear the container and reuse existing element
                                container.innerHTML = '';
                                
                                // Initialize PDFAnnotate instance
                                if (window.PDFAnnotateInstance) {
                                    window.PDFAnnotateInstance = null;
                                }
                                
                                window.PDFAnnotateInstance = new PDFAnnotate('pdf-container', pdfUrl, {
                                    scale: 1.4,
                                    pageImageCompression: "MEDIUM"
                                });
                                
                                console.log('Step 4 PDF loaded successfully with PDFAnnotate');
                                
                                // Wait a bit for PDFAnnotate to initialize, then auto fit to width and update UI
                                setTimeout(async () => {
                                    try {
                    					window.PDF_FIT_MODE = 'width';
                                        await window.PDFAnnotateInstance.fitWidth();
                                    } catch (e) {}
                                    updateStep4UI();
                                }, 500);
                                
                                // Load dynamic variables after PDF is loaded
                                if (typeof window.displayHeadingValues === 'function') {
                                    await window.displayHeadingValues();
                                }
                                
                                resolve(true);
                            } catch (innerErr) {
                                console.error('Error loading PDF with PDFAnnotate:', innerErr);
                                // Fallback to PDF.js if PDFAnnotate fails
                                loadPDFInStep4WithPDFJS(file).then(resolve).catch(reject);
                            }
                        };
                        fileReader.onerror = reject;
                        fileReader.readAsArrayBuffer(file);
                    } catch (error) {
                        console.error('Error loading PDF in step 4:', error);
                        container.innerHTML = `
                            <div class=\"flex items-center justify-center h-[400px]\">
                                <div class=\"text-center text-red-500\">
                                    <i class=\"fas fa-exclamation-triangle text-4xl mb-4\"></i>
                                    <p class=\"text-lg font-medium\">${@json(__('campaigns.error_loading_pdf'))}</p>
                                    <p class=\"text-sm\">${error.message}</p>
                                </div>
                            </div>
                        `;
                        reject(error);
                    }
                });
            };

            // Fallback function using PDF.js
            const loadPDFInStep4WithPDFJS = async function(file) {
                return new Promise((resolve, reject) => {
            const container = document.getElementById('pdf-container');
            container.innerHTML = '<div class="flex items-center justify-center h-[400px]"><div class="text-center"><i class="fas fa-spinner fa-spin text-4xl text-primary mb-4"></i><p class="text-lg font-medium">' + @json(__('campaigns.loading_pdf')) + '</p></div></div>';

                    try {
                        const fileReader = new FileReader();
                        fileReader.onload = async function() {
                            try {
                                const pdfData = new Uint8Array(this.result);
                                if (typeof pdfjsLib === 'undefined' || !pdfjsLib || !pdfjsLib.getDocument) {
                                    throw new Error('PDF viewer is not loaded on this page.');
                                }
                                step4PDF = await pdfjsLib.getDocument({ data: pdfData }).promise;
                                step4TotalPages = step4PDF.numPages;
                                step4CurrentPage = 1;
                                step4Scale = 1.0;

                                // Create PDF viewer HTML
                                container.innerHTML = `
                                    <div class=\"w-full flex flex-col\">
                                        <div id=\"step4-viewer-wrapper\" class=\"flex-1 overflow-auto bg-gray-100 p-2\">
                                            <div id=\"step4-canvas-container\" class=\"flex justify-center\">
                                                <canvas id=\"step4-pdf-canvas\" class=\"border border-gray-300 shadow-lg bg-white\"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                `;

                                await renderStep4Page(1);
                                console.log('Step 4 PDF loaded successfully with PDF.js');
                                
                                // Load dynamic variables after PDF is loaded
                                if (typeof window.displayHeadingValues === 'function') {
                                    await window.displayHeadingValues();
                                }
                                
                                resolve(true);
                            } catch (innerErr) {
                                reject(innerErr);
                            }
                        };
                        fileReader.onerror = reject;
                        fileReader.readAsArrayBuffer(file);
                    } catch (error) {
                        console.error('Error loading PDF in step 4:', error);
                        container.innerHTML = `
                            <div class=\"flex items-center justify-center h-[400px]\">
                                <div class=\"text-center text-red-500\">
                                    <i class=\"fas fa-exclamation-triangle text-4xl mb-4\"></i>
                                    <p class=\"text-lg font-medium\">${@json(__('campaigns.error_loading_pdf'))}</p>
                                    <p class=\"text-sm\">${error.message}</p>
                                </div>
                            </div>
                        `;
                        reject(error);
                    }
                });
            };

            const renderStep4Page = async (pageNum) => {
                if (!step4PDF) return;
                
                const canvas = document.getElementById('step4-pdf-canvas');
                const context = canvas.getContext('2d');
                
                const page = await step4PDF.getPage(pageNum);
                const viewport = page.getViewport({ scale: step4Scale });
                
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                
                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                
                await page.render(renderContext).promise;
                
                // Update UI
                updateStep4UI();
            };

            const updateStep4UI = () => {
                const pageInfoEl = document.getElementById('inline-page-info');
                const zoomLabelEl = document.getElementById('inline-zoom-label');
                const prevBtn = document.getElementById('prevPage');
                const nextBtn = document.getElementById('nextPage');
                
                // Handle PDFAnnotate
                if (window.PDFAnnotateInstance) {
                    if (pageInfoEl) {
                        pageInfoEl.textContent = @json(__('campaigns.page')) + ` ${window.PDFAnnotateInstance.current_page} ` + @json(__('campaigns.of')) + ` ${window.PDFAnnotateInstance.number_of_pages}`;
                    }
                    if (zoomLabelEl) {
                        zoomLabelEl.textContent = Math.round(window.PDFAnnotateInstance.current_scale * 100) + '%';
                    }
                    if (prevBtn) prevBtn.disabled = window.PDFAnnotateInstance.current_page <= 1;
                    if (nextBtn) nextBtn.disabled = window.PDFAnnotateInstance.current_page >= window.PDFAnnotateInstance.number_of_pages;
                }
                // Handle PDF.js fallback
                else {
                    if (pageInfoEl) {
                        pageInfoEl.textContent = @json(__('campaigns.page')) + ` ${step4CurrentPage} ` + @json(__('campaigns.of')) + ` ${step4TotalPages}`;
                    }
                    if (zoomLabelEl) {
                        zoomLabelEl.textContent = Math.round(step4Scale * 100) + '%';
                    }
                    if (prevBtn) prevBtn.disabled = step4CurrentPage <= 1;
                    if (nextBtn) nextBtn.disabled = step4CurrentPage >= step4TotalPages;
                }
            };

            // Keep canvas sized to viewport on window resize based on current fit mode
            (function setupResponsivePDFResize(){
                let resizeTimer = null;
                window.addEventListener('resize', function() {
                    if (!window.PDFAnnotateInstance && !step4PDF) return;
                    if (!window.PDF_FIT_MODE) return;
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(async () => {
                        try {
                            if (window.PDFAnnotateInstance) {
                                if (window.PDF_FIT_MODE === 'width') {
                                    await window.PDFAnnotateInstance.fitWidth();
                                } else if (window.PDF_FIT_MODE === 'page') {
                                    await window.PDFAnnotateInstance.fitPage();
                                }
                                window.PDFAnnotateInstance.updateInlineUI();
                            } else if (step4PDF) {
                                if (window.PDF_FIT_MODE === 'width') {
                                    const page = await step4PDF.getPage(step4CurrentPage);
                                    const containerEl = document.getElementById('step4-canvas-container');
                                    const availableWidth = containerEl ? containerEl.clientWidth : 800;
                                    const viewport = page.getViewport({ scale: 1 });
                                    step4Scale = Math.min(Math.max(availableWidth / viewport.width, 0.25), 5);
                                } else if (window.PDF_FIT_MODE === 'page') {
                                    const page = await step4PDF.getPage(step4CurrentPage);
                                    const wrapper = document.getElementById('step4-viewer-wrapper');
                                    const availableWidth = wrapper ? wrapper.clientWidth - 24 : 800;
                                    const availableHeight = wrapper ? wrapper.clientHeight - 24 : 400;
                                    const viewport = page.getViewport({ scale: 1 });
                                    const scaleW = availableWidth / viewport.width;
                                    const scaleH = availableHeight / viewport.height;
                                    step4Scale = Math.min(Math.max(Math.min(scaleW, scaleH), 0.25), 5);
                                }
                                await renderStep4Page(step4CurrentPage);
                            }
                        } catch (e) {}
                    }, 150);
                });
            })();

            const ensureStep4Loaded = async () => {
                // Check if PDFAnnotate instance is loaded (primary method)
                if (window.PDFAnnotateInstance) return true;
                
                // Fallback: check if PDF.js is loaded
                if (step4PDF) return true;
                
                try {
                    await window.loadPDFFromStep2();
                    return !!(window.PDFAnnotateInstance || step4PDF);
                } catch (e) {
                    return false;
                }
            };

            // Initialize PDF viewer when PDF is loaded (for PDFAnnotateInstance)
            window.initializePDFViewer = function(pdfUrl) {
                try {
                    if (window.PDFAnnotateInstance) {
                        // Clean up existing instance
                        window.PDFAnnotateInstance = null;
                    }
                    
                    // Create new PDFAnnotate instance
                    window.PDFAnnotateInstance = new PDFAnnotate('pdf-container', pdfUrl, {
                        scale: 1.4,
                        pageImageCompression: "MEDIUM"
                    });
                    
                    console.log('PDF viewer initialized successfully');
                    window.showToastr('success', 'PDF loaded successfully');
                    
                } catch (error) {
                    console.error('Error initializing PDF viewer:', error);
                    window.showToastr('error', 'Error loading PDF: ' + error.message);
                }
            };

            // Load PDF when step 4 is accessed (hook into step changes)
            document.addEventListener('DOMContentLoaded', function() {
                const step4Content = document.getElementById('send-invitation');
                const pdfInput = document.getElementById('pdf_file');

                const isElementVisible = function(el) {
                    if (!el) return false;
                    const style = window.getComputedStyle(el);
                    const notHidden = style.display !== 'none' && style.visibility !== 'hidden' && !el.classList.contains('d-none');
                    const hasSize = el.clientWidth > 0 || el.clientHeight > 0;
                    return notHidden && hasSize;
                };

                const tryLoadStep4PDF = function() {
                    if (isElementVisible(step4Content)) {
                        setTimeout(() => {
                            window.loadPDFFromStep2();
                        }, 200);
                    }
                };

                if (step4Content) {
                    // Initial attempt
                    tryLoadStep4PDF();
                    // Observe for visibility/class changes
                    const observer = new MutationObserver(function(mutations) {
                        for (const mutation of mutations) {
                            if (mutation.type === 'attributes' && (mutation.attributeName === 'style' || mutation.attributeName === 'class')) {
                                tryLoadStep4PDF();
                            }
                        }
                    });
                    observer.observe(step4Content, { attributes: true, attributeFilter: ['style','class'] });
                }

                // If the PDF file changes while on step 4, reload the viewer
                if (pdfInput) {
                    pdfInput.addEventListener('change', function() {
                        tryLoadStep4PDF();
                    });
                }
            });

            // Load draft data on page load
            if (typeof window.loadDraftData === 'function') {
                window.loadDraftData();
            }

            // Re-initialize feather icons when dropdown is shown
            $('.dropdown-toggle').on('shown.bs.dropdown', function () {
                if (typeof feather !== 'undefined') {
                    feather.replace();
                }
            });

        });
    </script>
@endpush