@extends('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 ertanyaan/Pengaduan Whatshapp</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

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

        <!-- Container untuk alert -->
        <div id="alert-container" class="mb-3">
          <!-- Alert akan ditampilkan di sini -->
        </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>
            
              <!-- Multi Columns Form -->
              <form class="row g-3" id="form-jawaban" method="post" action="{{route('whatsapp.save', @$wa->id)}}">
              @csrf
              <div class="col-md-3">
                  <label for="inputName5" class="form-label">No. Pengirim</label>
                  <input type="text" class="form-control" id="no_pengirim" name="no_pengirim" value="{{@$wa->sender}}" placeholder="Masukkan No. Pengirim" disabled>
                </div>
                <div class="col-md-6">
                  <label for="inputName5" class="form-label">Nama Pengirim</label>
                  <input type="text" class="form-control" id="nama" name="nama" value="{{@$wa->name}}" placeholder="Masukkan Nama" disabled>
                </div>
                
                
               
                <div class="col-md-3">
                  <label for="inputEmail5" class="form-label">Tanggal</label>
                  <input type="text" class="form-control" id="tgl" name="tgl" value="{{\Carbon\Carbon::parse($wa->timestamp)->format('d-m-Y')}}" placeholder="Masukkan No Hp" disabled>
                </div>
                <div class="col-md-12">
                  <label for="inputEmail5" class="form-label">Pesan</label>
                  <textarea name="message" class="form-control editor-message" id="pertanyaan" disabled>{{@$wa->message}}</textarea>
                  <input type="hidden" name="message_hidden" value="{{@$wa->message}}">
                </div>
                <div class="col-md-12">
                  <label for="inputEmail5" class="form-label">Jawaban</label>
                  <textarea name="jawaban"  class="form-control editor-jawaban" id="jawaban">{{@$jawaban->jwb}}</textarea>
                  @if ($errors->has('jwb'))
                    <small class="error-required text-danger">{{ $errors->first('jwb') }}</small>
                  @endif
                </div>
                
                <div class="col-md-12">
                  <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
                    </label>
                  </div>
                </div>


                <div class="text-center mt-4">
                  <button type="submit" class="btn btn-primary" id="btn-submit">
                    <span id="btn-text">Simpan</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><!-- End Multi Columns Form -->
          

            </div>
          </div>

        </div>
      </div>
    </section>

@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>
tinymce.init({
      selector: 'textarea.editor-message',
      plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
      toolbar: 'a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table',
      toolbar_mode: 'floating',
      height: 300,
      readonly : 1,
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name',
      toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_css: '//www.tiny.cloud/css/codepen.min.css'
   });
tinymce.init({
      selector: 'textarea.editor-jawaban',
      plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker',
      toolbar: 'a11ycheck addcomment showcomments casechange checklist code formatpainter pageembed permanentpen table',
      toolbar_mode: 'floating',
      height: 300,
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name',
      toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_css: '//www.tiny.cloud/css/codepen.min.css'
   });

$(document).ready(function(){
  $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
  });
  
  // Cek parameter URL untuk menampilkan alert
  const urlParams = new URLSearchParams(window.location.search);
  const status = urlParams.get('status');
  const message = urlParams.get('message');
  
  if (status === 'success' && message) {
    showAlert('success', decodeURIComponent(message));
  }
  
  // Fungsi untuk menampilkan alert
  function showAlert(type, message) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alertIcon = type === 'success' ? 'ri-check-line' : 'ri-error-warning-line';
    
    const alert = `
      <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
        <i class="${alertIcon} me-1"></i>
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    `;
    
    $('#alert-container').html(alert);
    
    // Auto-hide alert setelah 5 detik
    setTimeout(function() {
      $('.alert').fadeOut('slow', function() {
        $(this).remove();
      });
    }, 5000);
  }
  
  // Handle form submission with AJAX
  $('#form-jawaban').on('submit', function(e) {
    e.preventDefault();
    
    // Get content from TinyMCE editor
    const jawabanContent = tinymce.get('jawaban').getContent();
    
    // Show loader
    $('#btn-text').addClass('d-none');
    $('#btn-loader').removeClass('d-none');
    $('#btn-submit').prop('disabled', true);
    
    // Create FormData object
    const formData = new FormData(this);
    
    // Update jawaban field with TinyMCE content
    formData.set('jawaban', jawabanContent);
    
    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        // Show success message
        showAlert('success', 'Data berhasil disimpan');
        
        // Redirect after a short delay
        setTimeout(function() {
          window.location.href = "{{route('whatsapp.index', ['status' => 'success', 'message' => 'Data berhasil disimpan'])}}";
        }, 2000);
      },
      error: function(xhr) {
        // Hide loader
        $('#btn-text').removeClass('d-none');
        $('#btn-loader').addClass('d-none');
        $('#btn-submit').prop('disabled', false);
        
        // Handle validation errors
        if (xhr.status === 422) {
          const errors = xhr.responseJSON.errors;
          
          // Clear previous error messages
          $('.error-required').text('');
          
          // Display new error messages
          if (errors.jawaban) {
            $('#jawaban').siblings('.error-required').text(errors.jawaban[0]);
          }
          
          showAlert('danger', 'Periksa kembali inputan Anda');
        } else {
          showAlert('danger', 'Terjadi kesalahan. Silakan coba lagi');
        }
      }
    });
  });
});
</script>
@endsection