@extends('layouts.layout-user')
@section('content')
<table id="table-register" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th colspan="5">
                <h2 style="display: inline-block; margin-right: 10px;">Data Informasi</h2>
                <span style="margin:1%; float: right;"></span>
                <form class="w-72" action="{{route('informasi.adminIndex')}}" 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>
                <a href="{{ route('informasi.adminCreate') }}" class="btn btn-primary btn-delete" style="float: left; margin-top:1%;">Buat Informasi</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</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Kategori Informasi</th>
            <th style="vertical-align: middle; color: white; text-align: center; padding: 10px;">Foto</th>
            <th style="vertical-align: middle; text-align: center; color: white; padding: 10px;">Action</th>
        </tr>


    </thead>
    <!-- Isi tabel -->
    <tbody>
        @php
            $i=1;
        @endphp
        @if($informasis->count() >0)
         @foreach ($informasis as $informasi)
         <tr>
             <td style="text-align: center; vertical-align: middle;">{{ $i++ }}</td>
             <td style="text-align: center; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10em;">{{ $informasi->judul }}</td>
             <td style="text-align: center; vertical-align: middle;">
                {{ $informasi->kategori }}
             </td>
             <td style="text-align: center; vertical-align: middle;"><img src="{{ asset('foto/' . $informasi->foto) }}" alt="Foto Pelaporan" style="width: 100px; height: 100px; object-fit: cover;"></td>
             <td style="text-align: center; vertical-align: middle;">
                 <div style="display: flex; justify-content: center;">
                    <a href="{{ route('informasi.adminEdit', ['id' => $informasi->id]) }}" class="btn  btn-delete" style="background-color: rgb(0, 106, 255); color: #fff; border: none; border-radius: 4px; cursor: pointer;">Update</a>
                    <div style="width: 20px;"></div> <!-- Separator -->
                     <a href="{{ route('informasi.adminDestroy', ['id' => $informasi->id]) }}" class="btn  btn-delete"  style=" background-color: red; color: #fff; border: none; border-radius: 4px; cursor: pointer;">Delete</a>
                 </div>
             </td>
         </tr>
        @endforeach
     @else
            <tr>
                <td class="text-center" colspan="5">Informasi not found</td>
            </tr>
        @endif
    </tbody>
</table>
@endsection