@extends('backend.template')
@section('main') 

<div class="pagetitle">
  <h1>Pertanyaan</h1><br>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
      <li class="breadcrumb-item">WhatsApp</li>
      <li class="breadcrumb-item active">List Pengaduan/Pertanyaan WhatsApp</li>
    </ol>
  </nav>
</div>

<style>
  .custom-popup-overlay {
    position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: rgba(0, 0, 0, 0.9); display: none; align-items: center; justify-content: center;
  }
  .custom-popup-close { position: absolute; top: 20px; right: 20px; color: #ffffff; font-size: 40px; font-weight: bold; cursor: pointer; transition: 0.3s; z-index: 100001; }
  .custom-popup-close:hover, .custom-popup-close:focus { color: #e74c3c; text-decoration: none; }
  .image-popup-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: default; }
  #popupImagePreview { max-width: 90vw; max-height: 85vh; display: none; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); transform-origin: center center; transition: transform 0.1s ease-out; user-select: none; -webkit-user-drag: none; }
  .image-zoom-controls { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; z-index: 100001; }
  .image-zoom-controls button { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); color: white; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
  .image-zoom-controls button:hover { background: rgba(255, 255, 255, 0.4); }
  .image-loader-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 100002; }
  .qr-popup-content { background: #ffffff; width: 95%; max-width: 600px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); position: relative; max-height: 90vh; overflow-y: auto; }
  .loader-spinner { border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 15px auto; }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  .export-dropdown { position: relative; display: inline-block; }
  .export-dropdown-content { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; min-width: 280px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); border-radius: 8px; z-index: 1000; overflow: hidden; margin-top: 5px; }
  .export-dropdown-content a { display: flex; align-items: center; padding: 12px 16px; text-decoration: none; color: #333; font-size: 13px; border-bottom: 1px solid #eee; transition: background 0.2s; }
  .export-dropdown-content a:last-child { border-bottom: none; }
  .export-dropdown-content a:hover { background-color: #f8f9fa; }
  .export-dropdown-content .export-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 16px; }
  .export-dropdown-content .export-text { flex: 1; }
  .export-dropdown-content .export-desc { font-size: 11px; color: #666; margin-top: 2px; }
  .export-dropdown:hover .export-dropdown-content { display: block; }
  .history-scroll { max-height: 150px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
  .history-scroll::-webkit-scrollbar { width: 4px; }
  .history-scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
  .history-scroll::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 4px; }
  
  /* Style untuk lampiran di history */
  .history-attachment { margin-top: 8px; padding: 8px; background: #e8f5e9; border-radius: 6px; border: 1px solid #c3e6cb; }
  .history-attachment img { max-height: 80px; max-width: 120px; border-radius: 4px; border: 1px solid #ced4da; cursor: pointer; display: block; }
  .history-attachment .file-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #fff; border: 1px solid #dee2e6; border-radius: 4px; text-decoration: none; color: #333; font-size: 11px; transition: background-color 0.2s; }
  .history-attachment .file-badge:hover { background-color: #f8f9fa; }

  /* Style untuk konten HTML di riwayat balasan */
  #qr-history-text strong,
  #qr-history-text b { font-weight: 600; color: #333; }
  #qr-history-text em,
  #qr-history-text i { font-style: italic; color: #555; }
  #qr-history-text u { text-decoration: underline; text-underline-offset: 2px; }
  #qr-history-text ul,
  #qr-history-text ol { margin: 5px 0; padding-left: 20px; }
  #qr-history-text li { margin: 2px 0; }
  #qr-history-text p { margin: 4px 0; }
  #qr-history-text a { color: #0d6efd; text-decoration: underline; }
  #qr-history-text table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 12px; }
  #qr-history-text table th,
  #qr-history-text table td { border: 1px solid #dee2e6; padding: 4px 8px; text-align: left; }
  #qr-history-text table th { background-color: #f8f9fa; font-weight: 600; }

  /* Override TinyMCE di popup */
  .tox-tinymce { border: 1px solid #ced4da !important; border-radius: 4px !important; }
  
  /* ✅ STYLE UNTUK SOURCE CODE EDITOR DENGAN LINE NUMBERS */
  #sourceCodeModal {
    position: fixed; z-index: 100010; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8); display: none; align-items: center; justify-content: center;
  }
  #sourceCodeModal.show { display: flex; }
  
  .source-code-dialog {
    background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    width: 90%; max-width: 700px; max-height: 85vh; display: flex; flex-direction: column;
  }
  
  .source-code-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #2d2d2d; color: #fff;
    border-radius: 8px 8px 0 0;
  }
  .source-code-header h6 { margin: 0; font-size: 14px; font-weight: 600; }
  .source-code-header .header-info { font-size: 11px; color: #aaa; }
  
  .source-code-body {
    display: flex; flex: 1; overflow: hidden; border: 1px solid #444;
    border-top: none; border-radius: 0 0 8px 8px;
  }
  
  .line-numbers-container {
    background: #1e1e1e; color: #858585; padding: 12px 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px; line-height: 1.6; text-align: right;
    user-select: none; min-width: 45px; border-right: 1px solid #444;
    overflow: hidden;
  }
  .line-numbers-container .line-num {
    padding: 0 10px 0 8px;
  }
  .line-numbers-container .line-num.active {
    color: #fff; background: #373737;
  }
  
  .source-code-textarea {
    flex: 1; padding: 12px; background: #1e1e1e; color: #d4d4d4;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px; line-height: 1.6; border: none; resize: none;
    outline: none; tab-size: 2; white-space: pre; overflow: auto;
  }
  .source-code-textarea::selection { background: #264f78; }
  
  /* Syntax highlighting colors */
  .source-code-textarea { caret-color: #d4d4d4; }
  
  .source-code-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: #f8f9fa; border: 1px solid #dee2e6;
    border-top: none; border-radius: 0 0 8px 8px;
  }
  .source-code-footer .footer-info { font-size: 11px; color: #666; }
  .source-code-footer .footer-buttons { display: flex; gap: 8px; }
  
  /* Scrollbar styling for source code */
  .source-code-textarea::-webkit-scrollbar { width: 8px; height: 8px; }
  .source-code-textarea::-webkit-scrollbar-track { background: #1e1e1e; }
  .source-code-textarea::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
  .source-code-textarea::-webkit-scrollbar-thumb:hover { background: #777; }
  
  /* Custom TinyMCE button style */
  .tox-tbtn--select[aria-label="Edit HTML"] {
    background-color: #e8f5e9 !important;
  }
</style>

<section class="section">
  <div class="row">
    <div class="col-lg-12">
      @if(Session::has('gagal'))
      <div class="alert alert-danger">{{Session::get('gagal')}}</div>
      @endif
      @if(Session::has('sukses'))
      <div class="alert alert-success">{{Session::get('sukses')}}</div>
      @endif
      
      <div class="card">
        <div class="card-body table-responsive">
          <h5 class="card-title">List Pengaduan/Pertanyaan WhatsApp</h5>
          <small class="text-muted mb-3 d-block"><i class="bi bi-info-circle me-1"></i>Klik ikon <i class="bi bi-reply"></i> untuk balas cepat, atau <i class="bi bi-trash3 text-danger"></i> untuk menghapus per pesan.</small>

          <form method="post" action="{{route('whatsapp.delete_all')}}" id="form-delete">
            @csrf
            <table class="table datatable" id="datatable-responsive" width="100%">
              <thead>
                <tr>
                  <th width="8px;"><input id="check-all" type="checkbox"></th>
                  <th scope="col" width="50px">#</th>
                  <th scope="col">No</th>
                  <th scope="col">No. Tiket</th>
                  <th scope="col">Tgl. Kirim</th>
                  <th scope="col">No. Pengirim</th>
                  <th scope="col">Nama Pengirim</th>
                  <th scope="col">Pesan</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- POP-UP GAMBAR -->
<div id="imagePopupOverlay" class="custom-popup-overlay">
  <span class="custom-popup-close" onclick="closeImagePopup()">&times;</span>
  <div class="image-zoom-controls">
    <button onclick="zoomIn()" title="Zoom In"><i class="bi bi-zoom-in"></i></button>
    <button onclick="resetZoom()" title="Reset Zoom"><i class="bi bi-arrows-fullscreen"></i></button>
    <button onclick="zoomOut()" title="Zoom Out"><i class="bi bi-zoom-out"></i></button>
  </div>
  <div class="image-popup-content" id="imagePopupContent">
    <div id="imageLoaderBox" class="image-loader-container"><div class="loader-spinner"></div><p>Memuat gambar...</p></div>
    <img id="popupImagePreview" src="" alt="Preview Gambar">
  </div>
</div>

<!-- POP-UP QUICK REPLY DENGAN HISTORY LENGKAP -->
<div id="quickReplyOverlay" class="custom-popup-overlay" style="background-color: rgba(0, 0, 0, 0.7);">
  <span class="custom-popup-close" onclick="closeQuickReply()">&times;</span>
  <div class="qr-popup-content">
    <div style="padding: 20px; border-bottom: 1px solid #eee; background: #f8f9fa; border-radius: 8px 8px 0 0;">
      <h5 class="mb-0" style="font-size: 16px;"><i class="bi bi-reply me-2 text-primary"></i>Balas Cepat Pesan</h5>
    </div>
    <form id="form-quick-reply" style="padding: 20px;">
      @csrf
      <input type="hidden" name="id" id="qr_message_id">
      
      <!-- Konteks pesan yang dibalas -->
      <div style="margin-bottom: 15px; padding: 10px; background: #f1f3f5; border: 1px solid #dee2e6; border-radius: 5px;">
          <small class="text-muted" style="font-size: 12px;">Membalas pesan dari:</small>
          <strong class="text-primary d-block" id="qr_sender_name" style="font-size: 14px;"></strong>
          <div style="margin-top: 5px; padding: 8px; background: #fff; border-left: 3px solid #0d6efd;">
              <small class="text-muted fst-italic" style="font-size: 12px;">"<span id="qr_snippet"></span>"</small>
          </div>
      </div>

      <!-- History balasan dengan lampiran -->
      <div id="qr-history-container" style="display: none; margin-bottom: 15px; padding: 12px; background: #d1ecf1; border: 1px solid #bee5eb; border-radius: 8px;">
          <div style="display: flex; align-items: center; margin-bottom: 8px;">
              <i class="bi bi-clock-history me-2" style="font-size: 14px; color: #0c5460;"></i>
              <strong style="font-size: 12px; color: #0c5460;">Riwayat Balasan Sebelumnya</strong>
              <span id="qr-history-badge" class="badge bg-warning text-dark" style="font-size: 9px; margin-left: 8px;">SUDAH PERNAH DIBALAS</span>
          </div>
          <div style="background: #fff; border-radius: 6px; overflow: hidden;">
              <div style="padding: 6px 10px; background: #0c5460; color: #fff; font-size: 11px; display: flex; justify-content: space-between;">
                  <span><i class="bi bi-person-fill me-1"></i> Admin</span>
                  <span id="qr-history-time"></span>
              </div>
              
              <!-- Konten teks balasan (HTML dirender) -->
              <div id="qr-history-text" class="history-scroll" style="padding: 10px; font-size: 13px; color: #333; line-height: 1.5;"></div>
              
              <!-- Konten lampiran balasan -->
              <div id="qr-history-attachment" style="display: none;" class="history-attachment"></div>
          </div>
          <div style="margin-top: 8px; font-size: 10px; color: #0c5460; font-style: italic;">
              <i class="bi bi-info-circle me-1"></i>Kirim balasan baru akan memperbarui riwayat ini
          </div>
      </div>

      <!-- Loading indicator -->
      <div id="qr-history-loading" style="display: none; margin-bottom: 15px; padding: 15px; text-align: center; background: #f8f9fa; border-radius: 5px;">
          <div class="spinner-border spinner-border-sm text-primary" style="width: 20px; height: 20px;" role="status"></div>
          <small class="text-muted d-block mt-1">Memuat riwayat...</small>
      </div>

      <div class="mb-3">
          <label class="form-label" style="font-size: 14px; font-weight: 600;">
              Isi Balasan 
              <span class="text-danger">(Opsional)</span>
          </label>
          <!-- ✅ TEXTAREA UNTUK TINYMCE -->
          <textarea name="jawaban" id="qr_jawaban" rows="4" placeholder="Ketik balasan di sini..." style="font-size: 14px;"></textarea>
          <div style="margin-top: 8px; font-size: 10px; color: #0c5460; font-style: italic;">
              <ol>
                  <li>Tekan Enter+Shift secara bersamaan untuk memulai baris baru</li>
                  <li>Tekan Enter untuk memulai paragraf baru</li>
              </ol>
          </div>
      </div>
      
      <div class="mb-3">
          <label class="form-label" style="font-size: 14px; font-weight: 600;">
              Lampiran File 
              <span class="text-danger">(Opsional)</span>
          </label>
          <input type="file" name="attachment" id="qr_attachment" class="form-control form-control-sm" accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx" style="font-size: 13px;">
          <small class="text-muted" style="font-size: 11px;"><i class="bi bi-info-circle me-1"></i>Mendukung: Gambar, Video, PDF, Word, Excel (Maks 10MB)</small>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 10px;">
        <button type="button" class="btn btn-secondary btn-sm" onclick="closeQuickReply()">Batal</button>
        <button type="submit" class="btn btn-primary btn-sm" id="btn-qr-submit">
          <i class="bi bi-send me-1"></i> Kirim Sekarang
        </button>
      </div>
    </form>
  </div>
</div>

<!-- ✅ MODAL SOURCE CODE EDITOR DENGAN LINE NUMBERS -->
<div id="sourceCodeModal">
  <div class="source-code-dialog">
    <div class="source-code-header">
      <div>
        <h6><i class="bi bi-code-slash me-2"></i>Edit HTML Source</h6>
        <span class="header-info">Edit tag HTML secara langsung</span>
      </div>
      <button type="button" onclick="closeSourceCodeEditor()" style="background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0 4px;line-height:1;">&times;</button>
    </div>
    <div class="source-code-body">
      <div class="line-numbers-container" id="lineNumbers"></div>
      <textarea class="source-code-textarea" id="sourceCodeTextarea" spellcheck="false"></textarea>
    </div>
    <div class="source-code-footer">
      <div class="footer-info">
        <span id="lineCount">Baris: 0</span> &bull; 
        <span id="charCount">Karakter: 0</span> &bull;
        <span style="color:#28a745;">Ctrl+S untuk simpan</span>
      </div>
      <div class="footer-buttons">
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="formatHtmlCode()">
          <i class="bi bi-magic me-1"></i> Format
        </button>
        <button type="button" class="btn btn-sm btn-outline-danger" onclick="closeSourceCodeEditor()">
          Batal
        </button>
        <button type="button" class="btn btn-sm btn-primary" onclick="applySourceCode()">
          <i class="bi bi-check-lg me-1"></i> Terapkan
        </button>
      </div>
    </div>
  </div>
</div>

@endsection

@section('footer_scripts')
<link rel="stylesheet" type="text/css" href="{{asset('assets_backend/css/bootstrap_3.3.7.css')}}"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>

<!-- ✅ LOAD TINYMCE -->
<script src="{{asset('assets_backend/vendor/tinymce/js/tinymce/tinymce.min.js')}}"></script>

<script>
// ✅ FUNGSI TINYMCE UNTUK QUICK REPLY
let qrTinyMceInitialized = false;

function initQrTinyMCE() {
    if (qrTinyMceInitialized) return;
    
    setTimeout(function() {
        if (typeof tinymce !== 'undefined' && !tinymce.get('qr_jawaban')) {
            tinymce.init({
                selector: '#qr_jawaban',
                plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
                toolbar: 'undo redo | formatselect | ' +
                         'bold italic backcolor | alignleft aligncenter ' +
                         'alignright alignjustify | bullist numlist outdent indent | ' +
                         'sourcecode | removeformat | help',
                toolbar_mode: 'wrap',
                height: 300,
                menubar: false,
                content_css: '//www.tiny.cloud/css/codepen.min.css',
                branding: false,
                statusbar: false,
                tinycomments_mode: 'embedded',
                tinycomments_author: 'Author name',
                setup: function(editor) {
                    // ✅ TAMBAHKAN TOMBOL CUSTOM UNTUK SOURCE CODE
                    editor.ui.registry.addButton('sourcecode', {
                        icon: 'sourcecode',
                        tooltip: 'Edit HTML Source (Ctrl+Shift+H)',
                        onAction: function() {
                            openSourceCodeEditor();
                        }
                    });
                    
                    editor.on('init', function() {
                        qrTinyMceInitialized = true;
                        
                        // ✅ TAMBAHKAN KEYBOARD SHORTCUT Ctrl+Shift+H
                        editor.addShortcut('ctrl+shift+h', 'Edit HTML Source', function() {
                            openSourceCodeEditor();
                        });
                    });
                }
            });
        }
    }, 150);
}

function destroyQrTinyMCE() {
    if (typeof tinymce !== 'undefined' && tinymce.get('qr_jawaban')) {
        const content = tinymce.get('qr_jawaban').getContent();
        tinymce.get('qr_jawaban').destroy();
        $('#qr_jawaban').val(content);
        qrTinyMceInitialized = false;
    }
}

function getQrJawabanContent() {
    if (tinymce.get('qr_jawaban')) {
        return tinymce.get('qr_jawaban').getContent({format: 'text'}).trim();
    }
    return $('#qr_jawaban').val().trim();
}

function getQrJawabanHtml() {
    if (tinymce.get('qr_jawaban')) {
        return tinymce.get('qr_jawaban').getContent();
    }
    return $('#qr_jawaban').val();
}

// ✅ FUNGSI SOURCE CODE EDITOR DENGAN LINE NUMBERS
let sourceCodeEditorOpen = false;

function openSourceCodeEditor() {
    const editor = tinymce.get('qr_jawaban');
    if (!editor) return;
    
    const content = editor.getContent();
    const textarea = document.getElementById('sourceCodeTextarea');
    const lineNumbers = document.getElementById('lineNumbers');
    
    textarea.value = content;
    
    // Tampilkan modal
    document.getElementById('sourceCodeModal').classList.add('show');
    document.body.style.overflow = 'hidden';
    sourceCodeEditorOpen = true;
    
    // Update line numbers
    updateLineNumbers();
    updateCounts();
    
    // Focus ke textarea
    setTimeout(function() {
        textarea.focus();
    }, 100);
}

function closeSourceCodeEditor() {
    document.getElementById('sourceCodeModal').classList.remove('show');
    sourceCodeEditorOpen = false;
}

function applySourceCode() {
    const editor = tinymce.get('qr_jawaban');
    const textarea = document.getElementById('sourceCodeTextarea');
    
    if (editor) {
        editor.setContent(textarea.value);
    }
    
    closeSourceCodeEditor();
    
    // Focus kembali ke TinyMCE
    setTimeout(function() {
        if (editor) editor.focus();
    }, 100);
}

function updateLineNumbers() {
    const textarea = document.getElementById('sourceCodeTextarea');
    const lineNumbers = document.getElementById('lineNumbers');
    const lines = textarea.value.split('\n');
    const currentLine = getCurrentLine(textarea);
    
    let html = '';
    for (let i = 1; i <= lines.length; i++) {
        const activeClass = i === currentLine ? ' active' : '';
        html += '<div class="line-num' + activeClass + '">' + i + '</div>';
    }
    lineNumbers.innerHTML = html;
}

function getCurrentLine(textarea) {
    const text = textarea.value.substring(0, textarea.selectionStart);
    return text.split('\n').length;
}

function updateCounts() {
    const textarea = document.getElementById('sourceCodeTextarea');
    const lines = textarea.value.split('\n');
    const chars = textarea.value.length;
    
    document.getElementById('lineCount').textContent = 'Baris: ' + lines.length;
    document.getElementById('charCount').textContent = 'Karakter: ' + chars;
}

function formatHtmlCode() {
    const textarea = document.getElementById('sourceCodeTextarea');
    let html = textarea.value;
    
    // Simple HTML formatting
    html = html.replace(/>\s*</g, '>\n<');
    
    // Indent based on tag depth
    let formatted = '';
    let indent = 0;
    const lines = html.split('\n');
    
    const selfClosingTags = ['br', 'hr', 'img', 'input', 'meta', 'link'];
    const closingTagsRegex = /^<\/\w/;
    const openingTagsRegex = /^<\w[^>]*[^\/]>$/;
    const selfClosingRegex = /^<\w[^>]*\/>$/;
    
    lines.forEach(function(line) {
        line = line.trim();
        if (!line) return;
        
        if (closingTagsRegex.test(line)) {
            indent = Math.max(0, indent - 1);
        }
        
        formatted += '  '.repeat(indent) + line + '\n';
        
        if (openingTagsRegex.test(line) && !selfClosingRegex.test(line)) {
            const tagName = line.match(/^<(\w+)/);
            if (tagName && selfClosingTags.indexOf(tagName[1].toLowerCase()) === -1) {
                indent++;
            }
        }
    });
    
    textarea.value = formatted.trim();
    updateLineNumbers();
    updateCounts();
}

// ✅ EVENT LISTENERS UNTUK SOURCE CODE EDITOR
document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.getElementById('sourceCodeTextarea');
    const lineNumbers = document.getElementById('lineNumbers');
    
    // Update line numbers saat mengetik
    textarea.addEventListener('input', function() {
        updateLineNumbers();
        updateCounts();
    });
    
    // Update line numbers saat klik/selection change
    textarea.addEventListener('click', function() {
        updateLineNumbers();
    });
    
    textarea.addEventListener('keyup', function(e) {
        // Update pada arrow keys, home, end
        if ([37, 38, 39, 40, 36, 35].indexOf(e.keyCode) > -1) {
            updateLineNumbers();
        }
    });
    
    // Sync scroll antara line numbers dan textarea
    textarea.addEventListener('scroll', function() {
        lineNumbers.scrollTop = this.scrollTop;
    });
    
    // Tab key support (insert 2 spaces)
    textarea.addEventListener('keydown', function(e) {
        if (e.key === 'Tab') {
            e.preventDefault();
            const start = this.selectionStart;
            const end = this.selectionEnd;
            
            this.value = this.value.substring(0, start) + '  ' + this.value.substring(end);
            this.selectionStart = this.selectionEnd = start + 2;
            
            updateLineNumbers();
        }
        
        // Ctrl+S untuk save
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            applySourceCode();
        }
        
        // Escape untuk close
        if (e.key === 'Escape') {
            closeSourceCodeEditor();
        }
        
        // Auto-close tags
        if (e.key === '>' && !e.shiftKey) {
            const start = this.selectionStart;
            const textBefore = this.value.substring(0, start);
            const match = textBefore.match(/<(\w+)[^>]*$/);
            
            if (match) {
                const tag = match[1];
                const selfClosing = ['br', 'hr', 'img', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr'];
                
                if (selfClosing.indexOf(tag.toLowerCase()) === -1) {
                    e.preventDefault();
                    const closingTag = '</' + tag + '>';
                    this.value = this.value.substring(0, start) + '>' + closingTag + this.value.substring(start);
                    this.selectionStart = this.selectionEnd = start + 1;
                    updateLineNumbers();
                    updateCounts();
                }
            }
        }
    });
});

 $(document).ready(function(){
  $.ajaxSetup({
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
  });

  var table = $('#datatable-responsive').DataTable({
        dom: '<"toolbar"><l>Bfrtip',
        processing: true,
        language: {
          processing: '<div class="spinner-border text-danger" style="width: 50px; height: 50px;" role="status"></div><small>Sedang Memuat Data ...</small>'
        },
        serverSide: true,
        ordering: false,
        destroy: true,
        initComplete: function() {
          $("div.toolbar").html(
            '<button type="button" style="float:left;margin-right:10px;border:none;" onclick="delete_all()" class="badge bg-danger"><i class="bi bi-trash me-1"></i> Delete All</button>' +
            '<div class="export-dropdown" style="float:left;">' +
            '<button type="button" class="badge bg-success" style="border:none;"><i class="bi bi-file-earmark-excel me-1"></i> Export Excel <i class="bi bi-caret-down-fill ms-1"></i></button>' +
            '<div class="export-dropdown-content">' +
            '<a href="{{route("whatsapp.export_excel", ["with_images" => 1])}}">' +
            '<div class="export-icon" style="background-color:#d4edda;color:#155724;"><i class="bi bi-image"></i></div>' +
            '<div class="export-text"><strong>Dengan Gambar</strong><div class="export-desc">Thumbnail gambar embed (file lebih besar)</div></div>' +
            '</a>' +
            '<a href="{{route("whatsapp.export_excel", ["with_images" => 0])}}">' +
            '<div class="export-icon" style="background-color:#e2e3e5;color:#333;"><i class="bi bi-link-45deg"></i></div>' +
            '<div class="export-text"><strong>Tanpa Gambar</strong><div class="export-desc">Link saja (file lebih ringan & cepat)</div></div>' +
            '</a>' +
            '</div>' +
            '</div>'
          );
        },
        ajax: '{{route('whatsapp.jsondata')}}',
        columns:[                
            {data:'x', name:'Check All',orderable: false},  
            {data: 'action', name: 'action', className: "th-td-center"},
            {data:'No', name:'No', className: "th-td-center"},
            {data:'no_tiket', name:'no_tiket', className: "th-td-center"},
            {data:'tgl', name:'tgl', className: "th-td-center"},
            {data:'no_pengirim', name:'no_pengirim', className: "th-center"},
            {data:'nama', name:'nama', className: "th-center"},
            {data:'pesan', name:'pesan', className: "th-td-center"},
            {data:'jawab', name: 'jawab', className: "th-td-center"}
        ],
        fnRowCallback: function(nRow, aData, iDisplayIndex) {
          var index = iDisplayIndex + 1;
          $('td:eq(2)', nRow).html(index);
          return nRow;
        }
  });

  $("#check-all").click(function(){ 
    $(".check-item").prop("checked", $(this).is(":checked")); 
  });

  $(document).on('click','.btn-delete-group',function(e){
    e.preventDefault();
    var id = $(this).data('id');
    swal({
      title: 'Hapus Grup Pesan?',
      text: "Semua pesan yang tergabung dalam baris ini akan dihapus permanent.",
      type: 'warning',
      buttons:{ confirm: { text : 'Ya, Hapus', className : 'btn btn-success' }, cancel: { visible: true, className : 'btn btn-danger' } }
    }).then((Delete) => {
      if (Delete) {
        $.ajax({ type: "post", url: "{{route('whatsapp.delete_all')}}", data: {id:id}, success: function () { $('#datatable-responsive').DataTable().ajax.reload(); swal('Sukses', 'Grup pesan berhasil dihapus !', 'success'); }});
      }
    });
  });
});

function deleteSingleMsg(id) {
    swal({
        title: 'Hapus Pesan Ini?',
        text: "Pesan ini akan dikeluarkan dari grup dan dihapus.",
        type: 'warning',
        buttons: { cancel: { visible: true, className: 'btn btn-danger' }, confirm: { text: 'Ya, Hapus', className: 'btn btn-success' } }
    }).then((willDelete) => {
        if (willDelete) {
            $.ajax({
                type: "delete", url: "{{route('whatsapp.delete')}}", data: { id: id },
                success: function(response) { $('#datatable-responsive').DataTable().ajax.reload(); swal('Sukses', 'Pesan berhasil dihapus', 'success'); },
                error: function(xhr) { swal('Gagal', 'Terjadi kesalahan saat menghapus.', 'error'); }
            });
        }
    });
}

// ✅ Fungsi untuk sanitasi HTML (hapus tag berbahaya)
function sanitizeHtml(html) {
    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    
    var dangerousTags = ['script', 'iframe', 'object', 'embed', 'form', 'input', 'textarea', 'select', 'style', 'link', 'meta'];
    dangerousTags.forEach(function(tag) {
        var elements = tempDiv.querySelectorAll(tag);
        elements.forEach(function(el) { el.remove(); });
    });
    
    var allElements = tempDiv.querySelectorAll('*');
    allElements.forEach(function(el) {
        var attrs = el.attributes;
        for (var i = attrs.length - 1; i >= 0; i--) {
            var attrName = attrs[i].name.toLowerCase();
            if (attrName.startsWith('on') || attrs[i].value.toLowerCase().indexOf('javascript:') !== -1) {
                el.removeAttribute(attrs[i].name);
            }
        }
    });
    
    return tempDiv.innerHTML;
}

// ✅ Fungsi openQuickReply dengan history lengkap + TinyMCE
function openQuickReply(id, name, snippet) {
    closeImagePopup(); 
    
    $('#qr_message_id').val(id);
    $('#qr_sender_name').text(name);
    $('#qr_snippet').text(snippet);
    
    // ✅ Pastikan TinyMCE sudah di-destroy sebelum reset
    destroyQrTinyMCE();
    $('#qr_jawaban').val('');
    
    // Reset file input
    var oldInput = $('#qr_attachment');
    var newInput = $(oldInput).clone(true);
    $(oldInput).replaceWith(newInput);
    newInput.val('');
    
    // Reset tombol
    $('#btn-qr-submit').prop('disabled', false).html('<i class="bi bi-send me-1"></i> Kirim Sekarang');
    
    // Tampilkan popup
    document.getElementById('quickReplyOverlay').style.display = 'flex';
    document.body.style.overflow = 'hidden'; 
    
    // Sembunyikan dulu dan tampilkan loading
    $('#qr-history-container').hide();
    $('#qr-history-text').empty();
    $('#qr-history-attachment').hide();
    $('#qr-history-loading').show();
    
    // ✅ Inisialisasi TinyMCE setelah popup tampil
    initQrTinyMCE();
    
    // Ambil history balasan
    $.ajax({
       url: '{{ route("whatsapp.reply_history", ["id" => "__ID__"]) }}'.replace('__ID__', id),
        type: 'GET',
        success: function(response) {
            $('#qr-history-loading').hide();
            
            if (response.status === 'found') {
                $('#qr-history-time').text(response.data.tgl_jwb || '');
                
                if (response.data.jwb) {
                    var cleanHtml = sanitizeHtml(response.data.jwb);
                    $('#qr-history-text').html(cleanHtml);
                } else {
                    $('#qr-history-text').html('<span class="text-muted fst-italic">[ Balasan hanya berupa file ]</span>');
                }
                
                if (response.data.attachment) {
                    var att = response.data.attachment;
                    var type = (att.type || '').toLowerCase();
                    var html = '';
                    
                    if (type.indexOf('image/') !== -1) {
                        html = '<img src="' + att.url + '" style="max-height:80px; max-width:120px; border-radius:4px; border:1px solid #ced4da; cursor:pointer;" onclick="openImagePopup(\'' + att.url + '\')" onerror="this.style.display=\'none\'">';
                    } else if (type.indexOf('video/') !== -1) {
                        html = '<a href="' + att.url + '" target="_blank" class="file-badge"><i class="bi bi-play-circle-fill" style="color:#0dcaf0;"></i> Video</a>';
                    } else if (type.indexOf('audio/') !== -1) {
                        html = '<a href="' + att.url + '" target="_blank" class="file-badge"><i class="bi bi-music-note-beamed" style="color:#198754;"></i> Audio</a>';
                    } else {
                        var ext = (att.name || '').split('.').pop().toUpperCase();
                        var fileName = att.name ? (att.name.length > 25 ? att.name.substring(0, 25) + '...' : att.name) : 'Dokumen';
                        
                        var iconClass = 'bi-file-earmark-text';
                        var iconColor = '#6c757d';
                        if (ext === 'PDF') { iconClass = 'bi-file-earmark-pdf-fill'; iconColor = '#dc3545'; }
                        else if (ext === 'DOC' || ext === 'DOCX') { iconClass = 'bi-file-earmark-word-fill'; iconColor = '#0d6efd'; }
                        else if (ext === 'XLS' || ext === 'XLSX') { iconClass = 'bi-file-earmark-excel-fill'; iconColor = '#198754'; }
                        
                        html = '<a href="' + att.url + '" target="_blank" class="file-badge"><i class="bi ' + iconClass + '" style="color:' + iconColor + '; font-size: 16px;"></i> <span>[' + ext + '] ' + fileName + '</span></a>';
                    }
                    
                    if (html) {
                        $('#qr-history-attachment').html(html).show();
                    }
                }
                
                $('#qr-history-container').show();
            }
        },
        error: function() {
            $('#qr-history-loading').hide();
        }
    });
    
    // Focus ke TinyMCE setelah init
    setTimeout(function() {
        if (tinymce.get('qr_jawaban')) {
            tinymce.get('qr_jawaban').focus();
        }
    }, 300);
}

function closeQuickReply() {
    // ✅ Close source code editor jika terbuka
    if (sourceCodeEditorOpen) {
        closeSourceCodeEditor();
    }
    
    // ✅ Destroy TinyMCE saat tutup popup
    destroyQrTinyMCE();
    
    document.getElementById('quickReplyOverlay').style.display = 'none';
    document.body.style.overflow = 'auto'; 
}

document.getElementById('quickReplyOverlay').addEventListener('click', function(e) {
    if (e.target === this) { closeQuickReply(); }
});

// ✅ Submit form dengan TinyMCE
 $('#form-quick-reply').on('submit', function(e) {
    e.preventDefault();
    
    var formData = new FormData(this);
    var btnSubmit = $('#btn-qr-submit');
    
    // ✅ Ambil konten dari TinyMCE
    var jawabanText = getQrJawabanContent();
    var jawabanHtml = getQrJawabanHtml();
    var fileInput = document.getElementById('qr_attachment');
    var hasFile = fileInput.files && fileInput.files.length > 0;

    if (!jawabanText && !hasFile) {
        swal('Perhatian', 'Silakan isi balasan teks atau lampirkan file terlebih dahulu.', 'warning');
        return; 
    }
    
    btnSubmit.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Mengirim...');
    
    // ✅ Set HTML content ke FormData
    formData.set('jawaban', jawabanHtml);
    
    $.ajax({
        url: '{{ route("whatsapp.quickreply") }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if(response.status === 'success') {
                closeQuickReply(); 
                $('#datatable-responsive').DataTable().ajax.reload();
                swal('Sukses', response.message, 'success');
            }
        },
        error: function(xhr) {
            var errMsg = 'Terjadi kesalahan saat mengirim pesan.';
            if(xhr.responseJSON && xhr.responseJSON.message) {
                errMsg = xhr.responseJSON.message;
            }
            if(xhr.responseJSON && xhr.responseJSON.errors) {
                var errors = xhr.responseJSON.errors;
                errMsg = Object.values(errors).join('<br>');
            }
            swal('Gagal', errMsg, 'error');
            btnSubmit.prop('disabled', false).html('<i class="bi bi-send me-1"></i> Kirim Sekarang');
        }
    });
});

function delete_all(){
  swal({
    title: 'Hapus Yang Dicentang?',
    text: "Sistem Akan Menghapus data yang dipilih !",
    type: 'warning',
    buttons:{ confirm: { text : 'Ya', className : 'btn btn-success' }, cancel: { visible: true, className : 'btn btn-danger' } }
  }).then((Delete) => {
    if (Delete) { $("#form-delete").submit(); } else { swal.close(); }
  });       
}

// JS POP-UP GAMBAR & ZOOM
let currentZoom = 1; let isDragging = false; let startX, startY, translateX = 0, translateY = 0;
function updateTransform() { const img = document.getElementById('popupImagePreview'); const content = document.getElementById('imagePopupContent'); img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${currentZoom})`; content.style.cursor = currentZoom > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default'; if (currentZoom === 1) { translateX = 0; translateY = 0; img.style.transform = 'scale(1)'; } }
function zoomIn() { if (currentZoom < 5) { currentZoom += 0.3; updateTransform(); } }
function zoomOut() { if (currentZoom > 1) { currentZoom -= 0.3; updateTransform(); } }
function resetZoom() { currentZoom = 1; translateX = 0; translateY = 0; updateTransform(); }
function openImagePopup(src) { closeQuickReply(); resetZoom(); var popup = document.getElementById('imagePopupOverlay'); var img = document.getElementById('popupImagePreview'); var loader = document.getElementById('imageLoaderBox'); img.style.display = 'none'; loader.style.display = 'block'; loader.innerHTML = '<div class="loader-spinner"></div><p>Memuat gambar...</p>'; img.src = src; popup.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
document.getElementById('popupImagePreview').onload = function() { document.getElementById('imageLoaderBox').style.display = 'none'; this.style.display = 'block'; };
document.getElementById('popupImagePreview').onerror = function() { document.getElementById('imageLoaderBox').innerHTML = '<p style="color: #ff4c4c; font-weight: bold;">Gagal memuat gambar.</p>'; };
function closeImagePopup() { resetZoom(); document.getElementById('imagePopupOverlay').style.display = 'none'; document.getElementById('popupImagePreview').src = ''; document.body.style.overflow = 'auto'; }
document.getElementById('imagePopupOverlay').addEventListener('click', function(e) { if (e.target === this) closeImagePopup(); });
document.addEventListener('keydown', function(e) { 
    if (e.key === 'Escape') { 
        closeImagePopup(); 
        if (sourceCodeEditorOpen) {
            closeSourceCodeEditor();
        } else {
            closeQuickReply(); 
        }
    } 
});
const popupContent = document.getElementById('imagePopupContent');
popupContent.addEventListener('mousedown', (e) => { if (currentZoom > 1) { isDragging = true; startX = e.clientX - translateX; startY = e.clientY - translateY; e.preventDefault(); } });
window.addEventListener('mouseup', () => { isDragging = false; updateTransform(); });
window.addEventListener('mousemove', (e) => { if (isDragging) { translateX = e.clientX - startX; translateY = e.clientY - startY; updateTransform(); } });
popupContent.addEventListener('wheel', (e) => { e.preventDefault(); e.deltaY < 0 ? zoomIn() : zoomOut(); }, { passive: false });
</script>
@endsection