@extends('layouts.layout-user')
@section('content')

<table id="table-register" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th colspan="9">
                <h2 style="display: inline-block; margin-right: 10px;">Data Riwayat Pelaporan</h2>
                <span style="margin:1%; float: right;"></span>
                <form class="w-72" action="{{route('riwayat.index')}}" method="GET">
                    <div class="input-group input-group-merge" style="max-width: 300px">
                        <span class="input-group-text" id="basic-addon-search31"><i class="fa fa-search"></i></span>
                        <input name="search" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search31"></input>
                    </div>
                </form>
                <form action="{{route('riwayat.index')}}" method="GET" class="w-72" style="margin-top:2%;">
                    <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px;">
                        <div style="display: flex; flex-direction: column; margin-right: 5px;">
                            <label for="startDate" style="text-align: left; margin-bottom: 5px;">Start Date:</label>
                            <input type="date"  name="startDate" style="padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
                        </div>
                        <div style="display: flex; flex-direction: column; align-self: flex-end;">
                            <label for="endDate" style="text-align: left; margin-bottom: 5px;">End Date:</label>
                            <input type="date"  name="endDate" style="padding: 8px; border-radius: 5px; border: 1px solid #ccc;">
                        </div>
                        <div style="display: flex; flex-direction: column; align-self: flex-end; margin-left: 5px;">
                            <div style="margin-left:2%; margin-top:2%; margin-right:2%">
                                <button type="submit" value="Filter" class="btn btn-delete" style="padding: 8px 16px; background-color: #4CAF50; color: #fff; border: none; border-radius: 3px; cursor: pointer;">Filter</button>
                            </div>
                        </div>

                    </div>
                </form>
                <a href="{{ route('riwayat.cetak') }}" target="_blank" class="btn btn-primary  btn-delete" style="float: left; margin-top:0%;">Cetak Semua</a>

            </th>
        </tr>
        <tr style="background-color: #155dfa;">
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">No</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Judul Laporan</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Keterangan Laporan</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Tanggal Dibuat</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Lokasi</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Tingkat Bahaya</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Status Tindakan</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Saran Tindakan</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Foto</th>
        </tr>


    </thead>
    <!-- Isi tabel -->
    <tbody>
        @php
            $i=1;
        @endphp
        @if($riwayatPelaporan->count() >0)
            @foreach ($riwayatPelaporan as $riwayatPelaporan)
            <tr>
                <td style="text-align: center; vertical-align: middle;">{{ $i++ }}</td>
                <td style="text-align: center; vertical-align: middle;">{{$riwayatPelaporan->judul}}</td>
                <td style="text-align: center; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10em;">{{$riwayatPelaporan->keterangan}}</td>
                <td style="text-align: center; vertical-align: middle;">{{$riwayatPelaporan->tanggal}}</td>
                <td style="text-align: center; vertical-align: middle;">{{$riwayatPelaporan->lokasi}}</td>
                <td style="text-align: center; vertical-align: middle;">
                    <div style="
                        @if ($riwayatPelaporan->status === 'Ringan')
                            background-color: #1593fa; /* Biru Muda */
                            width: 80px; /* Ganti nilai width sesuai kebutuhan */
                            height: 30px; /* Ganti nilai height sesuai kebutuhan */
                            border-radius: 10px; /* Membuat sudut bulat dengan radius 10px */
                            display: flex; /* Menggunakan flexbox */
                            justify-content: center; /* Pusatkan secara horizontal */
                            align-items: center; /* Pusatkan secara vertikal */
                            font-weight: bold; /* Teks tebal */
                            color: white; /* Warna teks putih */
                        @elseif ($riwayatPelaporan->status === 'Sedang')
                            background-color: rgb(156, 196, 54); /* Kuning Muda */
                            width: 80px; /* Ganti nilai width sesuai kebutuhan */
                            height: 30px; /* Ganti nilai height sesuai kebutuhan */
                            border-radius: 10px; /* Membuat sudut bulat dengan radius 10px */
                            display: flex; /* Menggunakan flexbox */
                            justify-content: center; /* Pusatkan secara horizontal */
                            align-items: center; /* Pusatkan secara vertikal */
                            font-weight: bold; /* Teks tebal */
                            color: white; /* Warna teks putih */
                        @elseif ($riwayatPelaporan->status === 'Berat')
                            background-color: rgba(219, 71, 71, 0.799); /* Merah Muda */
                            width: 80px; /* Ganti nilai width sesuai kebutuhan */
                            height: 30px; /* Ganti nilai height sesuai kebutuhan */
                            border-radius: 10px; /* Membuat sudut bulat dengan radius 10px */
                            display: flex; /* Menggunakan flexbox */
                            justify-content: center; /* Pusatkan secara horizontal */
                            align-items: center; /* Pusatkan secara vertikal */
                            font-weight: bold; /* Teks tebal */
                            color: white; /* Warna teks putih */
                        @else
                            background-color: #ffffff; /* Default, putih */
                        @endif
                    ">
                        • {{ $riwayatPelaporan->status }}
                    </div>
                </td>
                <td style="text-align: center; vertical-align: middle;">
                    <div style="
                         @if ($riwayatPelaporan->tindakan->statusTindakan  === 'Belum ditindak')
                                background-image: linear-gradient(to right, #0867E9, #6BA3F0);
                                width: 150px; /* Ganti nilai width sesuai kebutuhan */
                                height: 30px; /* Ganti nilai height sesuai kebutuhan */
                                border-radius: 10px; /* Membuat sudut bulat dengan radius 10px */
                                display: flex; /* Menggunakan flexbox */
                                justify-content: center; /* Pusatkan secara horizontal */
                                align-items: center; /* Pusatkan secara vertikal */
                                font-weight: bold; /* Teks tebal */
                                color: white; /* Warna teks putih */
                         @elseif ($riwayatPelaporan->tindakan->statusTindakan  === 'Diverifikasi')
                                background-image: linear-gradient(to right, #F76D2E, #EEA45D);
                                width: 150px; /* Ganti nilai width sesuai kebutuhan */
                                height: 30px; /* Ganti nilai height sesuai kebutuhan */
                                border-radius: 10px; /* Membuat sudut bulat dengan radius 10px */
                                display: flex; /* Menggunakan flexbox */
                                justify-content: center; /* Pusatkan secara horizontal */
                                align-items: center; /* Pusatkan secara vertikal */
                                font-weight: bold; /* Teks tebal */
                                color: white; /* Warna teks putih */
                         @elseif ($riwayatPelaporan->tindakan->statusTindakan  === 'Ditindak lanjuti')
                                background-image: linear-gradient(to right, #F84B67, #F86E85);
                                width: 150px; /* Ganti nilai width sesuai kebutuhan */
                                height: 30px; /* Ganti nilai height sesuai kebutuhan */
                                border-radius: 10px; /* Membuat sudut bulat dengan radius 10px */
                                display: flex; /* Menggunakan flexbox */
                                justify-content: center; /* Pusatkan secara horizontal */
                                align-items: center; /* Pusatkan secara vertikal */
                                font-weight: bold; /* Teks tebal */
                                color: white; /* Warna teks putih */
                         @elseif ($riwayatPelaporan->tindakan->statusTindakan === 'Selesai')
                                background-image: linear-gradient(to right, #08976B, #47D5A7);
                                width: 150px; /* Ganti nilai width sesuai kebutuhan */
                                height: 30px; /* Ganti nilai height sesuai kebutuhan */
                                border-radius: 10px; /* Membuat sudut bulat dengan radius 10px */
                                display: flex; /* Menggunakan flexbox */
                                justify-content: center; /* Pusatkan secara horizontal */
                                align-items: center; /* Pusatkan secara vertikal */
                                font-weight: bold; /* Teks tebal */
                                color: white; /* Warna teks putih */
                         @endif
                     ">
                         • {{ $riwayatPelaporan->tindakan->statusTindakan }}
                     </div>
                </td>
                <td style="text-align: center; vertical-align: middle; max-width: 10em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                    {{$riwayatPelaporan->saran}}
                </td>
                <td style="text-align: center; vertical-align: middle;"><img src="{{ asset('foto/' . $riwayatPelaporan->foto) }}" alt="Foto Pelaporan" style="width: 100px; height: 100px; object-fit: cover;"></td>
            </tr>
            @endforeach
            <!-- Tambahkan baris sesuai data yang ada -->
        @else
            <tr>
                <td class="text-center" colspan="8">Laporan not found</td>
            </tr>
        @endif
    </tbody>
</table>

@endsection