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

@push('styles')
<style>
/* 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;
}
.wa-quick-reply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #00A5F4;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    margin: 4px 4px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Character Counter */
.char-counter {
    font-size: 11px;
    color: #999;
    text-align: right;
}
.char-counter.warning { color: #f0ad4e; }
.char-counter.danger { color: #dc3545; }

/* Input Validation */
.form-control.is-invalid-custom {
    border-color: #dc3545;
}
.invalid-feedback-custom {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
}

/* Formatting helper */
.format-help {
    font-size: 11px;
    color: #888;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 4px;
}
</style>
@endpush

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

    <div class="card card-body mb-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
            <div>
                <h4 class="mb-1 d-flex align-items-center gap-2">
                    <i class="ti ti-message-circle-2 text-primary"></i>
                    Template WABA Client
                </h4>
                <p class="mb-0 text-muted small">
                    Kelola template pesan resmi yang akan digunakan untuk kampanye dan notifikasi otomatis.
                </p>
            </div>
            <!-- Create Template Hidden for Client Role -->
            <div>
                <button type="button" class="btn btn-info me-2" id="btn-sync-templates">
                    <i class="ti ti-refresh"></i> Sync Template
                </button>
                
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCreateTemplateClient">
                    <i class="ti ti-plus"></i> Buat Template
                </button>
            </div>
        </div>
       
    </div>

    {{-- Info Box: Contact Admin for Template Requests --}}
    @if($setting && $setting->phone)
        @php
            $adminPhone = preg_replace('/[^0-9]/', '', $setting->phone);
            // Convert 08xxx to 628xxx for wa.me
            if (str_starts_with($adminPhone, '0')) {
                $adminPhone = '62' . substr($adminPhone, 1);
            }
        @endphp
        <div class="alert alert-info d-flex align-items-center gap-3 mb-3" role="alert">
            <i class="ti ti-message-circle-question fs-4"></i>
            <div>
                <strong>Butuh bantuan pengajuan template?</strong><br>
                <span class="text-muted small">Hubungi Admin untuk bantuan pembuatan dan pengajuan template WhatsApp.</span>
            </div>
            <a href="https://wa.me/{{ $adminPhone }}?text={{ urlencode('Halo Admin, saya ingin mengajukan template WhatsApp untuk bisnis saya.') }}" 
               target="_blank" 
               class="btn btn-success btn-sm ms-auto">
                <i class="ti ti-brand-whatsapp me-1"></i> Hubungi Admin
            </a>
        </div>
    @endif

    <div class="card card-body">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0">Daftar Template</h5>
            <span class="text-muted small">Template yang berstatus <span class="badge bg-success-subtle text-success">approved</span> siap digunakan</span>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-client-templates">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Kategori</th>
                        <th>Status</th>
                        <th>Bahasa</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- Modal Create Template Client --}}
    <div class="modal fade" id="modalCreateTemplateClient" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <form action="{{ route('client.templates.store') }}" method="POST" id="createForm" data-table="#datatable-client-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">
                                {{-- Target WABA Info Badge --}}
                                <div class="alert {{ ($hasDedicated || $isSelfService) ? 'alert-primary' : 'alert-info' }} mb-3 py-2">
                                    <div class="d-flex align-items-start gap-2">
                                        <i class="ti ti-{{ ($hasDedicated || $isSelfService) ? 'star' : 'share' }} fs-5 mt-1"></i>
                                        <div>
                                            @if($hasDedicated)
                                                <strong>Template akan dibuat pada Dedicated Number Anda:</strong>
                                            @elseif($isSelfService)
                                                <strong>Template akan dibuat pada WABA Self Service Anda:</strong>
                                            @else
                                                <strong>Template akan dibuat untuk semua WABA Shared</strong>
                                            @endif

                                            @if($hasDedicated || $isSelfService)
                                                <ul class="mb-0 mt-1 ps-3">
                                                    @foreach($targetPools as $pool)
                                                        <li class="small">{{ $pool->phone_number }} ({{ $pool->account_name }})</li>
                                                    @endforeach
                                                </ul>
                                            @else
                                                <div class="small text-muted">({{ $targetPools->count() }} nomor aktif akan menerima template ini)</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Nama Template <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="c_template_name" class="form-control" required maxlength="512" placeholder="contoh: promo_akhir_tahun">
                                    <small class="text-muted">
                                        Nama unik akan dibuat otomatis: <code>{id}_client_{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="c_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" id="c_template_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="c_category_guidelines">
                                    <i class="ti ti-info-circle me-1"></i> <strong>Panduan Kategori:</strong>
                                    <ul class="mb-0 ps-3 mt-1" id="c_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="c_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" id="header_format_wrap" style="display:none;">
                                        <label class="form-label">Header Format</label>
                                        <select name="header_format" id="c_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" id="header_text_wrap" style="display:none;">
                                    <label class="form-label">Header Text</label>
                                    <input type="text" name="header_text" id="c_header_text" class="form-control" maxlength="60" placeholder="Judul pesan (max 60 karakter)">
                                    <div class="char-counter"><span id="header_char_count">0</span>/60</div>
                                </div>
                                <div class="mb-3" id="header_media_wrap" style="display:none;">
                                    <label class="form-label">Header Media Source</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="header_media_type" id="c_media_type_url" value="url" checked>
                                            <label class="form-check-label" for="c_media_type_url">Input URL</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="header_media_type" id="c_media_type_file" value="file">
                                            <label class="form-check-label" for="c_media_type_file">Upload File</label>
                                        </div>
                                    </div>
                                    
                                    <div id="c_media_input_url" class="mt-2">
                                        <input type="url" name="header_media_url" id="c_header_media_url" class="form-control" placeholder="https://example.com/image.jpg">
                                    </div>
                                    <div id="c_media_input_file" class="mt-2" style="display:none;">
                                        <input type="file" name="header_media_file" id="c_header_media_file" class="form-control" accept="image/*,video/*,application/pdf">
                                        <small class="text-muted">Max 16MB. JPG, PNG for Image. MP4 for Video. PDF for Document.</small>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Body <span class="text-danger">*</span></label>
                                    <textarea name="body_text" id="c_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="body_char_count">0</span>/1024</div>
                                    </div>
                                    <div id="c_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="c_footer_text" class="form-control" maxlength="60" placeholder="Teks footer (max 60 karakter)">
                                    <div class="char-counter"><span id="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="c_buttons_wrap"></div>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="c_btn_add_button">
                                    <i class="ti ti-plus"></i> Tambah Button
                                </button>

                                <hr>
                                <h6 class="mb-2"><i class="ti ti-list-check me-1"></i> Contoh Nilai (Wajib untuk Parameter)</h6>
                                <p class="small text-muted mb-2">Meta mewajibkan contoh nilai untuk semua parameter variabel .</p>
                                <div id="c_examples_wrap" class="bg-light p-3 rounded">
                                    <div class="text-center text-muted small">Tidak ada parameter variabel yang terdeteksi.</div>
                                </div>
                            </div>

                           
                            <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="c_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="c_tpl_preview">
                                                <div class="wa-body text-muted">Preview akan muncul di sini...</div>
                                            </div>
                                        </div>
                                    </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 View Template --}}
    <div class="modal fade" id="modalViewTemplate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail Template</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-sm table-borderless">
                                <tr>
                                    <td class="text-muted" width="120">Nama Template</td>
                                    <td class="fw-bold" id="v_template_name">-</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Kategori</td>
                                    <td id="v_category">-</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Bahasa</td>
                                    <td id="v_language">-</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Status</td>
                                    <td id="v_status">-</td>
                                </tr>
                                <tr id="v_rejection_row" class="d-none">
                                    <td class="text-danger">Alasan Ditolak</td>
                                    <td class="text-danger small" id="v_rejection_reason"></td>
                                </tr>
                            </table>
                            <div class="mt-3">
                                <h6 class="small text-muted">Placeholders</h6>
                                <div id="v_placeholders" class="d-flex flex-wrap gap-1"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="wa-phone-mockup" style="transform: scale(0.9); transform-origin: top center;">
                                <div class="wa-phone-screen">
                                    <div class="wa-message-bubble" id="v_preview_content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-warning d-none" id="btnResubmit">
                        <i class="ti ti-refresh me-1"></i> Ajukan Ulang (Resubmit)
                    </button>
                </div>
            </div>
        </div>
    </div>

   
    <div class="modal fade" id="modalResubmitTemplate" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <form id="resubmitForm" method="POST">
                    @csrf
                    <div class="modal-header bg-warning text-dark">
                        <h5 class="modal-title"><i class="ti ti-refresh me-2"></i>Ajukan Ulang Template</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-info mb-3">
                            <i class="ti ti-info-circle me-1"></i>
                            <strong>Penting:</strong> Template REJECTED tidak bisa diajukan ulang dengan nama yang sama. Sistem akan membuat template baru dengan nama baru.
                        </div>
                        <div class="row">
                            {{-- Left Column: Form --}}
                            <div class="col-lg-7">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nama Lama <small class="text-muted">(read-only)</small></label>
                                        <input type="text" class="form-control bg-light" id="r_old_template_name" readonly disabled>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Nama Baru <span class="text-danger">*</span></label>
                                        <input type="text" name="new_template_name" id="r_new_template_name" class="form-control" 
                                               pattern="^[a-z0-9_]+$" required
                                               placeholder="nama_template_v2">
                                        <small class="text-muted">Hanya huruf kecil, angka, dan underscore</small>
                                        <div id="r_new_name_error" class="text-danger small mt-1" style="display:none;"></div>
                                    </div>
                                </div>
                                
                                <hr>
                                <h6 class="mb-3">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="r_header_type" class="form-control">
                                            <option value="none">Tidak ada</option>
                                            <option value="text">Text</option>
                                            <option value="media">Media</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6 mb-3" id="r_header_format_wrap" style="display:none;">
                                        <label class="form-label">Header Format</label>
                                        <select name="header_format" id="r_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" id="r_header_text_wrap" style="display:none;">
                                    <label class="form-label">Header Text</label>
                                    <input type="text" name="header_text" id="r_header_text" class="form-control" maxlength="60">
                                </div>
                                <div class="mb-3" id="r_header_media_wrap" style="display:none;">
                                    <label class="form-label">Header Media Source</label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="header_media_type" id="r_media_type_url" value="url" checked>
                                            <label class="form-check-label" for="r_media_type_url">Input URL</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="header_media_type" id="r_media_type_file" value="file">
                                            <label class="form-check-label" for="r_media_type_file">Upload File</label>
                                        </div>
                                    </div>
                                    
                                    <div id="r_media_input_url" class="mt-2">
                                        <input type="url" name="header_media_url" id="r_header_media_url" class="form-control" placeholder="https://example.com/image.jpg">
                                    </div>
                                    <div id="r_media_input_file" class="mt-2" style="display:none;">
                                        <input type="file" name="header_media_file" id="r_header_media_file" class="form-control" accept="image/*,video/*,application/pdf">
                                        <small class="text-muted">Max 16MB. JPG, PNG for Image. MP4 for Video. PDF for Document.</small>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Body <span class="text-danger">*</span></label>
                                    <textarea name="body_text" id="r_body_text" class="form-control" rows="5" maxlength="1024" required></textarea>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Footer</label>
                                    <input type="text" name="footer_text" id="r_footer_text" class="form-control" maxlength="60">
                                </div>

                                <hr>
                                <h6 class="mb-2">Buttons</h6>
                                <div id="r_buttons_wrap"></div>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="r_btn_add_button">
                                    <i class="ti ti-plus"></i> Tambah Button
                                </button>

                                <hr>
                                <h6 class="mb-2"><i class="ti ti-list-check me-1"></i> Contoh Nilai (Wajib untuk Parameter)</h6>
                                <div id="r_examples_wrap" class="bg-light p-3 rounded">
                                    <div class="text-center text-muted small">Tidak ada parameter variabel yang terdeteksi.</div>
                                </div>
                            </div>

                            {{-- Right Column: Preview --}}
                            <div class="col-lg-5">
                                <div class="sticky-top" style="top: 20px;">
                                    <h6 class="mb-3 text-center">Preview Perubahan</h6>
                                    <div class="wa-phone-mockup">
                                        <div class="wa-phone-screen">
                                            <div class="wa-message-bubble" id="r_tpl_preview"></div>
                                        </div>
                                    </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>Submit Ulang</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    // ===== Category Guidelines Logic =====
    const categoryGuidelines = {
        marketing: [
            "Boleh mengandung promosi, diskon, dan ajakan membeli.",
            "Gunakan bahasa yang menarik namun tidak menyesatkan.",
            "Boleh menggunakan media dan button CTA.",
            "Boleh menggunakan emoticon/emoji sewajarnya."
        ],
        utility: [
            "HANYA untuk informasi penting: update pesanan, tagihan, pengingat.",
            "TIDAK BOLEH ada kata promosi (diskon, sale, beli, gratis, promo).",
            "TIDAK BOLEH ada ajakan membeli atau CTA komersial.",
            "TIDAK BOLEH ada emoticon/emoji."
        ],
        otp: [
            "HANYA untuk kode verifikasi/OTP.",
            "Wajib memiliki tepat 1 parameter @{{1}} untuk kode.",
            "Tidak boleh ada link, promosi, atau konten tambahan.",
            "Maksimal 120 karakter. Tidak boleh ada Header Media.",
            "TIDAK BOLEH ada emoticon/emoji."
        ],
        service: [
            "Untuk merespon chat user dalam jendela 24 jam.",
            "Bebas format, tapi harus relevan dengan konteks chat."
        ]
    };

    function updateCategoryGuidelines(cat) {
        const $list = $('#c_guideline_list');
        $list.empty();
        if (categoryGuidelines[cat]) {
            categoryGuidelines[cat].forEach(item => {
                $list.append(`<li>${item}</li>`);
            });
        }
        // Disable media header for OTP
        if (cat === 'otp') {
            $('#c_header_type').val('none').trigger('change');
            $('#c_header_type option[value="media"]').prop('disabled', true);
        } else {
            $('#c_header_type option[value="media"]').prop('disabled', false);
        }
        validateClientBody();
    }

    $('#c_template_category').on('change', function() {
        updateCategoryGuidelines($(this).val());
    });
    updateCategoryGuidelines('marketing'); // Initial load

    // ===== Real-time Body Validation =====
    function validateClientBody() {
        const cat = $('#c_template_category').val();
        const body = $('#c_body_text').val(); // Case sensitive for emoji check
        const bodyLower = body.toLowerCase();
        const headerText = $('#c_header_text').val();
        
        const $msg = $('#c_body_validation_msg');
        const $btn = $('#createForm button[type="submit"]');
        let error = null;

        // Emoji Regex (Extended Pictographic)
        const hasEmoji = /\p{Extended_Pictographic}/u.test(body);
        const headerHasEmoji = /\p{Extended_Pictographic}/u.test(headerText);

        if (headerHasEmoji) {
            error = "Header Text tidak boleh mengandung emoticon/emoji.";
        } else if (cat === 'utility') {
            const promoWords = ['promo', 'diskon', 'sale', 'buy', 'beli', 'gratis', 'free', 'bonus', 'cashback'];
            const found = promoWords.filter(w => bodyLower.includes(w));
            if (found.length > 0) {
                error = `Kategori UTILITY tidak boleh mengandung kata: ${found.join(', ')}.`;
            } else if (hasEmoji) {
                 error = "Kategori UTILITY tidak boleh mengandung emoticon/emoji.";
            }
        } else if (cat === 'otp') {
            if (body.length > 120) error = "Body OTP maksimal 120 karakter.";
            else if (!body.includes('@{{1}}')) error = "Wajib ada parameter @{{1}}.";
            else if ((body.match(/\{\{\d+\}\}/g) || []).length > 1) error = "OTP hanya boleh 1 parameter.";
            else if (hasEmoji) error = "Kategori OTP tidak boleh mengandung emoticon/emoji.";
        }

        if (error) {
            $msg.text(error).show();
            $btn.prop('disabled', true);
        } else {
            $msg.hide();
            $btn.prop('disabled', false);
        }
    }

    $('#c_body_text, #c_header_text').on('input', validateClientBody);

    // ===== Existing Code =====
    // Custom form handler for client template creation (async multi-pool)
    $('#createForm').off('submit').on('submit', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        console.log('Submitting Create Template Form...');
        
        var $form = $(this);
        var $btn = $form.find('button[type="submit"]');
        var $btnText = $btn.find('.btn-text');
        var originalText = $btnText.html();
        
        $btn.prop('disabled', true);
        $btnText.html('<i class="ti ti-loader ti-spin me-1"></i>Mengirim ke Meta...');
        
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    // Show success message with target info
                    var targetCount = res.data.summary ? res.data.summary.total : 0;
                    var message = res.data.message || 'Template sedang diproses';
                    
                    $('#successToast .msg-box').text(message);
                    $('#successToast').toast('show');
                    
                    // Close modal and refresh table
                    $('#modalCreateTemplateClient').modal('hide');
                    $form[0].reset();
                    $('#c_buttons_wrap').empty();
                    updateClientPreview();
                    table.ajax.reload();
                } else {
                    var msg = res.meta?.message || 'Terjadi kesalahan';
                    $('#failedToast .msg-box').text(msg);
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                var msg = 'Terjadi kesalahan';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.meta?.message) {
                        msg = xhr.responseJSON.meta.message;
                    } else if (xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                }
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                $btn.prop('disabled', false);
                $btnText.html(originalText);
            }
        });
    });

    var table = $('#datatable-client-templates').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: false,
        ajax: {
            url: '{{ route('client.templates.data') }}',
            dataSrc: 'data',
            data: function (d) {
                d.waba_pool_id = $('#c_filter_waba_pool').val();
                d.status = $('#c_filter_status').val();
            }
        },
        columns: [
            { 
                data: 'name', 
                name: 'name',
                render: function(data, type, row) {
                    let html = data;
                    if (row.versions_count > 0) {
                        html += ` <button class="btn btn-xs btn-outline-secondary btn-versions ms-1" data-id="${row.id}" title="Lihat ${row.versions_count} versi">
                            <i class="ti ti-git-branch"></i> ${row.versions_count}
                        </button>`;
                    }
                    if (row.version > 1) {
                        html += ` <span class="badge bg-light text-muted">v${row.version}</span>`;
                    }
                    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) {
                    if (!data) return '-';
                    data = data.toLowerCase();
                    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';
                    else if (data === 'queued' || data === 'sending') cls = 'bg-info text-dark';
                    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: 'id',
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    const disabled = row.status !== 'approved' ? 'disabled' : '';
                    const tooltip = row.status !== 'approved' ? 'title="Hanya template approved yang dapat diuji"' : '';
                    const isOwnTemplate = row.created_role === 'client';
                    return `
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="button" class="btn btn-sm btn-outline-info btn-view" data-id="${data}" title="Lihat Detail">
                                <i class="ti ti-eye"></i> View
                            </button>
                            <a href="{{ url('/client/templates') }}/${data}/test" class="btn btn-sm btn-outline-primary" ${tooltip} ${disabled}>
                                <i class="ti ti-send"></i> Test
                            </a>

                            ${row.status === 'queued' ? `
                                <button type="button" class="btn btn-sm btn-warning btn-process" data-id="${data}" data-name="${row.name}" title="Ajukan Template ke Meta">
                                    <i class="ti ti-upload"></i> Ajukan
                                </button>
                            ` : ''}
                        
                            ${isOwnTemplate ? `
                                <button type="button" class="btn btn-sm btn-outline-danger btn-delete" data-id="${data}" data-name="${row.name}" title="Hapus Template">
                                    <i class="ti ti-trash"></i>
                                </button>
                            ` : ''}
                        </div>
                    `;
                }
            },
        ]
    });

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

    // Delete template handler
    $('#datatable-client-templates tbody').off('click', '.btn-delete').on('click', '.btn-delete', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const templateId = $(this).data('id');
        const templateName = $(this).data('name');
        
        if (!confirm(`Apakah Anda yakin ingin menghapus template "${templateName}" dari database?\n\nCatatan: Template tidak akan dihapus dari Meta.`)) {
            return;
        }
        
        $.ajax({
            url: `{{ url('/client/templates') }}/${templateId}`,
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text(res.meta.message || 'Template berhasil dihapus');
                    $('#successToast').toast('show');
                    table.ajax.reload();
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Gagal menghapus template');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.meta?.message || 'Gagal menghapus template';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            }
        });
    });

    // Toggle versions expand row
    $('#datatable-client-templates tbody').on('click', '.btn-versions', function() {
        const $btn = $(this);
        const tr = $btn.closest('tr');
        const row = table.row(tr);
        const templateId = $btn.data('id');
        
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
            $btn.removeClass('active');
        } else {
            // Find versions from row data
            const data = row.data();
            if (data.versions && data.versions.length > 0) {
                const versionsHtml = renderVersionsRow(data.versions);
                row.child(versionsHtml).show();
                tr.addClass('shown');
                $btn.addClass('active');
            }
        }
    });

    function renderVersionsRow(versions) {
        let html = '<div class="p-3 bg-light"><strong>Versi Template:</strong><table class="table table-sm table-bordered mt-2 mb-0">';
        html += '<thead><tr><th>Nama</th><th>Versi</th><th>Status</th><th>Dibuat</th><th>Aksi</th></tr></thead><tbody>';
        versions.forEach(v => {
            const statusClass = v.status === 'approved' ? 'bg-success' : (v.status === 'rejected' ? 'bg-danger' : 'bg-warning text-dark');
            html += `<tr>
                <td>${v.template_name || v.name}</td>
                <td>v${v.version}</td>
                <td><span class="badge ${statusClass}">${v.status}</span></td>
                <td>${v.created_at ? new Date(v.created_at).toLocaleDateString('id-ID') : '-'}</td>
                <td>
                    <button class="btn btn-xs btn-outline-info btn-view" data-id="${v.id}">
                        <i class="ti ti-eye"></i> View
                    </button>
                </td>
            </tr>`;
        });
        html += '</tbody></table></div>';
        return html;
    }

    // Header type toggle
    $('#c_header_type').on('change', function() {
        const val = $(this).val();
    $('#header_text_wrap').toggle(val === 'text');
    $('#header_format_wrap').toggle(val === 'media');
    $('#header_media_wrap').toggle(val === 'media');
    generateExampleInputs('c_');
    updateClientPreview();
    });

    // Media Source Toggle (Create & Resubmit)
    $('body').on('change', 'input[name="header_media_type"]', function() {
        const type = $(this).val();
        const prefix = $(this).attr('id').startsWith('c_') ? 'c_' : 'r_';
        
        $(`#${prefix}media_input_url`).toggle(type === 'url');
        $(`#${prefix}media_input_file`).toggle(type === 'file');
        
        if (type === 'url') {
            $(`#${prefix}header_media_file`).val('');
        } else {
            $(`#${prefix}header_media_url`).val('');
        }
        
        if (prefix === 'c_') updateClientPreview();
        else updateResubmitPreview();
    });
    
    // File Input Preview
    $('#c_header_media_file, #r_header_media_file').on('change', function() {
        const prefix = $(this).attr('id').startsWith('c_') ? 'c_' : 'r_';
        if (prefix === 'c_') updateClientPreview();
        else updateResubmitPreview();
    });

    // Detect parameters and generate example inputs
    function generateExampleInputs(prefix) {
        const headerType = $(`#${prefix}header_type`).val();
        const headerText = $(`#${prefix}header_text`).val() || '';
        const bodyText = $(`#${prefix}body_text`).val() || '';
        const container = $(`#${prefix}examples_wrap`);
        
        let html = '';
        let hasParams = false;

        // Header Params (max 1 for TEXT)
        if (headerType === 'text') {
            const matches = headerText.match(/\{\{(\d+)\}\}/g);
            if (matches) {
                hasParams = true;
                html += '<div class="mb-2"><strong>Header Text:</strong></div>';
                html += '<div class="mb-2 row align-items-center">';
                html += '<label class="col-sm-4 col-form-label small">Parameter @{{1}}</label>';
                html += `<div class="col-sm-8"><input type="text" name="example_values[header_text][]" class="form-control form-control-sm" placeholder="Contoh value untuk header" required></div>`;
                html += '</div>';
            }
        }

        // Body Params
        const bodyMatches = bodyText.match(/\{\{(\d+)\}\}/g);
        if (bodyMatches) {
            hasParams = true;
            const uniqueParams = [...new Set(bodyMatches)].sort();
            html += '<div class="mb-2 mt-2"><strong>Body Text:</strong></div>';
            uniqueParams.forEach((param, idx) => {
                const num = param.match(/\d+/)[0];
                html += '<div class="mb-2 row align-items-center">';
                html += `<label class="col-sm-4 col-form-label small">Parameter @{{${num}}}</label>`;
                // Use array key based on param index (careful about missing numbers, simplified assumption: params are sequential 1..N)
                // Actually controller validation checks sequential. We just push to array.
                // The validator expects array index matching param , so we need to ensure inputs are generated in order 1..N
                html += `<div class="col-sm-8"><input type="text" name="example_values[body][]" class="form-control form-control-sm" placeholder="Contoh value untuk @{{${num}}}" required></div>`;
                html += '</div>';
            });
        }

        // Button URL Params (Dynamic)
        $(`#${prefix}buttons_wrap .card-body`).each(function(index) {
             const type = $(this).find('.btn-type-select').val();
             if (type === 'URL') {
                  const url = $(this).find('input[name*="[url]"]').val() || '';
                  if (url.includes('{{1}}')) {
                        hasParams = true;
                        html += `<div class="mb-2 mt-2"><strong>Button ${index+1} (URL):</strong></div>`;
                        html += '<div class="mb-2 row align-items-center">';
                        html += '<label class="col-sm-4 col-form-label small">Parameter @{{1}}</label>';
                        // We use array with explicit index for buttons to handle multiple buttons correctly
                        html += `<div class="col-sm-8"><input type="text" name="example_values[button_url][${index}]" class="form-control form-control-sm" placeholder="Contoh akhiran URL" required></div>`;
                        html += '</div>';
                  }
             }
        });

        if (!hasParams) {
            container.html('<div class="text-center text-muted small">Tidak ada parameter variabel yang terdeteksi.</div>');
        } else {
            container.html(html);
        }
    }

    // Trigger generation on input change
    $('#c_header_text, #c_body_text').on('input', function() { generateExampleInputs('c_'); updateClientPreview(); });
    $('#r_header_text, #r_body_text').on('input', function() { generateExampleInputs('r_'); updateResubmitPreview(); });
    // Also trigger on header type change (handled above in existing listener)
    // Delegate for dynamic buttons?
    $('body').on('input', 'input[name*="[url]"]', function() { 
        if($(this).closest('#c_buttons_wrap').length) generateExampleInputs('c_');
        else generateExampleInputs('r_');
    });

    // 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');
    }

    $('#c_header_text').on('input', function() {
        updateCharCount('#c_header_text', '#header_char_count', 60);
        updateClientPreview();
    });
    $('#c_body_text').on('input', function() {
        updateCharCount('#c_body_text', '#body_char_count', 1024);
        updateClientPreview();
    });
    $('#c_footer_text').on('input', function() {
        updateCharCount('#c_footer_text', '#footer_char_count', 60);
        updateClientPreview();
    });

    // Format WhatsApp text (bold, italic, strikethrough, params)
    function formatWaText(text) {
        if (!text) return '';
        // Escape HTML
        let escaped = $('<div>').text(text).html();
        // Replace newlines with <br>
        escaped = escaped.replace(/\n/g, '<br>');
        // Bold *text*
        escaped = escaped.replace(/\*([^*]+)\*/g, '<strong>$1</strong>');
        // Italic _text_
        escaped = escaped.replace(/_([^_]+)_/g, '<em>$1</em>');
        // Strikethrough ~text~
        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()) : [];
        // Replace {{1}}, {{2}}, etc. with highlighted values or placeholders
        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>';
        });
        // Also support {1}, {2} format
        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 updateClientPreview() {
        const headerType = $('#c_header_type').val();
        const headerText = $('#c_header_text').val();
        const headerFormat = $('#c_header_format').val();
        const body = $('#c_body_text').val();
        const footer = $('#c_footer_text').val();
        const params = $('#c_preview_params').val();

        let html = '';

        // Header
        if (headerType === 'text' && headerText) {
            html += '<div class="wa-header">' + formatWaText(headerText) + '</div>';
        } else if (headerType === 'media') {
            const mediaType = $('input[name="header_media_type"]:checked').val();
            const fileInput = document.getElementById('c_header_media_file');
            
            let shownMedia = false;
            if (mediaType === 'file' && fileInput && fileInput.files && fileInput.files[0]) {
                const file = fileInput.files[0];
                const objectUrl = URL.createObjectURL(file);
                
                if (headerFormat === 'IMAGE' || file.type.startsWith('image/')) {
                    html += `<div class="wa-header-media p-0" style="background: transparent;"><img src="${objectUrl}" style="width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px;"></div>`;
                    shownMedia = true;
                } else if (headerFormat === 'VIDEO' || file.type.startsWith('video/')) {
                     html += `<div class="wa-header-media p-0" style="background: transparent;"><video src="${objectUrl}" controls style="width: 100%; max-height: 200px; border-radius: 8px;"></video></div>`;
                     shownMedia = true;
                } else {
                    html += `<div class="wa-header-media"><i class="ti ti-file-text fs-1"></i><br><small>${file.name}</small></div>`;
                    shownMedia = true;
                }
            } 
            
            if (!shownMedia) {
                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 = [];
        $('#c_buttons_wrap .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';
                else if (btn.type === 'QUICK_REPLY') icon = 'ti-message';
                html += '<div class="wa-button-cta"><i class="ti ' + icon + '"></i> ' + $('<div>').text(btn.text).html() + '</div>';
            });
            html += '</div>';
        }

        $('#c_tpl_preview').html(html);
    }

    updateClientPreview();
    $('#c_header_text, #c_body_text, #c_footer_text, #c_preview_params').on('input change', updateClientPreview);

    // Buttons builder
    const $btnWrap = $('#c_buttons_wrap');
    const $btnAdd = $('#c_btn_add_button');

    function renderButtonRow(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>
                            <option value="QUICK_REPLY">Quick Reply</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 refreshButtonFields() {
        $btnWrap.find('.btn-type').each(function () {
            const $select = $(this);
            const val = $select.val();
            const $card = $select.closest('.card');
            $card.find('.btn-url-field').toggleClass('d-none', val !== 'URL');
            $card.find('.btn-phone-field').toggleClass('d-none', val !== 'PHONE_NUMBER');
        });
        updateClientPreview();
    }

    $btnAdd.on('click', function () {
        const count = $btnWrap.children('.card').length;
        if (count >= 3) {
            $('#failedToast .msg-box').text('Maksimal 3 button');
            $('#failedToast').toast('show');
            return;
        }
        $btnWrap.append(renderButtonRow(count));
        refreshButtonFields();
    });

    $btnWrap.on('change input', '.btn-type, .btn-text-input', function() {
        refreshButtonFields();
    });
    $btnWrap.on('click', '.btn-remove', function () {
        $(this).closest('.card').remove();
        // reindex
        $btnWrap.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]`);
        });
        updateClientPreview();
    });
    // --- VIEW TEMPLATE LOGIC ---
    
    // View Button Click
    $('#datatable-client-templates').on('click', '.btn-view', function() {
        const id = $(this).data('id');
        const url = '{{ url("/client/templates") }}/' + id + '/show';

        // Reset modal
        $('#v_template_name, #v_category, #v_language, #v_status, #v_rejection_reason').text('-');
        $('#v_placeholders, #v_preview_content').empty();
        $('#v_rejection_row').addClass('d-none');
        $('#btnResubmit').addClass('d-none').off('click');

        $.get(url, function(res) {
            if (res.meta.status === 'success') {
                const t = res.data;
                
                $('#v_template_name').text(t.template_name);
                $('#v_category').text(t.category);
                $('#v_language').text(t.language);
                
                // Status badge
                let cls = 'bg-secondary';
                t.status = t.status.toLowerCase();
                if (t.status === 'approved') cls = 'bg-success';
                else if (t.status === 'pending') cls = 'bg-warning text-dark';
                else if (t.status === 'rejected') cls = 'bg-danger';
                $('#v_status').html(`<span class="badge rounded-pill ${cls}">${t.status}</span>`);

                // Rejection reason
                if (t.status === 'rejected') {
                    $('#v_rejection_row').removeClass('d-none');
                    $('#v_rejection_reason').text(t.rejection_reason || 'Tidak ada alasan spesifik dari Meta.');
                    
                    // Setup Resubmit Button
                    $('#btnResubmit').removeClass('d-none').data('template', t).on('click', function() {
                        $('#modalViewTemplate').modal('hide');
                        openResubmitModal($(this).data('template'));
                    });
                }

                // Render Preview
                renderViewPreview(t);
                
                $('#modalViewTemplate').modal('show');
            }
        });
    });

    function renderViewPreview(t) {
        let html = '';
        const components = t.components || [];
        
        // Header
        const header = components.find(c => c.type === 'HEADER');
        if (header) {
            if (header.format === 'TEXT') {
                html += `<div class="wa-header">${formatWaText(header.text)}</div>`;
            } else {
                // Try to get image URL from example.header_handle
                let mediaUrl = null;
                if (header.example && header.example.header_handle && header.example.header_handle.length > 0) {
                    mediaUrl = header.example.header_handle[0];
                }
                
                if (mediaUrl && header.format === 'IMAGE') {
                    html += `<div class="wa-header-media p-0" style="background: transparent;"><img src="${mediaUrl}" alt="Header Image" style="width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px;"></div>`;
                } else if (mediaUrl && header.format === 'VIDEO') {
                    html += `<div class="wa-header-media p-0" style="background: transparent;"><video src="${mediaUrl}" controls style="width: 100%; max-height: 200px; border-radius: 8px;"></video></div>`;
                } else {
                    const iconMap = { 'IMAGE': 'ti-photo', 'VIDEO': 'ti-video', 'DOCUMENT': 'ti-file-text' };
                    html += `<div class="wa-header-media"><i class="ti ${iconMap[header.format] || 'ti-photo'} fs-1"></i><br><small>${header.format}</small></div>`;
                }
            }
        }

        // Body
        const body = components.find(c => c.type === 'BODY');
        if (body) {
            html += `<div class="wa-body">${formatWaText(body.text)}</div>`;
            
            // Extract placeholders
            const matches = body.text.match(/\{\{\d+\}\}/g);
            if (matches) {
                const unique = [...new Set(matches)];
                $('#v_placeholders').html(unique.map(p => `<span class="badge bg-light text-dark border">${p}</span>`).join(''));
            }
        }

        // Footer
        const footer = components.find(c => c.type === 'FOOTER');
        if (footer) {
            html += `<div class="wa-footer">${formatWaText(footer.text)}</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 = components.find(c => c.type === 'BUTTONS');
        if (buttons && buttons.buttons) {
            html += '<div class="wa-buttons-container">';
            buttons.buttons.forEach(btn => {
                let icon = 'ti-external-link';
                if (btn.type === 'PHONE_NUMBER') icon = 'ti-phone';
                else if (btn.type === 'QUICK_REPLY') icon = 'ti-message';
                html += `<div class="wa-button-cta"><i class="ti ${icon}"></i> ${btn.text}</div>`;
            });
            html += '</div>';
        }

        $('#v_preview_content').html(html);
    }

    // --- RESUBMIT LOGIC ---

    function openResubmitModal(t) {
        const $modal = $('#modalResubmitTemplate');
        const $form = $('#resubmitForm');
        
        // Populate Names
        $('#r_old_template_name').val(t.template_name);
        $form.attr('action', '{{ url("/client/templates") }}/' + t.id + '/resubmit');
        
        // Fetch suggested new name
        $.ajax({
            url: '{{ url("/client/templates") }}/' + t.id + '/suggest-resubmit-name',
            method: 'GET',
            success: function(res) {
                if (res.data) {
                    $('#r_new_template_name').val(res.data.suggested_name);
                }
            },
            error: function() {
                // Fallback: generate locally
                let baseName = t.template_name;
                const match = baseName.match(/^(.+)_v(\d+)$/);
                if (match) {
                    $('#r_new_template_name').val(match[1] + '_v' + (parseInt(match[2]) + 1));
                } else {
                    $('#r_new_template_name').val(baseName + '_v2');
                }
            }
        });
        
        // Reset fields
        $('#r_header_type').val('none').trigger('change');
        $('#r_body_text').val('');
        $('#r_footer_text').val('');
        $('#r_buttons_wrap').empty();
        $('#r_new_name_error').hide();

        // Reset media
        $('#r_media_type_url').prop('checked', true).trigger('change');
        $('#r_header_media_url').val('');
        $('#r_header_media_file').val('');

        // Fill from components
        const components = t.components || [];
        
        // Header
        const header = components.find(c => c.type === 'HEADER');
        if (header) {
            if (header.format === 'TEXT') {
                $('#r_header_type').val('text').trigger('change');
                $('#r_header_text').val(header.text);
            } else {
                $('#r_header_type').val('media').trigger('change');
                $('#r_header_text').val(t.components.find(c => c.type === 'HEADER' && c.format === 'TEXT')?.text || '');
            
            // Header Media logic... (existing)
            const headerMedia = t.components.find(c => c.type === 'HEADER' && c.format !== 'TEXT');
            if (headerMedia) {
                $('#r_header_format').val(headerMedia.format); // Assuming standardized format
                // If it has example url
                const exampleUrl = headerMedia.example?.header_handle?.[0];
                if(exampleUrl) $('#r_header_media_url').val(exampleUrl);
            }
        }
        
        const bodyComp = components.find(c => c.type === 'BODY');
        $('#r_body_text').val(bodyComp ? bodyComp.text : (t.body || ''));

        const footerComp = components.find(c => c.type === 'FOOTER');
        $('#r_footer_text').val(footerComp ? footerComp.text : '');

        // Generate Buttons... (existing logic, maybe call it separately if complex)
        // For simplicity, we assume buttons are loaded, then we trigger:
        
        generateExampleInputs('r_');
        updateResubmitPreview();
    }

        // Buttons
        const buttons = components.find(c => c.type === 'BUTTONS');
        if (buttons && buttons.buttons) {
            buttons.buttons.forEach((btn, idx) => {
                $('#r_buttons_wrap').append(renderButtonRow(idx));
                const $row = $('#r_buttons_wrap').children().last();
                $row.find('.btn-type').val(btn.type);
                $row.find('.btn-text-input').val(btn.text);
                if (btn.type === 'URL') $row.find('input[name$="[url]"]').val(btn.url);
                if (btn.type === 'PHONE_NUMBER') $row.find('input[name$="[phone]"]').val(btn.phone_number);
            });
            refreshButtonFields();
        }

        updateResubmitPreview();
        $modal.modal('show');
    }

    // Resubmit Preview Logic (Copy of Create Preview Logic)
    function updateResubmitPreview() {
        const headerType = $('#r_header_type').val();
        const headerText = $('#r_header_text').val();
        const headerFormat = $('#r_header_format').val();
        const body = $('#r_body_text').val();
        const footer = $('#r_footer_text').val();
        
        let html = '';

        if (headerType === 'text' && headerText) {
            html += '<div class="wa-header">' + formatWaText(headerText) + '</div>';
        } else if (headerType === 'media') {
            const mediaType = $('input[name="header_media_type"][id^="r_"]:checked').val();
            const fileInput = document.getElementById('r_header_media_file');
            
            let shownMedia = false;
            if (mediaType === 'file' && fileInput && fileInput.files && fileInput.files[0]) {
                const file = fileInput.files[0];
                const objectUrl = URL.createObjectURL(file);
                
                if (headerFormat === 'IMAGE' || file.type.startsWith('image/')) {
                    html += `<div class="wa-header-media p-0" style="background: transparent;"><img src="${objectUrl}" style="width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px;"></div>`;
                    shownMedia = true;
                } else if (headerFormat === 'VIDEO' || file.type.startsWith('video/')) {
                     html += `<div class="wa-header-media p-0" style="background: transparent;"><video src="${objectUrl}" controls style="width: 100%; max-height: 200px; border-radius: 8px;"></video></div>`;
                     shownMedia = true;
                } else {
                    html += `<div class="wa-header-media"><i class="ti ti-file-text fs-1"></i><br><small>${file.name}</small></div>`;
                    shownMedia = true;
                }
            } 
            
            if (!shownMedia) {
                const iconMap = { 'IMAGE': 'ti-photo', 'VIDEO': 'ti-video', 'DOCUMENT': 'ti-file-text' };
                html += `<div class="wa-header-media"><i class="ti ${iconMap[headerFormat] || 'ti-photo'} fs-1"></i><br><small>${headerFormat}</small></div>`;
            }
        }

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

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

        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 = [];
        $('#r_buttons_wrap .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';
                else if (btn.type === 'QUICK_REPLY') icon = 'ti-message';
                html += `<div class="wa-button-cta"><i class="ti ${icon}"></i> ${formatWaText(btn.text)}</div>`;
            });
            html += '</div>';
        }

        $('#r_tpl_preview').html(html);
    }

    // Resubmit Form Events
    $('#r_header_type').on('change', function() {
        const val = $(this).val();
        $('#r_header_text_wrap').toggle(val === 'text');
        $('#r_header_format_wrap').toggle(val === 'media');
        $('#r_header_media_wrap').toggle(val === 'media');
        updateResubmitPreview();
    });

    $('#r_header_text, #r_body_text, #r_footer_text').on('input change', updateResubmitPreview);
    
    // Resubmit Button Builder
    const $rBtnWrap = $('#r_buttons_wrap');
    $('#r_btn_add_button').on('click', function() {
        const count = $rBtnWrap.children('.card').length;
        if (count >= 3) return;
        $rBtnWrap.append(renderButtonRow(count));
        refreshButtonFields(); // Re-use existing function but target needs care? 
        // refreshButtonFields targets .btn-type globally so it works for both forms
    });

    // Resubmit Form Submit
    $('#resubmitForm').off('submit').on('submit', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        console.log('Submitting Resubmit Template Form...');
        var $form = $(this);
        var $btn = $form.find('button[type="submit"]');
        var originalText = $btn.html();
        
        // Hide previous error
        $('#r_new_name_error').hide();
        
        $btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Mengirim ke Meta...');
        
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(res) {
                if (res.meta.status === 'success') {
                    var msg = res.meta.message || 'Template berhasil diajukan ulang';
                    $('#successToast .msg-box').text(msg);
                    $('#successToast').toast('show');
                    $('#modalResubmitTemplate').modal('hide');
                    table.ajax.reload();
                } else {
                    $('#failedToast .msg-box').text(res.meta.message);
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.meta?.message || 'Terjadi kesalahan';
                var data = xhr.responseJSON?.data;
                
                // Check if error is related to name field
                if (data && data.field === 'new_template_name') {
                    $('#r_new_name_error').text(msg).show();
                    $('#r_new_template_name').addClass('is-invalid');
                } else {
                    $('#failedToast .msg-box').text(msg);
                    $('#failedToast').toast('show');
                }
            },
            complete: function() {
                $btn.prop('disabled', false).html(originalText);
            }
        });
    });
    
    // Validate new name format on input
    $('#r_new_template_name').on('input', function() {
        const val = $(this).val();
        const valid = /^[a-z0-9_]+$/.test(val);
        $(this).toggleClass('is-invalid', !valid && val.length > 0);
        if (!valid && val.length > 0) {
            $('#r_new_name_error').text('Hanya huruf kecil, angka, dan underscore').show();
        } else {
            $('#r_new_name_error').hide();
        }
    });


    // ===== Sync Templates Logic =====
    $('#btn-sync-templates').on('click', function() {
        var $btn = $(this);
        var originalText = $btn.html();
        
        $btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i>Syncing...');
        
        // Show loading toast or modal global
        $('#successToast .msg-box').text('Sedang menyinkronkan template dari Meta...');
        $('#successToast').toast('show');

        $.ajax({
            url: '{{ route('client.templates.sync') }}',
            method: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function(res) {
                if (res.meta.status === 'success') {
                    // Show detailed result
                    var msg = res.meta.message;
                    $('#successToast .msg-box').text(msg);
                    $('#successToast').toast('show');
                    
                    // Reload table
                    table.ajax.reload();
                } else {
                    $('#failedToast .msg-box').text(res.meta.message || 'Gagal sinkronisasi');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.meta?.message || 'Terjadi kesalahan sistem';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                $btn.prop('disabled', false).html(originalText);
            }
        });
    });
    // Process Queued Template
    $('#datatable-client-templates tbody').on('click', '.btn-process', function(e) {
        e.preventDefault();
        e.stopPropagation();
        const $btn = $(this);
        const id = $btn.data('id');
        const name = $btn.data('name');
        
        if (!confirm(`Apakah Anda yakin ingin memproses manual template "${name}" ke Meta?`)) {
            return;
        }

        const originalHtml = $btn.html();
        $btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin"></i>');

        $.ajax({
            url: `{{ url('/client/templates') }}/${id}/process`,
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                if (res.meta.status === 'success') {
                    $('#successToast .msg-box').text(res.meta.message);
                    $('#successToast').toast('show');
                    table.ajax.reload();
                } else {
                    $('#failedToast .msg-box').text(res.meta.message || 'Gagal memproses template');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                const msg = xhr.responseJSON?.meta?.message || 'Terjadi kesalahan saat memproses template';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                $btn.prop('disabled', false).html(originalHtml);
            }
        });
    });
});

</script>
@endpush