@extends('front.layouts.app-auth')

@push('page_css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<style>
    /* Ensure date picker calendar is visible above modal */
    #createCampaignModal .flatpickr-calendar,
    body > .flatpickr-calendar,
    .flatpickr-calendar {
        z-index: 10001 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Make sure flatpickr opens properly */
    .flatpickr-calendar.open {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: fixed !important;
    }
    
    /* Ensure the alt input is clickable */
    .flatpickr-input[readonly] {
        cursor: pointer !important;
        background-color: white !important;
        pointer-events: auto !important;
    }
    
    /* Override any conflicting positioning from modal */
    #createCampaignModal .flatpickr-calendar {
        position: fixed !important;
        transform: none !important;
    }
    
    /* Ensure calendar is always on top and visible */
    body > .flatpickr-calendar {
        position: fixed !important;
        pointer-events: auto !important;
    }
    
    /* Ensure calendar can receive clicks and close properly */
    .flatpickr-calendar.open {
        pointer-events: auto !important;
    }
    
    /* Ensure form doesn't block calendar clicks */
    #createCampaignModal .campaign-form {
        pointer-events: auto;
    }
    
    /* Ensure Select2 dropdowns are visible above modal */
    #createCampaignModal .select2-container--open .select2-dropdown,
    .select2-container--open .select2-dropdown {
        z-index: 10001 !important;
    }
    
    /* Ensure Select2 container is properly positioned */
    #createCampaignModal .select2-container {
        z-index: 1;
    }
    
    /* Custom Alert Modal - Higher z-index than campaign modal */
    .custom-alert-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10002 !important;
        padding: 20px;
    }
    
    .custom-alert-overlay.active {
        display: flex;
    }
    
    .custom-alert-modal {
        background: #ffffff;
        border-radius: 12px;
        width: 100%;
        max-width: 400px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        border: 1px solid #e2e8f0;
        animation: modalSlideIn 0.3s ease-out;
        overflow: hidden;
    }
    
    .custom-alert-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 24px 16px;
    }
    
    .custom-alert-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #dbeafe;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #3b82f6;
    }
    
    .custom-alert-icon i {
        width: 32px;
        height: 32px;
        color: #3b82f6;
    }
    
    .custom-alert-body {
        padding: 0 24px 24px;
        text-align: center;
    }
    
    .custom-alert-message {
        font-size: 1rem;
        color: #1a1a1a;
        line-height: 1.5;
        margin: 0;
    }
    
    .custom-alert-footer {
        padding: 16px 24px 24px;
        display: flex;
        justify-content: center;
    }
    
    .custom-alert-btn {
        background: #3b82f6;
        color: #ffffff;
        border: none;
        padding: 10px 32px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    .custom-alert-btn:hover {
        background: #2563eb;
    }
    
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
@endpush



@section('content')

<!-- Breadcrumbs -->
@include('front.components.breadcrumbs', [
    'currentPage' => 'Fundraising Campaigns',
    'breadcrumbs' => [ ]
])

<!-- Top Bar with Title and Buttons -->
<div class="campaigns-top-bar">
    <div class="campaigns-top-bar-left">
        <h1 class="campaigns-main-title">My Fundraising Campaigns</h1>
        <p class="campaigns-subtitle">Create new fundraising drives and manage your NFT contributions.</p>
    </div>
    <div class="campaigns-top-bar-right">
        <a href="#" class="btn-view-nfts">
            View All NFTs
        </a>
        <a href="#" class="btn-create-campaign" id="openCreateCampaignModal">
            <i data-lucide="plus" class="btn-icon"></i>
            Create New Campaign
        </a>
    </div>
</div>

<!-- Summary Statistics Cards -->
<div class="stats mb-4">
    <div class="stat-card green">
        <div class="stat-top-row">
            <div class="stat-value">{!! \App\Helpers\Helper::price($totalRaised ?? 0) !!}</div>
            <div class="stat-icon"><i data-lucide="dollar-sign"></i></div>
        </div>
        <div class="stat-label">Total Raised</div>
        @php
            $percentageChange = $totalRaisedPercentageChange ?? 0;
            $percentageText = $percentageChange >= 0 ? '+' : '';
            $percentageText .= number_format($percentageChange, 0);
        @endphp
        <div class="stat-subtext stat-subtext-green">{{ $percentageText }}% raised</div>
    </div>

    <div class="stat-card purple">
        <div class="stat-top-row">
            <div class="stat-value">{{ $activeCampaigns ?? 0 }}</div>
            <div class="stat-icon"><i data-lucide="trending-up"></i></div>
        </div>
        <div class="stat-label">Active Campaigns</div>
        @php
            $pendingCount = $pendingApprovalCampaigns ?? 0;
            $pendingText = $pendingCount > 0 ? $pendingCount . ' Drafts' : 'All approved';
        @endphp
        <div class="stat-subtext stat-subtext-purple">{{ $pendingText }}</div>
    </div>

    <div class="stat-card orange">
        <div class="stat-top-row">
            <div class="stat-value">{{ number_format($nftsSold ?? 0) }}</div>
            <div class="stat-icon"><i data-lucide="layers"></i></div>
        </div>
        <div class="stat-label">NFTs Sold</div>
        @php
            $soldToday = $nftsSoldToday ?? 0;
            $soldTodayText = $soldToday > 0 ? $soldToday . ' sold today' : 'No sales today';
        @endphp
        <div class="stat-subtext stat-subtext-orange">{{ $soldTodayText }}</div>
    </div>

    <div class="stat-card red">
        <div class="stat-top-row">
            <div class="stat-value">{!! \App\Helpers\Helper::price($pendingWithdrawals ?? 0) !!}</div>
            <div class="stat-icon"><i data-lucide="wallet"></i></div>
        </div>
        <div class="stat-label">Total Transfered</div>
        @php
            $withdrawalText = ($pendingWithdrawals ?? 0) > 0 ? (\App\Helpers\Helper::price($pendingTransferred ?? 0) . ' Transfer Pending') : 'No Transfer Pending';
        @endphp
        <div class="stat-subtext stat-subtext-red">{{ $withdrawalText }}</div>
    </div>
</div>

<!-- Main Content Grid -->
<div class="campaigns-main-grid">
    <!-- Left Column - Campaign Management -->
    <div class="campaigns-left-column">
        <!-- Campaign Management Section -->
        <div class="campaign-management-card">
            <!-- Action Buttons -->
            <div class="campaign-action-buttons">
                <button class="campaign-action-btn campaign-action-btn-active" data-tab="active" data-status="1">
                    <i data-lucide="trending-up" class="btn-icon"></i>
                    Active Campaigns
                </button>
                <button class="campaign-action-btn" data-tab="draft" data-status="0">
                    <i data-lucide="file-text" class="btn-icon"></i>
                    Draft
                </button>
                <button class="campaign-action-btn" data-tab="create" data-status="">
                    <i data-lucide="plus" class="btn-icon"></i>
                    Create Campaigns
                </button>
                <button class="campaign-action-btn" data-tab="completed" data-status="2">
                    <i data-lucide="clock" class="btn-icon"></i>
                    Completed Campaigns
                </button>
            </div>

            <!-- Campaign Table -->
            <div class="campaign-table-wrapper">
                <table class="campaign-table">
                    <thead>
                        <tr>
                            <th>Campaign Name</th>
                            <th>Goal</th>
                            <th>Raised</th>
                            <th>NFTs Minted</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($campaigns as $campaign)
                            @php
                                $progress = $campaign->fund_target > 0 ? ($campaign->fund_raised / $campaign->fund_target) * 100 : 0;
                                $progress = min(100, max(0, $progress));
                                
                                // Calculate total NFTs minted from all tiers
                                $totalNftsMinted = 0;
                                if ($campaign->nftTiers) {
                                    $totalNftsMinted = $campaign->nftTiers->sum('nft_quantity');
                                }
                                
                                // Status badge class
                                $statusBadgeClass = 'status-dot-active';
                                $statusText = 'Active';
                                if ($campaign->status == 0) {
                                    $statusBadgeClass = 'status-dot-pending';
                                    $statusText = 'Pending';
                                } elseif ($campaign->status == 2) {
                                    $statusBadgeClass = 'status-dot-active';
                                    $statusText = 'Completed';
                                }
                                
                                // Icon color based on category or random
                                $iconColors = ['blue', 'purple', 'green'];
                                $iconColor = $iconColors[($campaign->id % 3)] ?? 'blue';
                            @endphp
                            <tr>
                                <td>
                                    <div class="campaign-name-cell">
                                        @php
                                            $campaignImageUrl = null;
                                            if (is_array($campaign->campaign_image ?? [])) {
                                                $campaignImageUrl = $campaign->campaign_image['thumb'] ?? $campaign->campaign_image['original'] ?? null;
                                            } elseif (is_string($campaign->campaign_image ?? null) && !empty($campaign->campaign_image)) {
                                                $campaignImageUrl = $campaign->campaign_image;
                                            }
                                        @endphp
                                        @if($campaignImageUrl)
                                            <img src="{{ $campaignImageUrl }}" alt="{{ $campaign->title }}" class="campaign-image">
                                        @else
                                            <i data-lucide="trophy" class="campaign-icon campaign-icon-{{ $iconColor }}"></i>
                                        @endif
                                        <div class="campaign-name-details">
                                            <div class="campaign-name-main">{{ $campaign->title }}</div>
                                            <div class="campaign-name-subtitle">{{ $campaign->category->title ?? 'Campaign' }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>{!! \App\Helpers\Helper::price($campaign->fund_target) !!}</td>
                                <td>
                                    <div class="raised-cell">
                                        <div class="raised-amount">{!! \App\Helpers\Helper::price($campaign->fund_raised) !!} ({{ number_format($progress, 0) }}%)</div>
                                        <div class="progress-bar-campaign">
                                            <div class="progress-fill-campaign progress-fill-{{ $iconColor }}" style="width: {{ $progress }}%;"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>0</td>
                                {{-- <td>{{ number_format($totalNftsMinted, 0) }}</td> --}}
                                <td>
                                    <span class="status-dot {{ $statusBadgeClass }}"></span>
                                    {{ $campaign->status_text }}
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="{{ route('front.campaigns.show', ['id' => $campaign->id]) }}" class="action-btn action-btn-view" title="View">
                                            <i data-lucide="eye"></i>
                                        </a>
                                        <button class="action-btn action-btn-edit" title="Edit" onclick="editCampaign({{ $campaign->id }})">
                                            <i data-lucide="pencil"></i>
                                        </button>
                                        <a href="{{ route('profile.campaigns.transactions', ['id' => $campaign->id]) }}" class="action-btn action-btn-view" title="View">
                                            <i data-lucide="dollar-sign"></i>  
                                        </a>
                                        @if(!$campaign->fund_raised)
                                        <button class="action-btn action-btn-delete" title="Delete" onclick="deleteCampaign({{ $campaign->id }})">
                                            <i data-lucide="x"></i>
                                        </button>
                                        @endif
                                        
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" style="text-align: center; padding: 2rem; color: #6b7280;">
                                    No campaigns found. Create your first campaign to get started!
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Right Column - Recent Activity -->
    <div class="campaigns-right-column">
        <div class="recent-activity-card">
            <h2 class="activity-card-title">Recent Activity</h2>
            <div class="activity-list">
                @if($todayCampaignActive > 0)
                <div class="activity-item">
                    <div class="activity-icon-wrapper activity-icon-green">
                        <i data-lucide="layers" class="activity-icon"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-text">{{ $todayCampaignActive }} new campaigns started today</div>
                        <div class="activity-meta">
                            <span class="activity-time">{{\App\Helpers\Helper::timeAgo(\Carbon\Carbon::today()->setTime(0, 1))}}</span>
                        </div>
                    </div>
                </div>
                @endif
                <div class="activity-item">
                    <div class="activity-icon-wrapper activity-icon-blue">
                        <i data-lucide="trophy" class="activity-icon"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-text">Campaign reached {{ $percentageText }}% goal milestone!</div>
                        <div class="activity-meta">
                            <span class="activity-time d-none">0 hours ago</span>
                        </div>
                    </div>
                </div>

                <div class="activity-item">
                    <div class="activity-icon-wrapper activity-icon-orange">
                        <i data-lucide="refresh-cw" class="activity-icon"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-text">Today Royalty Earned</div>
                        <div class="activity-meta">
                            <span class="activity-amount">{{ \App\Helpers\Helper::price($todayFundsRaised) }}</span>
                            <span class="activity-separator">•</span>
                            <span class="activity-time d-none"></span>
                        </div>
                    </div>
                </div>
                @foreach($supportersToday as $supporter)
                <div class="activity-item">
                    <div class="activity-icon-wrapper activity-icon-purple">
                        <i data-lucide="users" class="activity-icon"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-text">1 new supporters joined</div>
                        <div class="activity-meta">
                            <span class="activity-time">{{\App\Helpers\Helper::timeAgo($supporter->transaction_date)}}</span>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Create Campaign Modal -->
<div class="campaign-modal-overlay" id="createCampaignModal">
    <div class="campaign-modal">
        <div class="campaign-modal-header">
            <h2 class="campaign-modal-title">Create Campaign</h2>
            <button class="campaign-modal-close" id="closeCreateCampaignModal">
                <i data-lucide="x"></i>
            </button>
        </div>

        <!-- Progress Steps -->
        <div class="campaign-progress-steps">
            <div class="progress-step" data-step="1">
                <div class="progress-step-circle active">1</div>
                <div class="progress-step-label">Campaign Basics</div>
            </div>
            <div class="progress-step" data-step="2">
                <div class="progress-step-circle">2</div>
                <div class="progress-step-label">Payment Setup</div>
            </div>
            <div class="progress-step" data-step="3">
                <div class="progress-step-circle">3</div>
                <div class="progress-step-label">Review & Launch</div>
            </div>
        </div>

        <!-- Step 1: Campaign Basics -->
        <div class="campaign-modal-step" id="step1">
            <div class="light-blue-bg">
                <h3 class="step-title">Step 1: Campaign Basics</h3>
                <form id="campaignBasicsForm" class="campaign-form">
                    <input type="hidden" id="campaign_id" name="campaign_id">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="campaign_title">Campaign Title <span class="required">*</span></label>
                            <input type="text" id="campaign_title" name="title" class="form-control" placeholder="e.g. Road to Nationals 2025" required>
                        </div>

                        <div class="form-group">
                            <label for="goal_amount">Goal Amount ($) <span class="required">*</span></label>
                            <input type="number" id="goal_amount" name="fund_target" class="form-control" placeholder="e.g. 10000" min="0" step="0.01" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="campaign_description">Description <span class="required">*</span></label>
                        <textarea id="campaign_description" name="summary" class="form-control" rows="4" placeholder="e.g. Road to Nationals 2025" required></textarea>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="campaign_duration">Duration <span class="required">*</span></label>
                            <div class="date-input-wrapper">
                                <input type="text" id="campaign_duration" class="form-control date-range-picker" placeholder="-- Select --" required>
                                <input type="hidden" id="campaign_start_date" name="campaign_started_at">
                                <input type="hidden" id="campaign_end_date" name="campaign_finished_at">
                                <i data-lucide="calendar" class="calendar-icon"></i>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="campaign_category">Category <span class="required">*</span></label>
                            <select id="campaign_category" name="master_campaign_category_id" class="form-control select2" required>
                                <option value="">-- Select --</option>
                                @foreach(\App\Models\Masters\MasterCampaignCategory::getActive() as $category)
                                    <option value="{{ $category->id }}">{{ $category->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-row" id="campaignPaymentTypeRow">
                        <div class="form-group">
                            <label>Campaign Payment Type <span class="required">*</span></label>
                            <div class="radio-group">
                                <label class="radio-label">
                                    <input type="radio" id="campaign_payment_type_1" name="campaign_payment_type" value="1" required>
                                    <span>Crypto</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" id="campaign_payment_type_2" name="campaign_payment_type" value="2" checked>
                                    <span>Fiat</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" id="campaign_payment_type_3" name="campaign_payment_type" value="3">
                                    <span>Hybrid</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group d-none">
                            <label for="team_members">Team Members (Optional)</label>
                            <select id="team_members" name="team_members" class="form-control select2">
                                <option value="">-- Select --</option>
                            </select>
                        </div>
                   
                        <div class="form-group">
                            <label>Visibility <span class="required">*</span></label>
                            <div class="radio-group">
                                <label class="radio-label">
                                    <input type="radio" name="campaign_visibility" value="1" checked>
                                    <span>Public</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" name="campaign_visibility" value="2">
                                    <span>Sponsor-only</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-section" id="fundAllocationRuleSection">
                        <h4 class="section-title">Fund Allocation Rule</h4>
                        <div class="allocation-row">
                            <div class="allocation-item">
                                <label for="allocation_training">Training</label>
                                <div class="allocation-input-wrapper">
                                    <input type="number" id="allocation_training" name="fund_allocation_training" class="form-control" value="50" min="0" max="100" step="0.01" required>
                                    <span class="allocation-percent">%</span>
                                </div>
                            </div>
                            <div class="allocation-item">
                                <label for="allocation_equipment">Equipment</label>
                                <div class="allocation-input-wrapper">
                                    <input type="number" id="allocation_equipment" name="fund_allocation_equipment" class="form-control" value="30" min="0" max="100" step="0.01" required>
                                    <span class="allocation-percent">%</span>
                                </div>
                            </div>
                            <div class="allocation-item">
                                <label for="allocation_player_pool">Player Pool</label>
                                <div class="allocation-input-wrapper">
                                    <input type="number" id="allocation_player_pool" name="fund_allocation_player_pool" class="form-control" value="20" min="0" max="100" step="0.01" required>
                                    <span class="allocation-percent">%</span>
                                </div>
                            </div>
                        </div>
                        <div class="allocation-total">
                            <span>Total: <strong id="allocation_total">100</strong>%</span>
                        </div>
                    </div>

                    <div class="form-group" id="campaignImageUploadSection">
                        <label>Campaign Image</label>
                        <div id="imageUploadContainer" style="display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap;">
                            <div class="file-upload-area" id="campaignImageUpload" style="flex: 1; min-width: 250px; display: flex; align-items: center; justify-content: center;">
                                <input type="file" id="campaign_image" name="campaign_image" accept="image/*" style="display: none;">
                                <div class="upload-placeholder" id="uploadPlaceholder" style="width: 100%;">
                                    <i data-lucide="upload" class="upload-icon"></i>
                                    <p class="upload-text">Click to Upload <span class="upload-text-ccc">or drag and drop</span></p>
                                    <p class="upload-hint d-none">(Max, File size: 25 MB)</p>
                                </div>
                            </div>
                            <div class="existing-image-preview" id="existingImagePreview" style="display: none; flex: 1; text-align: center; min-width: 250px; display: flex; align-items: center; justify-content: center;">
                                <div style="border: 2px dashed #ddd; border-radius: 8px; padding: 15px; background: #f9f9f9; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; max-height: 150px;">
                                    <img id="existingImageSrc" src="" alt="Campaign Image" style="max-height:150px; max-width: 100%; max-height: 250px; border-radius: 8px; display: block; margin: 0 auto;">
                                    <p class="existing-image-text" style="margin-top: 10px; color: #666; font-size: 14px; font-weight: 500;">Current Campaign Image</p>
                                </div>
                            </div>
                        </div>
                        <div class="uploaded-file" id="uploadedFile" style="display: none;">
                            <div class="file-info">
                                <i data-lucide="file" class="file-icon"></i>
                                <div class="file-details">
                                    <span class="file-name" id="fileName"></span>
                                    <span class="file-size" id="fileSize"></span>
                                </div>
                            </div>
                            <div class="file-progress">
                                <div class="progress-bar">
                                    <div class="progress-fill" id="fileProgress" style="width: 0%;"></div>
                                </div>
                            </div>
                            <button type="button" class="file-delete" id="deleteFile">
                                <i data-lucide="trash-2"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn-secondary" id="cancelCampaign">Cancel</button>
                        <button type="submit" class="btn-primary">Next: Payment Setup</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Step 2: Payment Setup -->
        <div class="campaign-modal-step" id="step2" style="display: none;">
            <div class="light-blue-bg">
                <h3 class="step-title">Step 2: Payment Setup</h3>
                <form id="paymentSetupForm" class="campaign-form">
                    <input type="hidden" id="payment_campaign_id" name="campaign_id">
                    <input type="hidden" id="payment_type_hidden" name="campaign_payment_type">
                    
                    <!-- Crypto Wallet Setup Section -->
                    <div id="cryptoWalletSection" style="display: none;">
                        <div class="payment-section">
                            <h4 class="payment-section-title">Crypto Wallet Setup</h4>
                            <p class="payment-section-desc">Configure your cryptocurrency wallet to receive donations</p>
                            
                            <div class="form-group">
                                <label for="wallet_address">Wallet Address <span class="required">*</span></label>
                                <input type="text" id="wallet_address" name="wallet_address" class="form-control" placeholder="e.g. 0x1234...abcd">
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="wallet_network">Network <span class="required">*</span></label>
                                        <select id="wallet_network" name="wallet_network" class="form-select">
                                            <option value="">-- Select Network --</option>
                                            <option value="ethereum">Ethereum</option>
                                            <option value="polygon">Polygon</option>
                                            <option value="binance">Binance Smart Chain</option>
                                            <option value="arbitrum">Arbitrum</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="wallet_type">Wallet Type <span class="required">*</span></label>
                                        <select id="wallet_type" name="wallet_type" class="form-select">
                                            <option value="">-- Select Wallet Type --</option>
                                            <option value="metamask">MetaMask</option>
                                            <option value="coinbase">Coinbase Wallet</option>
                                            <option value="walletconnect">WalletConnect</option>
                                            <option value="other">Other</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Bank Account Setup Section -->
                    <div id="authorizeNetSection" style="display: none;">
                        <div class="payment-section">
                            <h4 class="payment-section-title">Bank Account Setup</h4>
                            <p class="payment-section-desc">Configure your bank account details for receiving eCheck payouts from campaign contributions</p>
                            
                            @if(isset($authUserSettings) && $authUserSettings && !empty($authUserSettings->bank_account_number) && !empty($authUserSettings->bank_routing_number) && !empty($authUserSettings->bank_account_holder_name))
                            <div id="authorizeNetCredentialsConfigured">
                                <div class="credentials-configured-box">
                                    <i data-lucide="check-circle" class="configured-icon"></i>
                                    <span>Bank account details are configured</span>
                                </div>
                            </div>
                            <div id="authorizeNetCredentialsStatus" class="credentials-status-box" style="display: none;">
                            @else
                            <div id="authorizeNetCredentialsStatus" class="credentials-status-box">
                            @endif
                                <div class="credentials-status-content">
                                    <i data-lucide="credit-card" class="credentials-icon"></i>
                                    <h5 class="credentials-title">No Bank Account Details Found</h5>
                                    <p class="credentials-desc">You haven't configured your bank account details yet. Add them now to receive eCheck payouts from campaign contributions.</p>
                                    <div class="credentials-actions">
                                        <button type="button" class="btn-add-credentials" id="openAuthorizeNetModal">
                                            <i data-lucide="plus" class="btn-icon"></i>
                                            Add Bank Details
                                        </button>
                                        <a href="{{ route('front.settings.index') }}" class="btn-go-settings no-underline" target="_blank">
                                            <i data-lucide="settings" class="btn-icon"></i>
                                            Go to Settings
                                        </a>
                                    </div>
                                </div>
                            </div>

                            @if(!isset($authUserSettings) || !$authUserSettings || empty($authUserSettings->bank_account_number) || empty($authUserSettings->bank_routing_number) || empty($authUserSettings->bank_account_holder_name))
                            <div id="authorizeNetCredentialsConfigured" style="display: none;">
                                <div class="credentials-configured-box">
                                    <i data-lucide="check-circle" class="configured-icon"></i>
                                    <span>Bank account details are configured</span>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn-secondary" id="backToStep1FromPayment">← Back</button>
                        <button type="button" class="btn-secondary d-none" id="skipPaymentToReview">Skip</button>
                        <button type="submit" class="btn-primary" id="submitPaymentSetup">Next: Review & Launch</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Step 2b: Add NFT Tiers (Moved to Step 3 or kept as separate step if needed) -->
        <div class="campaign-modal-step" id="step2b" style="display: none;">
            <div class="light-blue-bg">
            <h3 class="step-title">Step 2b: Add NFT Tiers</h3>
            <form id="nftTierForm" class="campaign-form">
                <input type="hidden" id="nft_campaign_id" name="user_campaign_id">
                <input type="hidden" id="nft_tier_id" name="nft_tier_id" value="0">
                
                <div class="form-group">
                    <label for="nft_title">NFT Title <span class="required">*</span></label>
                    <input type="text" id="nft_title" name="nft_title" class="form-control" placeholder="e.g. Gold Partner NFT" required>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="nft_price">Price per NFT <span class="required">*</span></label>
                        <input type="number" id="nft_price" name="nft_price" class="form-control" placeholder="e.g. 250" min="0" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label for="nft_quantity">Quantity / Supply <span class="required">*</span></label>
                        <input type="number" id="nft_quantity" name="nft_quantity" class="form-control" placeholder="e.g. 100" min="1" required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="nft_royalty">Royalty Percentage <span class="required">*</span></label>
                    <div class="royalty-input-wrapper">
                        <input type="number" id="nft_royalty" name="nft_royalty_percentage" class="form-control" placeholder="e.g. 12" min="0" max="100" step="0.01" required>
                        <span class="royalty-percent">%</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="nft_blockchain">Blockchain <span class="required">*</span></label>
                    <select id="nft_blockchain" name="master_blockchain_id" class="form-control select2" required>
                        <option value="">-- Select --</option>
                        @php
                            $blockchains = \App\Models\Masters\MasterBlockchain::where('status', 1)->get();
                        @endphp
                        @foreach($blockchains as $blockchain)
                            <option value="{{ $blockchain->id }}">{{ $blockchain->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Minting Mode <span class="required">*</span></label>
                    <div class="radio-group">
                        <label class="radio-label">
                            <input type="radio" name="minting_mode" value="1" checked>
                            <span>Instant Mint</span>
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="minting_mode" value="2">
                            <span>Lazy Mint</span>
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label for="nft_rewards">Reward / Perks <span class="required">*</span></label>
                    <textarea id="nft_rewards" name="rewards_perks_note" class="form-control" rows="3" placeholder="e.g. Signed digital poster + mention on team page." required></textarea>
                </div>

                <div class="form-row" style="display:none">
                    <div class="form-group">
                        <label for="nft_start_date">Duration Start</label>
                        <div class="date-input-wrapper">
                            <input type="text" id="nft_start_date" name="nft_start_date" class="form-control date-picker" placeholder="-- Select --">
                            <i data-lucide="calendar" class="calendar-icon"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nft_end_date">Duration End</label>
                        <div class="date-input-wrapper">
                            <input type="text" id="nft_end_date" name="nft_end_date" class="form-control date-picker" placeholder="-- Select --">
                            <i data-lucide="calendar" class="calendar-icon"></i>
                        </div>
                    </div>
                </div>

                <div class="form-group" style="display:none">
                    <label for="nft_category">Category</label>
                    <select id="nft_category" name="nft_category" class="form-control select2">
                        <option value="">-- Select --</option>
                    </select>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn-secondary" id="addAnotherTier">+ Add Another Tier</button>
                    <button type="button" class="btn-secondary" id="backToStep1">← Back</button>
                    <button type="button" class="btn-secondary" id="skipToReview">Skip</button>
                    <button type="submit" class="btn-primary">Next: Review & Launch</button>
                </div>
            </form>
            </div>
        </div>

        <!-- Step 3: Review & Launch -->
        <div class="campaign-modal-step" id="step3" style="display: none;">
            <div class="light-blue-bg">
            <h3 class="step-title">Step 3: Review & Launch</h3>
            <div class="review-content">
                <div class="review-section">
                    <h4 class="review-section-title">Campaign Summary</h4>
                    <div class="review-item">
                        <span class="review-label">Title:</span>
                        <span class="review-value" id="review_title"></span>
                    </div>
                    <div class="review-item">
                        <span class="review-label">Goal:</span>
                        <span class="review-value" id="review_goal"></span>
                    </div>
                    <div class="review-item">
                        <span class="review-label">Duration:</span>
                        <span class="review-value" id="review_duration"></span>
                    </div>
                    <div class="review-item">
                        <span class="review-label">Category:</span>
                        <span class="review-value" id="review_category"></span>
                    </div>
                    <div class="review-item">
                        <span class="review-label">Payment Type:</span>
                        <span class="review-value" id="review_payment_type"></span>
                    </div>
                </div>

                <div class="review-section" id="review_payment_section" style="display: none;">
                    <h4 class="review-section-title">Payment Setup</h4>
                    <div id="review_crypto_payment" style="display: none;">
                        <div class="review-item">
                            <span class="review-label">Wallet Address:</span>
                            <span class="review-value" id="review_wallet_address"></span>
                        </div>
                        <div class="review-item">
                            <span class="review-label">Network:</span>
                            <span class="review-value" id="review_wallet_network"></span>
                        </div>
                        <div class="review-item">
                            <span class="review-label">Wallet Type:</span>
                            <span class="review-value" id="review_wallet_type"></span>
                        </div>
                    </div>
                    <div id="review_fiat_payment" style="display: none;">
                        <div class="review-item">
                            <span class="review-label">Authorize.net:</span>
                            <span class="review-value" id="review_authorize_status">Configured</span>
                        </div>
                    </div>
                </div>

                <div class="review-section d-none">
                    <h4 class="review-section-title">Checklist</h4>
                    <div class="checklist-item">
                        <i data-lucide="check-circle" class="check-icon"></i>
                        <span>Terms agreed</span>
                    </div>
                    <div class="checklist-item">
                        <i data-lucide="check-circle" class="check-icon"></i>
                        <span>Royalty distribution verified</span>
                    </div>
                    <div class="checklist-item">
                        <i data-lucide="check-circle" class="check-icon"></i>
                        <span>NFT content approved</span>
                    </div>
                </div>

                <div class="review-section">
                    <h4 class="review-section-title">Fund Distribution</h4>
                    <div class="distribution-item">
                        <span class="distribution-label">Training:</span>
                        <span class="distribution-value" id="review_training">50%</span>
                    </div>
                    <div class="distribution-item">
                        <span class="distribution-label">Equipment:</span>
                        <span class="distribution-value" id="review_equipment">30%</span>
                    </div>
                    <div class="distribution-item">
                        <span class="distribution-label">Player Pool:</span>
                        <span class="distribution-value" id="review_player_pool">20%</span>
                    </div>
                    <div class="distribution-total">
                        <span>Total: <strong id="review_total">100%</strong></span>
                    </div>
                </div>

                <div class="review-section" id="nftTiersReviewSection">
                    <h4 class="review-section-title" id="nftTiersPreviewTitle">NFT Tiers Preview</h4>
                    <div id="nftTiersPreview"></div>
                </div>
            </div>

            <div class="form-actions">
                <button type="button" class="btn-secondary" id="backToStep2">← Back</button>
                <button type="button" class="btn-secondary" id="saveAsDraft">Save as Draft</button>
                <button type="button" class="btn-primary" id="launchCampaign">Launch Campaign</button>
            </div>
</div>
        </div>
    </div>
</div>

<!-- Authorize.net Credentials Modal -->
@include('front.accounts.campaigns.modals.authorizeNetModal')

<!-- Custom Alert Modal -->
<div class="custom-alert-overlay" id="customAlertModal">
    <div class="custom-alert-modal">
        <div class="custom-alert-header">
            <div class="custom-alert-icon">
                <i data-lucide="alert-triangle"></i>
            </div>
        </div>
        <div class="custom-alert-body">
            <p class="custom-alert-message" id="customAlertMessage"></p>
        </div>
        <div class="custom-alert-footer">
            <button class="custom-alert-btn" id="customAlertOkBtn">OK</button>
        </div>
    </div>
</div>

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<!-- jQuery Validation Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"></script>

    <script>
        
    // Wait for both DOM and flatpickr to be ready
    function waitForFlatpickr(callback, maxAttempts = 50) {
        let attempts = 0;
        const checkFlatpickr = () => {
            if (typeof flatpickr !== 'undefined' && typeof flatpickr === 'function') {
                callback();
            } else if (attempts < maxAttempts) {
                attempts++;
                setTimeout(checkFlatpickr, 100);
            } else {
                console.error('Flatpickr failed to load');
            }
        };
        checkFlatpickr();
    }
    
    // Initialize everything when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
        
        // Wait for flatpickr before initializing modal functionality
        waitForFlatpickr(function() {
            initializeCampaignModal();
            
            // Check if create parameter exists in URL and open modal
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('action') === 'create') {
                const createModal = document.getElementById('createCampaignModal');
                if (createModal) {
                    // Reset to create mode
                    if (typeof window.setEditMode === 'function') {
                        window.setEditMode(false, null);
                    }
                    createModal.classList.add('active');
                    document.body.style.overflow = 'hidden';
                    // Wait for modal to be fully visible and rendered
                    setTimeout(() => {
                        initSelect2();
                        initDatePicker();
                        if (typeof lucide !== 'undefined') {
                            lucide.createIcons();
                        }
                    }, 200);
                }
            }
        });
        
        // Button switching functionality (can run immediately)
        const buttons = document.querySelectorAll('.campaign-action-btn');
        buttons.forEach(btn => {
            btn.addEventListener('click', function() {
                const status = this.getAttribute('data-status');
                const tab = this.getAttribute('data-tab');
                
                // If it's the "Create Campaigns" button, open the modal instead
                if (tab === 'create') {
                    const createModal = document.getElementById('createCampaignModal');
                    if (createModal) {
                        // Reset to create mode
                        if (typeof window.setEditMode === 'function') {
                            window.setEditMode(false, null);
                        }
                        createModal.classList.add('active');
                        document.body.style.overflow = 'hidden';
                        // Wait for modal to be fully visible and rendered
                        setTimeout(() => {
                            initSelect2();
                            initDatePicker();
                            if (typeof lucide !== 'undefined') {
                                lucide.createIcons();
                            }
                        }, 200);
                    }
                    return;
                }
                
                // For Active, Draft, and Completed campaigns, reload with status filter
                const url = new URL(window.location.href);
                if (status !== null && status !== '') {
                    url.searchParams.set('status', status);
                } else {
                    url.searchParams.delete('status');
                }
                // Remove page parameter to go back to first page
                url.searchParams.delete('page');
                
                window.location.href = url.toString();
            });
        });
        
        // Set active button based on current status filter
        const urlParams = new URLSearchParams(window.location.search);
        const currentStatus = urlParams.get('status');
        buttons.forEach(btn => {
            const btnStatus = btn.getAttribute('data-status');
            const btnTab = btn.getAttribute('data-tab');
            // Active campaigns is default (status=1 or no status param)
            // Draft is status=0
            // Completed is status=2
            if (btnTab === 'create') {
                // Create button should never be active
                btn.classList.remove('campaign-action-btn-active');
            } else if (currentStatus === btnStatus || (!currentStatus && btnStatus === '1')) {
                btn.classList.add('campaign-action-btn-active');
            } else {
                btn.classList.remove('campaign-action-btn-active');
            }
        });
    });
    
    // Initialize date picker function (global scope)
    function initDatePicker(isEditMode = false) {
        const durationInput = document.getElementById('campaign_duration');
        if (!durationInput) {
            return;
        }
        
        // Wait for flatpickr to be available
        if (typeof flatpickr === 'undefined') {
            setTimeout(() => initDatePicker(isEditMode), 100);
            return;
        }
        
        // Destroy existing instance if any
        if (durationInput._flatpickr) {
            try {
                // Clean up outside click handler if it exists
                if (durationInput._flatpickrOutsideClickHandler) {
                    document.removeEventListener('mousedown', durationInput._flatpickrOutsideClickHandler, true);
                    delete durationInput._flatpickrOutsideClickHandler;
                }
                durationInput._flatpickr.clear();
                durationInput._flatpickr.destroy();
            } catch (e) {
                // Ignore errors
            }
        }
        
        // Get modal container for proper positioning
        const modalContainer = document.querySelector('#createCampaignModal');
        
        // Initialize date range picker
        try {
            const pickerConfig = {
                mode: "range",
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "M j, Y",
                placeholder: "-- Select --",
                clickOpens: true,
                allowInput: false,
                appendTo: document.body, // Append to body instead of modal to avoid positioning issues
                static: false,
                position: "auto",
                closeOnSelect: false, // We'll handle closing manually when both dates are selected
                animate: true,
                onReady: function(selectedDates, dateStr, instance) {
                    // Ensure the alt input is clickable and not readonly for user interaction
                    if (instance.altInput) {
                        instance.altInput.removeAttribute('readonly');
                        instance.altInput.setAttribute('inputmode', 'none');
                        instance.altInput.style.cursor = 'pointer';
                        instance.altInput.style.backgroundColor = 'white';
                        
                        // Force click event to open calendar
                        instance.altInput.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            if (!instance.isOpen) {
                                instance.open();
                            }
                        });
                        
                        // Also handle mousedown to catch any interference
                        instance.altInput.addEventListener('mousedown', function(e) {
                            if (!instance.isOpen) {
                                setTimeout(() => instance.open(), 0);
                            }
                        });
                    }
                },
                onOpen: function(selectedDates, dateStr, instance) {
                    // Fix positioning after calendar opens
                    if (instance.calendarContainer) {
                        // Small delay to ensure DOM is ready
                        setTimeout(() => {
                            const calendar = instance.calendarContainer;
                            const inputElement = instance.altInput || instance.input;
                            const inputRect = inputElement.getBoundingClientRect();
                            
                            // Get modal scroll position if inside modal
                            const modal = inputElement.closest('#createCampaignModal');
                            const modalScroll = modal ? modal.scrollTop : 0;
                            
                            // Calculate position below the input
                            const top = inputRect.bottom + 5;
                            const left = inputRect.left;
                            
                            // Apply fixed positioning relative to viewport
                            calendar.style.position = 'fixed';
                            calendar.style.top = top + 'px';
                            calendar.style.left = left + 'px';
                            calendar.style.right = 'auto';
                            calendar.style.bottom = 'auto';
                            calendar.style.transform = 'none';
                            
                            // Ensure it's visible
                            calendar.style.display = 'block';
                            calendar.style.opacity = '1';
                            calendar.style.visibility = 'visible';
                            calendar.style.pointerEvents = 'auto';
                            calendar.style.zIndex = '10001';
                        }, 10);
                    }
                },
                onChange: function(selectedDates, dateStr, instance) {
                    const startDateInput = document.getElementById('campaign_start_date');
                    const endDateInput = document.getElementById('campaign_end_date');
                    
                    // Helper function to format date as YYYY-MM-DD in local timezone
                    function formatLocalDate(date) {
                        const year = date.getFullYear();
                        const month = String(date.getMonth() + 1).padStart(2, '0');
                        const day = String(date.getDate()).padStart(2, '0');
                        return `${year}-${month}-${day}`;
                    }
                    
                    if (selectedDates.length === 2) {
                        if (startDateInput) startDateInput.value = formatLocalDate(selectedDates[0]) + ' 00:00:00';
                        if (endDateInput) endDateInput.value = formatLocalDate(selectedDates[1]) + ' 23:59:59';
                        // Close calendar immediately when both dates are selected
                        // Use multiple methods to ensure it closes
                        setTimeout(() => {
                            if (instance) {
                                if (instance.isOpen) {
                                    instance.close();
                                }
                                // Force close by hiding the calendar container
                                if (instance.calendarContainer) {
                                    instance.calendarContainer.style.display = 'none';
                                    instance.calendarContainer.classList.remove('open');
                                }
                            }
                        }, 10);
                    } else if (selectedDates.length === 1) {
                        if (startDateInput) startDateInput.value = formatLocalDate(selectedDates[0]) + ' 00:00:00';
                        if (endDateInput) endDateInput.value = '';
                    } else {
                        if (startDateInput) startDateInput.value = '';
                        if (endDateInput) endDateInput.value = '';
                    }
                },
                onClose: function(selectedDates, dateStr, instance) {
                    // Ensure calendar is properly closed
                    if (instance && instance.calendarContainer) {
                        instance.calendarContainer.style.display = 'none';
                    }
                }
            };
            
            // Function to sync flatpickr dates to hidden fields
            function syncDatesToHiddenFields() {
                const durationInput = document.getElementById('campaign_duration');
                const startDateInput = document.getElementById('campaign_start_date');
                const endDateInput = document.getElementById('campaign_end_date');
                
                // Helper function to format date as YYYY-MM-DD in local timezone
                function formatLocalDate(date) {
                    if (!date) return '';
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                }
                
                // If flatpickr exists and has dates, use those
                if (durationInput && durationInput._flatpickr) {
                    const fp = durationInput._flatpickr;
                    const selectedDates = fp.selectedDates;
                    
                    if (selectedDates.length === 2) {
                        if (startDateInput) startDateInput.value = formatLocalDate(selectedDates[0]) + ' 00:00:00';
                        if (endDateInput) endDateInput.value = formatLocalDate(selectedDates[1]) + ' 23:59:59';
                    } else if (selectedDates.length === 1) {
                        if (startDateInput) startDateInput.value = formatLocalDate(selectedDates[0]) + ' 00:00:00';
                        if (endDateInput) endDateInput.value = '';
                    }
                    // If flatpickr has no dates but hidden fields have values, preserve them
                    // (This handles the case where dates were set but flatpickr wasn't initialized properly)
                } else {
                    // If flatpickr doesn't exist, preserve existing hidden field values
                    // They should already be set correctly from the edit mode initialization
                }
            }
            
            // Make syncDatesToHiddenFields available globally
            window.syncDatesToHiddenFields = syncDatesToHiddenFields;
            
            // Only set minDate for create mode, not edit mode
            if (!isEditMode) {
                pickerConfig.minDate = "today";
            }
            
            const fpInstance = flatpickr(durationInput, pickerConfig);
            
            // Additional safeguard: ensure original input also opens calendar
            durationInput.addEventListener('click', function(e) {
                if (fpInstance && !fpInstance.isOpen) {
                    fpInstance.open();
                }
            });
            
            // Handle outside clicks to close calendar
            // Use a single event listener that's properly scoped
            function handleOutsideClick(e) {
                if (fpInstance && fpInstance.isOpen) {
                    const calendar = fpInstance.calendarContainer;
                    const input = fpInstance.altInput || fpInstance.input;
                    
                    // Check if click is outside calendar and input
                    if (calendar && input) {
                        const clickedElement = e.target;
                        const isClickInsideCalendar = calendar.contains(clickedElement);
                        const isClickOnInput = input === clickedElement || input.contains(clickedElement);
                        const inputWrapper = input.closest('.flatpickr-wrapper');
                        const isClickOnInputWrapper = inputWrapper && inputWrapper.contains(clickedElement);
                        
                        // Close calendar when clicking outside
                        if (!isClickInsideCalendar && !isClickOnInput && !isClickOnInputWrapper) {
                            // Close immediately
                            setTimeout(() => {
                                if (fpInstance) {
                                    if (fpInstance.isOpen) {
                                        fpInstance.close();
                                    }
                                    // Force close by hiding the calendar container
                                    if (fpInstance.calendarContainer) {
                                        fpInstance.calendarContainer.style.display = 'none';
                                        fpInstance.calendarContainer.classList.remove('open');
                                    }
                                }
                            }, 10);
                        }
                    }
                }
            }
            
            // Add event listener with capture phase to catch events before they're stopped
            document.addEventListener('mousedown', handleOutsideClick, true);
            document.addEventListener('click', handleOutsideClick, true);
            
            // Also handle touch events for mobile
            document.addEventListener('touchstart', handleOutsideClick, true);
            
            // Also handle when both dates are selected via calendar day clicks
            if (fpInstance.calendarContainer) {
                fpInstance.calendarContainer.addEventListener('click', function(e) {
                    // Check if a day was clicked
                    if (e.target.classList.contains('flatpickr-day') && !e.target.classList.contains('flatpickr-disabled')) {
                        // Wait a bit to let flatpickr process the selection
                        setTimeout(() => {
                            if (fpInstance && fpInstance.selectedDates && fpInstance.selectedDates.length === 2) {
                                if (fpInstance.isOpen) {
                                    fpInstance.close();
                                }
                            }
                        }, 50);
                    }
                });
            }
            
            // Also handle on the calendar container to ensure proper event handling
            if (fpInstance.calendarContainer) {
                // Ensure calendar container doesn't block pointer events
                fpInstance.calendarContainer.style.pointerEvents = 'auto';
            }
            
            // Store cleanup function for when picker is destroyed
            durationInput._flatpickrOutsideClickHandler = handleOutsideClick;
            
        } catch (error) {
            console.error('Error initializing date picker:', error);
        }
    }
    
    // Initialize Select2 (global scope)
    function initSelect2() {
        // Wait for jQuery to be available
        if (typeof jQuery === 'undefined' && typeof $ === 'undefined') {
            setTimeout(initSelect2, 100);
            return;
        }
        
        try {
            // Only initialize Select2 for elements inside the modal
            const modal = document.getElementById('createCampaignModal');
            if (!modal) {
                return;
            }
            
            // Destroy existing instances in modal first
            jQuery(modal).find('.select2').each(function() {
                if (jQuery(this).data('select2')) {
                    try {
                        jQuery(this).select2('destroy');
                    } catch (e) {
                        // Ignore errors
                    }
                }
            });
            
            // Initialize Select2 for elements in the modal
            jQuery(modal).find('.select2').select2({
                dropdownParent: jQuery('#createCampaignModal')
            });
        } catch (error) {
            console.error('Error initializing Select2:', error);
        }
    }
    
    // Initialize Campaign Modal Functionality (after flatpickr is loaded)
    function initializeCampaignModal() {
        // Campaign Modal Functionality
        const modal = document.getElementById('createCampaignModal');
        const openBtn = document.getElementById('openCreateCampaignModal');
        const closeBtn = document.getElementById('closeCreateCampaignModal');
        const cancelBtn = document.getElementById('cancelCampaign');
        let shouldDisableFields = false;
        let currentStep = 1;
        let campaignId = null;
        let campaignData = {};
        let nftTiers = [];
        let isEditMode = false;

        // Function to set edit/create mode
        function setEditMode(editMode, id) {
            isEditMode = editMode;
            campaignId = id || null;
            
            const modalTitle = document.querySelector('.campaign-modal-title');
            const step1Title = document.querySelector('#step1 .step-title');
            const step1SubmitBtn = document.querySelector('#campaignBasicsForm button[type="submit"]');
            const saveAsDraftBtn = document.getElementById('saveAsDraft');
            const launchCampaignBtn = document.getElementById('launchCampaign');
            
            if (editMode) {
                if (modalTitle) modalTitle.textContent = 'Edit Campaign';
                if (step1Title) step1Title.textContent = 'Step 1: Campaign Basics';
                if (step1SubmitBtn) step1SubmitBtn.textContent = 'Next: Payment Setup';
                if (saveAsDraftBtn) saveAsDraftBtn.textContent = 'Save Changes';
                if (launchCampaignBtn) launchCampaignBtn.textContent = 'Update & Launch';
            } else {
                if (modalTitle) modalTitle.textContent = 'Create Campaign';
                if (step1Title) step1Title.textContent = 'Step 1: Campaign Basics';
                if (step1SubmitBtn) step1SubmitBtn.textContent = 'Next: Payment Setup';
                if (saveAsDraftBtn) saveAsDraftBtn.textContent = 'Save as Draft';
                if (launchCampaignBtn) launchCampaignBtn.textContent = 'Launch Campaign';
            }
        }

        // Make setEditMode available globally for editCampaign function
        window.setEditMode = setEditMode;

        // Open modal
        if (openBtn) {
            openBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const existingImagePreviewAdd = document.getElementById('existingImagePreview');
                if (existingImagePreviewAdd) {
                    existingImagePreviewAdd.style.setProperty('display', 'none', 'important');
                }
                shouldDisableFields = false;
                enableDisabledFields(shouldDisableFields);
                // Reset to create mode when opening from button
                setEditMode(false, null);
                modal.classList.add('active');
                document.body.style.overflow = 'hidden';
                
                // Initialize after modal is fully visible and rendered
                setTimeout(() => {
                    initSelect2();
                    initDatePicker();
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                }, 200);
            });
        }

        // Edit Campaign function
        window.editCampaign = async function(campaignId) {
            try {
                // Fetch campaign data
                const response = await fetch(`{{ route("profile.campaigns.edit", ":id") }}`.replace(':id', campaignId), {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                });

                const result = await response.json();
                
                if (result.status === 200 && result.data) {
                    const campaign = result.data;
                    
                    // Set edit mode (use global function)
                    if (typeof window.setEditMode === 'function') {
                        window.setEditMode(true, campaign.id);
                    }
                    
                    // Pre-fill form fields
                    document.getElementById('campaign_id').value = campaign.id;
                    document.getElementById('campaign_title').value = campaign.title || '';
                    document.getElementById('goal_amount').value = campaign.fund_target || '';
                    document.getElementById('campaign_description').value = campaign.summary || '';
                    
                    // Set category
                    if (campaign.master_campaign_category_id) {
                        const categorySelect = document.getElementById('campaign_category');
                        if (categorySelect) {
                            // Wait for select2 to be ready
                            setTimeout(() => {
                                $(categorySelect).val(campaign.master_campaign_category_id).trigger('change');
                            }, 100);
                        }
                    }
                    
                    // Set payment type
                    if (campaign.campaign_payment_type) {
                        const paymentTypeRadio = document.querySelector(`input[name="campaign_payment_type"][value="${campaign.campaign_payment_type}"]`);
                        if (paymentTypeRadio) {
                            paymentTypeRadio.checked = true;
                            // Update payment sections will be called when modal opens
                        }
                    }
                    
                    // Set visibility
                    if (campaign.campaign_visibility) {
                        const visibilityRadio = document.querySelector(`input[name="campaign_visibility"][value="${campaign.campaign_visibility}"]`);
                        if (visibilityRadio) {
                            visibilityRadio.checked = true;
                        }
                    }
                    
                    // Set fund allocations
                    if (campaign.fund_allocation_training !== undefined) {
                        document.getElementById('allocation_training').value = campaign.fund_allocation_training || 0;
                    }
                    if (campaign.fund_allocation_equipment !== undefined) {
                        document.getElementById('allocation_equipment').value = campaign.fund_allocation_equipment || 0;
                    }
                    if (campaign.fund_allocation_player_pool !== undefined) {
                        document.getElementById('allocation_player_pool').value = campaign.fund_allocation_player_pool || 0;
                    }
                    if (typeof updateAllocationTotal === 'function') {
                        updateAllocationTotal();
                    }
                    
                    // Set campaign image if exists
                    if (campaign.campaign_image) {
                        let imageUrl = null;
                        if (typeof campaign.campaign_image === 'object' && campaign.campaign_image !== null && campaign.campaign_image.id !== 0) {
                            // Image is an object with 'original', 'thumb', etc.
                            imageUrl = campaign.campaign_image.thumb;
                        } else if (typeof campaign.campaign_image === 'string' && campaign.campaign_image.trim() !== '') {
                            // Image is a string URL
                            imageUrl = campaign.campaign_image;
                        }
                        
                        if (imageUrl) {
                            const existingImagePreview = document.getElementById('existingImagePreview');
                            const existingImageSrc = document.getElementById('existingImageSrc');
                            
                            if (existingImagePreview && existingImageSrc) {
                                existingImageSrc.src = imageUrl;
                                existingImagePreview.style.display = 'block';
                            }
                        }
                        else {
                            existingImagePreview.style.setProperty('display', 'none', 'important');
                        }
                    }
                    
                    // Set dates
                    

                    if (campaign.campaign_started_at && campaign.campaign_finished_at) {
                        const startDate = campaign.campaign_started_at.split(' ')[0];
                        const endDate = campaign.campaign_finished_at.split(' ')[0];
                        document.getElementById('campaign_start_date').value = startDate;
                        document.getElementById('campaign_end_date').value = endDate;
                        const durationInput = document.getElementById('campaign_duration');
                        if (durationInput && durationInput._flatpickr) {
                            durationInput._flatpickr.setDate([startDate, endDate], false);
                        }
                        const startDatDis = new Date(startDate);
                        const currentDate = new Date();
                        currentDate.setHours(0, 0, 0, 0); // Reset time to compare dates only
                        startDatDis.setHours(0, 0, 0, 0);
                        shouldDisableFields = startDatDis <= currentDate;
                    }
                    
                    // Load NFT tiers if any (will be handled when user navigates to NFT tier step)
                    if (campaign.nft_tiers && campaign.nft_tiers.length > 0) {
                        // Store NFT tiers data for later use
                        window.campaignNftTiers = campaign.nft_tiers.map(tier => {
                            // Extract title from rewards_perks_note (first line) if available
                            let title = 'NFT Tier';
                            if (tier.rewards_perks_note) {
                                const lines = tier.rewards_perks_note.split('\n');
                                if (lines.length > 0 && lines[0].trim()) {
                                    title = lines[0].trim();
                                }
                            }
                            return {
                                title: title,
                                price: tier.nft_price,
                                quantity: tier.nft_quantity,
                                royalty: tier.nft_royalty_percentage,
                                blockchain: tier.blockchain ? tier.blockchain.title : 'N/A',
                                minting_mode: tier.minting_mode,
                                rewards_perks_note: tier.rewards_perks_note,
                                table_row_id: tier.id
                            };
                        });
                    }
                    
                    // Open modal
                    const modal = document.getElementById('createCampaignModal');
                    if (modal) {
                        modal.classList.add('active');
                        document.body.style.overflow = 'hidden';
                        
                        // Initialize after modal is fully visible
                        setTimeout(() => {
                            initSelect2();
                            // Initialize date picker with existing dates (pass true for edit mode)
                            if (campaign.campaign_started_at && campaign.campaign_finished_at) {
                                const startDate = campaign.campaign_started_at.split(' ')[0];
                                const endDate = campaign.campaign_finished_at.split(' ')[0];
                                
                                // Set hidden field values first
                                document.getElementById('campaign_start_date').value = campaign.campaign_started_at;
                                document.getElementById('campaign_end_date').value = campaign.campaign_finished_at;
                                
                                // Initialize the date picker in edit mode
                                initDatePicker(true);
                                
                                // Wait for initialization, then set the dates and reinitialize
                                setTimeout(() => {
                                    const durationInput = document.getElementById('campaign_duration');
                                    if (durationInput && durationInput._flatpickr) {
                                        const fp = durationInput._flatpickr;
                                        
                                        // Set the date values
                                        fp.setDate([startDate, endDate], false);
                                        
                                        // Destroy the instance
                                        fp.destroy();
                                        
                                        // Reinitialize immediately with the same dates
                                        setTimeout(() => {
                                            initDatePicker(true);
                                            
                                            // Set dates again on the new instance
                                            setTimeout(() => {
                                                const durationInput2 = document.getElementById('campaign_duration');
                                                if (durationInput2 && durationInput2._flatpickr) {
                                                    durationInput2._flatpickr.setDate([startDate, endDate], false);
                                                    // Sync dates to hidden fields after setting
                                                    if (typeof window.syncDatesToHiddenFields === 'function') {
                                                        window.syncDatesToHiddenFields();
                                                    }
                                                }
                                            }, 100);
                                        }, 100);
                                    }
                                }, 300);
                            } else {
                                initDatePicker(true); // Pass true for edit mode
                            }
                            
                            // Update payment sections if payment type is set
                            if (campaign.campaign_payment_type && typeof updatePaymentSections === 'function') {
                                updatePaymentSections(campaign.campaign_payment_type);
                            }
                            
                            if (typeof lucide !== 'undefined') {
                                lucide.createIcons();
                            }
                            enableDisabledFields(shouldDisableFields);
                        }, 200);
                    }
                } else {
                    alert(result.message || 'Error fetching campaign data');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred while loading campaign data. Please try again.');
            }
        };
        function enableDisabledFields(shouldDisableFields) {
            console.log(shouldDisableFields);
            if (shouldDisableFields) {
                document.getElementById('campaign_title').classList.add('event-none');
                document.getElementById('goal_amount').classList.add('event-none');
                document.getElementById('campaign_description').classList.add('event-none');
                document.getElementById('campaign_category').classList.add('event-none');
                document.getElementById('campaignPaymentTypeRow').classList.add('event-none');
                document.getElementById('fundAllocationRuleSection').classList.add('event-none');
                document.getElementById('campaignImageUploadSection').classList.add('event-none');
                document.getElementById('saveAsDraft').classList.add('d-none');
            } else {
                document.getElementById('campaign_title').classList.remove('event-none');
                document.getElementById('goal_amount').classList.remove('event-none');
                document.getElementById('campaign_description').classList.remove('event-none');
                document.getElementById('campaign_category').classList.remove('event-none');
                document.getElementById('campaignPaymentTypeRow').classList.remove('event-none');
                document.getElementById('fundAllocationRuleSection').classList.remove('event-none');
                document.getElementById('campaignImageUploadSection').classList.remove('event-none');
                document.getElementById('saveAsDraft').classList.remove('d-none');
            }
        }

        // Delete Campaign function
        window.deleteCampaign = async function(campaignId) {
            showConfirm('Are you sure you want to delete this campaign? This action cannot be undone.', async function(result) {
                if (!result) return;
                
                try {
                    const response = await fetch(`{{ route("profile.campaigns.destroy", ":id") }}`.replace(':id', campaignId), {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        }
                    });

                    const result = await response.json();
                    
                    if (result.status === 200) {
                        // Show success message
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: result.message || 'Campaign deleted successfully',
                                confirmButtonText: 'OK',
                                confirmButtonColor: '#10b981'
                            }).then(() => {
                                // Reload the page to reflect changes
                                window.location.reload();
                            });
                        } else {
                            alert(result.message || 'Campaign deleted successfully');
                            window.location.reload();
                        }
                    } else {
                        // Show error message
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: result.message || 'Error deleting campaign',
                                confirmButtonText: 'OK',
                                confirmButtonColor: '#ef4444'
                            });
                        } else {
                            alert(result.message || 'Error deleting campaign');
                        }
                    }
                } catch (error) {
                    console.error('Error:', error);
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'An error occurred. Please try again.',
                            confirmButtonText: 'OK',
                            confirmButtonColor: '#ef4444'
                        });
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                }
            });
        };

        // Close modal
        function closeModal() {
            // Destroy date picker instance and clear values
            const durationInput = document.getElementById('campaign_duration');
            if (durationInput) {
                // Clear flatpickr instance if exists
                if (durationInput._flatpickr) {
                    try {
                        // Clear the picker value before destroying
                        durationInput._flatpickr.clear();
                        durationInput._flatpickr.destroy();
                    } catch (e) {
                        // Ignore errors
                    }
                }
                
                // Clear the input field value
                durationInput.value = '';
                
                // Clear any flatpickr alt input that might exist
                const wrapper = durationInput.closest('.date-input-wrapper');
                if (wrapper) {
                    const altInput = wrapper.querySelector('.flatpickr-input');
                    if (altInput) {
                        altInput.value = '';
                    }
                }
            }
            
            // Destroy Select2 instances
            $('.select2').each(function() {
                if ($(this).data('select2')) {
                    try {
                        $(this).select2('destroy');
                    } catch (e) {
                        // Ignore errors
                    }
                }
            });
            
            modal.classList.remove('active');
            document.body.style.overflow = '';
            
            // Reset form
            currentStep = 1;
            campaignId = null;
            campaignData = {};
            nftTiers = [];
            isEditMode = false;
            setEditMode(false, null);
            showStep(1);
            document.getElementById('campaignBasicsForm').reset();
            document.getElementById('nftTierForm').reset();
            document.getElementById('nft_tier_id').value = 0;
            document.getElementById('campaign_id').value = '';
            document.getElementById('uploadedFile').style.display = 'none';
            document.getElementById('campaignImageUpload').style.display = 'block';
            document.getElementById('campaign_start_date').value = '';
            document.getElementById('campaign_end_date').value = '';
            
            // Reset image preview
            const existingImagePreview = document.getElementById('existingImagePreview');
            const existingImageSrc = document.getElementById('existingImageSrc');
            const uploadPlaceholder = document.getElementById('uploadPlaceholder');
            if (existingImagePreview) {
                existingImagePreview.style.display = 'none';
            }
            if (existingImageSrc) {
                existingImageSrc.src = '';
            }
            if (uploadPlaceholder) {
                uploadPlaceholder.style.display = 'block';
            }
            
            // Reset allocation previous values after form reset
            setTimeout(() => {
                resetAllocationPreviousValues();
            }, 100);
        }

        if (closeBtn) {
            closeBtn.addEventListener('click', closeModal);
        }
        if (cancelBtn) {
            cancelBtn.addEventListener('click', closeModal);
        }

        // Close on overlay click - DISABLED: Modal will not close when clicking outside
        // modal.addEventListener('click', function(e) {
        //     if (e.target === modal) {
        //         closeModal();
        //     }
        // });

        // Payment Type Change Handler
        const paymentTypeRadios = document.querySelectorAll('input[name="campaign_payment_type"]');
        paymentTypeRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                const paymentType = this.value;
                updatePaymentSections(paymentType);
            });
        });

        // Function to update payment sections based on payment type
        function updatePaymentSections(paymentType) {
            const cryptoSection = document.getElementById('cryptoWalletSection');
            const authorizeSection = document.getElementById('authorizeNetSection');
            
            // Hide all sections first
            if (cryptoSection) cryptoSection.style.display = 'none';
            if (authorizeSection) authorizeSection.style.display = 'none';
            
            // Show relevant sections based on payment type (1=crypto, 2=fiat, 3=hybrid)
            if (paymentType === '1') {
                if (cryptoSection) cryptoSection.style.display = 'block';
            } else if (paymentType === '2') {
                if (authorizeSection) authorizeSection.style.display = 'block';
            } else if (paymentType === '3') {
                if (cryptoSection) cryptoSection.style.display = 'block';
                if (authorizeSection) authorizeSection.style.display = 'block';
            }
        }

        // Authorize.net Modal Handlers
        const authorizeNetModal = document.getElementById('authorizeNetModal');
        const openAuthorizeNetBtn = document.getElementById('openAuthorizeNetModal');
        const closeAuthorizeNetBtn = document.getElementById('closeAuthorizeNetModal');
        const cancelAuthorizeNetBtn = document.getElementById('cancelAuthorizeNet');

        // Store actual account number for modal
        var modalActualAccountNumber = '';
        
        if (openAuthorizeNetBtn) {
            openAuthorizeNetBtn.addEventListener('click', function() {
                if (authorizeNetModal) {
                    // Reset form and variables
                    modalActualAccountNumber = '';
                    $('#authorizeNetForm')[0].reset();
                    
                    // Ensure account number field is always empty (security - never show actual value)
                    $('#bank_account_number').val('');
                    $('#confirm_bank_account_number').val('');
                    
                    // Pre-populate form with existing bank account details if available
                    @if(isset($authUserSettings) && $authUserSettings && !empty($authUserSettings->bank_account_holder_name))
                        $('#bank_account_holder_name').val('{{ addslashes($authUserSettings->bank_account_holder_name) }}');
                    @endif
                    @if(isset($authUserSettings) && $authUserSettings && !empty($authUserSettings->bank_routing_number))
                        $('#bank_routing_number').val('{{ addslashes($authUserSettings->bank_routing_number) }}');
                    @endif
                    
                    authorizeNetModal.classList.add('active');
                    document.body.style.overflow = 'hidden';
                    lucide.createIcons();
                    
                    // Initialize account number masking after modal opens
                    initializeAccountNumberMasking();
                }
            });
        }
        
        // Initialize account number masking and validation for modal using jQuery
        function initializeAccountNumberMasking() {
            var $accountNumberInput = $('#bank_account_number');
            var $confirmAccountNumberInput = $('#confirm_bank_account_number');
            var $accountNumberMatchError = $('#account_number_match_error_modal');
            
            if (!$accountNumberInput.length || !$confirmAccountNumberInput.length) return;
            
            // Reset actual account number
            modalActualAccountNumber = '';
            
            // Ensure account number field is empty (security)
            $accountNumberInput.val('');
            $confirmAccountNumberInput.val('');
            
            // Clear any validation errors
            $confirmAccountNumberInput.removeClass('is-invalid is-valid');
            $accountNumberMatchError.hide().removeClass('d-block').addClass('d-none');
            
            // Remove existing event handlers
            $accountNumberInput.off('input keypress keydown');
            $confirmAccountNumberInput.off('input blur');
            
            // Prevent copy, paste, and cut on account number fields
            $accountNumberInput.on('copy paste cut contextmenu', function(e) {
                e.preventDefault();
                return false;
            });
            
            $confirmAccountNumberInput.on('copy paste cut contextmenu', function(e) {
                e.preventDefault();
                return false;
            });
            
            // Validate that both account numbers match (real-time)
            function validateModalAccountNumbers() {
                var confirmValue = $confirmAccountNumberInput.val().replace(/\D/g, '');
                
                // Clear previous errors if fields are empty
                if (!confirmValue || !modalActualAccountNumber) {
                    $confirmAccountNumberInput.removeClass('is-invalid');
                    $accountNumberMatchError.hide();
                    return false;
                }
                
                // Check if lengths match first (quick check)
                if (confirmValue.length !== modalActualAccountNumber.length) {
                    $confirmAccountNumberInput.addClass('is-invalid');
                    $accountNumberMatchError.show();
                    return false;
                }
                
                // Check if values match
                if (confirmValue !== modalActualAccountNumber) {
                    $confirmAccountNumberInput.addClass('is-invalid');
                    $accountNumberMatchError.show();
                    return false;
                } else {
                    // Numbers match - remove error
                    $confirmAccountNumberInput.removeClass('is-invalid');
                    $accountNumberMatchError.hide();
                    return true;
                }
            }
            
            // Add custom validation method for account number matching
            $.validator.addMethod("equalToModalAccountNumber", function(value, element) {
                var confirmValue = value.replace(/\D/g, '');
                // If field is empty, let the required rule handle it
                if (!confirmValue || !modalActualAccountNumber) {
                    return true;
                }
                // Check if values match
                return confirmValue === modalActualAccountNumber;
            }, "Account numbers do not match");
            
            // Initialize jQuery Validation for modal form
            var $modalForm = $('#authorizeNetForm');
            // Destroy existing validator if any
            if ($modalForm.data('validator')) {
                $modalForm.validate().destroy();
            }
            $modalForm.validate({
                onfocusout: false, // Don't validate on blur
                onkeyup: false, // Don't validate on keyup
                onclick: false, // Don't validate on click
                rules: {
                    bank_account_holder_name: {
                        required: true,
                        maxlength: 255
                    },
                    bank_account_number: {
                        required: true,
                        minlength: 1
                    },
                    confirm_bank_account_number: {
                        required: true,
                        equalToModalAccountNumber: true
                    },
                    bank_routing_number: {
                        required: true,
                        maxlength: 20
                    }
                },
                messages: {
                    bank_account_holder_name: {
                        required: "Please enter account holder name",
                        maxlength: "Account holder name must not exceed 255 characters"
                    },
                    bank_account_number: {
                        required: "Please enter account number"
                    },
                    confirm_bank_account_number: {
                        required: "Please confirm account number",
                        equalToModalAccountNumber: "Account numbers do not match"
                    },
                    bank_routing_number: {
                        required: "Please enter routing number",
                        maxlength: "Routing number must not exceed 20 characters"
                    }
                },
                errorElement: 'div',
                errorClass: 'invalid-feedback',
                errorPlacement: function(error, element) {
                    if (element.attr('name') === 'confirm_bank_account_number') {
                        // For confirm account number, use our custom error div only
                        // Don't insert the jQuery Validate error message to avoid duplicates
                        $accountNumberMatchError.removeClass('d-none').addClass('d-block').show();
                        error.remove(); // Remove the jQuery Validate error element
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid').removeClass('is-valid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid').addClass('is-valid');
                    if ($(element).attr('name') === 'confirm_bank_account_number') {
                        $accountNumberMatchError.addClass('d-none').removeClass('d-block').hide();
                    }
                },
                submitHandler: function(form) {
                    // This will only be called if validation passes
                    handleAuthorizeNetFormSubmit(form);
                    return false; // Prevent default form submission
                }
            });
            
            // Mask account number input (show * instead of actual numbers)
            // Use keypress to capture each digit as it's typed
            $accountNumberInput.on('keypress', function(e) {
                // Only allow digits
                var char = String.fromCharCode(e.which);
                if (!/\d/.test(char)) {
                    e.preventDefault();
                    return false;
                }
                
                var $input = $(this);
                var inputElement = this;
                var cursorPosition = inputElement.selectionStart || 0;
                var selectionEnd = inputElement.selectionEnd || cursorPosition;
                var selectionLength = selectionEnd - cursorPosition;
                
                // Handle insertion at cursor position
                if (selectionLength > 0) {
                    // Replace selected text
                    modalActualAccountNumber = modalActualAccountNumber.substring(0, cursorPosition) + 
                                               char + 
                                               modalActualAccountNumber.substring(cursorPosition + selectionLength);
                } else {
                    // Insert at cursor position
                    modalActualAccountNumber = modalActualAccountNumber.substring(0, cursorPosition) + 
                                               char + 
                                               modalActualAccountNumber.substring(cursorPosition);
                }
                
                // Update display
                $input.val('*'.repeat(modalActualAccountNumber.length));
                
                // Move cursor forward
                var newCursorPos = cursorPosition + 1;
                setTimeout(function() {
                    inputElement.setSelectionRange(newCursorPos, newCursorPos);
                }, 0);
                
                e.preventDefault();
                return false;
            });
            
            // Handle input event for paste and other scenarios
            $accountNumberInput.on('input', function(e) {
                var $input = $(this);
                var inputElement = this;
                var currentValue = $input.val();
                var cursorPosition = inputElement.selectionStart || 0;
                
                // Extract all digits from the input (handles paste)
                var allDigits = currentValue.replace(/\D/g, '');
                
                // If digits were pasted or input changed significantly
                if (allDigits.length !== modalActualAccountNumber.length) {
                    modalActualAccountNumber = allDigits;
                }
                
                // Update display with asterisks
                $input.val('*'.repeat(modalActualAccountNumber.length));
                
                // Restore cursor position
                var newCursorPos = Math.min(cursorPosition, modalActualAccountNumber.length);
                setTimeout(function() {
                    inputElement.setSelectionRange(newCursorPos, newCursorPos);
                }, 0);
                
                // Trigger jQuery Validate validation when account number changes (only if confirm field has value)
                var confirmValue = $confirmAccountNumberInput.val();
                if (confirmValue && modalActualAccountNumber) {
                    $confirmAccountNumberInput.valid();
                } else {
                    // Clear error if account number is empty
                    $confirmAccountNumberInput.removeClass('is-invalid');
                    $accountNumberMatchError.hide().removeClass('d-block').addClass('d-none');
                }
            });
            
            // Handle keydown for deletion
            $accountNumberInput.on('keydown', function(e) {
                var $input = $(this);
                var inputElement = this;
                var key = e.key;
                var cursorPosition = inputElement.selectionStart || 0;
                var selectionEnd = inputElement.selectionEnd || cursorPosition;
                var selectionLength = selectionEnd - cursorPosition;
                
                // Handle backspace and delete
                if (key === 'Backspace' || key === 'Delete') {
                    if (selectionLength > 0) {
                        // Delete selected text
                        modalActualAccountNumber = modalActualAccountNumber.substring(0, cursorPosition) + 
                                                   modalActualAccountNumber.substring(cursorPosition + selectionLength);
                    } else if (key === 'Backspace' && cursorPosition > 0) {
                        // Delete character before cursor
                        modalActualAccountNumber = modalActualAccountNumber.substring(0, cursorPosition - 1) + 
                                                   modalActualAccountNumber.substring(cursorPosition);
                    } else if (key === 'Delete' && cursorPosition < modalActualAccountNumber.length) {
                        // Delete character after cursor
                        modalActualAccountNumber = modalActualAccountNumber.substring(0, cursorPosition) + 
                                                   modalActualAccountNumber.substring(cursorPosition + 1);
                    }
                    
                    // Update display
                    $input.val('*'.repeat(modalActualAccountNumber.length));
                    
                    // Adjust cursor position
                    var newCursorPos = key === 'Backspace' ? Math.max(0, cursorPosition - 1) : cursorPosition;
                    setTimeout(function() {
                        inputElement.setSelectionRange(newCursorPos, newCursorPos);
                    }, 0);
                    
                    e.preventDefault();
                    return false;
                }
                
                // Prevent non-digit characters
                if (key.length === 1 && !/\d/.test(key) && !e.ctrlKey && !e.metaKey) {
                    e.preventDefault();
                    return false;
                }
            });
            
            // Handle confirm account number input (show actual numbers) - real-time validation
            $confirmAccountNumberInput.on('input', function() {
                var $input = $(this);
                // Remove all non-digit characters
                $input.val($input.val().replace(/\D/g, ''));
                
                var confirmValue = $input.val();
                // Only validate if both fields have values
                if (confirmValue && modalActualAccountNumber) {
                    $input.valid();
                } else {
                    // Clear error if field is empty
                    $input.removeClass('is-invalid');
                    $accountNumberMatchError.hide().removeClass('d-block').addClass('d-none');
                }
            });
            
            // Also validate on blur (only if both fields have values)
            $confirmAccountNumberInput.on('blur', function() {
                var $input = $(this);
                var confirmValue = $input.val();
                if (confirmValue && modalActualAccountNumber) {
                    $input.valid();
                } else {
                    // Clear error if field is empty
                    $input.removeClass('is-invalid');
                    $accountNumberMatchError.hide().removeClass('d-block').addClass('d-none');
                }
            });
        }

        function closeAuthorizeNetModal() {
            if (authorizeNetModal) {
                authorizeNetModal.classList.remove('active');
                document.body.style.overflow = '';
                var $modalForm = $('#authorizeNetForm');
                $modalForm[0].reset();
                // Reset jQuery Validate
                if ($modalForm.data('validator')) {
                    $modalForm.validate().resetForm();
                }
                modalActualAccountNumber = '';
                // Reset error states
                $('#confirm_bank_account_number').removeClass('is-invalid');
                $('#account_number_match_error_modal').hide();
                // Ensure account number field is empty
                $('#bank_account_number').val('');
                $('#confirm_bank_account_number').val('');
            }
        }

        if (closeAuthorizeNetBtn) {
            closeAuthorizeNetBtn.addEventListener('click', closeAuthorizeNetModal);
        }
        if (cancelAuthorizeNetBtn) {
            cancelAuthorizeNetBtn.addEventListener('click', closeAuthorizeNetModal);
        }

        // Authorize.net Form Submit Handler (called by jQuery Validate)
        async function handleAuthorizeNetFormSubmit(form) {
            const formData = new FormData(form);
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;
            
            // Get account number inputs using jQuery
            var $confirmAccountNumberInput = $('#confirm_bank_account_number');
            var confirmValue = $confirmAccountNumberInput.val().replace(/\D/g, '');
            
            // Final validation (jQuery Validate already checked, but double-check)
            if (!modalActualAccountNumber || !confirmValue) {
                alert('Please enter and confirm your account number.');
                return false;
            }
            
            if (modalActualAccountNumber !== confirmValue) {
                $confirmAccountNumberInput.addClass('is-invalid');
                $('#account_number_match_error_modal').show();
                alert('Account numbers do not match. Please verify and try again.');
                return false;
            }
            
            // Map form fields to API fields (use actual account number)
            const data = {
                bank_account_holder_name: formData.get('bank_account_holder_name'),
                bank_account_number: modalActualAccountNumber,
                bank_routing_number: formData.get('bank_routing_number'),
                confirm_bank_account_number: formData.get('confirm_bank_account_number')

            };
            
            // Disable submit button
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i data-lucide="loader-2" class="btn-icon" style="animation: spin 1s linear infinite;"></i> Saving...';
            
            try {
                const response = await fetch('{{ route("front.settings.update_payment_settings") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(data)
                });
                
                const result = await response.json();
                
                if (response.ok && (result.status === 200 || result.status === 201)) {
                    // Success
                    document.getElementById('authorizeNetCredentialsStatus').style.display = 'none';
                    document.getElementById('authorizeNetCredentialsConfigured').style.display = 'block';
                    closeAuthorizeNetModal();
                    lucide.createIcons();
                    $('#submitPaymentSetup').removeClass('event-none');
                    $('#skipPaymentToReview').show();
                    
                    // Show success message if needed
                    if (typeof showNotification === 'function') {
                        showNotification('Bank account settings saved successfully!', 'success');
                    }
                } else {
                    // Handle validation errors
                    let errorMessage = result.message || 'Failed to save credentials. Please try again.';
                    if (result.errors) {
                        const errorMessages = Object.values(result.errors).flat();
                        errorMessage = errorMessages.join('<br>');
                    }
                    alert(errorMessage);
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred while saving credentials. Please try again.');
            } finally {
                // Re-enable submit button
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalBtnText;
                lucide.createIcons();
            }
        }

        // Go to Settings button
        const goToSettingsBtn = document.getElementById('goToSettings');
        if (goToSettingsBtn) {
            goToSettingsBtn.addEventListener('click', function() {
                // TODO: Navigate to settings page
                alert('Redirecting to Settings...');
            });
        }

        // Payment Setup Form Submit - Navigate to Review & Launch
        const paymentSetupForm = document.getElementById('paymentSetupForm');
        if (paymentSetupForm) {
            paymentSetupForm.addEventListener('submit', function(e) {
                e.preventDefault();
                updateReviewSection();
                showStep(3);
            });
        }

        // Step navigation
        function showStep(step) {
            document.querySelectorAll('.campaign-modal-step').forEach(s => {
                s.style.display = 'none';
            });
            document.getElementById('step' + step).style.display = 'block';
            
            // Initialize date picker when showing step 1
            if (step === 1) {
                setTimeout(() => {
                    initDatePicker();
                }, 100);
            }
            
            // Update payment sections when showing step 2
            if (step === 2) {
                const paymentTypeRadio = document.querySelector('input[name="campaign_payment_type"]:checked');
                const paymentType = paymentTypeRadio ? paymentTypeRadio.value : '';
                updatePaymentSections(paymentType);
                
                // Check if credentials are already configured and show success message
                @if(isset($authUserSettings) && $authUserSettings && $authUserSettings->authorize_login_id && $authUserSettings->authorize_transaction_key)
                const credentialsStatus = document.getElementById('authorizeNetCredentialsStatus');
                const credentialsConfigured = document.getElementById('authorizeNetCredentialsConfigured');
                if (credentialsStatus && credentialsConfigured) {
                    credentialsStatus.style.display = 'none';
                    credentialsConfigured.style.display = 'block';
                }
                @endif
                
                // Initialize select2 for payment step
                setTimeout(() => {
                    initSelect2();
                }, 100);
            }
            
            // Update progress indicators
            document.querySelectorAll('.progress-step-circle').forEach((circle, index) => {
                if (index + 1 <= step) {
                    circle.classList.add('active');
                } else {
                    circle.classList.remove('active');
                }
            });
            
            currentStep = step;
            lucide.createIcons();
        }

        // Custom Alert Function (appears above modal with z-index 10002)
        function showCustomAlert(message) {
            const alertModal = document.getElementById('customAlertModal');
            const alertMessage = document.getElementById('customAlertMessage');
            const alertOkBtn = document.getElementById('customAlertOkBtn');
            
            if (alertModal && alertMessage) {
                alertMessage.textContent = message;
                alertModal.classList.add('active');
                
                // Reinitialize lucide icons for the alert icon
                if (typeof lucide !== 'undefined') {
                    setTimeout(() => {
                        lucide.createIcons();
                    }, 10);
                }
            } else {
                // Fallback to native alert if custom modal elements don't exist
                alert(message);
            }
        }
        
        // Initialize custom alert close handlers (only once)
        const customAlertModal = document.getElementById('customAlertModal');
        const customAlertOkBtn = document.getElementById('customAlertOkBtn');
        
        if (customAlertOkBtn) {
            customAlertOkBtn.addEventListener('click', function() {
                if (customAlertModal) {
                    customAlertModal.classList.remove('active');
                }
            });
        }
        
        if (customAlertModal) {
            customAlertModal.addEventListener('click', function(e) {
                if (e.target === customAlertModal) {
                    customAlertModal.classList.remove('active');
                }
            });
        }
        
        // Fund allocation calculation with validation
        const allocationInputs = {
            training: document.getElementById('allocation_training'),
            equipment: document.getElementById('allocation_equipment'),
            playerPool: document.getElementById('allocation_player_pool')
        };
        
        // Store previous values for each field
        let previousValues = {
            training: 0,
            equipment: 0,
            playerPool: 0
        };
        
        // Initialize previous values if inputs exist
        if (allocationInputs.training && allocationInputs.equipment && allocationInputs.playerPool) {
            previousValues = {
                training: parseFloat(allocationInputs.training.value) || 0,
                equipment: parseFloat(allocationInputs.equipment.value) || 0,
                playerPool: parseFloat(allocationInputs.playerPool.value) || 0
            };
        }
        
        // Function to reset previous values (called when modal is reset)
        function resetAllocationPreviousValues() {
            if (allocationInputs.training && allocationInputs.equipment && allocationInputs.playerPool) {
                previousValues = {
                    training: parseFloat(allocationInputs.training.value) || 0,
                    equipment: parseFloat(allocationInputs.equipment.value) || 0,
                    playerPool: parseFloat(allocationInputs.playerPool.value) || 0
                };
                updateAllocationTotal();
            }
        }
        
        function updateAllocationTotal() {
            if (!allocationInputs.training || !allocationInputs.equipment || !allocationInputs.playerPool) {
                return;
            }
            
            const training = parseFloat(allocationInputs.training.value) || 0;
            const equipment = parseFloat(allocationInputs.equipment.value) || 0;
            const playerPool = parseFloat(allocationInputs.playerPool.value) || 0;
            const total = training + equipment + playerPool;
            const totalElement = document.getElementById('allocation_total');
            
            if (totalElement) {
                totalElement.textContent = total.toFixed(2);
                
                // Update styling based on total
                const totalContainer = totalElement.closest('.allocation-total');
                if (totalContainer) {
                    if (total > 100) {
                        totalContainer.style.color = '#ef4444'; // Red color
                        totalElement.style.color = '#ef4444';
                    } else {
                        totalContainer.style.color = ''; // Reset to default
                        totalElement.style.color = '';
                    }
                }
            }
        }
        
        // Validation function for each input
        function validateAllocationInput(inputName, inputElement) {
            if (!allocationInputs.training || !allocationInputs.equipment || !allocationInputs.playerPool) {
                return true;
            }
            
            const currentValue = parseFloat(inputElement.value) || 0;
            
            // Get other two values
            const otherInputs = Object.keys(allocationInputs).filter(key => key !== inputName);
            const otherValues = otherInputs.map(key => parseFloat(allocationInputs[key].value) || 0);
            const otherTotal = otherValues.reduce((sum, val) => sum + val, 0);
            
            // Check if total would exceed 100%
            const newTotal = currentValue + otherTotal;
            
            if (newTotal > 100) {
                // Show custom alert (appears above modal)
                showCustomAlert('The total fund allocation cannot exceed 100%. Current total would be ' + newTotal.toFixed(2) + '%.');
                
                // Reset to previous value
                inputElement.value = previousValues[inputName];
                
                // Update total display
                updateAllocationTotal();
                
                return false;
            }
            
            // Update previous value if validation passes
            previousValues[inputName] = currentValue;
            updateAllocationTotal();
            return true;
        }
        
        // Add event listeners with validation (only if inputs exist)
        if (allocationInputs.training) {
            allocationInputs.training.addEventListener('input', function() {
                validateAllocationInput('training', this);
            });
        }
        
        if (allocationInputs.equipment) {
            allocationInputs.equipment.addEventListener('input', function() {
                validateAllocationInput('equipment', this);
            });
        }
        
        if (allocationInputs.playerPool) {
            allocationInputs.playerPool.addEventListener('input', function() {
                validateAllocationInput('playerPool', this);
            });
        }
        
        // Initialize total display on page load
        updateAllocationTotal();

        // File upload
        const fileUpload = document.getElementById('campaignImageUpload');
        const fileInput = document.getElementById('campaign_image');
        const uploadedFile = document.getElementById('uploadedFile');

        fileUpload.addEventListener('click', () => fileInput.click());
        fileUpload.addEventListener('dragover', (e) => {
            e.preventDefault();
            fileUpload.classList.add('drag-over');
        });
        fileUpload.addEventListener('dragleave', () => {
            fileUpload.classList.remove('drag-over');
        });
        fileUpload.addEventListener('drop', (e) => {
            e.preventDefault();
            fileUpload.classList.remove('drag-over');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                fileInput.files = files;
                handleFileSelect(files[0]);
            }
        });

        fileInput.addEventListener('change', function(e) {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });

        function handleFileSelect(file) {
            if (file.size > 25 * 1024 * 1024) {
                alert('File size must be less than 25 MB');
                return;
            }
            document.getElementById('fileName').textContent = file.name;
            document.getElementById('fileSize').textContent = (file.size / 1024).toFixed(2) + ' KB';
            uploadedFile.style.display = 'flex';
            fileUpload.style.display = 'none';
            
            // Hide existing image preview when new file is selected
            const existingImagePreview = document.getElementById('existingImagePreview');
            if (existingImagePreview) {
                existingImagePreview.style.display = 'none';
            }
            
            // Reset progress bar to 0 when file is selected
            const progressFill = document.getElementById('fileProgress');
            if (progressFill) {
                progressFill.style.width = '100%';
            }
        }
        
        // Function to update upload progress
        function updateUploadProgress(percent) {
            const progressFill = document.getElementById('fileProgress');
            if (progressFill) {
                progressFill.style.width = Math.min(100, Math.max(0, percent)) + '%';
            }
        }

        document.getElementById('deleteFile').addEventListener('click', function() {
            fileInput.value = '';
            uploadedFile.style.display = 'none';
            fileUpload.style.display = 'block';
            
            // Show existing image preview again if it exists (when editing)
            const existingImagePreview = document.getElementById('existingImagePreview');
            const existingImageSrc = document.getElementById('existingImageSrc');
            if (existingImagePreview && existingImageSrc && existingImageSrc.src) {
                existingImagePreview.style.display = 'block';
            }
        });

        // Step 1 Form Submit
        document.getElementById('campaignBasicsForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            // Sync dates from flatpickr to hidden fields before submission
            if (typeof window.syncDatesToHiddenFields === 'function') {
                window.syncDatesToHiddenFields();
            }
            
            const formData = new FormData(this);
            
            // Add CSRF token to form data
            formData.append('_token', '{{ csrf_token() }}');
            
            // Use XMLHttpRequest to track upload progress (fetch API doesn't support upload progress)
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                
                // Track upload progress
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percentComplete = (e.loaded / e.total) * 100;
                        updateUploadProgress(percentComplete);
                    }
                });
                
                // Handle completion
                xhr.addEventListener('load', function() {
                    // Always set to 100% when request completes
                    updateUploadProgress(100);
                    
                    // Check if response is a redirect (302, 301, etc.)
                    if (xhr.status === 302 || xhr.status === 301) {
                        console.error('Redirect detected. Session may have expired.');
                        alert('Your session has expired. Please refresh the page and try again.');
                        window.location.reload();
                        reject(new Error('Redirect detected'));
                        return;
                    }
                    
                    // Check if response is OK
                    if (xhr.status >= 200 && xhr.status < 300) {
                        try {
                            const result = JSON.parse(xhr.responseText);
                            
                            if (result.status === 200 || result.status === 201) {
                                campaignId = result.data.id;
                                campaignData = { ...campaignData, ...Object.fromEntries(formData) };
                                document.getElementById('nft_campaign_id').value = campaignId;
                                document.getElementById('campaign_id').value = campaignId;
                                if (result.data.is_account_info == 1) {
                                    // $('#skipPaymentToReview').show();
                                    $('#submitPaymentSetup').removeClass('event-none');
                                }
                                else {
                                    // $('#skipPaymentToReview').hide();
                                    $('#submitPaymentSetup').addClass('event-none');
                                }
                                showStep(2);
                                resolve(result);
                            } else {
                                alert(result.message || 'Error saving campaign');
                                reject(new Error(result.message || 'Error saving campaign'));
                            }
                        } catch (parseError) {
                            console.error('Error parsing response:', parseError);
                            alert('Unexpected response format. Please refresh the page and try again.');
                            reject(parseError);
                        }
                    } else {
                        // Handle error response
                        try {
                            const errorResult = JSON.parse(xhr.responseText);
                            const errorMessage = errorResult.message || errorResult.error || 'An error occurred. Please try again.';
                            if (errorResult.errors) {
                                const errorMessages = Object.values(errorResult.errors).flat();
                                alert(errorMessages.join('\n'));
                            } else {
                                alert(errorMessage);
                            }
                            reject(new Error(errorMessage));
                        } catch (parseError) {
                            const responseText = xhr.responseText;
                            if (responseText.includes('<!DOCTYPE') || responseText.includes('<html')) {
                                alert('Your session may have expired. Please refresh the page and try again.');
                                window.location.reload();
                            } else {
                                alert('An error occurred. Please try again.');
                            }
                            reject(parseError);
                        }
                    }
                });
                
                // Handle errors
                xhr.addEventListener('error', function() {
                    console.error('Network error occurred');
                    alert('An error occurred. Please try again.');
                    reject(new Error('Network error'));
                });
                
                // Handle abort
                xhr.addEventListener('abort', function() {
                    console.log('Upload aborted');
                    reject(new Error('Upload aborted'));
                });
                
                // Open and send request
                xhr.open('POST', '{{ route("profile.campaigns.store") }}');
                xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xhr.setRequestHeader('Accept', 'application/json');
                xhr.send(formData);
            });
        });

        // Step 2 Form Submit
        document.getElementById('nftTierForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            
            try {
                const response = await fetch('{{ route("profile.campaigns.nft-tier.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: formData
                });

                const result = await response.json();
                
                if (result.status === 200 || result.status === 201) {
                    // Store NFT tier data
                    const blockchainSelect = document.getElementById('nft_blockchain');
                    nftTiers.push({
                        title: formData.get('nft_title') || 'NFT Tier ' + (nftTiers.length + 1),
                        price: formData.get('nft_price'),
                        quantity: formData.get('nft_quantity'),
                        royalty: formData.get('nft_royalty_percentage'),
                        blockchain: blockchainSelect.options[blockchainSelect.selectedIndex] ? blockchainSelect.options[blockchainSelect.selectedIndex].text : 'N/A',
                        minting_mode: formData.get('minting_mode'),
                        rewards_perks_note: formData.get('rewards_perks_note'),
                        table_row_id: result.data.id
                    });
                    
                    // Update review section
                    updateReviewSection();
                    showStep(3);
                } else {
                    alert(result.message || 'Error saving NFT tier');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            }
        });

        // Add Another Tier
        document.getElementById('addAnotherTier').addEventListener('click', async function() {
            const form = document.getElementById('nftTierForm');
            const formData = new FormData(form);
            
            try {
                const response = await fetch('{{ route("profile.campaigns.nft-tier.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: formData
                });

                const result = await response.json();
                
                if (result.status === 200 || result.status === 201) {
                    // Store NFT tier data
                    const blockchainSelect = document.getElementById('nft_blockchain');
                    nftTiers.push({
                        title: formData.get('nft_title') || 'NFT Tier ' + (nftTiers.length + 1),
                        price: formData.get('nft_price'),
                        quantity: formData.get('nft_quantity'),
                        royalty: formData.get('nft_royalty_percentage'),
                        blockchain: blockchainSelect.options[blockchainSelect.selectedIndex] ? blockchainSelect.options[blockchainSelect.selectedIndex].text : 'N/A',
                        minting_mode: formData.get('minting_mode'),
                        rewards_perks_note: formData.get('rewards_perks_note'),
                        table_row_id: result.data.id
                    });
                    
                    // Reset form
                    form.reset();
                    document.getElementById('nft_campaign_id').value = campaignId; // Keep campaign ID
                    document.getElementById('nft_tier_id').value = 0; // Reset tier ID for new tier
                    alert('NFT tier added successfully!');
                    generateNftList();
                } else {
                    alert(result.message || 'Error saving NFT tier');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            }
        });

        // Back buttons
        const backToStep1FromPayment = document.getElementById('backToStep1FromPayment');
        if (backToStep1FromPayment) {
            backToStep1FromPayment.addEventListener('click', () => showStep(1));
        }
        const backToStep1 = document.getElementById('backToStep1');
        if (backToStep1) {
            backToStep1.addEventListener('click', () => showStep(1));
        }
        const backToStep2 = document.getElementById('backToStep2');
        if (backToStep2) {
            backToStep2.addEventListener('click', () => showStep(2));
        }
        
        // Skip Payment to Review
        const skipPaymentToReview = document.getElementById('skipPaymentToReview');
        if (skipPaymentToReview) {
            skipPaymentToReview.addEventListener('click', () => {
                updateReviewSection();
                showStep(3);
            });
        }
        document.getElementById('skipToReview').addEventListener('click', () => {
            updateReviewSection();
            showStep(3);
        });
        // Launch campaign
        document.getElementById('launchCampaign').addEventListener('click', async function() {
            if (!campaignId) {
                alert('Campaign ID is missing');
                return;
            }

            // Update campaign with checklist items
            try {
                // Sync dates from flatpickr to hidden fields before submission
                if (typeof window.syncDatesToHiddenFields === 'function') {
                    window.syncDatesToHiddenFields();
                }
                
                const updateResponse = await fetch('{{ route("profile.campaigns.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: new FormData(document.getElementById('campaignBasicsForm'))
                });

                const updateResult = await updateResponse.json();
                
                if (updateResult.status === 200 || updateResult.status === 201) {
                        // Update campaign with checklist items first
                    const updateFormData = new FormData(document.getElementById('campaignBasicsForm'));
                    updateFormData.append('campaign_id', campaignId);
                    updateFormData.append('is_terms_agreed', '1');
                    updateFormData.append('is_royalty_distribution_verified', '1');
                    updateFormData.append('is_nft_content_approved', '1');
                    
                    const updateCheckResponse = await fetch('{{ route("profile.campaigns.store") }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: updateFormData
                    });

                    const updateCheckResult = await updateCheckResponse.json();
                    
                    if (updateCheckResult.status === 200 || updateCheckResult.status === 201) {
                        // Now launch the campaign
                        const response = await fetch(`{{ route("profile.campaigns.launch", ":id") }}`.replace(':id', campaignId), {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                is_terms_agreed: 1,
                                is_royalty_distribution_verified: 1,
                                is_nft_content_approved: 1
                            })
                        });

                        const result = await response.json();
                        
                        if (result.status === 200) {
                            alert('Campaign launched successfully!');
                            closeModal();
                            location.reload();
                        } else {
                            alert(result.message || 'Error launching campaign');
                        }
                    } else {
                        alert(updateCheckResult.message || 'Error updating campaign checklist');
                    }
                } else {
                    alert(updateResult.message || 'Error updating campaign');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            }
        });

        // Save as Draft
        document.getElementById('saveAsDraft').addEventListener('click', async function() {
            if (!campaignId) {
                alert('Please complete Step 1 first');
                return;
            }

            try {
                // Sync dates from flatpickr to hidden fields before submission
                if (typeof window.syncDatesToHiddenFields === 'function') {
                    window.syncDatesToHiddenFields();
                }
                
                const formData = new FormData(document.getElementById('campaignBasicsForm'));
                formData.append('status', '0'); // Draft status
                if (campaignId) {
                    formData.append('campaign_id', campaignId);
                }

                const response = await fetch('{{ route("profile.campaigns.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: formData
                });

                const result = await response.json();
                
                if (result.status === 200 || result.status === 201) {
                    alert('Campaign saved as draft successfully!');
                    closeModal();
                    location.reload();
                } else {
                    alert(result.message || 'Error saving draft');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            }
        });

        function updateReviewSection() {
            const form = document.getElementById('campaignBasicsForm');
            document.getElementById('review_title').textContent = form.querySelector('[name="title"]').value || 'N/A';
            document.getElementById('review_goal').textContent = '$' + parseFloat(form.querySelector('[name="fund_target"]').value || 0).toLocaleString();
            
            // Payment Type
            const paymentTypeRadio = document.querySelector('input[name="campaign_payment_type"]:checked');
            const paymentType = paymentTypeRadio ? paymentTypeRadio.value : 'N/A';
            const paymentTypeLabels = {
                '1': 'Crypto',
                '2': 'Fiat',
                '3': 'Hybrid'
            };
            document.getElementById('review_payment_type').textContent = paymentTypeLabels[paymentType] || paymentType;
            
            // Payment Setup Review
            const paymentSection = document.getElementById('review_payment_section');
            const cryptoReview = document.getElementById('review_crypto_payment');
            const fiatReview = document.getElementById('review_fiat_payment');
            
            if (paymentType && paymentType !== 'N/A') {
                paymentSection.style.display = 'block';
                
                if (paymentType === '1' || paymentType === '3') {
                    cryptoReview.style.display = 'block';
                    document.getElementById('review_wallet_address').textContent = document.getElementById('wallet_address').value || 'N/A';
                    const networkSelect = document.getElementById('wallet_network');
                    document.getElementById('review_wallet_network').textContent = networkSelect.options[networkSelect.selectedIndex]?.text || 'N/A';
                    const typeSelect = document.getElementById('wallet_type');
                    document.getElementById('review_wallet_type').textContent = typeSelect.options[typeSelect.selectedIndex]?.text || 'N/A';
                } else {
                    cryptoReview.style.display = 'none';
                }
                
                if (paymentType === '2' || paymentType === '3') {
                    fiatReview.style.display = 'block';
                    const isConfigured = document.getElementById('authorizeNetCredentialsConfigured').style.display !== 'none';
                    document.getElementById('review_authorize_status').textContent = isConfigured ? 'Configured' : 'Not Configured';
                } else {
                    fiatReview.style.display = 'none';
                }
            } else {
                paymentSection.style.display = 'none';
            }
            
            const startDate = form.querySelector('[name="campaign_started_at"]').value || '';
            const endDate = form.querySelector('[name="campaign_finished_at"]').value || '';
            let durationText = 'N/A';
            if (startDate && endDate) {
                // Parse dates as local dates (not UTC) to avoid timezone shift issues
                // Format: YYYY-MM-DD or YYYY-MM-DD HH:mm:ss
                const startDateStr = startDate.split(' ')[0];
                const endDateStr = endDate.split(' ')[0];
                
                // Parse date string YYYY-MM-DD as local date
                function parseLocalDate(dateStr) {
                    const parts = dateStr.split('-');
                    if (parts.length === 3) {
                        // Create date in local timezone: new Date(year, monthIndex, day)
                        // monthIndex is 0-based (0 = January, 11 = December)
                        return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
                    }
                    // Fallback to default parsing
                    return new Date(dateStr);
                }
                
                const start = parseLocalDate(startDateStr);
                const end = parseLocalDate(endDateStr);
                durationText = start.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + ' - ' + 
                            end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            }
            document.getElementById('review_duration').textContent = durationText;
            
            const categorySelect = form.querySelector('[name="master_campaign_category_id"]');
            document.getElementById('review_category').textContent = categorySelect.options[categorySelect.selectedIndex].text || 'N/A';
            
            document.getElementById('review_training').textContent = (form.querySelector('[name="fund_allocation_training"]').value || 0) + '%';
            document.getElementById('review_equipment').textContent = (form.querySelector('[name="fund_allocation_equipment"]').value || 0) + '%';
            document.getElementById('review_player_pool').textContent = (form.querySelector('[name="fund_allocation_player_pool"]').value || 0) + '%';
            
            const total = parseFloat(form.querySelector('[name="fund_allocation_training"]').value || 0) +
                        parseFloat(form.querySelector('[name="fund_allocation_equipment"]').value || 0) +
                        parseFloat(form.querySelector('[name="fund_allocation_player_pool"]').value || 0);
            document.getElementById('review_total').textContent = total.toFixed(2) + '%';
            
            // Update NFT Tiers Preview
            const tiersPreview = document.getElementById('nftTiersPreview');
            tiersPreview.innerHTML = '';
            
            if (nftTiers.length === 0) {
                $('#nftTiersReviewSection').hide();
                // tiersPreview.innerHTML = '<p style="color: #6b7280; font-size: 0.875rem;">No NFT tiers added yet.</p>';
            } else {
                $('#nftTiersReviewSection').show();
                nftTiers.forEach((tier, index) => {
                    const tierDiv = document.createElement('div');
                    tierDiv.className = 'nft-tier-preview';
                    tierDiv.innerHTML = `
                        <div class="nft-tier-preview-title">${tier.title || 'NFT Tier ' + (index + 1)}</div>
                        <div class="nft-tier-preview-details">Supply: ${tier.quantity || 'N/A'} | Royalty: ${tier.royalty || 'N/A'}%</div>
                        <div class="nft-tier-preview-details" style="margin-top: 4px;">Price: $${parseFloat(tier.price || 0).toLocaleString()}</div>
                    `;
                    tiersPreview.appendChild(tierDiv);
                });
            }
        }

        // Initialize date pickers for NFT tier duration (if needed) - wait for flatpickr
        function initNftDatePickers() {
            if (typeof flatpickr !== 'undefined' && typeof flatpickr === 'function') {
                const nftStartDate = document.getElementById('nft_start_date');
                const nftEndDate = document.getElementById('nft_end_date');
                if (nftStartDate && nftEndDate) {
                    flatpickr("#nft_start_date, #nft_end_date", {
                        dateFormat: "Y-m-d",
                        altInput: true,
                        altFormat: "M j, Y",
                        placeholder: "-- Select --",
                        clickOpens: true
                    });
                }
            } else {
                setTimeout(initNftDatePickers, 100);
            }
        }
        // Initialize NFT date pickers when needed (they're hidden by default)
        // initNftDatePickers();

        function generateNftList() {
            if (nftTiers.length > 0) {
                const previewContainer = document.getElementById('nftTiersPreviewStep2');
                if (previewContainer) {
                    previewContainer.innerHTML = '';
                    $('#nftTiersReviewSectionStep2').removeClass('d-none');
                    nftTiers.forEach((tier, index) => {
                        const tierDiv = document.createElement('div');
                        tierDiv.className = 'nft-tier-preview';
                        tierDiv.innerHTML = `
                            <div style="display: flex; justify-content: space-between; align-items: start;">
                                <div style="flex: 1;">
                                    <div class="nft-tier-preview-title">${tier.title || 'NFT Tier ' + (index + 1)}</div>
                                    <div class="nft-tier-preview-details">Supply: ${tier.quantity || 'N/A'} | Royalty: ${tier.royalty || 'N/A'}%</div>
                                    <div class="nft-tier-preview-details" style="margin-top: 4px;">Price: $${parseFloat(tier.price || 0).toLocaleString()}</div>
                                </div>
                                <div class="action-buttons" style="display: flex; gap: 8px;">
                                    <button class="action-btn action-btn-edit" title="Edit" onclick="editNftTier(${index})">
                                        <i data-lucide="pencil"></i>
                                    </button>
                                    <button class="action-btn action-btn-delete" title="Delete" onclick="deleteNftTier(${index})">
                                        <i data-lucide="trash-2"></i>
                                    </button>
                                </div>
                            </div>
                        `;
                        previewContainer.appendChild(tierDiv);
                    });
                    // Reinitialize lucide icons
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                }
            } else {
                $('#nftTiersReviewSectionStep2').addClass('d-none');
            }
        }

        // Edit NFT Tier function (exposed globally)
        window.editNftTier = function(index) {
            const tier = nftTiers[index];
            if (tier) {
                // Set the NFT tier ID in hidden field for update
                document.getElementById('nft_tier_id').value = tier.table_row_id || 0;
                
                // Populate form with tier data
                document.getElementById('nft_title').value = tier.title || '';
                document.getElementById('nft_price').value = tier.price || '';
                document.getElementById('nft_quantity').value = tier.quantity || '';
                document.getElementById('nft_royalty').value = tier.royalty || '';
                document.getElementById('nft_rewards').value = tier.rewards_perks_note || '';
                
                // Set blockchain select value
                const blockchainSelect = document.getElementById('nft_blockchain');
                for (let i = 0; i < blockchainSelect.options.length; i++) {
                    if (blockchainSelect.options[i].text === tier.blockchain) {
                        blockchainSelect.value = blockchainSelect.options[i].value;
                        break;
                    }
                }
                
                // Set minting mode radio
                const mintingRadios = document.querySelectorAll('input[name="minting_mode"]');
                mintingRadios.forEach(radio => {
                    if (radio.value === tier.minting_mode) {
                        radio.checked = true;
                    }
                });
                
                // Remove the tier from array (will be re-added on save)
                nftTiers.splice(index, 1);
                generateNftList();
                
                alert('NFT tier loaded for editing. Update the fields and save.');
            }
        };

        // Delete NFT Tier function (exposed globally)
        window.deleteNftTier = async function(index) {
            const tier = nftTiers[index];
            showConfirm('Are you sure you want to delete this NFT tier?', async function(result) {
                if (!result) return;
                
                // If tier has a table_row_id, delete from backend
                if (tier.table_row_id) {
                    try {
                        const response = await fetch(`{{ route("profile.campaigns.nft-tier.destroy", ":id") }}`.replace(':id', tier.table_row_id), {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Content-Type': 'application/json',
                            }
                        });

                        const result = await response.json();
                        
                        if (result.status === 200) {
                            nftTiers.splice(index, 1);
                            generateNftList();
                            alert('NFT tier deleted successfully!');
                        } else {
                            alert(result.message || 'Error deleting NFT tier');
                        }
                    } catch (error) {
                        console.error('Error:', error);
                        alert('An error occurred. Please try again.');
                    }
                } else {
                    // Just remove from local array
                    nftTiers.splice(index, 1);
                    generateNftList();
                    alert('NFT tier removed successfully!');
                }
            });
        };

        
    }
    </script>
@endpush

@endsection