@extends('root')
@section('title', 'WA Templates')

@push('styles')
<style>
    .select-checkbox { cursor: pointer; transform: scale(1.2); }
    
    /* WhatsApp Phone Mockup Styling */
    .wa-phone-mockup {
        max-width: 380px;
        margin: 0 auto;
        background: linear-gradient(180deg, #075E54 0%, #128C7E 100%);
        border-radius: 28px;
        padding: 8px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    .wa-phone-screen {
        background: #E5DDD5;
        border-radius: 22px;
        min-height: 400px;
        padding: 16px 12px;
        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.15'%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 12px 12px 12px;
        padding: 8px 12px;
        margin-bottom: 8px;
        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: -8px;
        top: 0;
        border-width: 0 8px 10px 0;
        border-style: solid;
        border-color: transparent #FFFFFF transparent transparent;
    }
    .wa-header {
        font-weight: 600;
        font-size: 15px;
        color: #000;
        margin-bottom: 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid #eee;
    }
    .wa-header-media {
        background: #f0f0f0;
        border-radius: 8px;
        padding: 30px;
        text-align: center;
        margin-bottom: 8px;
        color: #999;
    }
    .wa-body {
        font-size: 14px;
        color: #303030;
        line-height: 1.5;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .wa-body .param {
        color: #0d6efd;
        font-weight: 600;
    }
    .wa-footer {
        font-size: 12px;
        color: #8696a0;
        margin-top: 8px;
        padding-top: 6px;
        border-top: 1px solid #f0f0f0;
    }
    .wa-timestamp {
        font-size: 11px;
        color: #8696a0;
        text-align: right;
        margin-top: 4px;
    }
    .wa-buttons-container {
        margin-top: 8px;
        border-top: 1px solid #eee;
        padding-top: 8px;
    }
    .wa-button-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: transparent;
        color: #00A5F4;
        font-size: 14px;
        font-weight: 500;
        padding: 10px;
        border: none;
        width: 100%;
        text-align: center;
        cursor: pointer;
    }
    .wa-button-cta:not(:last-child) {
        border-bottom: 1px solid #eee;
    }
    .wa-button-cta i {
        font-size: 16px;
    }
    .char-counter {
        font-size: 11px;
        color: #999;
        text-align: right;
    }
    .char-counter.warning { color: #f0ad4e; }
    .char-counter.danger { color: #dc3545; }
    .format-help {
        font-size: 11px;
        color: #888;
        background: #f8f9fa;
        padding: 6px 10px;
        border-radius: 4px;
        margin-top: 4px;
    }
    /* Grouping Row Style */
    tr.group {
        background-color: #f8f9fa !important;
        font-weight: bold;
        color: #333;
    }
    tr.group td {
        padding-top: 15px;
        padding-bottom: 15px;
        border-top: 2px solid #e9ecef;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'WA Templates',
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'WA Templates'
    ])

    <div class="card card-body mb-3">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
            <div>
                <h5 class="mb-1 d-flex align-items-center gap-2">
                    <i class="ti ti-message-circle-2 text-primary"></i>
                    WA Templates (Admin)
                </h5>
                <p class="mb-0 text-muted small">
                    Sinkronkan atau buat template Meta resmi. Gunakan bahasa & komponen sesuai aturan Meta.
                </p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <select id="a_filter_waba_pool" class="form-control select-waba" style="width: 220px;">
                    <option value="">Semua WABA</option>
                    @foreach($wabaPools as $pool)
                        <option value="{{ $pool->id }}">{{ $pool->phone_number }} ({{ $pool->account_name }})</option>
                    @endforeach
                </select>
                <select id="a_filter_visibility" class="form-control" style="width: 140px;">
                    <option value="">Semua Visibility</option>
                    <option value="shared">Shared</option>
                    <option value="hidden">Hidden</option>
                    <option value="custom">Custom</option>
                </select>
                <button type="button" class="btn btn-outline-warning" id="btnBulkVisibility" disabled>
                    <i class="ti ti-eye me-1"></i> Visibility (<span id="selectedCountVis">0</span>)
                </button>
                <button type="button" class="btn btn-outline-secondary" id="btnBulkCopy" disabled>
                    <i class="ti ti-copy me-1"></i> Bulk Copy (<span id="selectedCount">0</span>)
                </button>
                <button type="button" class="btn btn-outline-primary" id="btn-sync-templates">
                    <i class="ti ti-refresh me-1"></i> Sync
                </button>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCreateTemplateAdmin">
                    <i class="ti ti-plus"></i> Buat
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-templates">
                <thead>
                    <tr>
                        <th width="5%"><input type="checkbox" id="selectAll"></th>
                        <th>Name</th>
                        <th>Versi</th>
                        <!-- <th>Pool</th> -->
                        <th>Kategori</th>
                        <th>Status</th>
                        <th>Visibility</th>
                        <th>Bahasa</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- Modal Create Template Admin --}}
    <div class="modal fade" id="modalCreateTemplateAdmin" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('admin.templates.store') }}" method="POST" id="aCreateForm" data-table="#datatable-templates">
                    @csrf
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title"><i class="ti ti-template me-2"></i>Buat Template WhatsApp</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            {{-- Left Column: Form --}}
                            <div class="col-lg-7">
                                <div class="mb-3">
                                    <label class="form-label">Akun / Nomor WABA <span class="text-danger">*</span></label>
                                    <select name="waba_pool_id" id="a_create_waba_pool_id" class="form-control select-waba" required>
                                        <option value="">Pilih WABA</option>
                                        @foreach($wabaPools as $pool)
                                            <option value="{{ $pool->id }}">{{ $pool->phone_number }} ({{ $pool->account_name }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Nama Template <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control" required maxlength="512" placeholder="contoh: promo_akhir_tahun">
                                    <small class="text-muted">Akan dibentuk: <code>{id}_admin_{slug}</code></small>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Kategori <span class="text-danger">*</span></label>
                                        <select name="category" id="a_template_category" class="form-control" required>
                                            <option value="marketing">Marketing</option>
                                            <option value="utility">Utility</option>
                                            <option value="otp">OTP</option>
                                            <option value="service">Service Message</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Bahasa <span class="text-danger">*</span></label>
                                        <select name="language" class="form-control" required>
                                            <option value="id" selected>Indonesia (id)</option>
                                            <option value="en_US">English (en_US)</option>
                                            <option value="en">English (en)</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- Category Guidelines Info --}}
                                <div class="alert alert-info small mb-3" id="a_category_guidelines">
                                    <i class="ti ti-info-circle me-1"></i> <strong>Panduan Kategori:</strong>
                                    <ul class="mb-0 ps-3 mt-1" id="a_guideline_list">
                                        <li>Marketing: Untuk promosi, penawaran, update produk.</li>
                                    </ul>
                                </div>

                                <hr>
                                <h6 class="mb-3"><i class="ti ti-layout-grid me-1"></i> Komponen Template</h6>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Header Type</label>
                                        <select name="header_type" id="a_header_type" class="form-control">
                                            <option value="none" selected>Tidak ada</option>
                                            <option value="text">Text</option>
                                            <option value="media">Media (Image/Video/Document)</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3 a-header-format-wrap" style="display:none;">
                                        <label class="form-label">Header Format</label>
                                        <select name="header_format" id="a_header_format" class="form-control">
                                            <option value="IMAGE">Image</option>
                                            <option value="VIDEO">Video</option>
                                            <option value="DOCUMENT">Document</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3 a-header-text-wrap" style="display:none;">
                                    <label class="form-label">Header Text</label>
                                    <input type="text" name="header_text" id="a_header_text" class="form-control" maxlength="60" placeholder="Judul pesan (max 60 karakter)">
                                    <div class="char-counter"><span id="a_header_char_count">0</span>/60</div>
                                </div>
                                <div class="mb-3 a-header-media-wrap" style="display:none;">
                                    <label class="form-label">Header Media URL</label>
                                    <input type="url" name="header_media_url" class="form-control" placeholder="https://example.com/image.jpg">
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Body <span class="text-danger">*</span></label>
                                    <textarea name="body_text" id="a_body_text" class="form-control" rows="5" maxlength="1024" placeholder="Isi pesan utama. Gunakan {{1}}, {{2}} untuk parameter." required></textarea>
                                    <div class="d-flex justify-content-between">
                                        <div class="format-help">
                                            Format: <code>*bold*</code> <code>_italic_</code> <code>~strikethrough~</code> <code>{{1}}</code> parameter
                                        </div>
                                        <div class="char-counter"><span id="a_body_char_count">0</span>/1024</div>
                                    </div>
                                    <div id="a_body_validation_msg" class="text-danger small mt-1" style="display:none;"></div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Footer</label>
                                    <input type="text" name="footer_text" id="a_footer_text" class="form-control" maxlength="60" placeholder="Teks footer (max 60 karakter)">
                                    <div class="char-counter"><span id="a_footer_char_count">0</span>/60</div>
                                </div>

                                <hr>
                                <h6 class="mb-2"><i class="ti ti-click me-1"></i> Buttons (Opsional, maks 3)</h6>
                                <div id="a_buttons_wrap"></div>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="a_btn_add_button">
                                    <i class="ti ti-plus"></i> Tambah Button
                                </button>
                            </div>

                            {{-- Right Column: Preview --}}
                            <div class="col-lg-5">
                                <div class="sticky-top" style="top: 20px;">
                                    <h6 class="mb-3 text-center"><i class="ti ti-device-mobile me-1"></i> Preview Template</h6>
                                    
                                    <div class="mb-3">
                                        <label class="form-label small">Contoh Nilai Parameter (pisahkan koma)</label>
                                        <input type="text" id="a_preview_params" class="form-control form-control-sm" placeholder="Budi, INV-123, 31 Des 2024">
                                    </div>

                                    <div class="wa-phone-mockup">
                                        <div class="wa-phone-screen">
                                            <div class="wa-message-bubble" id="a_tpl_preview">
                                                <div class="wa-body text-muted">Preview akan muncul di sini...</div>
                                            </div>
                                        </div>
                                    </div>
                                    </div>
                                    
                                    {{-- Validation Checklist --}}
                                    <div class="card mt-3 border-0 shadow-sm">
                                        <div class="card-header bg-white border-bottom">
                                            <h6 class="mb-0 small fw-bold text-uppercase text-muted"><i class="ti ti-list-check me-1"></i> Quality Check</h6>
                                        </div>
                                        <ul class="list-group list-group-flush small" id="validation-checklist">
                                            <li class="list-group-item d-flex justify-content-between align-items-center" data-check="header">
                                                <span><i class="ti ti-heading me-1"></i>Header Format</span>
                                                <i class="ti ti-circle text-muted status-icon"></i>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center" data-check="body_syntax">
                                                <span><i class="ti ti-code me-1"></i>Body Syntax</span>
                                                <i class="ti ti-circle text-muted status-icon"></i>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center" data-check="params_seq">
                                                <span><i class="ti ti-123 me-1"></i>Parameter Urut</span>
                                                <i class="ti ti-circle text-muted status-icon"></i>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center" data-check="policy">
                                                <span><i class="ti ti-shield-check me-1"></i>Policy & Content</span>
                                                <i class="ti ti-circle text-muted status-icon"></i>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center" data-check="buttons">
                                                <span><i class="ti ti-click me-1"></i>Buttons Protocol</span>
                                                <i class="ti ti-circle text-muted status-icon"></i>
                                            </li>
                                        </ul>
                                        <div class="card-footer bg-light p-2">
                                            <div id="validation-error-msg" class="text-danger small fw-bold d-none mb-1">
                                                <i class="ti ti-alert-circle me-1"></i> <span class="msg">Content error</span>
                                            </div>
                                            <small class="text-muted d-block text-center" id="validation-summary">Lengkapi form untuk validasi</small>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">
                            <span class="btn-text"><i class="ti ti-send me-1"></i>Simpan & Submit ke Meta</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Copy Template (Single) --}}
    <div class="modal fade" id="modalCopyTemplate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="formCopyTemplate">
                    <div class="modal-header">
                        <h5 class="modal-title">Copy Template</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="copy_template_id">
                        <div class="alert alert-info small mb-3">
                            <i class="ti ti-info-circle me-1"></i>
                            Menyalin template: <strong id="copy_template_name"></strong>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Target WABA Pool</label>
                            <select id="copy_target_pool" class="form-control select-waba" required>
                                <option value="">Pilih WABA Tujuan</option>
                                @foreach($wabaPools as $pool)
                                    <option value="{{ $pool->id }}">{{ $pool->phone_number }} ({{ $pool->account_name }})</option>
                                @endforeach
                            </select>
                            <small class="text-muted">Hanya tampilkan pool aktif.</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Suffix Nama (Opsional)</label>
                            <input type="text" id="copy_name_suffix" class="form-control" placeholder="Contoh: _v2">
                            <small class="text-muted">Jika kosong, otomatis: <code>_{target_pool_id}</code></small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="ti ti-copy me-1"></i> Copy Template
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Bulk Copy --}}
    <div class="modal fade" id="modalBulkCopy" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Bulk Copy Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="formBulkCopy">
                    <div class="modal-body">
                        <div class="alert alert-info">
                            Anda akan menyalin <strong id="bulkSelectedCount">0</strong> template.
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Target Copy</label>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="target_type" id="target_specific" value="specific" checked>
                                <label class="form-check-label" for="target_specific">
                                    Ke WABA Pool Tertentu
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="target_type" id="target_all_shared" value="all_shared">
                                <label class="form-check-label" for="target_all_shared">
                                    Ke Semua Shared WABA Pools
                                </label>
                            </div>

                            <div id="targetPoolSelectWrapper">
                                <select class="form-select" name="target_waba_pool_ids[]" id="bulk_target_waba_pool_ids" multiple>
                                    @foreach($wabaPools as $pool)
                                        <option value="{{ $pool->id }}">{{ $pool->name }} ({{ $pool->phone_number }})</option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Tahan CTRL / CMD untuk memilih banyak.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Mulai Copy
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Visibility --}}
    <div class="modal fade" id="modalVisibility" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-warning text-dark">
                    <h5 class="modal-title"><i class="ti ti-eye me-2"></i>Set Template Visibility</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="formVisibility">
                    <div class="modal-body">
                        <input type="hidden" id="vis_template_id">
                        <input type="hidden" id="vis_is_bulk" value="0">
                        
                        <div class="alert alert-info small" id="vis_info"></div>

                        <div class="mb-3">
                            <label class="form-label">Visibility Type</label>
                            <select id="vis_type" class="form-control" required>
                                <option value="hidden">Hidden (Admin Only)</option>
                                <option value="shared">Shared (All Clients/Resellers)</option>
                                <option value="custom">Custom (Specific Clients)</option>
                            </select>
                            <small class="text-muted">
                                <strong>Hidden:</strong> Hanya admin yang bisa melihat<br>
                                <strong>Shared:</strong> Semua client & reseller dapat melihat<br>
                                <strong>Custom:</strong> Hanya client yang dipilih bisa melihat
                            </small>
                        </div>

                        <div class="mb-3" id="vis_clients_wrapper" style="display:none;">
                            <label class="form-label">Pilih Client</label>
                            <select id="vis_client_ids" class="form-control" multiple>
                            </select>
                            <small class="text-muted">Pilih client yang dapat melihat template ini</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-warning">
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                            Simpan Visibility
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Edit Template --}}
    <div class="modal fade" id="modalEditTemplate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <form id="formEditTemplate">
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title"><i class="ti ti-pencil me-2"></i>Edit Template</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="edit_template_id">
                        
                        <div class="alert alert-warning small">
                            <i class="ti ti-alert-triangle me-1"></i>
                            <strong>Perhatian:</strong> Perubahan hanya disimpan di database lokal. Template yang sudah disubmit ke Meta tidak akan terpengaruh.
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Nama Template</label>
                            <input type="text" id="edit_template_name" class="form-control" readonly disabled>
                            <small class="text-muted">Nama template tidak dapat diubah setelah dibuat.</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Display Name</label>
                            <input type="text" id="edit_display_name" name="display_name" class="form-control" maxlength="255">
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Kategori</label>
                                <select id="edit_category" name="category" class="form-control">
                                    <option value="marketing">Marketing</option>
                                    <option value="utility">Utility</option>
                                    <option value="otp">OTP</option>
                                    <option value="service">Service Message</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Bahasa</label>
                                <select id="edit_language" name="language" class="form-control">
                                    <option value="id">Indonesia (id)</option>
                                    <option value="en_US">English (en_US)</option>
                                    <option value="en">English (en)</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Body</label>
                            <textarea id="edit_body" name="body" class="form-control" rows="6" maxlength="1024"></textarea>
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">Gunakan {{1}}, {{2}} untuk parameter.</small>
                                <small class="char-counter"><span id="edit_body_char_count">0</span>/1024</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">
                            <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                            <i class="ti ti-check me-1"></i>Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Modal Delete Template --}}
    <div class="modal fade" id="modalDeleteTemplate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title"><i class="ti ti-trash me-2"></i>Hapus Template</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="delete_template_id">
                    
                    <div class="alert alert-danger">
                        <i class="ti ti-alert-triangle me-1"></i>
                        <strong>Peringatan!</strong> Template yang dihapus tidak dapat dikembalikan.
                    </div>
                    
                    <p>Apakah Anda yakin ingin menghapus template:</p>
                    <p class="fw-bold fs-5 text-center" id="delete_template_name"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="btnConfirmDelete">
                        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                        <i class="ti ti-trash me-1"></i>Hapus Template
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    // ===== ENHANCED VALIDATION ENGINE =====
    const categoryGuidelines = {
        marketing: ["Promosi, penawaran, update produk.", "Boleh header media gambar/video."],
        utility: ["Update status order, tagihan, akun.", "DILARANG kata promosi/marketing.", "Sangat ketat, rawan reject."],
        otp: ["Kode verifikasi/OTP.", "Wajib 1 parameter {{1}}.", "Maks 120 char, tidak boleh media."],
        service: ["Respon user inquiry.", "Format bebas."]
    };

    function updateAdminGuidelines(cat) {
        const $list = $('#a_guideline_list');
        $list.empty();
        if (categoryGuidelines[cat]) categoryGuidelines[cat].forEach(i => $list.append(`<li>${i}</li>`));
        
        if (cat === 'otp') { 
            $('#a_header_type').val('none').trigger('change'); 
            $('#a_header_type option[value="media"], #a_header_type option[value="text"]').prop('disabled', true); 
        } else { 
            $('#a_header_type option[value="media"], #a_header_type option[value="text"]').prop('disabled', false); 
        }
        validateTemplate();
    }

    $('#a_template_category').on('change', function() { updateAdminGuidelines($(this).val()); });
    updateAdminGuidelines('marketing');

    // Validation Functions
    function validateTemplate() {
        let valid = true;
        const cat = $('#a_template_category').val();
        const headerType = $('#a_header_type').val();
        const headerFormat = $('#a_header_format').val();
        const headerText = $('#a_header_text').val();
        const headerMedia = $('input[name="header_media_url"]').val();
        const body = $('#a_body_text').val();
        const footer = $('#a_footer_text').val();
        
        const checks = {
            header: { passed: true, msg: '' },
            body_syntax: { passed: true, msg: '' },
            params_seq: { passed: true, msg: '' },
            policy: { passed: true, msg: '' },
            buttons: { passed: true, msg: '' }
        };

        // 1. Header Validation
        if (headerType === 'text') {
            if (!headerText || headerText.length > 60) { checks.header = { passed: false, msg: 'Header text required & max 60 chars' }; }
        } else if (headerType === 'media') {
            if (!headerMedia) { checks.header = { passed: false, msg: 'Header media URL required' }; }
            else if (!headerMedia.startsWith('https://')) { checks.header = { passed: false, msg: 'URL must be HTTPS' }; }
        }

        // 2. Body Syntax
        if (!body) { 
            checks.body_syntax = { passed: false, msg: 'Body text required' }; 
        } else {
            const openCount = (body.match(new RegExp('\\{' + '\\{', 'g')) || []).length;
            const closeCount = (body.match(new RegExp('\\}' + '\\}', 'g')) || []).length;
            if (openCount !== closeCount) {
                checks.body_syntax = { passed: false, msg: 'Kurung kurawal tidak seimbang (jumlah {' + '{ != }' + '})' };
            } else if (cat === 'otp' && body.length > 120) {
                checks.body_syntax = { passed: false, msg: 'OTP maks 120 karakter' };
            }
        }

        // 3. Params Sequence
        const paramRegex = new RegExp('\\{' + '\\{\\d+\\}\\}', 'g');
        const params = (body.match(paramRegex) || []).map(p => parseInt(p.match(/\d+/)[0]));
        if (params.length > 0) {
            const uniqueSorted = [...new Set(params)].sort((a,b) => a-b);
            if (uniqueSorted[0] !== 1) { 
                checks.params_seq = { passed: false, msg: 'Parameter wajib mulai {' + '{1}}' }; 
            } else {
                for(let i=0; i<uniqueSorted.length; i++) {
                    if (uniqueSorted[i] !== i+1) { 
                        checks.params_seq = { passed: false, msg: `Urutan parameter lompat: {` + `{${uniqueSorted[i]}}}` }; 
                        break;
                    }
                }
            }
            if (cat === 'otp' && (params.length !== 1 || params[0] !== 1)) {
                checks.params_seq = { passed: false, msg: 'OTP wajib tepat 1 parameter {' + '{1}}' };
            }
        }

        // 4. Policy Content
        if (cat === 'utility') {
            const banned = ['promo', 'diskon', 'sale', 'gratis', 'free', 'bonus', 'cashback', 'buy', 'beli', 'offer', '%'];
            const found = banned.filter(w => body.toLowerCase().includes(w));
            if (found.length > 0) {
                checks.policy = { passed: false, msg: `Utility dilarang kata promosi: ${found.join(', ')}` };
            }
        }

        // 5. Buttons
        const $btns = $('#a_buttons_wrap .card');
        if ($btns.length > 0) {
            $btns.each(function() {
                const type = $(this).find('.btn-type').val();
                const text = $(this).find('.btn-text-input').val();
                const url = $(this).find('input[name*="[url]"]').val();
                const phone = $(this).find('input[name*="[phone]"]').val();

                if (!text) { checks.buttons = { passed: false, msg: 'Teks tombol wajib' }; return false; }
                if (type === 'URL' && (!url || !url.startsWith('http'))) { checks.buttons = { passed: false, msg: 'URL tombol tidak valid' }; return false; }
                if (type === 'PHONE_NUMBER' && !phone) { checks.buttons = { passed: false, msg: 'Nomor telepon wajib' }; return false; }
            });
        }

        // Update UI
        let firstError = null;
        let allPassed = true;

        for (const [key, res] of Object.entries(checks)) {
            const $item = $(`#validation-checklist li[data-check="${key}"]`);
            const $icon = $item.find('.status-icon');
            
            $item.removeClass('bg-light text-muted');
            if (res.passed) {
                $icon.removeClass('ti-circle ti-alert-circle text-danger text-muted').addClass('ti-circle-check-filled text-success');
            } else {
                allPassed = false;
                $icon.removeClass('ti-circle ti-circle-check-filled text-success text-muted').addClass('ti-alert-circle text-danger');
                if (!firstError) firstError = res.msg;
            }
        }

        const $btn = $('#aCreateForm button[type="submit"]');
        const $summary = $('#validation-summary');
        const $errorMsg = $('#validation-error-msg');

        if (allPassed) {
            $btn.prop('disabled', false).removeClass('btn-secondary').addClass('btn-primary');
            $summary.html('<span class="text-success fw-bold"><i class="ti ti-check-double me-1"></i>Siap Submit</span>');
            $errorMsg.addClass('d-none');
        } else {
            $btn.prop('disabled', true).removeClass('btn-primary').addClass('btn-secondary');
            $summary.text('Perbaiki error di atas');
            if (firstError) {
                $errorMsg.removeClass('d-none').find('.msg').text(firstError);
            } else {
                $errorMsg.addClass('d-none');
            }
        }
        
        return allPassed;
    }

    // Attach listeners
    $('#a_template_category, #a_header_type, #a_header_format, #a_header_text').on('change input', validateTemplate);
    $('#a_body_text, #a_footer_text').on('input', validateTemplate);
    $('input[name="header_media_url"]').on('input', validateTemplate);
    $('#a_buttons_wrap').on('change input', 'input, select', validateTemplate);
    
    // Initial Trigger
    validateTemplate();

    // ===== Existing Code =====
    let selectedTemplates = [];

    // Select2 untuk select WABA
    $('#a_filter_waba_pool').select2({ placeholder: "Semua WABA", allowClear: true, width: '220px' });
    $('#a_create_waba_pool_id').select2({ dropdownParent: $('#modalCreateTemplateAdmin'), placeholder: "Pilih WABA", allowClear: false, width: '100%' });
    $('#copy_target_pool').select2({ dropdownParent: $('#modalCopyTemplate'), placeholder: "Pilih WABA Tujuan", allowClear: true, width: '100%' });
    $('#bulk_target_waba_pool_ids').select2({
        dropdownParent: $('#modalBulkCopy'),
        placeholder: "Pilih Target Pool (Bisa Banyak)",
        allowClear: true,
        width: '100%'
    });

    // ===== AJAX SUBMIT HANDLER =====
    $('#aCreateForm').on('submit', function(e) {
        e.preventDefault();
        
        const $form = $(this);
        const $btn = $form.find('button[type="submit"]');
        const $spinner = $btn.find('.spinner-border');
        const $btnText = $btn.find('.btn-text');
        
        // Re-validate before submit (safety check)
        if (!validateTemplate()) {
            return false;
        }

        $btn.prop('disabled', true);
        $btnText.text('Mengirim ke Meta...');
        
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            success: function(res) {
                 if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text(res.meta.message || 'Template berhasil dibuat');
                    $('#successToast').toast('show');
                    $('#modalCreateTemplateAdmin').modal('hide');
                    $form[0].reset();
                    $('#a_create_waba_pool_id').val('').trigger('change');
                    // Reset validation state
                    $('#validation-checklist li').removeClass('bg-light').find('.status-icon').removeClass('ti-circle-check-filled text-success ti-alert-circle text-danger').addClass('ti-circle text-muted');
                    $('#validation-summary').text('Lengkapi form untuk validasi');
                    $('#validation-error-msg').addClass('d-none');
                    // Reload table
                    table.ajax.reload();
                } else {
                    $('#failedToast .msg-box').text(res.meta ? res.meta.message : 'Gagal membuat template');
                    $('#failedToast').toast('show');
                }
            },
            error: function(err) {
                 let msg = 'Terjadi kesalahan saat submit template';
                if (err.responseJSON && err.responseJSON.meta && err.responseJSON.meta.message) {
                    msg = err.responseJSON.meta.message;
                }
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                $btn.prop('disabled', false);
                $btnText.html('<i class="ti ti-send me-1"></i>Simpan & Submit ke Meta');
            }
        });
    });

    var table = $('#datatable-templates').DataTable({
        processing: true,
        serverSide: true, // Enable server-side processing
        autoWidth: false,
        order: [[1, 'asc']], // Order by Name initially
        ajax: {
            url: '{{ route('admin.templates.data') }}',
            // dataSrc: 'data', // Yajra returns 'data' property by default, compatible
            data: function (d) {
                d.waba_pool_id = $('#a_filter_waba_pool').val();
                d.visibility_type = $('#a_filter_visibility').val();
            }
        },
        columns: [
            { 
                data: 'id', 
                orderable: false, 
                searchable: false,
                render: function(data) {
                    return `<input type="checkbox" class="select-checkbox" value="${data}">`;
                }
            },
            {
                data: 'name',
                name: 'name',
                // visible: false // No longer hidden for grouping
            }, 
            {
                data: 'display_name',
                name: 'display_name',
                visible: false, // Hidden by user request
                render: function(data, type, row) {
                    let html = `<div class="fw-bold text-dark">${data || row.name}</div>`;
                    if (row.name) {
                         html += `<div class="small text-muted text-truncate" style="max-width:200px;" title="${row.name}">${row.name}</div>`;
                    }
                    return html;
                }
            },
            {
                data: 'category',
                name: 'category',
                defaultContent: '-',
                render: function (data) {
                    if (!data) return '-';
                    var labelMap = {
                        marketing: 'Marketing',
                        utility: 'Utility',
                        otp: 'OTP',
                        service: 'Service'
                    };
                    return '<span class="badge rounded-pill bg-light text-dark">' + (labelMap[data] || data) + '</span>';
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function (data) {
                    data = (data || '').toLowerCase();
                    if (!data) return '-';
                    var cls = 'bg-secondary';
                    if (data === 'approved') cls = 'bg-success';
                    else if (data === 'pending') cls = 'bg-warning text-dark';
                    else if (data === 'rejected') cls = 'bg-danger';
                    return '<span class="badge rounded-pill ' + cls + '">' + data + '</span>';
                }
            },
            {
                data: 'language',
                name: 'language',
                render: function (data) {
                    if (!data) return '-';
                    return '<span class="badge rounded-pill bg-light text-muted">' + data + '</span>';
                }
            },
            {
                data: 'visibility_type',
                name: 'visibility_type',
                render: function (data, type, row) {
                    if (!data) data = 'hidden';
                    var cls = 'bg-secondary';
                    var icon = 'ti-eye-off';
                    if (data === 'shared') { cls = 'bg-success'; icon = 'ti-eye'; }
                    else if (data === 'custom') { cls = 'bg-info'; icon = 'ti-users'; }
                    else if (data === 'hidden') { cls = 'bg-secondary'; icon = 'ti-eye-off'; }
                    return '<span class="badge rounded-pill ' + cls + '"><i class="ti ' + icon + ' me-1"></i>' + data + '</span>';
                }
            },
            {
                data: 'id',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `
                        <div class="btn-group btn-group-sm" role="group">
                            <button class="btn btn-sm btn-outline-primary btn-edit-template" 
                                data-id="${data}" 
                                data-name="${row.name}" 
                                data-display-name="${row.display_name || row.name}"
                                data-body="${(row.body || '').replace(/"/g, '&quot;')}"
                                data-category="${row.category || ''}"
                                data-language="${row.language || ''}"
                                title="Edit Template">
                                <i class="ti ti-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-warning btn-edit-visibility" 
                                data-id="${data}" 
                                data-name="${row.name}" 
                                data-visibility="${row.visibility_type || 'hidden'}" 
                                data-clients='${JSON.stringify(row.visible_client_ids || [])}' 
                                title="Set Visibility">
                                <i class="ti ti-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger btn-delete-template" 
                                data-id="${data}" 
                                data-name="${row.name}" 
                                title="Hapus Template">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        // drawCallback removed as usage of group rows are redundant with backend grouping
    });

    // Toggle Group Order Removed


    $('#a_filter_waba_pool, #a_filter_visibility').on('change', function () {
        table.ajax.reload();
    });

    // Checkbox Logic
    $('#selectAll').click(function() {
        $('.select-checkbox').prop('checked', this.checked);
        updateSelected();
    });

    $(document).on('change', '.select-checkbox', function() {
        updateSelected();
        if ($('.select-checkbox:checked').length == $('.select-checkbox').length) {
            $('#selectAll').prop('checked', true);
        } else {
            $('#selectAll').prop('checked', false);
        }
    });

    function updateSelected() {
        selectedTemplates = [];
        $('.select-checkbox:checked').each(function() {
            selectedTemplates.push($(this).val());
        });
        
        $('#selectedCount').text(selectedTemplates.length);
        $('#selectedCountVis').text(selectedTemplates.length);
        $('#btnBulkCopy').prop('disabled', selectedTemplates.length === 0);
        $('#btnBulkVisibility').prop('disabled', selectedTemplates.length === 0);
    }

    // ===== VISIBILITY FEATURE =====
    
    // Initialize Select2 for client multi-select
    $('#vis_client_ids').select2({
        dropdownParent: $('#modalVisibility'),
        placeholder: 'Cari dan pilih client...',
        allowClear: true,
        width: '100%',
        ajax: {
            url: '{{ route("admin.templates.clients-list") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { search: params.term };
            },
            processResults: function (data) {
                return {
                    results: (data.data || []).map(function(client) {
                        return { id: client.id, text: client.label };
                    })
                };
            },
            cache: true
        }
    });

    // Toggle client selector based on visibility type
    $('#vis_type').on('change', function() {
        if ($(this).val() === 'custom') {
            $('#vis_clients_wrapper').show();
        } else {
            $('#vis_clients_wrapper').hide();
        }
    });

    // Single template visibility edit
    $(document).on('click', '.btn-edit-visibility', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const visibility = $(this).data('visibility') || 'hidden';
        const clients = $(this).data('clients') || [];
        
        $('#vis_template_id').val(id);
        $('#vis_is_bulk').val('0');
        $('#vis_info').html(`<strong>Template:</strong> ${name}`);
        $('#vis_type').val(visibility).trigger('change');
        
        // Load existing clients into Select2
        $('#vis_client_ids').empty();
        if (clients.length > 0) {
            // Fetch client details for selected IDs
            $.get('{{ route("admin.templates.clients-list") }}', function(res) {
                const allClients = res.data || [];
                clients.forEach(function(clientId) {
                    const client = allClients.find(c => c.id === clientId);
                    if (client) {
                        const option = new Option(client.label, client.id, true, true);
                        $('#vis_client_ids').append(option);
                    }
                });
                $('#vis_client_ids').trigger('change');
            });
        }
        
        $('#modalVisibility').modal('show');
    });

    // Bulk visibility button
    $('#btnBulkVisibility').click(function() {
        $('#vis_template_id').val('');
        $('#vis_is_bulk').val('1');
        $('#vis_info').html(`<strong>Bulk Update:</strong> ${selectedTemplates.length} template akan diperbarui`);
        $('#vis_type').val('hidden').trigger('change');
        $('#vis_client_ids').empty();
        $('#modalVisibility').modal('show');
    });

    // Visibility form submit
    $('#formVisibility').on('submit', function(e) {
        e.preventDefault();
        
        const btn = $(this).find('button[type="submit"]');
        const spinner = btn.find('.spinner-border');
        const isBulk = $('#vis_is_bulk').val() === '1';
        const visibilityType = $('#vis_type').val();
        const clientIds = $('#vis_client_ids').val() || [];
        
        btn.prop('disabled', true);
        spinner.removeClass('d-none');
        
        let url, method, payload;
        
        if (isBulk) {
            url = '{{ route("admin.templates.bulk-visibility") }}';
            method = 'POST';
            payload = {
                _token: '{{ csrf_token() }}',
                template_ids: selectedTemplates,
                visibility_type: visibilityType,
                visible_client_ids: visibilityType === 'custom' ? clientIds : null
            };
        } else {
            const templateId = $('#vis_template_id').val();
            url = '{{ url("/admin/templates") }}/' + templateId + '/visibility';
            method = 'PUT';
            payload = {
                _token: '{{ csrf_token() }}',
                visibility_type: visibilityType,
                visible_client_ids: visibilityType === 'custom' ? clientIds : null
            };
        }
        
        $.ajax({
            url: url,
            method: method,
            data: payload,
            success: function(res) {
                $('#successToast .msg-box').text(res.meta?.message || 'Visibility berhasil diperbarui');
                $('#successToast').toast('show');
                $('#modalVisibility').modal('hide');
                table.ajax.reload();
                
                if (isBulk) {
                    selectedTemplates = [];
                    updateSelected();
                    $('#selectAll').prop('checked', false);
                }
            },
            error: function(err) {
                let msg = err.responseJSON?.meta?.message || 'Gagal memperbarui visibility';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false);
                spinner.addClass('d-none');
            }
        });
    });

    // Bulk Copy Modal
    $('#btnBulkCopy').click(function() {
        $('#bulkSelectedCount').text(selectedTemplates.length);
        $('#modalBulkCopy').modal('show');
    });

    $('input[name="target_type"]').change(function() {
        if ($(this).val() === 'specific') {
            $('#targetPoolSelectWrapper').show();
        } else {
            $('#targetPoolSelectWrapper').hide();
        }
    });

    // Submit Bulk Copy
    $('#formBulkCopy').submit(function(e) {
        e.preventDefault();
        const btn = $(this).find('button[type="submit"]');
        const spinner = btn.find('.spinner-border');
        
        const targetType = $('input[name="target_type"]:checked').val();
        const targetPoolIds = $('#bulk_target_waba_pool_ids').val();

        if (targetType === 'specific' && (!targetPoolIds || targetPoolIds.length === 0)) {
            $('#failedToast .msg-box').text('Pilih minimal satu target WABA Pool');
            $('#failedToast').toast('show');
            return;
        }

        btn.prop('disabled', true);
        spinner.removeClass('d-none');

        $.ajax({
            url: "{{ route('admin.templates.bulk-copy') }}",
            method: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                template_ids: selectedTemplates,
                target_type: targetType === 'all_shared' ? 'all_shared' : null,
                target_waba_pool_ids: targetPoolIds
            },
            success: function(res) {
                $('#successToast .msg-box').text(`Berhasil copy ${res.data.success} template. Gagal: ${res.data.failed}`);
                $('#successToast').toast('show');
                
                $('#modalBulkCopy').modal('hide');
                table.ajax.reload();
                selectedTemplates = [];
                updateSelected();
                $('#selectAll').prop('checked', false);
            },
            error: function(err) {
                let msg = err.responseJSON?.message || 'Gagal melakukan bulk copy';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false);
                spinner.addClass('d-none');
            }
        });
    });

    $('#btn-sync-templates').on('click', function () {
        var poolId = $('#a_filter_waba_pool').val();
        if (!poolId) {
            $('#failedToast .msg-box').text('Pilih salah satu WABA terlebih dahulu untuk sync');
            $('#failedToast').toast('show');
            return;
        }
        if (!confirm('Sync template dari Meta untuk WABA terpilih? Template baru akan ditambahkan / diupdate di database.')) {
            return;
        }

        // Show loading state
        var $btn = $(this);
        var originalText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Syncing...');

        $.post('{{ route('admin.templates.sync') }}', {
            _token: '{{ csrf_token() }}',
            waba_pool_id: poolId
        })
            .done(function (res) {
                if (res.meta && res.meta.status === 'success') {
                    // Use the message from server specifically
                    $('#successToast .msg-box').text(res.meta.message);
                    $('#successToast').toast('show');
                    table.ajax.reload();
                } else {
                    let msg = res.meta && res.meta.message ? res.meta.message : 'Gagal sync template';
                    $('#failedToast .msg-box').text(msg);
                    $('#failedToast').toast('show');
                }
            })
            .fail(function (xhr) {
                var msg = 'Gagal sync template dari Meta';
                if (xhr.responseJSON && xhr.responseJSON.meta && xhr.responseJSON.meta.message) {
                    msg = xhr.responseJSON.meta.message;
                }
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            })
            .always(function() {
                $btn.prop('disabled', false).html(originalText);
            });
    });

    // Buttons builder (admin)
    const $wrap = $('#a_buttons_wrap');
    const $add = $('#a_btn_add_button');
    const $preview = $('#a_tpl_preview');
    const $previewParams = $('#a_preview_params');
    const $bodyText = $('#a_body_text');
    const $headerText = $('#a_header_text');
    const $footerText = $('#a_footer_text');

    // Header type toggle
    $('#a_header_type').on('change', function() {
        const val = $(this).val();
        $('.a-header-text-wrap').toggle(val === 'text');
        $('.a-header-format-wrap').toggle(val === 'media');
        $('.a-header-media-wrap').toggle(val === 'media');
        renderPreview();
    });

    // Character counters
    function updateCharCount(inputId, countId, max) {
        const len = $(inputId).val().length;
        const $counter = $(countId);
        $counter.text(len);
        $counter.parent().removeClass('warning danger');
        if (len > max * 0.9) $counter.parent().addClass('warning');
        if (len >= max) $counter.parent().addClass('danger');
    }

    $headerText.on('input', function() {
        updateCharCount('#a_header_text', '#a_header_char_count', 60);
        renderPreview();
    });
    $bodyText.on('input', function() {
        updateCharCount('#a_body_text', '#a_body_char_count', 1024);
        renderPreview();
    });
    $footerText.on('input', function() {
        updateCharCount('#a_footer_text', '#a_footer_char_count', 60);
        renderPreview();
    });

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

    // Highlight parameters
    function highlightParams(text, params) {
        if (!text) return '';
        let result = text;
        const values = params ? params.split(',').map(v => v.trim()) : [];
        result = result.replace(/\{\{(\d+)\}\}/g, function(match, num) {
            const idx = parseInt(num) - 1;
            const val = values[idx] || match;
            return '<span class="param">' + $('<div>').text(val).html() + '</span>';
        });
        result = result.replace(/\{(\d+)\}/g, function(match, num) {
            const idx = parseInt(num) - 1;
            const val = values[idx] || match;
            return '<span class="param">' + $('<div>').text(val).html() + '</span>';
        });
        return result;
    }

    function row(idx) {
        return `
            <div class="card p-2 mb-2 border position-relative">
                <div class="row g-2 align-items-center">
                    <div class="col-md-3">
                        <select name="buttons[${idx}][type]" class="form-control form-control-sm btn-type">
                            <option value="URL">URL</option>
                            <option value="PHONE_NUMBER">Phone</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="buttons[${idx}][text]" class="form-control form-control-sm btn-text-input" placeholder="Teks tombol" maxlength="25">
                    </div>
                    <div class="col-md-4 btn-url-field">
                        <input type="url" name="buttons[${idx}][url]" class="form-control form-control-sm" placeholder="https://...">
                    </div>
                    <div class="col-md-4 btn-phone-field d-none">
                        <input type="text" name="buttons[${idx}][phone]" class="form-control form-control-sm" placeholder="+628xxxx">
                    </div>
                    <div class="col-md-1 text-end">
                        <button type="button" class="btn btn-sm btn-outline-danger btn-remove"><i class="ti ti-trash"></i></button>
                    </div>
                </div>
            </div>
        `;
    }

    function refreshButtons() {
        $wrap.find('.btn-type').each(function () {
            const val = $(this).val();
            const card = $(this).closest('.card');
            card.find('.btn-url-field').toggleClass('d-none', val !== 'URL');
            card.find('.btn-phone-field').toggleClass('d-none', val !== 'PHONE_NUMBER');
        });
        renderPreview();
    }

    $add.on('click', function () {
        const count = $wrap.children('.card').length;
        if (count >= 3) return;
        $wrap.append(row(count));
        refreshButtons();
        validateTemplate();
    });

    $wrap.on('change input', '.btn-type, .btn-text-input', refreshButtons);

    $wrap.on('click', '.btn-remove', function () {
        $(this).closest('.card').remove();
        $wrap.children('.card').each(function (idx) {
            $(this).find('select[name^="buttons"]').attr('name', `buttons[${idx}][type]`);
            $(this).find('input[name$="[text]"]').attr('name', `buttons[${idx}][text]`);
            $(this).find('input[name$="[url]"]').attr('name', `buttons[${idx}][url]`);
            $(this).find('input[name$="[phone]"]').attr('name', `buttons[${idx}][phone]`);
        });
        refreshButtons();
        validateTemplate();
    });

    function renderPreview() {
        const headerType = $('#a_header_type').val();
        const headerText = $headerText.val();
        const headerFormat = $('#a_header_format').val();
        const body = $bodyText.val();
        const footer = $footerText.val();
        const params = $previewParams.val();

        let html = '';

        // Header
        if (headerType === 'text' && headerText) {
            html += '<div class="wa-header">' + formatWaText(headerText) + '</div>';
        } else if (headerType === 'media') {
            const iconMap = { 'IMAGE': 'ti-photo', 'VIDEO': 'ti-video', 'DOCUMENT': 'ti-file-text' };
            const labelMap = { 'IMAGE': 'Image', 'VIDEO': 'Video', 'DOCUMENT': 'Document' };
            html += '<div class="wa-header-media"><i class="ti ' + (iconMap[headerFormat] || 'ti-photo') + ' fs-1"></i><br><small>' + (labelMap[headerFormat] || 'Media') + '</small></div>';
        }

        // Body
        if (body) {
            let formattedBody = formatWaText(body);
            formattedBody = highlightParams(formattedBody, params);
            html += '<div class="wa-body">' + formattedBody + '</div>';
        } else {
            html += '<div class="wa-body text-muted">Isi body template...</div>';
        }

        // Footer
        if (footer) {
            html += '<div class="wa-footer">' + formatWaText(footer) + '</div>';
        }

        // Timestamp
        const now = new Date();
        const timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
        html += '<div class="wa-timestamp">' + timeStr + ' <i class="ti ti-checks text-primary"></i></div>';

        // Buttons
        const buttons = [];
        $wrap.find('.card').each(function () {
            const type = $(this).find('.btn-type').val();
            const text = $(this).find('input[name$="[text]"]').val();
            if (text) {
                buttons.push({ type, text });
            }
        });

        if (buttons.length > 0) {
            html += '<div class="wa-buttons-container">';
            buttons.forEach(btn => {
                let icon = 'ti-external-link';
                if (btn.type === 'PHONE_NUMBER') icon = 'ti-phone';
                html += '<div class="wa-button-cta"><i class="ti ' + icon + '"></i> ' + $('<div>').text(btn.text).html() + '</div>';
            });
            html += '</div>';
        }

        $preview.html(html);
    }

    $previewParams.on('input change', renderPreview);
    $bodyText.on('input change', renderPreview);
    $headerText.on('input change', renderPreview);
    $footerText.on('input change', renderPreview);

    renderPreview();

    // Copy Template Logic
    $('#datatable-templates').on('click', '.btn-copy-template', function() {
        var id = $(this).data('id');
        var name = $(this).data('name');
        
        $('#copy_template_id').val(id);
        $('#copy_template_name').text(name);
$('#copy_target_pool').val('').trigger('change');
        $('#copy_name_suffix').val('');

        $('#modalCopyTemplate').modal('show');
    });

    $('#formCopyTemplate').on('submit', function(e) {
        e.preventDefault();
        
        var id = $('#copy_template_id').val();
        var targetPoolId = $('#copy_target_pool').val();
        var suffix = $('#copy_name_suffix').val();
        var btn = $(this).find('button[type="submit"]');
        
        if (!targetPoolId) {
            $('#failedToast .msg-box').text('Pilih target WABA Pool');
            $('#failedToast').toast('show');
            return;
        }

        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Copying...');
        
        $.ajax({
            url: `/admin/templates/${id}/copy`,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                target_waba_pool_id: targetPoolId,
                name_suffix: suffix
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text(res.meta.message || 'Template copied successfully');
                    $('#successToast').toast('show');
                    $('#modalCopyTemplate').modal('hide');
                    table.ajax.reload();
                } else {
                    $('#failedToast .msg-box').text(res.meta.message || 'Failed to copy template');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                var msg = 'Error copying template';
                if (xhr.responseJSON && xhr.responseJSON.meta && xhr.responseJSON.meta.message) {
                    msg = xhr.responseJSON.meta.message;
                }
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-copy me-1"></i> Copy Template');
            }
        });
    });

    // ===== EDIT TEMPLATE FEATURE =====
    
    // Open edit modal and populate form
    $(document).on('click', '.btn-edit-template', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const displayName = $(this).data('display-name') || name;
        const body = $(this).data('body') || '';
        const category = $(this).data('category') || 'marketing';
        const language = $(this).data('language') || 'id';
        
        $('#edit_template_id').val(id);
        $('#edit_template_name').val(name);
        $('#edit_display_name').val(displayName);
        $('#edit_body').val(body);
        $('#edit_category').val(category);
        $('#edit_language').val(language);
        $('#edit_body_char_count').text(body.length);
        
        $('#modalEditTemplate').modal('show');
    });

    // Update body character count
    $('#edit_body').on('input', function() {
        $('#edit_body_char_count').text($(this).val().length);
    });

    // Submit edit form
    $('#formEditTemplate').on('submit', function(e) {
        e.preventDefault();
        
        const id = $('#edit_template_id').val();
        const btn = $(this).find('button[type="submit"]');
        const spinner = btn.find('.spinner-border');
        
        btn.prop('disabled', true);
        spinner.removeClass('d-none');
        
        $.ajax({
            url: '/admin/templates/' + id,
            method: 'PUT',
            data: {
                _token: '{{ csrf_token() }}',
                display_name: $('#edit_display_name').val(),
                body: $('#edit_body').val(),
                category: $('#edit_category').val(),
                language: $('#edit_language').val()
            },
            success: function(res) {
                $('#successToast .msg-box').text(res.meta?.message || 'Template berhasil diupdate');
                $('#successToast').toast('show');
                $('#modalEditTemplate').modal('hide');
                table.ajax.reload();
            },
            error: function(err) {
                let msg = err.responseJSON?.meta?.message || 'Gagal mengupdate template';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false);
                spinner.addClass('d-none');
            }
        });
    });

    // ===== DELETE TEMPLATE FEATURE =====
    
    // Open delete modal
    $(document).on('click', '.btn-delete-template', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        
        $('#delete_template_id').val(id);
        $('#delete_template_name').text(name);
        
        $('#modalDeleteTemplate').modal('show');
    });

    // Confirm delete
    $('#btnConfirmDelete').on('click', function() {
        const id = $('#delete_template_id').val();
        const btn = $(this);
        const spinner = btn.find('.spinner-border');
        
        btn.prop('disabled', true);
        spinner.removeClass('d-none');
        
        $.ajax({
            url: '/admin/templates/' + id,
            method: 'DELETE',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(res) {
                $('#successToast .msg-box').text(res.meta?.message || 'Template berhasil dihapus');
                $('#successToast').toast('show');
                $('#modalDeleteTemplate').modal('hide');
                table.ajax.reload();
            },
            error: function(err) {
                let msg = err.responseJSON?.meta?.message || 'Gagal menghapus template';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false);
                spinner.addClass('d-none');
            }
        });
    });
});
</script>
@endpush