@extends('root')
@section('title', 'Resend Pesan Gagal')

@push('styles')
<style>
    .summary-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        color: white;
        padding: 20px;
        position: relative;
        overflow: hidden;
    }
    .summary-card.warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .summary-card.info { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .summary-card .icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 48px;
        opacity: 0.3;
    }
    .summary-card h3 { font-size: 28px; margin-bottom: 5px; }
    .summary-card p { margin: 0; opacity: 0.9; }
    
    .filter-row { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
    .table-responsive { max-height: 600px; }
    
    .status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
    }
    .status-failed { background: #ffebee; color: #c62828; }
    .status-sent { background: #e3f2fd; color: #1976d2; }
    .status-delivered { background: #e8f5e9; color: #388e3c; }
    .status-success { background: #c8e6c9; color: #2e7d32; }
    .status-pending { background: #fff3e0; color: #ef6c00; }
    
    .btn-resend {
        padding: 4px 12px;
        font-size: 12px;
    }
    .btn-resend:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
    
    .error-text {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
    .error-text:hover {
        white-space: normal;
        overflow: visible;
        position: relative;
        z-index: 100;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        padding: 5px;
        border-radius: 4px;
    }

    .category-badge {
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 600;
    }
    .category-marketing { background: #e8f5e9; color: #2e7d32; }
    .category-utility { background: #e3f2fd; color: #1565c0; }
    .category-authentication { background: #fce4ec; color: #c2185b; }
    .category-service { background: #fff3e0; color: #e65100; }

    .nav-tabs .nav-link.active {
        border-bottom: 3px solid #667eea;
        font-weight: 600;
    }

    .resend-info {
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 12px 16px;
        margin-bottom: 20px;
        border-radius: 0 8px 8px 0;
    }
    .resend-info i { color: #856404; }
</style>
@endpush

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

    {{-- Info Box --}}
    <div class="resend-info">
        <i class="ti ti-info-circle me-2"></i>
        <strong>Informasi:</strong> 
        Anda hanya dapat mengirim ulang pesan yang gagal <strong>satu kali</strong> per pesan. 
        Pastikan untuk memeriksa error message sebelum mengirim ulang.
    </div>

    {{-- Summary Cards --}}
    <div class="row g-3 mb-4" id="summary-cards">
        <div class="col-md-4">
            <div class="summary-card warning">
                <i class="ti ti-alert-triangle icon"></i>
                <h3 id="total-failed" class="text-white">-</h3>
                <p>Pesan Gagal (Bisa Resend)</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="summary-card">
                <i class="ti ti-ad-2 icon"></i>
                <h3 id="marketing-count" class="text-white">-</h3>
                <p>Marketing</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="summary-card info">
                <i class="ti ti-tool icon"></i>
                <h3 id="utility-count" class="text-white">-</h3>
                <p>Utility</p>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <ul class="nav nav-tabs mb-3" id="resendTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="failed-tab" data-bs-toggle="tab" data-bs-target="#failed-panel" type="button" role="tab">
                <i class="ti ti-alert-circle me-1"></i>Pesan Gagal
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history-panel" type="button" role="tab">
                <i class="ti ti-history me-1"></i>Riwayat Resend
            </button>
        </li>
    </ul>

    <div class="tab-content" id="resendTabContent">
        {{-- Failed Messages Tab --}}
        <div class="tab-pane fade show active" id="failed-panel" role="tabpanel">
            {{-- Filters --}}
            <div class="filter-row">
                <form id="filter-form" class="row g-2 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label small">Dari Tanggal</label>
                        <input type="date" name="date_from" id="date_from" class="form-control form-control-sm" 
                            value="{{ now()->subDays(7)->toDateString() }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Sampai Tanggal</label>
                        <input type="date" name="date_to" id="date_to" class="form-control form-control-sm" 
                            value="{{ now()->toDateString() }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Kategori</label>
                        <select name="category" id="category" class="form-select form-select-sm">
                            <option value="">Semua</option>
                            <option value="marketing">Marketing</option>
                            <option value="utility">Utility</option>
                            <option value="authentication">Authentication</option>
                            <option value="service">Service</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Nomor Tujuan</label>
                        <input type="text" name="recipient" id="recipient" class="form-control form-control-sm" 
                            placeholder="628xxx">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Template</label>
                        <input type="text" name="template_name" id="template_name" class="form-control form-control-sm" 
                            placeholder="Nama template">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary btn-sm w-100">
                            <i class="ti ti-filter me-1"></i>Filter
                        </button>
                    </div>
                </form>
                <div class="row mt-2">
                    <div class="col-12 text-end">
                        <button type="button" class="btn btn-outline-danger btn-sm" id="btn-bulk-resend" disabled>
                            <i class="ti ti-rotate-2 me-1"></i>Resend Massal (<span id="selected-count">0</span>)
                        </button>
                    </div>
                </div>
            </div>

            {{-- Table --}}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="ti ti-list me-1"></i>Daftar Pesan Gagal</h6>
                    <span class="badge bg-secondary" id="total-count">0 pesan</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0" id="failed-table">
                            <thead class="table-light">
                                <tr>
                                    <th width="5%">
                                        <input type="checkbox" id="select-all" class="form-check-input">
                                    </th>
                                    <th width="12%">Tanggal</th>
                                    <th width="12%">Nomor Tujuan</th>
                                    <th width="10%">Kategori</th>
                                    <th width="15%">Template</th>
                                    <th width="25%">Error Message</th>
                                    <th width="8%">Status</th>
                                    <th width="13%" class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="failed-tbody">
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        <i class="ti ti-loader ti-spin me-2"></i>Memuat data...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <nav id="pagination-nav"></nav>
                </div>
            </div>
        </div>

        {{-- History Tab --}}
        <div class="tab-pane fade" id="history-panel" role="tabpanel">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-history me-1"></i>Riwayat Resend</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0" id="history-table">
                            <thead class="table-light">
                                <tr>
                                    <th>Waktu Resend</th>
                                    <th>Nomor Tujuan</th>
                                    <th>Template</th>
                                    <th>ID Original</th>
                                    <th>ID Baru</th>
                                    <th>Status Resend</th>
                                    <th>Status Baru</th>
                                    <th>IP Address</th>
                                </tr>
                            </thead>
                            <tbody id="history-tbody">
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        Klik tab untuk memuat data
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <nav id="history-pagination-nav"></nav>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Preview & Confirm Modal --}}
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="ti ti-eye text-primary me-2"></i>Preview Resend
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="preview-body">
                <div class="text-center py-4">
                    <i class="ti ti-loader ti-spin fs-3 text-primary"></i>
                    <p class="text-muted mt-2">Memuat data preview...</p>
                </div>
            </div>
            <div class="modal-footer" id="preview-footer" style="display:none;">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm" id="btn-confirm-resend" disabled>
                    <i class="ti ti-refresh me-1"></i>Kirim Ulang
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let currentPage = 1;
let historyPage = 1;
let selectedMessageId = null;
let historyLoaded = false;

$(document).ready(function() {
    loadFailedMessages();

    // Filter form submit
    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        currentPage = 1;
        loadFailedMessages();
    });

    // Tab switch - load history on first click
    $('#history-tab').on('shown.bs.tab', function() {
        if (!historyLoaded) {
            loadResendHistory();
            historyLoaded = true;
        }
    });

    // Confirm resend
    $('#btn-confirm-resend').on('click', function() {
        if (selectedMessageId) {
            doResend(selectedMessageId);
        }
    });


    // Bulk Resend
    $('#btn-bulk-resend').on('click', function() {
        confirmBulkResend();
    });
});


function loadFailedMessages() {
    const $tbody = $('#failed-tbody');
    $tbody.html('<tr><td colspan="8" class="text-center text-muted py-4"><i class="ti ti-loader ti-spin me-2"></i>Memuat data...</td></tr>');

    const params = new URLSearchParams($('#filter-form').serialize());
    params.append('page', currentPage);

    $.ajax({
        url: '{{ route("client.resend-failed.data") }}',
        data: params.toString(),
        success: function(resp) {
            if (resp.success) {
                updateSummary(resp.summary);
                renderFailedTable(resp.data);
                updatePagination(resp.pagination, '#pagination-nav', function(page) {
                    currentPage = page;
                    loadFailedMessages();
                });
                $('#total-count').text(resp.pagination.total + ' pesan');
                $('#select-all').prop('checked', false);
                updateBulkButton();
            } else {
                $tbody.html('<tr><td colspan="8" class="text-center text-danger py-4">Gagal memuat data</td></tr>');
            }
        },
        error: function() {
            $tbody.html('<tr><td colspan="8" class="text-center text-danger py-4">Gagal memuat data</td></tr>');
            toastr.error('Gagal memuat data pesan gagal');
        }
    });
}

function updateSummary(summary) {
    $('#total-failed').text(summary.total_resendable || 0);
    $('#marketing-count').text(summary.by_category?.marketing || 0);
    $('#utility-count').text(summary.by_category?.utility || 0);
}

function renderFailedTable(data) {
    const $tbody = $('#failed-tbody').empty();

    if (!data || data.length === 0) {
        $tbody.html('<tr><td colspan="8" class="text-center text-muted py-4"><i class="ti ti-check-circle me-2"></i>Tidak ada pesan gagal yang bisa di-resend</td></tr>');
        return;
    }

    data.forEach(function(m) {
        const categoryClass = 'category-' + (m.category || 'utility').toLowerCase();
        const canResend = m.can_resend;
        
        $tbody.append(`
            <tr data-id="${m.id}">
                <td>
                    <input type="checkbox" class="form-check-input row-check" value="${m.id}" ${!canResend ? 'disabled' : ''}>
                </td>
                <td><small>${formatDate(m.created_at)}</small></td>
                <td><code>${m.recipient}</code></td>
                <td><span class="category-badge ${categoryClass}">${m.category || '-'}</span></td>
                <td><small><code>${m.template_name}</code></small></td>
                <td>
                    <div class="error-text text-danger" title="${escapeHtml(m.error_message || '-')}">
                        ${escapeHtml(m.error_message || '-')}
                    </div>
                </td>
                <td><span class="status-badge status-failed">Failed</span></td>
                <td class="text-center">
                    <button class="btn btn-outline-primary btn-resend" 
                        onclick="confirmResend(${m.id}, '${escapeHtml(m.recipient)}', '${escapeHtml(m.template_name)}', '${escapeHtml(m.error_message || '-')}')"
                        ${!canResend ? 'disabled' : ''}
                        title="${canResend ? 'Kirim ulang pesan ini' : 'Pesan sudah pernah di-resend'}">
                        <i class="ti ti-refresh me-1"></i>Resend
                    </button>
                </td>
            </tr>
        `);
    });
}

function confirmResend(messageId, recipient, template, error) {
    selectedMessageId = messageId;
    
    // Show modal with loading state
    const modal = new bootstrap.Modal(document.getElementById('previewModal'));
    $('#preview-body').html(`
        <div class="text-center py-4">
            <i class="ti ti-loader ti-spin fs-3 text-primary"></i>
            <p class="text-muted mt-2">Memuat data preview...</p>
        </div>
    `);
    $('#preview-footer').hide();
    $('#btn-confirm-resend').prop('disabled', true);
    modal.show();

    // Fetch preview data
    $.ajax({
        url: '{{ route("client.resend-failed.preview", ["message" => "__ID__"]) }}'.replace('__ID__', messageId),
        method: 'GET',
        success: function(resp) {
            if (resp.success) {
                renderPreview(resp.data);
            } else {
                $('#preview-body').html(`
                    <div class="alert alert-danger">
                        <i class="ti ti-alert-circle me-2"></i>${resp.message || 'Gagal memuat preview'}
                    </div>
                `);
            }
        },
        error: function(xhr) {
            const resp = xhr.responseJSON;
            $('#preview-body').html(`
                <div class="alert alert-danger">
                    <i class="ti ti-alert-circle me-2"></i>${resp?.message || 'Gagal memuat preview'}
                </div>
            `);
        }
    });
}

function renderPreview(data) {
    const canProceed = data.can_proceed;
    const issues = data.issues || [];
    
    let html = `
        <!-- Issues/Warnings -->
        ${issues.length > 0 ? `
            <div class="alert alert-danger mb-3">
                <h6 class="alert-heading mb-2"><i class="ti ti-alert-triangle me-1"></i>Masalah Ditemukan:</h6>
                <ul class="mb-0 small">
                    ${issues.map(i => `<li>${escapeHtml(i)}</li>`).join('')}
                </ul>
            </div>
        ` : `
            <div class="alert alert-success mb-3">
                <i class="ti ti-check me-1"></i>Semua validasi OK - Siap untuk dikirim ulang
            </div>
        `}

        <!-- Warning -->
        <div class="alert alert-warning small mb-3">
            <i class="ti ti-info-circle me-1"></i>
            <strong>Perhatian:</strong> Pesan hanya dapat dikirim ulang <strong>satu kali</strong>. 
            Fallback ke pool lain <strong>dinonaktifkan</strong> untuk resend.
        </div>

        <div class="row g-3">
            <!-- Message Info -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-2 bg-light">
                        <strong><i class="ti ti-message me-1"></i>Info Pesan</strong>
                    </div>
                    <div class="card-body small">
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="40%">ID</td><td><code>#${data.message?.id || '-'}</code></td></tr>
                            <tr><td class="text-muted">Tanggal</td><td>${data.message?.created_at || '-'}</td></tr>
                            <tr><td class="text-muted">Status</td><td><span class="badge bg-danger">${data.message?.status || '-'}</span></td></tr>
                            <tr><td class="text-muted">Kategori</td><td>${data.message?.category || '-'}</td></tr>
                        </table>
                    </div>
                </div>
            </div>

            <!-- WABA Pool Info -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-2 bg-light">
                        <strong><i class="ti ti-device-mobile me-1"></i>WABA Pool</strong>
                    </div>
                    <div class="card-body small">
                        ${data.waba_pool ? `
                            <table class="table table-sm table-borderless mb-0">
                                <tr><td class="text-muted" width="40%">Pool ID</td><td><code>#${data.waba_pool.id}</code></td></tr>
                                <tr><td class="text-muted">Phone ID</td><td><code>${data.waba_pool.phone_number_id || '-'}</code></td></tr>
                                <tr><td class="text-muted">Display</td><td>${data.waba_pool.display_phone_number || '-'}</td></tr>
                                <tr><td class="text-muted">Mode</td><td><code>${data.waba_pool.integration_mode || '-'}</code></td></tr>
                                <tr><td class="text-muted">Status</td><td>
                                    <span class="badge ${data.waba_pool.status === 'active' ? 'bg-success' : 'bg-danger'}">${data.waba_pool.status}</span>
                                </td></tr>
                                <tr><td class="text-muted">Token</td><td>
                                    ${data.waba_pool.has_token ? '<span class="text-success"><i class="ti ti-check"></i> Valid</span>' : '<span class="text-danger"><i class="ti ti-x"></i> Tidak ada</span>'}
                                </td></tr>
                            </table>
                        ` : `<p class="text-danger mb-0">WABA Pool tidak ditemukan</p>`}
                    </div>
                </div>
            </div>

            <!-- Template Info -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-2 bg-light">
                        <strong><i class="ti ti-template me-1"></i>Template</strong>
                    </div>
                    <div class="card-body small">
                        ${data.template ? `
                            <table class="table table-sm table-borderless mb-0">
                                <tr><td class="text-muted" width="40%">ID</td><td><code>#${data.template.id}</code></td></tr>
                                <tr><td class="text-muted">Nama</td><td><code>${data.template.effective_name || data.template.name}</code></td></tr>
                                <tr><td class="text-muted">Bahasa</td><td>${data.template.language || '-'}</td></tr>
                                <tr><td class="text-muted">Status</td><td>
                                    <span class="badge ${data.template.status?.toLowerCase() === 'approved' ? 'bg-success' : 'bg-warning'}">${data.template.status}</span>
                                </td></tr>
                                <tr><td class="text-muted">Kategori</td><td>${data.template.category || '-'}</td></tr>
                            </table>
                        ` : `<p class="text-danger mb-0">Template tidak ditemukan</p>`}
                    </div>
                </div>
            </div>

            <!-- Recipient Info -->
            <div class="col-md-6">
                <div class="card h-100">
                    <div class="card-header py-2 bg-light">
                        <strong><i class="ti ti-user me-1"></i>Penerima</strong>
                    </div>
                    <div class="card-body small">
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted" width="40%">Nomor</td><td><code>${data.recipient?.phone_number || '-'}</code></td></tr>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Auto-Fix Info -->
            ${data.auto_fix ? `
            <div class="col-12">
                <div class="alert alert-info mb-0">
                    <h6 class="alert-heading mb-2"><i class="ti ti-wand me-1"></i>Auto-Fix Aktif</h6>
                    <p class="mb-2 small">${data.auto_fix.message}</p>
                    <div class="small">
                        <strong>Original:</strong> ${data.auto_fix.original_count} params → 
                        <strong>Fixed:</strong> ${data.auto_fix.fixed_count} params
                    </div>
                    <div class="small mt-1">
                        <strong>Extracted Button Params:</strong> 
                        ${data.auto_fix.extracted_button_params.map(p => `<code>${escapeHtml(p)}</code>`).join(', ')}
                    </div>
                </div>
            </div>
            ` : ''}

            <!-- Split Params Info -->
            ${data.split_params ? `
            <div class="col-12">
                <div class="card border-primary">
                    <div class="card-header py-2 bg-primary text-white">
                        <strong><i class="ti ti-arrows-split-2 me-1"></i>Params yang Akan Dikirim</strong>
                    </div>
                    <div class="card-body small">
                        <div class="row">
                            <div class="col-md-6">
                                <strong class="text-primary">Body Params (${data.split_params.body_params?.length || 0}):</strong>
                                <ol class="mb-0 ps-3 mt-1" style="max-height: 150px; overflow-y: auto;">
                                    ${(data.split_params.body_params || []).map(p => `<li><code class="text-break">${escapeHtml(String(p))}</code></li>`).join('')}
                                </ol>
                            </div>
                            <div class="col-md-6">
                                <strong class="text-warning">Button Params:</strong>
                                <div class="mt-1" style="max-height: 150px; overflow-y: auto;">
                                    ${Object.keys(data.split_params.button_params || {}).length > 0 ? 
                                        Object.entries(data.split_params.button_params).map(([idx, params]) => `
                                            <div class="mb-1">
                                                <span class="badge bg-warning text-dark">Button ${idx}:</span>
                                                ${params.map(p => `<code class="ms-1">${escapeHtml(String(p))}</code>`).join('')}
                                            </div>
                                        `).join('') : '<span class="text-muted">Tidak ada button params</span>'}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            ` : ''}

            <!-- Parameters -->
            <div class="col-12">
                <div class="card">
                    <div class="card-header py-2 bg-light d-flex justify-content-between">
                        <strong><i class="ti ti-list me-1"></i>Parameter Template</strong>
                        <div>
                            ${data.auto_fix ? `<span class="badge bg-info me-1">Original: ${data.parameters?.original_count || 0}</span>` : ''}
                            <span class="badge bg-secondary">${data.parameters?.count || 0} params ${data.auto_fix ? '(fixed)' : ''}</span>
                        </div>
                    </div>
                    <div class="card-body small">
                        ${data.analysis ? `
                            <div class="mb-2">
                                <span class="badge bg-info me-1">Header: ${data.analysis.header_count || 0}</span>
                                <span class="badge bg-primary me-1">Body: ${data.analysis.body_count || 0}</span>
                                <span class="badge bg-warning text-dark">Button: ${data.analysis.button_url_count || 0}</span>
                                ${data.analysis.has_media_header ? '<span class="badge bg-secondary ms-1">Media Header</span>' : ''}
                            </div>
                        ` : ''}
                        ${data.parameters?.header_media_url ? `
                            <div class="mb-2">
                                <strong>Header Media:</strong> <a href="${data.parameters.header_media_url}" target="_blank" class="text-break">${data.parameters.header_media_url}</a>
                            </div>
                        ` : ''}
                        <div class="bg-light p-2 rounded" style="max-height: 200px; overflow-y: auto;">
                            <ol class="mb-0 ps-3">
                                ${(data.parameters?.template_params || []).map((p, i) => {
                                    const isExtracted = data.auto_fix && i >= data.parameters.original_count;
                                    return `<li class="${isExtracted ? 'text-info fw-bold' : ''}"><code class="text-break">${escapeHtml(String(p))}</code>${isExtracted ? ' <span class="badge bg-info">auto-extracted</span>' : ''}</li>`;
                                }).join('')}
                            </ol>
                            ${(!data.parameters?.template_params || data.parameters.template_params.length === 0) ? '<p class="text-muted mb-0">Tidak ada parameter</p>' : ''}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Original Error -->
            <div class="col-12">
                <div class="card border-danger">
                    <div class="card-header py-2 bg-danger text-white">
                        <strong><i class="ti ti-alert-circle me-1"></i>Error Asli</strong>
                    </div>
                    <div class="card-body small">
                        <code class="text-danger text-break">${escapeHtml(data.message?.error_message || '-')}</code>
                    </div>
                </div>
            </div>
        </div>
    `;

    $('#preview-body').html(html);
    $('#preview-footer').show();
    $('#btn-confirm-resend').prop('disabled', !canProceed);
    
    if (!canProceed) {
        $('#btn-confirm-resend').attr('title', 'Tidak dapat melanjutkan karena ada masalah');
    } else {
        $('#btn-confirm-resend').removeAttr('title');
    }
}

function doResend(messageId) {
    const $btn = $('#btn-confirm-resend');
    const originalText = $btn.html();
    
    $btn.html('<i class="ti ti-loader ti-spin me-1"></i>Mengirim...').prop('disabled', true);

    $.ajax({
        url: '{{ route("client.resend-failed.resend", ["message" => "__ID__"]) }}'.replace('__ID__', messageId),
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(resp) {
            bootstrap.Modal.getInstance(document.getElementById('previewModal')).hide();
            
            if (resp.success) {
                toastr.success(resp.message || 'Pesan berhasil di-resend!');
                // Remove row from table
                $(`tr[data-id="${messageId}"]`).fadeOut(300, function() {
                    $(this).remove();
                    // Reload to update summary
                    loadFailedMessages();
                });
                // Reload history if already loaded
                if (historyLoaded) {
                    loadResendHistory();
                }
            } else {
                toastr.error(resp.message || 'Gagal mengirim ulang pesan');
            }
        },
        error: function(xhr) {
            const resp = xhr.responseJSON;
            toastr.error(resp?.message || 'Terjadi kesalahan saat mengirim ulang pesan');
        },
        complete: function() {
            $btn.html(originalText).prop('disabled', false);
        }
    });
}

    // Checkbox Listeners
    $(document).on('change', '.row-check', function() {
        updateBulkButton();
        
        // Update select-all status
        const total = $('.row-check:not(:disabled)').length;
        const checked = $('.row-check:checked').length;
        $('#select-all').prop('checked', total > 0 && total === checked);
        $('#select-all').prop('indeterminate', checked > 0 && checked < total);
    });

    $('#select-all').on('change', function() {
        const isChecked = $(this).is(':checked');
        $('.row-check:not(:disabled)').prop('checked', isChecked);
        updateBulkButton();
    });


function updateBulkButton() {
    const checkedCount = $('.row-check:checked').length;
    $('#selected-count').text(checkedCount);
    $('#btn-bulk-resend').prop('disabled', checkedCount === 0);
}

// ... existing loadFailedMessages ...

function confirmBulkResend() {
    const selectedIds = [];
    $('.row-check:checked').each(function() {
        selectedIds.push($(this).val());
    });
    
    const count = selectedIds.length;
    
    if (count === 0) {
        toastr.warning('Pilih minimal satu pesan untuk di-resend.');
        return;
    }

    Swal.fire({
        title: 'Konfirmasi Resend Massal',
        html: `
            <p>Anda akan mengirim ulang <strong>${count} pesan</strong> yang dipilih.</p>
            <div class="alert alert-warning small text-start">
                <i class="ti ti-alert-triangle me-1"></i><strong>Perhatian:</strong>
                <ul class="mb-0 ps-3">
                    <li>Hanya pesan status <strong>failed</strong> yang akan diproses.</li>
                    <li>Sistem akan memvalidasi ulang template dan pool sebelum mengirim.</li>
                    <li>Proses berjalan di background. Mohon tunggu beberapa saat untuk update history.</li>
                </ul>
            </div>
            <p class="small mb-0">Apakah Anda yakin ingin melanjutkan?</p>
        `,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Resend ' + count + ' Pesan',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
    }).then((result) => {
        if (result.isConfirmed) {
            doBulkResend(selectedIds);
        }
    });
}

function doBulkResend(messageIds) {
    const $btn = $('#btn-bulk-resend');
    const originalText = $btn.html();
    
    $btn.html('<i class="ti ti-loader ti-spin me-1"></i>Memproses...').prop('disabled', true);

    $.ajax({
        url: '{{ route("client.resend-failed.bulk") }}',
        method: 'POST',
        data: {
            message_ids: messageIds,
            _token: '{{ csrf_token() }}'
        },
        success: function(resp) {
            Swal.fire({
                title: 'Berhasil!',
                text: resp.message || 'Proses resend massal berjalan di background.',
                icon: 'success'
            }).then(() => {
                loadFailedMessages();
                $('#select-all').prop('checked', false);
                updateBulkButton();
            });
        },
        error: function(xhr) {
            const resp = xhr.responseJSON;
            Swal.fire('Gagal!', resp?.message || 'Terjadi kesalahan saat memulai bulk resend', 'error');
        },
        complete: function() {
            $btn.html(originalText).prop('disabled', false);
        }
    });
}


function loadResendHistory() {
    const $tbody = $('#history-tbody');
    $tbody.html('<tr><td colspan="8" class="text-center text-muted py-4"><i class="ti ti-loader ti-spin me-2"></i>Memuat riwayat...</td></tr>');

    $.ajax({
        url: '{{ route("client.resend-failed.history") }}',
        data: { page: historyPage },
        success: function(resp) {
            if (resp.success) {
                renderHistoryTable(resp.data);
                updatePagination(resp.pagination, '#history-pagination-nav', function(page) {
                    historyPage = page;
                    loadResendHistory();
                });
            }
        },
        error: function() {
            $tbody.html('<tr><td colspan="8" class="text-center text-danger py-4">Gagal memuat riwayat</td></tr>');
        }
    });
}

function renderHistoryTable(data) {
    const $tbody = $('#history-tbody').empty();

    if (!data || data.length === 0) {
        $tbody.html('<tr><td colspan="8" class="text-center text-muted py-4">Belum ada riwayat resend</td></tr>');
        return;
    }

    data.forEach(function(h) {
        const statusClass = h.status === 'success' ? 'status-success' : (h.status === 'pending' ? 'status-pending' : 'status-failed');
        const newStatusClass = getStatusClass(h.new_status);
        
        $tbody.append(`
            <tr>
                <td><small>${formatDate(h.resend_at)}</small></td>
                <td><code>${h.recipient}</code></td>
                <td><small><code>${h.template_name}</code></small></td>
                <td><small>#${h.original_message_id}</small></td>
                <td><small>${h.new_message_id ? '#' + h.new_message_id : '-'}</small></td>
                <td><span class="status-badge ${statusClass}">${h.status}</span></td>
                <td><span class="status-badge ${newStatusClass}">${h.new_status}</span></td>
                <td><small class="text-muted">${h.ip_address || '-'}</small></td>
            </tr>
        `);
    });
}

function getStatusClass(status) {
    const classes = {
        'sent': 'status-sent',
        'delivered': 'status-delivered',
        'read': 'status-success',
        'failed': 'status-failed',
        'queued': 'status-pending',
    };
    return classes[status] || 'bg-secondary';
}

function updatePagination(pagination, selector, callback) {
    const $nav = $(selector).empty();
    if (!pagination || pagination.last_page <= 1) return;

    let html = '<ul class="pagination pagination-sm justify-content-center mb-0">';
    
    // Previous
    html += `<li class="page-item ${pagination.current_page === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${pagination.current_page - 1}">«</a>
    </li>`;

    // Pages
    for (let i = 1; i <= pagination.last_page; i++) {
        if (i === 1 || i === pagination.last_page || (i >= pagination.current_page - 2 && i <= pagination.current_page + 2)) {
            html += `<li class="page-item ${i === pagination.current_page ? 'active' : ''}">
                <a class="page-link" href="#" data-page="${i}">${i}</a>
            </li>`;
        } else if (i === pagination.current_page - 3 || i === pagination.current_page + 3) {
            html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
        }
    }

    // Next
    html += `<li class="page-item ${pagination.current_page === pagination.last_page ? 'disabled' : ''}">
        <a class="page-link" href="#" data-page="${pagination.current_page + 1}">»</a>
    </li>`;

    html += '</ul>';
    $nav.html(html);

    $nav.find('.page-link').on('click', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        if (page && page >= 1 && page <= pagination.last_page) {
            callback(page);
        }
    });
}

function formatDate(dateStr) {
    if (!dateStr) return '-';
    const d = new Date(dateStr);
    return d.toLocaleDateString('id-ID') + ' ' + d.toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'});
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>
@endpush