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

    <div class="pagetitle">
      <h1>Layanan</h1><br>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item"><a href="{{route('whatsapp.index')}}">Pertanyaan/Pengaduan Whatshapp</a></li>
          <li class="breadcrumb-item active">Detail Pertanyaan/Pengaduan Whatshapp</li>
        </ol>
      </nav>
    </div>

    <style>
      .image-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;
      }
      .image-popup-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; z-index: 100001; }
      .image-popup-close:hover { color: #e74c3c; }
      .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; }
      .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; }
      .image-zoom-controls button:hover { background: rgba(255,255,255,0.4); }
      .media-gallery-item { display: inline-block; margin-right: 10px; margin-bottom: 10px; vertical-align: top; }
    </style>

    <section class="section">
      <div class="row">
        <div class="col-lg-12">

        <div id="alert-container" class="mb-3"></div>

        @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">Detail Pertanyaan/Pengaduan Whatshapp</h5>
            
              <form class="row g-3" id="form-jawaban" method="post" action="{{route('whatsapp.save', @$wa->id)}}" enctype="multipart/form-data">
              @csrf
              
              {{-- ✅ INPUT HIDDEN UNTUK MENYIMPAN SEMUA ID DALAM GRUP --}}
              <input type="hidden" name="group_ids" value="{{ implode(',', $group_ids) }}">

              <div class="col-md-3">
                  <label class="form-label">No. Pengirim</label>
                  <input type="text" class="form-control" value="{{@$wa->sender}}" disabled>
              </div>
              <div class="col-md-6">
                  <label class="form-label">Nama Pengirim</label>
                  <input type="text" class="form-control" value="{{@$wa->name}}" disabled>
              </div>
              <div class="col-md-3">
                  <label class="form-label">Tanggal</label>
                  <input type="text" class="form-control" value="{{\Carbon\Carbon::parse($wa->timestamp)->format('d-m-Y H:i')}}" disabled>
              </div>

              {{-- ✅ AREA TAMPIL PESAN & MEDIA MASUK (YANG SUDAH DIGABUNG) --}}
              <div class="col-md-12 mt-3">
                  <label class="form-label fw-bold text-primary">Pesan Masuk dari Pengguna</label>
                  <div class="p-3 border rounded bg-light" style="min-height: 80px;">
                      
                      {{-- LOOPING SEMUA MEDIA DALAM GRUP --}}
                      @if(!empty($wa->media_files))
                          <div class="mb-3">
                              @foreach($wa->media_files as $media)
                                  <div class="media-gallery-item">
                                      @if($media['media_type'] == 'image')
                                          <img src="{{ !empty($media['media_path']) ? asset($media['media_path']) : $media['media_url'] }}" class="img-thumbnail" style="max-height: 200px; cursor:pointer;" onclick="openImagePopup(this.src)">
                                      @elseif($media['media_type'] == 'document')
                                          <a href="{{ !empty($media['media_path']) ? asset($media['media_path']) : $media['media_url'] }}" target="_blank" class="btn btn-sm btn-danger">
                                              <i class="bi bi-file-earmark-pdf me-1"></i> {{ $media['file_name'] ?? 'Lihat Dokumen' }}
                                          </a>
                                      @elseif($media['media_type'] == 'video')
                                          <video controls class="img-thumbnail" style="max-height: 200px;"><source src="{{ asset($media['media_path']) }}" type="video/mp4"></video>
                                      @elseif($media['media_type'] == 'audio')
                                          <audio controls style="width: 300px;"><source src="{{ asset($media['media_path']) }}" type="audio/mpeg"></audio>
                                      @endif
                                  </div>
                              @endforeach
                          </div>
                      @endif
                      
                      {{-- TAMPILKAN TEKS YANG SUDAH DIGABUNG --}}
                      @if(!empty(trim($wa->combined_message ?? '')))
                          <p class="mb-0" style="white-space: pre-wrap;">{!! nl2br(e($wa->combined_message)) !!}</p>
                      @elseif(empty($wa->media_files))
                          <p class="text-muted fst-italic mb-0">[ Pesan tidak dapat ditampilkan ]</p>
                      @endif
                  </div>
              </div>

              {{-- AREA UPLOAD GAMBAR --}}
              <div class="col-md-12 mt-4">
                  <label for="attachment" class="form-label">Lampirkan Gambar Balasan <small class="text-muted">(Opsional)</small></label>
                  <input type="file" class="form-control" id="attachment" name="attachment" accept="image/*">
                  <div id="attachment-preview-container" class="mt-2" style="display:none;">
                      <img id="attachment-preview" src="" style="max-height: 150px;" class="img-thumbnail">
                      <br>
                      <button type="button" class="btn btn-sm btn-danger mt-1" onclick="removeAttachment()"><i class="bi bi-x-circle me-1"></i>Hapus Lampiran</button>
                  </div>
              </div>

              {{-- OPSI CAPTION --}}
              <div class="col-md-12" id="caption-option-wrapper" style="display: none;">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="add_caption" name="add_caption" value="1">
                    <label class="form-check-label" for="add_caption">
                      Tambahkan Caption untuk gambar ini?
                    </label>
                  </div>
              </div>

              {{-- AREA INPUT TEKS --}}
              <div class="col-md-12" id="text-input-wrapper">
                  <label class="form-label" id="text-input-label">Balasan Teks Pesan</label>
                  <textarea name="jawaban" class="form-control" id="jawaban" rows="4">{{@$jawaban->jwb}}</textarea>
                  @if ($errors->has('jawaban'))
                    <small class="error-required text-danger">{{ $errors->first('jawaban') }}</small>
                  @endif
              </div>
                
              {{-- OPSI TEMPLATE --}}
              <div class="col-md-12" id="template-option-wrapper">
                  <div class="form-check">
                    <input class="form-check-input" value="1" type="checkbox" name="confirmtemplate" id="confirmtemplate" checked>
                    <label class="form-check-label" for="confirmtemplate">Gunakan Template Resmi DPMPTSP</label>
                  </div>
              </div>

              <div class="text-center mt-4">
                  <button type="submit" class="btn btn-primary" id="btn-submit">
                    <span id="btn-text">Kirim Jawaban</span>
                    <span id="btn-loader" class="d-none">
                      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                      <span class="visually-hidden">Loading...</span>
                    </span>
                  </button>
                  <a href="{{route('whatsapp.index')}}" class="btn btn-secondary">Kembali</a>
              </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Pop-up Gambar -->
    <div id="imagePopupOverlay" class="image-popup-overlay">
      <span class="image-popup-close" onclick="closeImagePopup()">&times;</span>
      <div class="image-zoom-controls">
        <button onclick="zoomIn()"><i class="bi bi-zoom-in"></i></button>
        <button onclick="resetZoom()"><i class="bi bi-arrows-fullscreen"></i></button>
        <button onclick="zoomOut()"><i class="bi bi-zoom-out"></i></button>
      </div>
      <div class="image-popup-content" id="imagePopupContent">
        <img id="popupImagePreview" src="" alt="Preview Gambar">
      </div>
    </div>

@endsection

@section('footer_scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{asset('assets_backend/vendor/tinymce/js/tinymce/tinymce.min.js')}}"></script>
<script>
// JS Zoom Gambar
let currentZoom=1,isDragging=false,startX,startY,translateX=0,translateY=0;
function updateTransform(){const i=document.getElementById('popupImagePreview'),c=document.getElementById('imagePopupContent');i.style.transform=`translate(${translateX}px, ${translateY}px) scale(${currentZoom})`;c.style.cursor=currentZoom>1?(isDragging?'grabbing':'grab'):'default';if(currentZoom===1){translateX=0;translateY=0;i.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){resetZoom();var p=document.getElementById('imagePopupOverlay'),i=document.getElementById('popupImagePreview');i.src=src;i.style.display='block';p.style.display='flex';document.body.style.overflow='hidden';}
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();});
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});

function initTinyMCE() {
    setTimeout(function() {
        if (!tinymce.get('jawaban')) {
            tinymce.init({
                selector: '#jawaban',
                height: 250,
                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',
                content_css: '//www.tiny.cloud/css/codepen.min.css'
            });
        }
    }, 100);
}

function destroyTinyMCE() {
    if (tinymce.get('jawaban')) {
        const currentContent = tinymce.get('jawaban').getContent();
        tinymce.get('jawaban').destroy();
        $('#jawaban').val(currentContent); 
    }
}

function removeAttachment() {
    $('#attachment').val('');
    $('#attachment-preview-container').hide();
    $('#add_caption').prop('checked', false);
    resetToDefaultTextMode();
}

function resetToDefaultTextMode() {
    destroyTinyMCE();
    $('#caption-option-wrapper').hide();
    $('#text-input-label').text('Balasan Teks Pesan');
    $('#text-input-wrapper').show();
    $('#template-option-wrapper').show();
    initTinyMCE(); 
}

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

  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('status') === 'success' && urlParams.get('message')) {
    showAlert('success', decodeURIComponent(urlParams.get('message')));
  }
  
  function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    $('#alert-container').html(`<div class="alert ${alertClass} alert-dismissible fade show" role="alert">${message}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>`);
    setTimeout(function() { $('.alert').fadeOut('slow', function() { $(this).remove(); }); }, 5000);
  }

  $('#attachment').change(function(e) {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        $('#attachment-preview').attr('src', e.target.result);
        $('#attachment-preview-container').show();
      }
      reader.readAsDataURL(file);

      destroyTinyMCE();
      $('#text-input-wrapper').hide();
      $('#template-option-wrapper').hide();
      $('#caption-option-wrapper').show();
      $('#add_caption').prop('checked', false); 
    } else {
      resetToDefaultTextMode();
    }
  });

  $('#add_caption').change(function() {
    if ($(this).is(':checked')) {
      $('#text-input-label').text('Caption Gambar');
      $('#text-input-wrapper').show();
      initTinyMCE(); 
    } else {
      destroyTinyMCE();
      $('#text-input-wrapper').hide();
    }
  });

  $('#form-jawaban').on('submit', function(e) {
    e.preventDefault();
    
    const hasAttachment = $('#attachment')[0].files.length > 0;
    const hasCaption = $('#add_caption').is(':checked');
    
    let jawabanContent = '';
    
    if (hasAttachment && hasCaption) {
        jawabanContent = tinymce.get('jawaban').getContent(); 
    } else if (!hasAttachment) {
        jawabanContent = tinymce.get('jawaban').getContent(); 
    }
    
    $('#btn-text').addClass('d-none');
    $('#btn-loader').removeClass('d-none');
    $('#btn-submit').prop('disabled', true);
    
    const formData = new FormData(this);
    formData.set('jawaban', jawabanContent);
    
    if (!hasAttachment) {
        formData.delete('attachment');
        formData.delete('add_caption');
    } else if (hasAttachment && !hasCaption) {
        formData.delete('add_caption');
    }

    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        showAlert('success', 'Jawaban berhasil dikirim');
        setTimeout(function() { window.location.href = "{{route('whatsapp.index', ['status' => 'success', 'message' => 'Data berhasil tersimpan'])}}"; }, 1500);
      },
      error: function(xhr) {
        $('#btn-text').removeClass('d-none');
        $('#btn-loader').addClass('d-none');
        $('#btn-submit').prop('disabled', false);
        
        if (xhr.status === 422) {
          const errors = xhr.responseJSON.errors;
          $('.error-required').text('');
          if (errors.jawaban) {
            $('#jawaban').siblings('.error-required').text(errors.jawaban[0]);
            if(!$('#text-input-wrapper').is(':visible')) {
                $('#text-input-wrapper').show();
            }
          }
          showAlert('danger', 'Periksa kembali inputan Anda');
        } else {
          showAlert('danger', 'Terjadi kesalahan. Silakan coba lagi');
        }
      }
    });
  });
});
</script>
@endsection