@extends('root')
@section('title', 'Buat Campaign')

@push('styles')
<style>
    /* WhatsApp Phone Mockup Styling */
    .wa-phone-mockup {
        max-width: 360px;
        margin: 0 auto;
        background: linear-gradient(180deg, #075E54 0%, #128C7E 100%);
        border-radius: 24px;
        padding: 6px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .wa-phone-screen {
        background: #E5DDD5;
        border-radius: 20px;
        min-height: 280px;
        padding: 14px 10px;
        position: relative;
        overflow: hidden;
    }
    .wa-phone-screen::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9c2b9' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.5;
        z-index: 0;
    }
    .wa-message-bubble {
        background: #FFFFFF;
        border-radius: 0 10px 10px 10px;
        padding: 8px 12px;
        margin-bottom: 6px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        position: relative;
        z-index: 1;
        max-width: 100%;
    }
    .wa-message-bubble::before {
        content: '';
        position: absolute;
        left: -7px;
        top: 0;
        border-width: 0 7px 9px 0;
        border-style: solid;
        border-color: transparent #FFFFFF transparent transparent;
    }
    .wa-header {
        font-weight: 600;
        font-size: 14px;
        color: #000;
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
    }
    .wa-header-media {
        background: #f0f0f0;
        border-radius: 6px;
        padding: 20px;
        text-align: center;
        margin-bottom: 8px;
        color: #999;
    }
    .wa-body {
        font-size: 13px;
        color: #303030;
        line-height: 1.45;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .wa-body .param {
        color: #0d6efd;
        font-weight: 600;
        background: #e7f1ff;
        padding: 1px 4px;
        border-radius: 3px;
    }
    .wa-footer {
        font-size: 11px;
        color: #8696a0;
        margin-top: 6px;
        padding-top: 5px;
        border-top: 1px solid #f0f0f0;
    }
    .wa-buttons-container {
        margin-top: 6px;
        border-top: 1px solid #eee;
        padding-top: 6px;
    }
    .wa-button-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: transparent;
        color: #00A5F4;
        font-size: 13px;
        font-weight: 500;
        padding: 8px;
        border: none;
        width: 100%;
        text-align: center;
    }
    .wa-button-cta:not(:last-child) {
        border-bottom: 1px solid #eee;
    }
    .param-group {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }
    .param-group-title {
        font-size: 12px;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }
    .no-template-preview {
        text-align: center;
        padding: 40px 20px;
        color: #999;
    }
    .spin {
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Buat Campaign',
        'links' => [
            ['url' => route('agent.campaigns.index'), 'label' => 'Campaigns'],
        ],
        'current' => 'Buat Campaign'
    ])

    <div class="row g-3">
        {{-- Left: Form --}}
        <div class="col-lg-7">
            <div class="card card-body">
                <form id="client-campaign-form">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Template WABA <span class="text-danger">*</span></label>
                        <select name="template_id" id="template_id" class="form-control" required>
                            <option value="">Pilih Template</option>
                            @foreach($templates as $tpl)
                                <option value="{{ $tpl->id }}"
                                    data-language="{{ $tpl->language }}"
                                    data-placeholders="{{ $tpl->placeholders_count }}"
                                    data-body="{{ $tpl->body ?? '' }}"
                                    data-components="{{ json_encode($tpl->components ?? []) }}"
                                    data-category="{{ $tpl->category ?? 'marketing' }}">
                                    {{ $tpl->name }} ({{ $tpl->language }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Bahasa</label>
                            <input type="text" id="template_language" class="form-control" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Kategori</label>
                            <input type="text" id="template_category" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="mb-3" id="parameters-section">
                        <label class="form-label">Parameters</label>
                        <div id="parameters-container">
                            <p class="text-muted mb-0">Pilih template untuk mengisi parameter.</p>
                        </div>
                    </div>

                    {{-- Excel Import Info --}}
                    <div class="mb-3 d-none" id="excel-parameters-info">
                        <div class="alert alert-info">
                            <i class="ti ti-info-circle me-1"></i>
                            <strong>Parameter akan diambil dari file Excel</strong>
                            <p class="mb-0 small">Setelah upload file Excel, Anda akan diminta untuk memapping kolom Excel ke parameter template.</p>
                        </div>
                    </div>

                    {{-- Header Media Section (for IMAGE/VIDEO/DOCUMENT templates) --}}
                    <div class="mb-3 d-none" id="header-media-section">
                        <label class="form-label">Header Media <span class="text-danger">*</span></label>
                        <p class="small text-muted mb-2">Template ini membutuhkan header <strong id="header-media-type-label">gambar</strong>. Isi URL atau unggah file.</p>
                        <div class="alert alert-info py-2 mb-2">
                            <small><i class="ti ti-info-circle me-1"></i>Wajib diisi agar campaign dapat dikirim (Meta API 131008 jika kosong).</small>
                        </div>
                        
                        <ul class="nav nav-tabs nav-tabs-sm mb-2" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#header-upload-tab" role="tab">Upload File</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#header-url-tab" role="tab">URL</a>
                            </li>
                        </ul>
                        
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="header-upload-tab" role="tabpanel">
                                <input type="file" name="header_media_file" id="header_media_file" 
                                       class="form-control" accept="image/jpeg,image/png,video/mp4,application/pdf">
                                <small class="text-muted">Format: JPG, PNG (gambar), MP4 (video), PDF (dokumen). Max 16MB.</small>
                            </div>
                            <div class="tab-pane fade" id="header-url-tab" role="tabpanel">
                                <input type="url" name="header_media_url" id="header_media_url" 
                                       class="form-control" placeholder="https://example.com/image.jpg">
                                <small class="text-muted">URL harus HTTPS dan dapat diakses publik.</small>
                            </div>
                        </div>
                        
                        {{-- Preview media --}}
                        <div id="header-media-preview" class="mt-2 d-none">
                            <div class="border rounded p-2 bg-light text-center">
                                <img id="header-media-preview-img" src="" class="img-fluid rounded d-none" style="max-height: 150px;">
                                <div id="header-media-preview-info" class="d-none">
                                    <i class="ti ti-file fs-4 d-block mb-2"></i>
                                    <small class="text-muted">File dipilih</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Pilih Target <span class="text-danger">*</span></label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="target_type" id="target_manual" value="manual" checked>
                            <label class="btn btn-outline-primary" for="target_manual">
                                <i class="ti ti-keyboard me-1"></i>Manual
                            </label>
                            <input type="radio" class="btn-check" name="target_type" id="target_contacts" value="contacts">
                            <label class="btn btn-outline-primary" for="target_contacts">
                                <i class="ti ti-user me-1"></i>Contacts
                            </label>
                            <input type="radio" class="btn-check" name="target_type" id="target_groups" value="groups">
                            <label class="btn btn-outline-primary" for="target_groups">
                                <i class="ti ti-users me-1"></i>Groups
                            </label>
                            <input type="radio" class="btn-check" name="target_type" id="target_mixed" value="mixed">
                            <label class="btn btn-outline-primary" for="target_mixed">
                                <i class="ti ti-stack me-1"></i>Mixed
                            </label>
                            <input type="radio" class="btn-check" name="target_type" id="target_excel" value="excel">
                            <label class="btn btn-outline-primary" for="target_excel">
                                <i class="ti ti-file-excel me-1"></i>Excel Import
                            </label>
                        </div>
                    </div>

                    {{-- Excel Import Section --}}
                    <div class="mb-3 d-none" id="excel-import-section">
                        <label class="form-label">Upload File Excel <span class="text-danger">*</span></label>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <input type="file" name="excel_file" id="excel_file" class="form-control" accept=".xlsx,.xls,.csv">
                            <a href="{{ route('agent.campaigns.download-excel-sample') }}" class="btn btn-sm btn-outline-primary ms-2" download>
                                <i class="ti ti-download me-1"></i>Download Contoh
                            </a>
                        </div>
                        <small class="text-muted">Format: .xlsx, .xls, atau .csv. Baris pertama harus header dengan kolom "phone" wajib. <a href="{{ route('agent.campaigns.download-excel-sample') }}" download>Download contoh file Excel</a></small>
                        
                        {{-- Preview Excel Columns --}}
                        <div id="excel-preview" class="mt-3 d-none">
                            <div class="card">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0"><i class="ti ti-table me-1"></i>Preview Data Excel</h6>
                                    <small class="text-muted"><span id="excel-total-rows">0</span> baris data</small>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <strong class="small">Kolom yang ditemukan:</strong>
                                        <div id="excel-headers" class="mt-1"></div>
                                    </div>
                                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                                        <table class="table table-sm table-bordered table-hover mb-0">
                                            <thead id="excel-preview-head" class="table-light sticky-top">
                                                <tr>
                                                    <th>Loading...</th>
                                                </tr>
                                            </thead>
                                            <tbody id="excel-preview-body">
                                                <tr>
                                                    <td colspan="100%" class="text-center text-muted">Loading...</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="mt-2">
                                        <small class="text-muted"><i class="ti ti-info-circle me-1"></i>Menampilkan 5 baris pertama dari <span id="excel-total-rows-text">0</span> total baris</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Parameter Mapping Section --}}
                        <div id="param-mapping-section" class="mt-3 d-none">
                            <label class="form-label">Mapping Parameter Template <span class="text-danger">*</span></label>
                            <div class="alert alert-info py-2 mb-2">
                                <small><i class="ti ti-info-circle me-1"></i>Pilih kolom Excel untuk setiap parameter template.</small>
                            </div>
                            <div id="param-mapping-container"></div>
                        </div>
                    </div>

                    {{-- Manual Recipients --}}
                    <div class="mb-3" id="manual-recipients-section">
                        <label class="form-label">Nomor Tujuan <span class="text-danger">*</span></label>
                        <textarea name="recipients" id="recipients-textarea" class="form-control" rows="4" placeholder="Satu nomor per baris, format 62xxxxxxxxxxx"></textarea>
                        <small class="text-muted">Contoh: 628123456789</small>
                    </div>

                    {{-- Contacts Selection --}}
                    <div class="mb-3 d-none" id="contacts-section">
                        <label class="form-label">Pilih Contacts</label>
                        <input type="text" id="contact-search" class="form-control form-control-sm mb-2" placeholder="Cari contacts...">
                        <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                            @forelse($contacts as $contact)
                            <label class="d-flex align-items-center p-2 border-bottom" style="cursor:pointer">
                                <input type="checkbox" name="contact_ids[]" value="{{ $contact->id }}" class="me-2 contact-cb">
                                <span class="fw-medium">{{ $contact->name }}</span>
                                <span class="text-muted ms-auto small">{{ $contact->phone_number }}</span>
                            </label>
                            @empty
                            <p class="text-muted text-center mb-0 py-3">Belum ada contacts. <a href="{{ route('agent.campaigns.index') }}">Tambah contact</a></p>
                            @endforelse
                        </div>
                        <div class="mt-2">
                            <small class="text-muted"><span id="selected-contacts-count">0</span> contact dipilih</small>
                        </div>
                    </div>

                    {{-- Mapping Parameter ke Field Contact (target = Contact / Group / Mixed) - konsisten dengan Excel Import --}}
                    <div class="mb-3 d-none" id="contact-param-mapping-section">
                        <label class="form-label">Mapping Parameter ke Field Contact <span class="text-danger">*</span></label>
                        <div class="alert alert-info py-2 mb-2">
                            <small><i class="ti ti-info-circle me-1"></i>Pilih field Contact untuk setiap parameter template. Nilai akan diambil otomatis per Contact.</small>
                        </div>
                        <div id="contact-param-mapping-container"></div>
                    </div>

                    {{-- Groups Selection --}}
                    <div class="mb-3 d-none" id="groups-section">
                        <label class="form-label">Pilih Groups</label>
                        <div class="border rounded p-2" style="max-height: 200px; overflow-y: auto;">
                            @forelse($groups as $group)
                            <label class="d-flex align-items-center p-2 border-bottom" style="cursor:pointer">
                                <input type="checkbox" name="group_ids[]" value="{{ $group->id }}" class="me-2 group-cb">
                                <span class="fw-medium">{{ $group->name }}</span>
                                <span class="badge bg-secondary ms-auto">{{ $group->contacts_count }} contacts</span>
                            </label>
                            @empty
                            <p class="text-muted text-center mb-0 py-3">Belum ada groups. <a href="{{ route('agent.campaigns.index') }}">Buat group</a></p>
                            @endforelse
                        </div>
                        <div class="mt-2">
                            <small class="text-muted"><span id="selected-groups-count">0</span> group dipilih (<span id="groups-contacts-total">0</span> contacts)</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Jadwalkan (optional)</label>
                        <input type="datetime-local" name="scheduled_at" class="form-control">
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('agent.campaigns.index') }}" class="btn btn-light">Kembali</a>
                        <button type="submit" class="btn btn-primary">
                            <span class="btn-text"><i class="ti ti-send me-1"></i>Kirim Campaign</span>
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Right: Preview --}}
        <div class="col-lg-5">
            <div class="card sticky-top" style="top: 20px;">
                <div class="card-body">
                    <h6 class="text-center mb-3"><i class="ti ti-device-mobile me-1"></i>Preview Template</h6>
                    
                    <div id="preview-placeholder" class="no-template-preview">
                        <i class="ti ti-template fs-1 d-block mb-2"></i>
                        <p class="mb-0">Pilih template untuk melihat preview</p>
                    </div>

                    <div id="preview-content" class="d-none">
                        <div class="wa-phone-mockup">
                            <div class="wa-phone-screen">
                                <div class="wa-message-bubble" id="preview-bubble">
                                    {{-- Header Preview --}}
                                    <div class="wa-header d-none" id="preview-header"></div>
                                    <div class="wa-header-media d-none" id="preview-header-media">
                                        <img id="preview-header-media-img" src="" class="d-none" style="max-width:100%; max-height:120px; border-radius:6px;">
                                        <i class="ti ti-photo fs-4" id="preview-header-media-icon"></i>
                                        <div class="small mt-1" id="preview-header-media-type">IMAGE</div>
                                    </div>

                                    {{-- Body Preview --}}
                                    <div class="wa-body" id="preview-body">Body text...</div>

                                    {{-- Footer Preview --}}
                                    <div class="wa-footer d-none" id="preview-footer"></div>

                                    {{-- Buttons Preview --}}
                                    <div class="wa-buttons-container d-none" id="preview-buttons"></div>

                                    <div class="wa-footer text-end small" style="border-top: none; margin-top: 4px;">
                                        {{ now()->format('H:i') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3">
                            <div class="row g-2 small">
                                <div class="col-6">
                                    <div class="text-muted">Bahasa</div>
                                    <span class="badge bg-secondary" id="preview-lang">-</span>
                                </div>
                                <div class="col-6">
                                    <div class="text-muted">Kategori</div>
                                    <span class="badge bg-light text-dark" id="preview-category">-</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-3 text-center">
                        <small class="text-muted">Preview diperbarui saat Anda mengisi parameter</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    var currentBodyText = '';
    var currentHeaderText = '';
    var currentComponents = [];

    // ===== HELPER FUNCTIONS =====
    function escapeHtml(text) {
        return $('<div>').text(text).html();
    }

    function formatWaText(text) {
        if (!text) return '';
        text = text.replace(/\n/g, '<br>');
        text = text.replace(/\*([^*]+)\*/g, '<strong>$1</strong>');
        text = text.replace(/_([^_]+)_/g, '<em>$1</em>');
        text = text.replace(/~([^~]+)~/g, '<del>$1</del>');
        return text;
    }

    function extractPlaceholders(text) {
        var matches = text.match(/\{\{(\d+)\}\}/g) || [];
        return matches;
    }

    function parseComponents(components) {
        var result = {
            headerType: 'none',
            headerFormat: null,
            headerText: '',
            bodyText: '',
            footerText: '',
            buttons: []
        };

        if (!components || !Array.isArray(components)) return result;

        components.forEach(function(comp) {
            var type = (comp.type || '').toUpperCase();
            
            if (type === 'HEADER') {
                var format = (comp.format || 'TEXT').toUpperCase();
                if (format === 'TEXT') {
                    result.headerType = 'text';
                    result.headerText = comp.text || '';
                } else {
                    result.headerType = 'media';
                    result.headerFormat = format;
                }
            } else if (type === 'BODY') {
                result.bodyText = comp.text || '';
            } else if (type === 'FOOTER') {
                result.footerText = comp.text || '';
            } else if (type === 'BUTTONS') {
                result.buttons = comp.buttons || [];
            }
        });

        return result;
    }

    // ===== HEADER MEDIA HANDLING =====
    var currentHeaderMediaFormat = null;
    
    function showHeaderMediaSection(format) {
        var $section = $('#header-media-section');
        var typeLabels = {
            'IMAGE': 'gambar',
            'VIDEO': 'video', 
            'DOCUMENT': 'dokumen'
        };
        
        if (format && ['IMAGE', 'VIDEO', 'DOCUMENT'].includes(format.toUpperCase())) {
            currentHeaderMediaFormat = format.toUpperCase();
            $section.removeClass('d-none');
            $('#header-media-type-label').text(typeLabels[format.toUpperCase()] || 'media');
            
            // Update accept attribute based on type
            var accepts = {
                'IMAGE': 'image/jpeg,image/png,image/jpg',
                'VIDEO': 'video/mp4,video/quicktime',
                'DOCUMENT': 'application/pdf'
            };
            $('#header_media_file').attr('accept', accepts[format.toUpperCase()] || 'image/*');
            
            // Clear previous values
            $('#header_media_file').val('');
            $('#header_media_url').val('');
            $('#header-media-preview').addClass('d-none');
            updateHeaderMediaPreview(null);
        } else {
            currentHeaderMediaFormat = null;
            $section.addClass('d-none');
            $('#header_media_file').val('');
            $('#header_media_url').val('');
            $('#header-media-preview').addClass('d-none');
            updateHeaderMediaPreview(null);
        }
    }

    // Preview file when selected
    $('#header_media_file').on('change', function() {
        var file = this.files[0];
        if (!file) {
            $('#header-media-preview').addClass('d-none');
            updateHeaderMediaPreview(null);
            return;
        }
        
        // Validate file type
        var isValidType = false;
        if (currentHeaderMediaFormat === 'IMAGE') {
            isValidType = file.type.startsWith('image/');
        } else if (currentHeaderMediaFormat === 'VIDEO') {
            isValidType = file.type.startsWith('video/');
        } else if (currentHeaderMediaFormat === 'DOCUMENT') {
            isValidType = file.type === 'application/pdf';
        }
        
        if (!isValidType) {
            window.toastr && toastr.error('Format file tidak sesuai dengan tipe media header yang dibutuhkan');
            $(this).val('');
            return;
        }
        
        // Validate file size (16MB max)
        if (file.size > 16 * 1024 * 1024) {
            window.toastr && toastr.error('Ukuran file maksimal 16MB');
            $(this).val('');
            return;
        }
        
        // Preview for images
        if (file.type.startsWith('image/')) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#header-media-preview-img').attr('src', e.target.result).removeClass('d-none');
                $('#header-media-preview-info').addClass('d-none');
                $('#header-media-preview').removeClass('d-none');
                updateHeaderMediaPreview(e.target.result);
            };
            reader.readAsDataURL(file);
        } else {
            // For video and document, show file info
            var fileSize = (file.size / 1024 / 1024).toFixed(2);
            var fileTypeLabel = currentHeaderMediaFormat === 'VIDEO' ? 'Video' : 'Dokumen';
            $('#header-media-preview-info').html(
                '<i class="ti ti-' + (currentHeaderMediaFormat === 'VIDEO' ? 'video' : 'file') + ' fs-4 d-block mb-2"></i>' +
                '<div class="fw-medium">' + file.name + '</div>' +
                '<small class="text-muted">' + fileSize + ' MB</small>'
            ).removeClass('d-none');
            $('#header-media-preview-img').addClass('d-none');
            $('#header-media-preview').removeClass('d-none');
            updateHeaderMediaPreview(null);
        }
    });

    // Preview URL when entered
    $('#header_media_url').on('input', function() {
        var url = $(this).val().trim();
        if (!url) {
            $('#header-media-preview').addClass('d-none');
            updateHeaderMediaPreview(null);
            return;
        }
        
        // Validate HTTPS
        if (!url.startsWith('https://')) {
            window.toastr && toastr.warning('URL harus menggunakan HTTPS');
            return;
        }
        
        // Preview for image URLs
        var imageExtensions = /\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i;
        if (url.match(imageExtensions)) {
            $('#header-media-preview-img').attr('src', url);
            $('#header-media-preview').removeClass('d-none');
            updateHeaderMediaPreview(url);
        } else {
            // For video and document URLs, just validate format
            $('#header-media-preview').addClass('d-none');
            updateHeaderMediaPreview(null);
        }
    });

    function updateHeaderMediaPreview(url) {
        if (url && currentHeaderMediaFormat === 'IMAGE') {
            $('#preview-header-media-img').attr('src', url).removeClass('d-none');
            $('#preview-header-media-icon').addClass('d-none');
        } else {
            $('#preview-header-media-img').addClass('d-none');
            $('#preview-header-media-icon').removeClass('d-none');
            if (currentHeaderMediaFormat) {
                var iconMap = {
                    'IMAGE': 'ti-photo',
                    'VIDEO': 'ti-video',
                    'DOCUMENT': 'ti-file'
                };
                $('#preview-header-media-icon').removeClass('ti-photo ti-video ti-file')
                    .addClass(iconMap[currentHeaderMediaFormat] || 'ti-photo');
            }
        }
    }

    // ===== BUILD PARAMETER INPUTS =====
    function buildParameterInputs(count, bodyText, components) {
        var $container = $('#parameters-container');
        $container.empty();
        
        var hasParams = count > 0;
        var hasButtonParams = false;
        
        // Check for button params: URL (dynamic vars), COPY_CODE, QUICK_REPLY (placeholders) - sama seperti template test
        var buttonUrlVars = [];
        if (components && Array.isArray(components)) {
            components.forEach(function(comp) {
                if ((comp.type || '').toUpperCase() === 'BUTTONS' && comp.buttons) {
                    comp.buttons.forEach(function(btn, idx) {
                        var btnType = (btn.type || '').toUpperCase();
                        if (btnType === 'URL' && btn.url) {
                            var urlVars = [];
                            var matches = (btn.url || '').match(/\{\{(\d+)\}\}/g) || [];
                            matches.forEach(function(match) {
                                var num = parseInt(match.replace(/\{\{|\}\}/g, ''), 10);
                                if (num && !urlVars.includes(num)) {
                                    urlVars.push(num);
                                }
                            });
                            if (urlVars.length > 0) {
                                buttonUrlVars.push({
                                    index: idx,
                                    text: btn.text || 'Button ' + (idx + 1),
                                    type: 'URL',
                                    vars: urlVars.sort(function(a, b) { return a - b; })
                                });
                                hasButtonParams = true;
                            }
                        } else if (btnType === 'COPY_CODE') {
                            buttonUrlVars.push({
                                index: idx,
                                text: btn.text || 'Copy code',
                                type: 'COPY_CODE',
                                vars: [1]
                            });
                            hasButtonParams = true;
                        } else if (btnType === 'QUICK_REPLY' && btn.text) {
                            var qrMatches = (btn.text || '').match(/\{\{(\d+)\}\}/g) || [];
                            if (qrMatches.length > 0) {
                                var qrVars = [];
                                qrMatches.forEach(function(match) {
                                    var num = parseInt(match.replace(/\{\{|\}\}/g, ''), 10);
                                    if (num && !qrVars.includes(num)) {
                                        qrVars.push(num);
                                    }
                                });
                                if (qrVars.length > 0) {
                                    buttonUrlVars.push({
                                        index: idx,
                                        text: btn.text || 'Quick reply',
                                        type: 'QUICK_REPLY',
                                        vars: qrVars.sort(function(a, b) { return a - b; })
                                    });
                                    hasButtonParams = true;
                                }
                            }
                        }
                    });
                }
            });
        }
        
        if (!hasParams && !hasButtonParams) {
            $container.append('<p class="text-muted mb-0">Template ini tidak membutuhkan parameter.</p>');
            return;
        }

        // Body Parameters
        if (count > 0) {
            var $group = $('<div class="param-group"></div>');
            $group.append('<div class="param-group-title"><i class="ti ti-message me-1"></i>Body Parameters (' + count + ')</div>');

            // Check if Excel import is selected
            var isExcelImport = $('input[name="target_type"]:checked').val() === 'excel';
            var requiredAttr = isExcelImport ? '' : 'required';
            var disabledAttr = isExcelImport ? 'disabled' : '';
            
            for (let i = 1; i <= count; i++) {
                var braceOpen = String.fromCharCode(123, 123);
                var braceClose = String.fromCharCode(125, 125);
                $group.append(`
                    <div class="mb-2">
                        <div class="input-group">
                            <span class="input-group-text">${braceOpen}${i}${braceClose}</span>
                            <input type="text" name="parameters[]" class="form-control body-param" data-index="${i-1}" placeholder="Nilai untuk parameter ${i}" ${requiredAttr} ${disabledAttr}>
                        </div>
                    </div>
                `);
            }

            $container.append($group);
        }

        // Button Parameters (URL, COPY_CODE, QUICK_REPLY) - sama seperti template test
        // Untuk Excel: button params tetap diisi (satu nilai untuk semua baris, e.g. kode kupon)
        if (hasButtonParams) {
            var $btnGroup = $('<div class="param-group"></div>');
            $btnGroup.append('<div class="param-group-title"><i class="ti ti-click me-1"></i>Button Parameters</div>');
            $btnGroup.append('<p class="small text-muted mb-2">Isi nilai untuk: Visit website (URL), Copy offer code, atau Quick reply yang punya variabel.</p>');
            
            var isExcelImport = $('input[name="target_type"]:checked').val() === 'excel';
            var requiredAttr = 'required'; // Selalu required jika template punya button params (manual atau Excel)
            var disabledAttr = '';         // Jangan disable agar nilai ikut terkirim saat Excel
            
            buttonUrlVars.forEach(function(btnInfo) {
                var typeLabel = (btnInfo.type || 'url').toLowerCase().replace('_', ' ');
                var $btnSection = $('<div class="mb-3"></div>');
                $btnSection.append('<label class="form-label mb-1 small text-muted">Button "' + escapeHtml(btnInfo.text) + '" (' + typeLabel + ')</label>');
                
                btnInfo.vars.forEach(function(varNum) {
                    var braceOpen = String.fromCharCode(123, 123);
                    var braceClose = String.fromCharCode(125, 125);
                    var placeholder = (btnInfo.type === 'COPY_CODE') ? 'Kode kupon / promo' : ('Nilai untuk ' + braceOpen + varNum + braceClose);
                    $btnSection.append(
                        '<div class="mb-2">' +
                        '<div class="input-group">' +
                        '<span class="input-group-text">' + braceOpen + varNum + braceClose + '</span>' +
                        '<input type="text" name="button_params[' + btnInfo.index + '][]" class="form-control button-param" data-button-index="' + btnInfo.index + '" data-var-num="' + varNum + '" placeholder="' + escapeHtml(placeholder) + '" ' + requiredAttr + ' ' + disabledAttr + '>' +
                        '</div></div>'
                    );
                });
                
                $btnGroup.append($btnSection);
            });
            
            $container.append($btnGroup);
        }

        // Bind input events for preview
        $('.body-param').on('input', updatePreview);
        $('.button-param').on('input', updatePreview);
    }

    // ===== UPDATE PREVIEW =====
    function updatePreview() {
        if (!currentBodyText && !currentComponents) return;

        // Check if using Excel import
        var targetType = $('input[name="target_type"]:checked').val();
        var useExcelData = targetType === 'excel' && excelPreviewData.length > 0;

        // Update body preview
        if (currentBodyText) {
            var bodyPreview = currentBodyText;
            
            // Replace placeholders with input values or Excel data
            var braces = String.fromCharCode(123, 123);
            var bracesEnd = String.fromCharCode(125, 125);
            
            if (useExcelData) {
                // Use Excel data for preview
                var firstRow = excelPreviewData[0] || {};
                var paramMapping = {};
                
                // Get mapping from select dropdowns
                $('select[name^="param_mapping["]').each(function() {
                    var name = $(this).attr('name');
                    var match = name.match(/param_mapping\[(\d+)\]/);
                    if (match) {
                        var paramNum = parseInt(match[1]);
                        var excelColumn = $(this).val();
                        if (excelColumn) {
                            paramMapping[paramNum] = excelColumn;
                        }
                    }
                });
                
                // Replace placeholders with Excel values
                for (var i = 1; i <= templateParamCount; i++) {
                    var placeholder = braces + i + bracesEnd;
                    var val = placeholder;
                    
                    if (paramMapping[i]) {
                        var excelColumn = paramMapping[i];
                        if (excelColumn.toLowerCase() === 'phone' || excelColumn.toLowerCase() === 'phone_number' || excelColumn.toLowerCase() === 'nomor') {
                            val = firstRow.phone || placeholder;
                        } else {
                            val = firstRow.variables && firstRow.variables[excelColumn] !== undefined ? firstRow.variables[excelColumn] : placeholder;
                        }
                    }
                    
                    bodyPreview = bodyPreview.split(placeholder).join('<span class="param">' + escapeHtml(val) + '</span>');
                }
            } else {
                // Use manual input values
                $('.body-param').each(function(i) {
                    var n = i + 1;
                    var placeholder = braces + n + bracesEnd;
                    var val = $(this).val() || placeholder;
                    bodyPreview = bodyPreview.split(placeholder).join('<span class="param">' + escapeHtml(val) + '</span>');
                });
            }

            $('#preview-body').html(formatWaText(bodyPreview));
        }

        // Update header if has placeholders
        if (currentHeaderText) {
            var headerPreview = currentHeaderText;
            var hBraces = String.fromCharCode(123, 123);
            var hBracesEnd = String.fromCharCode(125, 125);
            $('.header-param').each(function(i) {
                var n = i + 1;
                var placeholder = hBraces + n + hBracesEnd;
                var val = $(this).val() || placeholder;
                headerPreview = headerPreview.split(placeholder).join('<span class="param">' + escapeHtml(val) + '</span>');
            });
            $('#preview-header').html(headerPreview);
        }
        
        // Update buttons preview with button params
        if (currentComponents && Array.isArray(currentComponents)) {
            var parsed = parseComponents(currentComponents);
            if (parsed.buttons && parsed.buttons.length > 0) {
                var $buttons = $('#preview-buttons').empty().removeClass('d-none');
                parsed.buttons.forEach(function(btn, idx) {
                    var icon = 'ti-click';
                    var btnText = btn.text || 'Button';
                    var btnUrl = btn.url || '#';
                    
                    if ((btn.type || '').toUpperCase() === 'URL') {
                        icon = 'ti-external-link';
                        // Replace placeholders in URL with button params
                        var btnParams = [];
                        $('.button-param[data-button-index="' + idx + '"]').each(function() {
                            btnParams.push($(this).val() || '');
                        });
                        
                        if (btnParams.length > 0) {
                            var urlWithParams = btnUrl;
                            btnParams.forEach(function(param, i) {
                                var placeholder = new RegExp('\\{\\{' + (i + 1) + '\\}\\}', 'g');
                                urlWithParams = urlWithParams.replace(placeholder, escapeHtml(param));
                            });
                            btnText += ' → ' + urlWithParams;
                        }
                    } else if ((btn.type || '').toUpperCase() === 'PHONE_NUMBER') {
                        icon = 'ti-phone';
                    }
                    
                    $buttons.append(`
                        <div class="wa-button-cta">
                            <i class="ti ${icon}"></i>
                            ${escapeHtml(btnText)}
                        </div>
                    `);
                });
            }
        }
    }

    // ===== RENDER PREVIEW =====
    function renderPreview(components, language, category) {
        var parsed = parseComponents(components);
        
        currentBodyText = parsed.bodyText;
        currentHeaderText = parsed.headerText;
        currentComponents = components;

        // Show preview content
        $('#preview-placeholder').addClass('d-none');
        $('#preview-content').removeClass('d-none');

        // Header
        if (parsed.headerType === 'text' && parsed.headerText) {
            $('#preview-header').removeClass('d-none').html(parsed.headerText);
            $('#preview-header-media').addClass('d-none');
            showHeaderMediaSection(null); // Hide media section for text headers
        } else if (parsed.headerType === 'media') {
            $('#preview-header').addClass('d-none');
            $('#preview-header-media').removeClass('d-none');
            $('#preview-header-media-type').text(parsed.headerFormat || 'IMAGE');
            showHeaderMediaSection(parsed.headerFormat); // Show media section
            // Reset preview icon
            $('#preview-header-media-img').addClass('d-none');
            $('#preview-header-media-icon').removeClass('d-none');
        } else {
            $('#preview-header').addClass('d-none');
            $('#preview-header-media').addClass('d-none');
            showHeaderMediaSection(null); // Hide media section
        }

        // Body
        $('#preview-body').html(formatWaText(parsed.bodyText));

        // Footer
        if (parsed.footerText) {
            $('#preview-footer').removeClass('d-none').text(parsed.footerText);
        } else {
            $('#preview-footer').addClass('d-none');
        }

        // Buttons
        if (parsed.buttons && parsed.buttons.length > 0) {
            var $buttons = $('#preview-buttons').empty().removeClass('d-none');
            parsed.buttons.forEach(function(btn, idx) {
                var icon = 'ti-click';
                var btnText = btn.text || 'Button';
                var btnUrl = btn.url || '#';
                
                if ((btn.type || '').toUpperCase() === 'URL') {
                    icon = 'ti-external-link';
                    // Replace placeholders in URL with button params
                    var btnParams = [];
                    $('.button-param[data-button-index="' + idx + '"]').each(function() {
                        btnParams.push($(this).val() || '');
                    });
                    
                    if (btnParams.length > 0) {
                        var urlWithParams = btnUrl;
                        btnParams.forEach(function(param, i) {
                            var placeholder = new RegExp('\\{\\{' + (i + 1) + '\\}\\}', 'g');
                            urlWithParams = urlWithParams.replace(placeholder, escapeHtml(param));
                        });
                        btnText += ' → ' + urlWithParams;
                    }
                } else if ((btn.type || '').toUpperCase() === 'PHONE_NUMBER') {
                    icon = 'ti-phone';
                }
                
                $buttons.append(`
                    <div class="wa-button-cta">
                        <i class="ti ${icon}"></i>
                        ${escapeHtml(btnText)}
                    </div>
                `);
            });
        } else {
            $('#preview-buttons').addClass('d-none');
        }

        // Meta info
        $('#preview-lang').text(language || '-');
        $('#preview-category').text((category || 'marketing').charAt(0).toUpperCase() + (category || 'marketing').slice(1));
    }

    // ===== TEMPLATE CHANGE =====
    $('#template_id').on('change', function () {
        var $opt = $(this).find('option:selected');
        var lang = $opt.data('language') || '';
        var category = $opt.data('category') || 'marketing';
        var placeholders = parseInt($opt.data('placeholders') || 0, 10);
        var body = $opt.data('body') || '';
        var componentsStr = $opt.attr('data-components');
        var components = [];
        
        try {
            components = JSON.parse(componentsStr || '[]');
        } catch (e) {
            components = [];
        }

        // Update language and category fields
        $('#template_language').val(lang);
        $('#template_category').val(category.charAt(0).toUpperCase() + category.slice(1));

        // Store template param count for Excel dan Contact mapping
        templateParamCount = placeholders;

        var targetType = $('input[name="target_type"]:checked').val();
        if (targetType !== 'excel') {
            buildParameterInputs(placeholders, body, components);
            // Tampilkan mapping Parameter ke Field Contact jika target = Contact/Group/Mixed dan template punya params
            if ((targetType === 'contacts' || targetType === 'groups' || targetType === 'mixed') && placeholders > 0) {
                $('#contact-param-mapping-section').removeClass('d-none');
                buildContactParamMapping(placeholders);
                if (targetType === 'contacts' || targetType === 'groups') {
                    $('.body-param').prop('required', false).prop('disabled', true);
                }
            } else {
                $('#contact-param-mapping-section').addClass('d-none');
            }
        } else {
            $('#parameters-section').addClass('d-none');
            $('#excel-parameters-info').removeClass('d-none');
            $('#contact-param-mapping-section').addClass('d-none');
            if (excelHeaders.length > 0) {
                buildParameterMapping(placeholders);
            } else {
                if (currentBodyText || currentComponents) {
                    updatePreview();
                }
            }
        }

        // Render preview
        if ($opt.val()) {
            // If no components, build from body
            if (!components || components.length === 0) {
                components = [{ type: 'BODY', text: body }];
            }
            renderPreview(components, lang, category);
        } else {
            // Reset preview
            $('#preview-placeholder').removeClass('d-none');
            $('#preview-content').addClass('d-none');
            currentBodyText = '';
            currentHeaderText = '';
            showHeaderMediaSection(null); // Hide media section
        }
    });

    // ===== EXCEL FILE UPLOAD =====
    $('#excel_file').on('change', function() {
        var file = this.files[0];
        if (!file) {
            $('#excel-preview').addClass('d-none');
            $('#param-mapping-section').addClass('d-none');
            return;
        }

        // Validate file type
        var extension = file.name.split('.').pop().toLowerCase();
        if (!['xlsx', 'xls', 'csv'].includes(extension)) {
            window.toastr && toastr.error('Format file tidak didukung. Gunakan .xlsx, .xls, atau .csv');
            $(this).val('');
            return;
        }

        // Show loading
        var $preview = $('#excel-preview');
        $preview.removeClass('d-none').html('<div class="text-center p-3"><i class="ti ti-loader-2 spin"></i> Memproses file...</div>');

        // Upload and parse file
        var formData = new FormData();
        formData.append('excel_file', file);
        formData.append('_token', $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val());

        $.ajax({
            url: '{{ route("agent.campaigns.preview-excel") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    excelHeaders = res.data.headers || [];
                    excelPreviewData = res.data.preview || [];
                    
                    // Show preview
                    displayExcelPreview(excelHeaders, excelPreviewData, res.data.total_rows || 0);
                    
                    // Build parameter mapping if template is selected
                    if (templateParamCount > 0) {
                        buildParameterMapping(templateParamCount);
                    } else {
                        // Show info if template has no parameters
                        var $mappingSection = $('#param-mapping-section');
                        $mappingSection.html(
                            '<div class="alert alert-success py-2 mb-0">' +
                            '<i class="ti ti-check-circle me-1"></i>Template ini tidak membutuhkan parameter. Data Excel akan digunakan langsung.' +
                            '</div>'
                        ).removeClass('d-none');
                        
                        // Update preview if template is already selected
                        if (currentBodyText || currentComponents) {
                            updatePreview();
                        }
                    }
                } else {
                    window.toastr && toastr.error(res.meta?.message || 'Gagal memproses file Excel');
                    $('#excel-preview').addClass('d-none');
                }
            },
            error: function(xhr) {
                var msg = 'Gagal memproses file Excel';
                if (xhr.responseJSON && xhr.responseJSON.meta && xhr.responseJSON.meta.message) {
                    msg = xhr.responseJSON.meta.message;
                }
                window.toastr && toastr.error(msg);
                $('#excel-preview').addClass('d-none');
            },
            complete: function() {
                // Ensure loading is removed after request completes
                // This will be handled by displayExcelPreview or error handler
            }
        });
    });

    // Display Excel preview
    function displayExcelPreview(headers, preview, totalRows) {
        var $preview = $('#excel-preview');
        
        // Restore preview structure if it was replaced by loading message
        if ($preview.find('.card').length === 0) {
            $preview.html(`
                <div class="card">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="ti ti-table me-1"></i>Preview Data Excel</h6>
                        <small class="text-muted"><span id="excel-total-rows">0</span> baris data</small>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <strong class="small">Kolom yang ditemukan:</strong>
                            <div id="excel-headers" class="mt-1"></div>
                        </div>
                        <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                            <table class="table table-sm table-bordered table-hover mb-0">
                                <thead id="excel-preview-head" class="table-light sticky-top"></thead>
                                <tbody id="excel-preview-body"></tbody>
                            </table>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted"><i class="ti ti-info-circle me-1"></i>Menampilkan 5 baris pertama dari <span id="excel-total-rows-text">0</span> total baris</small>
                        </div>
                    </div>
                </div>
            `);
        }
        
        var $headersDiv = $('#excel-headers');
        var $totalRows = $('#excel-total-rows');
        var $totalRowsText = $('#excel-total-rows-text');
        var $head = $('#excel-preview-head');
        var $body = $('#excel-preview-body');

        // Show headers as badges
        $headersDiv.empty();
        headers.forEach(function(header) {
            var isPhone = header.toLowerCase() === 'phone' || header.toLowerCase() === 'phone_number' || header.toLowerCase() === 'nomor';
            var badgeClass = isPhone ? 'bg-primary' : 'bg-secondary';
            $headersDiv.append('<span class="badge ' + badgeClass + ' me-1 mb-1">' + escapeHtml(header) + (isPhone ? ' <i class="ti ti-check"></i>' : '') + '</span>');
        });

        // Show total rows
        $totalRows.text(totalRows);
        $totalRowsText.text(totalRows);

        // Build table header
        $head.empty();
        var $tr = $('<tr></tr>');
        headers.forEach(function(header) {
            var isPhone = header.toLowerCase() === 'phone' || header.toLowerCase() === 'phone_number' || header.toLowerCase() === 'nomor';
            var headerClass = isPhone ? 'table-primary' : '';
            $tr.append('<th class="' + headerClass + '">' + escapeHtml(header) + '</th>');
        });
        $head.append($tr);

        // Build table body
        $body.empty();
        if (preview.length === 0) {
            $body.append('<tr><td colspan="' + headers.length + '" class="text-center text-muted">Tidak ada data</td></tr>');
        } else {
            preview.forEach(function(contact) {
                var $row = $('<tr></tr>');
                // Display all columns in order
                headers.forEach(function(header) {
                    var value = '';
                    if (header.toLowerCase() === 'phone' || header.toLowerCase() === 'phone_number' || header.toLowerCase() === 'nomor') {
                        value = contact.phone || '';
                    } else {
                        value = contact.variables && contact.variables[header] !== undefined ? contact.variables[header] : '';
                    }
                    $row.append('<td>' + escapeHtml(value || '-') + '</td>');
                });
                $body.append($row);
            });
        }

        $preview.removeClass('d-none');
    }

    // Build parameter mapping UI
    function buildParameterMapping(paramCount) {
        if (excelHeaders.length === 0 || paramCount === 0) {
            $('#param-mapping-section').addClass('d-none');
            return;
        }

        var $container = $('#param-mapping-container');
        $container.empty();

        for (var i = 1; i <= paramCount; i++) {
            var braceOpen = String.fromCharCode(123, 123);
            var braceClose = String.fromCharCode(125, 125);
            var $group = $('<div class="mb-3"></div>');
            $group.append('<label class="form-label small">Parameter ' + braceOpen + i + braceClose + ' → Kolom Excel</label>');
            var $select = $('<select name="param_mapping[' + i + ']" class="form-control form-control-sm param-mapping-select" required></select>');
            $select.attr('data-param-num', i);
            $select.append('<option value="">Pilih kolom...</option>');
            excelHeaders.forEach(function(header) {
                if (header.toLowerCase() !== 'phone' && header.toLowerCase() !== 'phone_number' && header.toLowerCase() !== 'nomor') {
                    $select.append('<option value="' + escapeHtml(header) + '">' + escapeHtml(header) + '</option>');
                }
            });
            $group.append($select);
            $container.append($group);
        }

        // Bind change event to update preview when mapping changes
        $container.off('change', '.param-mapping-select').on('change', '.param-mapping-select', function() {
            updatePreview();
        });

        $('#param-mapping-section').removeClass('d-none');
        
        // Update preview after mapping is built
        if (currentBodyText || currentComponents) {
            updatePreview();
        }
    }

    // ===== TARGET TYPE SWITCHING =====
    var groupContactCounts = @json($groups->pluck('contacts_count', 'id'));
    var contactMappingFields = @json($contactMappingFields ?? []);
    var excelHeaders = [];
    var excelPreviewData = [];
    var templateParamCount = 0;

    // Build Contact parameter mapping dropdowns (konsisten dengan Excel Import)
    function buildContactParamMapping(paramCount) {
        var $container = $('#contact-param-mapping-container');
        $container.empty();
        if (paramCount <= 0 || !contactMappingFields || Object.keys(contactMappingFields).length === 0) {
            return;
        }
        var optionsHtml = '';
        for (var fieldKey in contactMappingFields) {
            if (contactMappingFields.hasOwnProperty(fieldKey)) {
                optionsHtml += '<option value="' + escapeHtml(fieldKey) + '">' + escapeHtml(contactMappingFields[fieldKey]) + '</option>';
            }
        }
        for (var i = 1; i <= paramCount; i++) {
            var braceOpen = String.fromCharCode(123, 123);
            var braceClose = String.fromCharCode(125, 125);
            var $row = $('<div class="mb-2"></div>');
            $row.append('<label class="form-label small mb-1">Parameter ' + braceOpen + i + braceClose + '</label>');
            $row.append('<select name="param_mapping[' + i + ']" class="form-select form-select-sm contact-mapping-select" data-param="' + i + '">' +
                '<option value="">-- Pilih field Contact --</option>' + optionsHtml + '</select>');
            $container.append($row);
        }
    }
    
    $('input[name="target_type"]').on('change', function() {
        var type = $(this).val();
        
        // Hide all sections first
        $('#manual-recipients-section').addClass('d-none');
        $('#contacts-section').addClass('d-none');
        $('#groups-section').addClass('d-none');
        $('#excel-import-section').addClass('d-none');
        $('#excel-parameters-info').addClass('d-none');
        $('#contact-param-mapping-section').addClass('d-none');
        
        // Show/hide parameters section and Contact mapping based on target type
        if (type === 'excel') {
            $('#parameters-section').addClass('d-none');
            $('#excel-parameters-info').removeClass('d-none');
            $('.body-param, .button-param').prop('required', false).prop('disabled', true);
        } else {
            $('#excel-parameters-info').addClass('d-none');
            $('.button-param').prop('disabled', false);
            // Contact/Group/Mixed: tampilkan mapping Parameter ke Field Contact jika template punya body params
            if ((type === 'contacts' || type === 'groups' || type === 'mixed') && templateParamCount > 0) {
                $('#contact-param-mapping-section').removeClass('d-none');
                buildContactParamMapping(templateParamCount);
                if (type === 'contacts' || type === 'groups') {
                    // Hanya Contact/Group: parameter dari mapping, nonaktifkan input body
                    $('#parameters-section').removeClass('d-none');
                    $('.body-param').prop('required', false).prop('disabled', true);
                } else {
                    // Mixed: tampilkan body params (untuk manual) dan contact mapping (untuk contact/group)
                    $('#parameters-section').removeClass('d-none');
                    $('.body-param').prop('disabled', false);
                }
            } else {
                $('#parameters-section').removeClass('d-none');
                $('.body-param').prop('disabled', false);
            }
        }
        
        // Show relevant sections
        if (type === 'manual') {
            $('#manual-recipients-section').removeClass('d-none');
        } else if (type === 'contacts') {
            $('#contacts-section').removeClass('d-none');
        } else if (type === 'groups') {
            $('#groups-section').removeClass('d-none');
        } else if (type === 'mixed') {
            $('#manual-recipients-section').removeClass('d-none');
            $('#contacts-section').removeClass('d-none');
            $('#groups-section').removeClass('d-none');
        } else if (type === 'excel') {
            $('#excel-import-section').removeClass('d-none');
        }
    });

    // Contact search
    $('#contact-search').on('input', function() {
        var q = $(this).val().toLowerCase();
        $('#contacts-section label').each(function() {
            var text = $(this).text().toLowerCase();
            $(this).toggle(text.includes(q));
        });
    });

    // Update contact count
    $(document).on('change', '.contact-cb', function() {
        var count = $('.contact-cb:checked').length;
        $('#selected-contacts-count').text(count);
    });

    // Update group count
    $(document).on('change', '.group-cb', function() {
        var count = 0;
        var total = 0;
        $('.group-cb:checked').each(function() {
            count++;
            var groupId = $(this).val();
            total += (groupContactCounts[groupId] || 0);
        });
        $('#selected-groups-count').text(count);
        $('#groups-contacts-total').text(total);
    });

    // ===== FORM SUBMIT =====
    $('#client-campaign-form').on('submit', function (e) {
        e.preventDefault();

        var $btn = $(this).find('button[type=submit]');
        var $text = $btn.find('.btn-text');
        var $spinner = $btn.find('.spinner-border');
        var original = $text.html();
        
        // Validate based on target type
        var targetType = $('input[name="target_type"]:checked').val();
        var hasRecipients = false;
        
        if (targetType === 'manual' || targetType === 'mixed') {
            if ($('#recipients-textarea').val().trim()) hasRecipients = true;
        }
        if (targetType === 'contacts' || targetType === 'mixed') {
            if ($('.contact-cb:checked').length > 0) hasRecipients = true;
        }
        if (targetType === 'groups' || targetType === 'mixed') {
            if ($('.group-cb:checked').length > 0) hasRecipients = true;
        }
        // Validasi mapping Parameter ke Field Contact (target = Contact/Group/Mixed dengan template punya params)
        var needsContactMapping = (targetType === 'contacts' || targetType === 'groups' || (targetType === 'mixed' && ($('.contact-cb:checked').length || $('.group-cb:checked').length))) && templateParamCount > 0;
        if (needsContactMapping) {
            var allContactMapped = true;
            for (var i = 1; i <= templateParamCount; i++) {
                var sel = $('#contact-param-mapping-container select[name="param_mapping[' + i + ']"]').val();
                if (!sel || sel === '') {
                    allContactMapped = false;
                    break;
                }
            }
            if (!allContactMapped) {
                window.toastr && toastr.error('Semua parameter template harus dimapping ke field Contact sebelum campaign disimpan.');
                return;
            }
        }
        if (targetType === 'excel') {
            if ($('#excel_file')[0].files.length > 0 && excelHeaders.length > 0) {
                // Validate parameter mapping
                var allMapped = true;
                for (var i = 1; i <= templateParamCount; i++) {
                    if (!$('select[name="param_mapping[' + i + ']"]').val()) {
                        allMapped = false;
                        break;
                    }
                }
                if (allMapped && templateParamCount > 0) {
                    hasRecipients = true;
                } else if (templateParamCount === 0) {
                    hasRecipients = true; // No params needed
                } else {
                    window.toastr && toastr.error('Semua parameter template harus dimapping ke kolom Excel');
                    return;
                }
            }
            
            // Hanya nonaktifkan body parameters saat Excel (nilai dari mapping); button params tetap aktif
            $('input[name="parameters[]"]').prop('required', false).prop('disabled', true);
        } else {
            $('input[name="parameters[]"]').prop('disabled', false);
        }
        
        if (!hasRecipients) {
            window.toastr && toastr.error('Pilih minimal satu nomor tujuan atau upload file Excel');
            return;
        }
        
        // Validate header media if required
        if (currentHeaderMediaFormat) {
            var hasFile = $('#header_media_file')[0].files.length > 0;
            var hasUrl = $('#header_media_url').val().trim().length > 0;
            
            if (!hasFile && !hasUrl) {
                var typeLabels = {
                    'IMAGE': 'gambar',
                    'VIDEO': 'video',
                    'DOCUMENT': 'dokumen'
                };
                window.toastr && toastr.error('Template ini membutuhkan header ' + (typeLabels[currentHeaderMediaFormat] || 'media') + '. Silakan upload file atau masukkan URL.');
                return;
            }
            
            // Validate URL if provided
            if (hasUrl) {
                var url = $('#header_media_url').val().trim();
                if (!url.startsWith('https://')) {
                    window.toastr && toastr.error('URL header media harus menggunakan HTTPS');
                    return;
                }
            }
        }
        
        // $btn.prop('disabled', true);
        // $text.text('Mengirim...');
        // $spinner.removeClass('d-none');

        // Jika Excel: hanya nonaktifkan body parameters agar tidak validasi HTML5 (nilai dari mapping)
        // Button params tetap aktif agar ikut terkirim (satu nilai untuk semua baris)
        if (targetType === 'excel') {
            $('input[name="parameters[]"]').prop('required', false).prop('disabled', true);
        }

        // Build FormData for file upload support
        var formData = new FormData($('#client-campaign-form')[0]);
        
        if (targetType === 'excel') {
            $('input[name="parameters[]"]').prop('disabled', false);
        }

        // Confirmation Dialog
        Swal.fire({
            title: 'Kirim Campaign?',
            text: "Pastikan semua data sudah benar. Campaign akan dijadwalkan untuk dikirim.",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Ya, Kirim!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                $btn.prop('disabled', true);
                $text.text('Mengirim...');
                $spinner.removeClass('d-none');

                $.ajax({
                    url: '{{ route('agent.campaigns.store') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        if (res.meta && res.meta.status === 'success') {
                            Swal.fire(
                                'Terkirim!',
                                res.meta.message || 'Campaign berhasil dibuat.',
                                'success'
                            ).then(() => {
                                window.location.href = '{{ route('agent.campaigns.index') }}';
                            });
                        } else {
                            window.toastr && toastr.error(res.meta && res.meta.message ? res.meta.message : 'Gagal membuat campaign');
                            $btn.prop('disabled', false);
                            $text.html(original);
                            $spinner.addClass('d-none');
                        }
                    },
                    error: function (xhr) {
                        var msg = 'Gagal membuat campaign';
                        if (xhr.responseJSON && xhr.responseJSON.meta && xhr.responseJSON.meta.message) {
                            msg = xhr.responseJSON.meta.message;
                        }
                        window.toastr && toastr.error(msg);
                        $btn.prop('disabled', false);
                        $text.html(original);
                        $spinner.addClass('d-none');
                    }
                });
            }
        });
    });
});
</script>
@endpush