@extends('home.home-template')

@section('css')
@endsection
@section('content')
    
  <main id="main">

    <!-- ======= Breadcrumbs ======= -->
    <section id="breadcrumbs" class="breadcrumbs">
      <div class="container">

        <ol>
          <li><a href="{{route('home')}}">Home</a></li>
          <li>Laporan</li>
          <li>{{$laporan->nomor_laporan}}</li>
        </ol>

      </div>
    </section><!-- End Breadcrumbs -->

    <!-- ======= Portfolio Details Section ======= -->
    <section id="portfolio-details" class="portfolio-details" style="background-color: #f3f5fa">
      <div class="container">

        <div class="row justify-content-center">

          <div class="col-lg-8">
            <div class="laporan">
              <h4>{{strtoupper($laporan->judul)}} </h4>
              <small>{{type($laporan->type_id)}} Kategori {{$laporan->kategori->kategori ?? ''}}</small>
              <hr>
                <div class="table-responsive">
                  <table class="table table-sm">
                    <tr>
                      <td>Nomor Laporan</td>
                      <th>
                        {{$laporan->nomor_laporan}}

                        @if(Auth::guard('admin')->check())
                          <br> <a href="{{route('admin.laporan.show',['id'=>$laporan->id])}}" class="btn btn-outline-primary btn-sm" target="_blank">Cek Laporan</a>
                        @elseif(Auth::guard('irban')->check())
                          @if (Auth::guard('irban')->user()->id == $laporan->irban_id)
                            <br> <a href="{{route('irban.laporan.show',['id'=>$laporan->id])}}" class="btn btn-outline-primary btn-sm" target="_blank">Cek Laporan</a>
                          @endif
                        @endif
                      </th>
                    </tr>
                    <tr><td>User</td><td>
                      @if ($laporan->user_id != null  && $laporan->sifat_id ==3)
                        <a href="{{route('home.profil.user',['username'=>$laporan->user->username])}}">{{$laporan->user->nama}}</a>
                      @elseif ($laporan->sifat_id == 1)
                        Rahasia
                      @elseif ($laporan->sifat_id == 2)
                        Anonim
                      @else
                        Dikirimkan Secara Public Tanpa Daftar
                      @endif
                    </td></tr>
                    <tr><td>Jenis</td><td>{{jenis($laporan->jenis_id)}}</td></tr>
                    <tr><td>Tanggal Kejadian</td><td>{{$laporan->tanggal_kejadian}}</td></tr>
                    <tr><td>Tempat Kejadian</td><td>{{$laporan->tempat_kejadian}}</td></tr>
                    <tr><td>Tanggal {{type($laporan->type_id)}}</td><td>{{tanggal_waktu($laporan->created_at)}}</td></tr>
                  </table>
                </div>
              <p class="laporan-body">{!!$laporan->isi!!}</p>
              @forelse ($laporan->lampiran()->get() as $lampiran)
              <hr>
                <a href="{{asset('/storage/'.$lampiran->lampiran_path)}}" target="_blank">
                    <img src="{{asset('/storage/'.$lampiran->lampiran_path)}}" alt="" style="max-width: 100px">
                </a>
              @empty
                
              @endforelse

              @if (Auth::guard('user')->check())
                @if (Auth::guard('user')->user()->id == $laporan->user_id && $laporan->status_id != 9  && $laporan->status_id != 10)
                  <hr><a href="{{route('home.laporan.close',['slug'=>$laporan->slug])}}" class="btn btn-outline-danger btn-block">Tutup Laporan</a>
                @endif
              @endif
              <hr>
              <div class="laporan-footer">
                 <div  style="float: right">
                    <button onclick="dukung()" id="btnDukungan" class="btn {{$isLike == 1 ? 'btn btn-outline-primary': 'btn-outline-secondary'}}"><i class="fa fa-thumbs-up fa-fw fa-lg m-r-3"></i> <span id="countDukungan">{{$dukungan}}</button>
                    <button onclick="komentar()" id="btnKomentar" class="btn btn-outline-secondary">
                    <i class="fa fa-comments fa-fw fa-lg m-r-3"></i> {{count($komentars)}} 
                    </button>
                 </div>
                 <div class="d-none d-sm-block">
                    {{$laporan->views}} Views
                 </div>
              </div>
           </div>

           <div id="komentar-form" class="">
              @if (Auth::check())
                @if (in_array($laporan->status_id, App\Models\Status::LAPORANOPENKOMENTAR))
                  <form action="{{route('user.laporan.komentar.store')}}" method="POST" enctype="multipart/form-data">@csrf
                    <input type="hidden" name="laporan_id" value="{{$laporan->id}}">
                    <div class="row mb-3">
                      <div class="col-12">
                        <textarea name="komentar" id="" cols="30" placeholder="Tulis Komentar" class="form-control" required></textarea>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6">
                        <input type="file" class="form-control" name="file" accept="image/png,image/jpeg,application/pdf,application/vnd.ms-excel" >
                      </div>
                      <div class="col-sm-6">
                        <button class="btn btn-primary" style="width: 100%"  type="submit">Kirim</button>
                      </div>
                    </div>
                  </form>
                @else
                
                @endif

              @else
                Silahkan Login Terlbih Dahulu <a href="{{route('user.login')}}" class="btn btn-link">Login </a>
              @endif
            </div>

            <br><br>
            @foreach ($komentars as $komentar)
            <div class="member d-flex align-items-start">
              <div class="pic"><img src="{{asset('images/gapura.png')}}" width="64px" class="img-fluid mr-5"  alt=""></div>
              <div class="member-infos">
                <b>{{$komentar->user->nama ?? 'Anonim'}}</b><br>
                <small> {{tanggal_waktu($komentar->created_at)}}</small>
                <p>{{$komentar->komentar}}</p>
                @if ($komentar->file != null)
                    <a href="{{asset('/storage/'.$komentar->file)}}" target="_blank"><img src="{{asset('/storage/'.$komentar->file)}}" alt="" style="max-width: 100px"> <br>Lampiran</a>
                @endif
              </div>
            </div>
            <hr>
            @endforeach
          

        </div>

        <div class="col-lg-4 p-3" >
          
          <div class="row d-flex justify-content-center">
            <div class="col-md-12">
                <div class="main-card mb-3">
                    <div class="card-body">
                        <div class="vertical-timeline vertical-timeline--animate vertical-timeline--one-column">
                            
                          @foreach ($logs as $log)
                            <div class="vertical-timeline-item vertical-timeline-element">
                                <div> 
                                  <span class="vertical-timeline-element-icon bounce-in" style="color: {{$log->status->color}}">
                                    <i class="fa fa-dot-circle-o fa-fw fa-lg m-r-3"></i> 
                                  </span>
                                  <div class="vertical-timeline-element-content bounce-in">
                                      <h4 class="timeline-title">{{$log->status->name}}</h4>
                                      <p>{!!$log->log!!}</p>
                                      @foreach ($log->lampiran()->get() as $lLog)
                                      <a class="btn btn-link" href="{{asset('/storage/'.$lLog->lampiran_path)}}" target="_blank">
                                        <img src="{{asset('/storage/'.$lLog->lampiran_path)}}" alt="{!!$log->log!!}" style="max-width: 100px">
                                      </a>
                                      @endforeach
                                       <span class="vertical-timeline-element-date">{{hari_tanggal($log->created_at, false)}}</span>
                                  </div>
                                </div>
                            </div>
                          @endforeach

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

      </div>
    </section><!-- End Portfolio Details Section -->

  </main><!-- End #main -->

@endsection
@section('script')
  @if (Auth::check())
  <script>
    function dukung() {
      $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
      $.ajax({
        type: 'POST',
        url: "{{route('user.laporan.dukung')}}",
        data: {laporan_id: '{{$laporan->id}}'}
      }).then(function(data){
        // boostrap_code
        var contDukung = parseInt($("#countDukungan").text());
        if (data.kode == '01') {
          $("#btnDukungan").addClass("btn-outline-secondary")
          $("#btnDukungan" ).removeClass("btn-outline-primary");
          $("#countDukungan").html(contDukung - 1) 
        }else{
          // console.log(data)
          $("#btnDukungan").addClass("btn-outline-primary")
          $("#btnDukungan" ).removeClass("btn-outline-secondary");
          $("#countDukungan").html(contDukung + 1) 
        }

      });
    }
    // $("#komentar-form").hide();
    function komentar() {
      if ($("#komentar-form").is(":visible")){
        $("#komentar-form").hide();
        $("#btnKomentar").addClass("btn-outline-secondary")
        $("#btnKomentar" ).removeClass("btn-outline-primary");
      }else{
        $("#komentar-form").show();
        $("#btnKomentar").addClass("btn-outline-primary")
        $("#btnKomentar" ).removeClass("btn-outline-secondary");
      }
    }
  </script>
  @else
  <script>
    function dukung() {
      window.location='{{route('user.login')}}' 
    }
    $("#komentar-form").hide();
    function komentar() {
      window.location='{{route('user.login')}}' 
    }
  </script>
  @endif
@endsection