@extends('layouts.app')

@section('content')
<div class="container">
  <div class="row text-center">
    <div class="col-xl-10 mx-auto">
      <h2 class="fs-15 text-uppercase text-muted mb-3">HALO MASBUP</h2>
      <h3 class="display-4 mb-10 px-xxl-15">Detail Laporan</h3>
    </div>
    <!-- /column -->
  </div>
  <!-- /.row -->
  <div class="row">
    <div class="col-xl-10 mx-auto">
      <div class="job-list mb-10">
        <h3 class="mb-4">RIWAYAT LAPORAN</h3>
        @foreach ($data_riwayat as $key => $riwayat)
        <div class="card">
          <div class="card-body">
          <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
              <div class="col-lg-4 order-lg-2 text-center">
                <figure><img class="w-auto" src="https://halomasbup.kedirikab.go.id/data_upload/{{$riwayat->lampiran}}" alt="" /></figure>
                <br>
                @if (is_null($riwayat->lampiran))
                <a target="_blank" href="https://halomasbup.kedirikab.go.id/data_upload/{{$riwayat->lampiran}}" class="btn btn-sm btn-primary btn-icon btn-icon-start rounded">
                  <i class="uil uil-image-download"> Download</i>
                </a>
                @else
                @endif
              </div>
              <!--/column -->
              <div class="col-lg-8">
                <div class="accordion accordion-wrapper" id="accordionEx_{{$riwayat->history_status_text}}">
                  <div class="card plain accordion-item">
                    <div class="card-header" id="heading1_{{$riwayat->history_status_text}}"> 
                      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapse1_{{$riwayat->history_status_text}}" aria-expanded="true" aria-controls="collapse1_{{$riwayat->history_status_text}}"> {{strtoupper($riwayat->history_status_text)}} - {{$riwayat->dinas}} </button>
                    </div>
                    <!--/.card-header -->
                    <div id="collapse1_{{$riwayat->history_status_text}}" class="accordion-collapse collapse show" aria-labelledby="heading1_{{$riwayat->history_status_text}}" data-bs-parent="#accordionEx_{{$riwayat->history_status_text}}">
                      <div class="card-body">
                        <p>
                          Pesan Admin : <br> <b>{!!$riwayat->catatan_eksekusi!!}</b>
                        </p>
                        <p>
                          Tanggal Laporan {{$riwayat->history_status_text}} : <br> <b>{{$riwayat->history_created_at}}</b>
                        </p>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!--/.accordion-collapse -->
                  </div>
                </div>
                <!--/.accordion -->
              </div>
              <!--/column -->
            </div>
          </div>
        </div>
        <br>
        @endforeach
      </div>
      <div class="job-list">
        <h3 class="mb-4">DETAIL</h3>
        <div class="card">
          <div class="card-body">
            <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
              <div class="col-lg-4 order-lg-2 text-center">
                <figure><img class="w-auto" src="https://halomasbup.kedirikab.go.id/data_upload/{{$gambar}}" alt="" /></figure>
                <br>
                @if (isset($gambar))
                <a target="_blank" href="https://halomasbup.kedirikab.go.id/data_upload/{{$gambar}}" class="btn btn-sm btn-primary btn-icon btn-icon-start rounded">
                  <i class="uil uil-image-download"> Download</i>
                </a>
                @else
                @endif
              </div>
              <!--/column -->
              <div class="col-lg-8">
                <h2 class="fs-25 text-uppercase text-line text-primary mb-3">#{{$data_detail->aduan_id}}</h2>
                <!-- <h3 class="display-5 mb-7"></h3> -->
                <div class="accordion accordion-wrapper" id="accordionExample">
                  <div class="card plain accordion-item">
                    <div class="card-header" id="headingOne">
                      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Profil </button>
                    </div>
                    <!--/.card-header -->
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                      <div class="card-body">
                        <p>
                          NIK : <br> <b>{{$data_detail->aduan_nik}}</b>
                        </p>
                        <p>
                          Nama Pelapor : <br> <b>{{$data_detail->aduan_nama}}</b>
                        </p>
                        <p>
                          Nomor Telepon : <br> <b>{{$data_detail->aduan_telp}}</b>
                        </p>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!--/.accordion-collapse -->
                  </div>
                  <!--/.accordion-item -->
                  <div class="card plain accordion-item">
                    <div class="card-header" id="headingTwo">
                      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Pesan Aduan </button>
                    </div>
                    <!--/.card-header -->
                    <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                      <div class="card-body">
                        <p>{{$data_detail->aduan_pesan}}</p>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!--/.accordion-collapse -->
                  </div>
                  <!--/.accordion-item -->
                  <div class="card plain accordion-item">
                    <div class="card-header" id="headingThree">
                      <button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Informasi Aduan </button>
                    </div>
                    <!--/.card-header -->
                    <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                      <div class="card-body">
                        <p>
                        Tangal Laporan Masuk : <br> <b>{{$data_detail->aduan_date}}</b>
                        </p>
                        <p>
                        Koordinat Lokasi : <br> <b>{{$data_detail->aduan_lat.' , '.$data_detail->aduan_lon}}</b>          
                        </p>
                        <a target="_blank" href="https://www.google.com/maps/search/?api=1&query={{$data_detail->aduan_lat}}%2C{{$data_detail->aduan_lon}}" class="btn btn-sm btn-primary btn-icon btn-icon-start rounded">
                          <i class="uil uil-map-marker"> Lihat Google Maps</i>
                        </a>
                      </div>
                      <!--/.card-body -->
                    </div>
                    <!--/.accordion-collapse -->
                  </div>
                  <!--/.accordion-item -->
                </div>
                <!--/.accordion -->
              </div>
              <!--/column -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /column -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->
@endsection

@section('script')
<script>

</script>
@endsection