@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('template/assets/css/widgets/chat.css') }}">
<div class="page-heading">
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-12 order-md-1 order-last">
                <h3>Komentar Pengaduan</h3>
                <p class="text-subtitle text-muted"></p>
            </div>
            <div class="col-12 col-md-12 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Chatbox</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="media d-flex align-items-center">
                            <div class="avatar me-3">
                                <img src="{{ asset('template/assets/images/faces/1.jpg') }}" alt="" srcset="">
                                <span class="avatar-status bg-success"></span>
                            </div>
                            <div class="name flex-grow-1">
                                <h6 class="mb-0">{{ $pengaduan->judul }}</h6>
                                <span class="text-xs"></span>
                            </div>
                            
                        </div>
                    </div>
                    <div class="card-body pt-4 bg-grey">
                        <div class="chat-content">
                            @foreach ($rows as $row)
                            <div class="chat @if(auth()->user()->username != $row->nik) chat-left @endif">
                                <div class="chat-body">
                                   <div class="chat-message">
                                        <b>@if(auth()->user()->username != $row->nik) {{ $row->nama }} @else YOU @endif</b><br>
                                        {{ $row->komentar }}<br>
                                        @if($row->lampiran != "") 
                                            <img class="img-responsive d-block" src="{{ $row->full_path }}" width="200"><br>
                                        @endif
                                        @if(auth()->user()->username == $row->nik)
                                        <div class="d-block">
                                            <button class="btn btn-info btn-sm" onclick="tambahData({{ $row->id }})"><i class="fa fa-edit"></i></button>
                                            <button class="btn btn-danger btn-sm" onclick="deleteData({{ $row->id }})"><i class="fa fa-trash"></i></button>
                                        </div>
                                        @endif
                                        <div class="float-end"><i style="font-size:9px"><b>{{ $row->tanggal }}</b></i></div>
                                  </div>
                                </div>
                            </div>    
                            @endforeach
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="message-form d-flex flex-direction-column align-items-right">
                           <button class="btn btn-primary" onclick="tambahData(0)"><i class="fa fa-plus"></i> TAMBAH DATA</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">FORM KOMENTAR</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body modal-body-1">
          <form id="fm" method="post" enctype="multipart/form-data" required>
            <input type="hidden" name="id" value="0" id="form-id">
            <input type="hidden" name="pengaduan_id" value="{{ $pengaduan->id }}" id="form-id-pengaduan">
            <div class="form-group">
                <label>Komentar</label>
                <textarea class="form-control" name="komentar" id="komentar"></textarea>
            </div>
            <div class="form-group">
                <label>Lampiran</label>
                <input class="form-control" type="file" id="formFile" name="file" accept="image/*">
            </div>   
            
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="saveData()" ><i class="fa fa-save"></i> SIMPAN</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" ><i class="fa fa-times"></i> TUTUP</button>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
    function tambahData(id)
    {
        $('#form-id').val(id);
        if(id != 0) {
            $.get("{{ url('pengaduan/row-komentar') }}",{id:id}).done(resp => {
                $('#komentar').val(resp.komentar);
            })
        }
        $('#modal-form').modal('show');
    }

    function saveData()
    {
       
        var formData = new FormData($('#fm')[0]);
        Notiflix.Block.hourglass('body');
        $.ajax({
            type: 'POST',
            url: "{{ url('pengaduan/save-komentar') }}",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                Notiflix.Block.remove('body');
                if(data.error == false) {
                    Notiflix.Notify.success("Data Berhasil disimpan");
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                    
                } else {
                    alert(data.message);
                }
            },
            error: function(xhr, status, error) {
                Notiflix.Block.remove('body');
                alert(error);
            }
        });
        
    }

    function deleteData(id)
    {
       
        Notiflix.Confirm.show("KONFIRMASI","Apakah yakin akan menghapus data ini?","YA","TIDAK",() => {
            $.post("{{ url('pengaduan/delete-komentar') }}",{id,id}).done(resp => {
                if (resp.error == false) {
                    Notiflix.Notify.success("Data Berhasil dihapus");
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    Notiflix.Notify.failure(resp.message);
                }
            }).fail(err => {
                Notiflix.Notify.failure(err.responseText);
            })
        })
    }
</script>
@endpush