@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('complaint.index')}}">Pengaduan</a></li>
          <li class="breadcrumb-item active">Detail Pengaduan</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <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" >Detail Pengaduan</h5>
            
              <!-- Multi Columns Form -->
              <form class="row g-3" id="form-complaint" method="post" action="{{route('complaint.save', @$pengaduan->id)}}">
              @csrf
                <div class="col-md-6">
                  <label for="inputName5" class="form-label">Nama</label>
                  <input type="text" class="form-control" id="nama" name="nama" value="{{@$pengaduan->nama_pelapor}}" placeholder="Masukkan Nama" disabled>
                </div>
                <div class="col-md-6">
                  <label for="inputJkel" class="form-label">Jenis Kelamin</label>
                 <select class="form-control" id="jenis_kelamin" name="jenis_kelamin" disabled>
                    <option value="L" {{ @$pengaduan->jenis_kelamin == 'L' ? 'selected' : '' }}>Laki-laki</option>
                    <option value="P" {{ @$pengaduan->jenis_kelamin == 'P' ? 'selected' : '' }}>Perempuan</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label for="inputUmur" class="form-label">Umur Pelapor</label>
                  <input type="number" class="form-control" id="umur" name="umur" value="{{@$pengaduan->umur}}" placeholder="Masukkan Umur" disabled>
                </div>
                 <div class="col-md-4">
                  <label for="inputUmur" class="form-label">NIK Pelapor</label>
                  <input type="text" class="form-control" id="nik_pelapor" name="nik_pelapor" value="{{@$pengaduan->nik_pelapor}}" placeholder="Masukkan NIK" disabled>
                </div>
                <div class="col-md-4">
                  <label for="inputEmail5" class="form-label">Email Pelapor</label>
                  <input type="email" class="form-control" id="email" name="email_pelapor" value="{{@$pengaduan->email_pelapor}}" placeholder="Masukkan Email" disabled>
                  <input type="hidden" name="email_hidden" value="{{@$pengaduan->email_pelapor}}">
                </div>
                
                
                <div class="col-md-8">
                  <label for="inputEmail5" class="form-label">Alamat Pelapor</label>
                  <input type="text" class="form-control" id="alamat_pelapor" name="alamat_pelapor" value="{{@$pengaduan->alamat_pelapor}}" placeholder="Masukkan Alamat Pelapor" disabled>
                </div>
                <div class="col-md-4">
                  <label for="inputEmail5" class="form-label">No HP</label>
                  <input type="text" class="form-control" id="nohp" name="nohp" value="{{@$pengaduan->nohp_pelapor}}" placeholder="Masukkan No Hp" disabled>
                </div>
                <div class="col-md-12">
                  <label for="inputEmail5" class="form-label">Terlapor</label>
                  <input type="text" class="form-control" id="terlapor" name="terlapor" value="{{@$pengaduan->terlapor}}" disabled>
                </div>
                <div class="col-md-12">
                  <label for="inputEmail5" class="form-label">Perihal Pengaduan</label>
                  <input type="hidden" class="form-control" id="pertanyaan_hidden" name="pertanyaan_hidden" value="{{@$pengaduan->perihal_pengaduan}}">
                  <input type="text" class="form-control" name="perihal_pengaduan" value="{{@$pengaduan->perihal_pengaduan}}" disabled>
                </div>
                <div class="col-md-12">
                  <label for="inputEmail5" class="form-label">Deskripsi Pengaduan</label>
                  <textarea name="deskripsi_pengaduan" class="form-control editor-deskripsi_pengaduan" id="deskripsi_pengaduann">{{@$pengaduan->deskripsi_pengaduan}}</textarea>
                  @if ($errors->has('deskripsi_pengaduan'))
                    <small class="error-required">{{ $errors->first('deskripsi_pengaduan') }}</small>
                  @endif
                </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('jawaban'))
                    <small class="error-required text-danger">{{ $errors->first('jawaban') }}</small>
                  @endif
                </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('complaint.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-deskripsi_pengaduan',
      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')
          }
  });
  
  // Handle form submission with AJAX
  $('#form-complaint').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('complaint.index')}}";
        }, 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');
        }
      }
    });
  });
  
  // Function to show alert
  function showAlert(type, message) {
    // Remove any existing alerts
    $('.alert').remove();
    
    // Create new alert
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const alert = `<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>`;
    
    // Insert alert at the top of the card body
    $('.card-body').prepend(alert);
  }
});
</script>
@endsection