@use('Illuminate\Support\Facades\Storage')
<div class="table-responsive" >
    <table class="table table-striped" id="data-table" style="height: 100px;">
        <thead>
            <tr>
                <th>No</th>
                
                    <th class="align-middle">Nis</th>
                    <th class="align-middle">Penerima</th>
                    <th class="align-middle">Judul</th>
                    <th class="align-middle">Pesan</th>
                    <th class="align-middle">Foto</th>
                    <th class="align-middle">Pengirim</th>
                    <th class="align-middle">Waktu Kirim</th>
                <th class="text-center">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($notifikasi as $row)
                <tr>
                    <td>{{ $loop->iteration + ($notifikasi->currentPage() - 1) * $notifikasi->perPage() }}</td>
                    
                    <td>{{ $row?->users->username }}</td>
                    <td>{{ $row?->users->name }}</td>
                    <td>{{ $row?->judul }}</td>
                    <td>{{ $row?->pesan }}</td>
                    <td>
                        @if ($row?->foto)
                            <a href="{{ Storage::disk('uploads')->url($row->foto) }}" target="_blank">
                                <img src="{{ Storage::disk('uploads')->url($row->foto) }}"
                                    alt="Foto"
                                    class="rounded"
                                    style="height:48px; width:48px; object-fit:cover; cursor:pointer;"
                                    data-bs-toggle="tooltip"
                                    data-bs-title="Klik untuk lihat foto">
                            </a>
                        @else
                            <span class="text-muted small">—</span>
                        @endif
                    </td>
                    <td>{{ $row?->pengirim }}</td>
                    <td>{{ $row?->created_at->format('d-m-Y H:i:s') }}</td>
                    <td class="text-center">
                        <div class="btn-group" role="group">
                            @can('notifikasi view')
                                <div class="me-1">
                                    <a href="{{ route('notifikasi.show', $row) }}"
                                        class="btn btn-icon btn-outline-info btn-sm"
                                        data-bs-toggle="tooltip"
                                        data-bs-title="Detail"
                                        data-bs-placement="top">
                                        <span class="bx bx-show"></span>
                                    </a>
                                </div>
                            @endcan
                            @can('notifikasi edit')
                                <div class="me-1">
                                    <a href="{{ route('notifikasi.edit', $row) }}"
                                        class="btn btn-icon btn-outline-primary btn-sm"
                                        data-bs-toggle="tooltip" data-bs-title="Edit"
                                        data-bs-placement="top">
                                        <span class="bx bx-pencil"></span>
                                    </a>
                                </div>
                            @endcan
                            @can('notifikasi delete')
                                <form action="{{ route('notifikasi.destroy', $row) }}"
                                    method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <x-input.confirm-button text="Data notifikasi ini akan dihapus!"
                                        positive="Ya, hapus!" icon="info"
                                        class="btn btn-icon btn-outline-danger btn-sm"
                                        data-bs-toggle="tooltip"
                                        data-bs-title="Hapus"
                                        data-bs-placement="top">
                                        <span class="bx bx-trash"></span>
                                    </x-input.confirm-button>
                                </form>
                            @endcan
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

{{-- Pagination --}}
<div class="mt-3 d-flex justify-content-end">
    {!! $notifikasi->withQueryString()->links() !!}
</div>