@extends('irban.irban-template')
@section('title', $title)
@section('css')
  <link href="{{asset('vendor/yoraui/vendors/quill/quill.snow.css')}}" rel="stylesheet">
  <link rel="stylesheet" href="{{asset('vendor/yoraui/vendors/lightgallery/css/lightgallery.css')}}">
@endsection

@section('content')

  <div class="content-wrapper">

    <div class="dashboard-header d-flex flex-column grid-margin">
      <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom pb-3 mb-3">
        <div class="d-flex align-items-center">
          <h4 class="mb-0 font-weight-bold">{{$title}}</h4>
          <div class="d-none ml-3 mt-2 d-md-flex">
            <p class="text-muted mb-0 tx-13 cursor-pointer">Home</p>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <a href="{{route('irban.laporan.semua')}}" class="text-muted mb-0 tx-13 cursor-pointer">Laporan</a>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <p class="text-muted mb-0 tx-13 cursor-pointer">{{$laporan->nomor_laporan}}</p>
          </div>
        </div>
        <div class="button-wrapper d-flex align-items-center mt-md-3 mt-xl-0">
          
        </div>
      </div>
    </div>


    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-3">
              <div class="card-body">
                <div class="float-right">
                  <a href="{{route('home.laporan.show',['slug'=>$laporan->slug])}}" class="btn btn-outline-primary">Show Home</a>
                </div>
                <b>Detail Laporan</b><br>
                <p class="mb-4">Keterangan mengenail laporan </p>

                <div class="table-responsive">
                  <table class="table table-sm">
                    <tr><td>Nomor Laporan</td><th>{{$laporan->nomor_laporan}}</th></tr>
                    <tr><td>User</td><th>{{$laporan->user->nama ?? 'Dikirimkan Secara Public Tanpa Daftar'}}</th></tr>
                    <tr><td>Judul</td><th>{{$laporan->judul}}</th></tr>
                    <tr><td>Kategori</td><th>{{$laporan->kategori->kategori}}</th></tr>
                    <tr><td>Jenis</td><th>{{jenis($laporan->jenis_id)}}</th></tr>
                    <tr><td>Type</td><th>{{type($laporan->type_id)}}</th></tr>
                    <tr><td>Sifat</td><th>{{sifat($laporan->sifat_id)}}</th></tr>
                    <tr><td>NIP</td><th>{{$laporan->nip}}</th></tr>
                    <tr><td>Tanggal Kejadian</td><th>{{$laporan->tanggal_kejadian}}</th></tr>
                    <tr><td>Tempat Kejadian</td><th>{{$laporan->tempat_kejadian}}</th></tr>
                    <tr><td>Status Terakhir</td><th>{{status($laporan->status_id)}} ({{$laporan->status_id}})</th></tr>
                    <tr><td>Disposisi</td><th>{{$laporan->irban->nama ?? 'Belum Disposisikan'}}</th></tr>
                    <tr><td>Admin</td><th>{{$laporan->admin->nama ?? 'Belum di Proses Admin'}}</th></tr>
                    <tr><td>Total Dukungan</td><th>{{$laporan->total_dukungan}}</th></tr>
                    <tr><td>Total Komentar</td><th>{{$laporan->total_komentar}}</th></tr>
                  </table> 
                </div>
              </div>
            </div>
            
            <div class="card mb-3">
              <div class="card-body">
                <b>Komentar</b><hr>
                @foreach ($komentars as $komentar)
                <div class="d-flex align-items-start profile-feed-item">
                  <img src="{{asset($komentar->user->foto)}}" alt="profile" class="img-sm rounded-circle"/>
                  <div class="ml-4">
                    <h6>{{$komentar->user->nama}}
                    </h6>
                    <small class="text-muted"><i class="mdi mdi-clock mr-1"></i>{{hari_tanggal_waktu($komentar->created_at, true)}}</small>
                    <p>{{$komentar->komentar}}</p>
                  </div>
                </div>
                @endforeach
              </div>
            </div>
            
            <div class="card mb-3">
              <div class="card-body">
                <b>Isi Laporan</b> <hr>
                {!!$laporan->isi!!}
                <hr>
                @foreach ($laporan->lampiran()->get() as $lampiran)
                    <a href="{{asset('/storage/'.$lampiran->lampiran_path)}}" target="_blank"><img src="{{asset('/storage/'.$lampiran->lampiran_path)}}" alt="" style="max-width: 100px"> <br>Lampiran</a>
                @endforeach
              </div>
            </div>

            

            @if (in_array($laporan->status_id,[3]))
            <div class="card mb-3">
              <div class="card-body">
                <b>Tindak Lanjut</b>
                <p class="mb-4">Sampaikan Penolakan Ketidak Sesuaian atau Konfirmasi Penerimaan Laporan</p>

                <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home-1" role="tab" aria-controls="home-1" aria-selected="true">Konfirmasi Laporan</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="dialihkan-tab" data-toggle="tab" href="#dialihkan-1" role="tab" aria-controls="dialihkan-1" aria-selected="false">Laporan Dialihkan</a>
                  </li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab">
                    <form action="{{route('irban.laporan.konfirmasi',['id'=>$laporan->id])}}" method="post">
                      @csrf @method('put')
                      <button type="submit" class="btn btn-primary btn-block">Konfirmasi Penerimaan Laporan</button>
                    </form>
                  </div>
                  <div class="tab-pane fade" id="dialihkan-1" role="tabpanel" aria-labelledby="dialihkan-tab">
                    <form action="{{route('irban.laporan.dialihkan',['id'=>$laporan->id])}}" method="post">
                      @csrf @method('put')
                      <textarea name="alasan" id="" rows="10" class="form-control" placeholder="Sampaikan Alasan"></textarea><br>
                      <button type="submit" class="btn btn-primary btn-block">Kirim Alasan Pengalihan</button>
                    </form>
                  </div>
                </div>
                
              </div>
            </div>
            @endif

            @if (in_array($laporan->status_id,[5,7,8]))
            <div class="card mb-3">
              <div class="card-body">
                <b>Lengkapi Pernyataan Pembuktian</b><hr>
                <p class="mb-3">Lengkapi pembuktian tindakan yang sudah dilakukan terkait laporan. Anda Dapat Memberikan Lebih Dari 1 Pernyataan. Semua Pernyataan Akan Tercatat Pada Logs Laporan</p>


                <form id="pernyataan-send" action="{{route('irban.laporan.dibuktikan',['id'=>$laporan->id])}}" enctype="multipart/form-data" method="post">
                      @csrf @method('put')
                      <input type="hidden" id="pernyataan" name="pernyataan">
                      <div id="editor" style="height: 150px; margin-bottom: 20px"></div>
                      <input type="file" name="files[]" id="" class="form-control" accept="image/*" multiple><br>
                </form>
                <button onclick="send()" class="btn btn-primary btn-block">Kirimkan</button>
                   
              </div>
            </div>
            @endif

            @if (in_array($laporan->status_id, [5, 7,8]))
            <div class="card mb-3">
              <div class="card-body">
                <b>Tahan Laporan</b><hr>
                @if (in_array($laporan->status_id, [7,8]))
                  <p>Anda Telah Melakukan Penahanan Laporan, Laporan ini tidak akan expired / Terabaikan</p>
                @elseif ($laporan->status_id == 5)
                <form action="{{route('irban.laporan.diproses',['id'=>$laporan->id])}}" method="post">
                  @csrf @method('put')
                  <p>Laporan akan secara otomatis menjadi TERABAIKAN jika lebih dari {{env('EXPIRED_LAPORAN_TERABAIKAN',10)}} Hari. Lakukan tindakan Tahan Laporan Untuk Memberikan Waktu Lebih Lama. Laporan tidak akan terabaikan dengan klik tombol dibawah ini</p>
                  <button type="submit" class="btn btn-primary">Tahan Laporan Lebih lama</button>
                </form>
                @endif
              </div>
            </div>
            
            @endif

            

        </div>

        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Logs </h4>
              <ul class="bullet-line-list pt-2 mb-0">
                @foreach ($logs as $log)
                <li>
                  <h6>{{$log->status->name}}</h6>
                  <p>{!!$log->log!!}</p>
                  <div class="lightgallery-without-thumb" class="row lightGallery">
                    @foreach ($log->lampiran()->get() as $lLog)
                    <a href="{{asset('/storage/'.$lLog->lampiran_path)}}" class="image-tile">
                      <img src="{{asset('/storage/'.$lLog->lampiran_path)}}" alt="{!!$log->log!!}" style="max-width: 100px">
                    </a>
                  @endforeach
                  </div>
                  <p class="text-muted mb-3 tx-12"><i class="mdi mdi-clock-outline"></i> {{hari_tanggal_waktu($log->created_at, true)}}</p>
                </li>
                @endforeach
              </ul>
          </div>
          </div>
        </div>

    </div>
  </div>
@endsection

@section('script')
<script src="{{asset('vendor/yoraui/vendors/quill/quill.min.js')}}"></script>
<script src="{{asset('vendor/yoraui/vendors/lightgallery/js/lightgallery-all.min.js')}}"></script>
<script>
  var editor = new Quill('#editor', {
    placeholder: 'Sampaikan Pernyataan Telah Melakukan Tindak Lanjut Laporan ',
    theme: 'snow'
  });

  function send() {
    var quillHtml = editor.root.innerHTML.trim();
    // console.log(quillHtml);
    if (quillHtml == '<p><br></p>') {
      alert('Anda Belum Mengisi Tindakan Pelaporan')
      $( "#editor" ).addClass( "is-invalid" );
    }else{
      $("#pernyataan").val(quillHtml);
      document.getElementById('pernyataan-send').submit();
    }
  }

  (function($) {
  'use strict';
  
  if ($(".lightgallery-without-thumb").length) {
    $(".lightgallery-without-thumb").lightGallery({
      thumbnail: true,
      animateThumb: false,
      showThumbByDefault: false
    });
  }

})(jQuery);
</script>


@endsection