@extends('be.layout-index-rekappemilu')

@section('content')
<div>
    <h4 class="mb-3">📋 Daftar Tiket Pengaduan</h4>

    <table class="table table-bordered table-hover">
        <thead class="table-light">
            <tr>
                <th>No</th>
                <th>Nomor Tiket</th>
                <th>Pelapor</th>
                <th>Terlapor</th>
                <th>Instansi</th>
                <th>Kategori Pelanggaran</th>
                <th>Deskripsi</th>
                <th>Tanggal Dibuat</th>
            </tr>
        </thead>
        <tbody>
            @forelse($tickets as $i => $t)
            <tr>
                <td>{{ $i+1 }}</td>
                <td><strong>{{ $t->ticket_no }}</strong></td>
                <td>
                    {{ $t->pelapor['name'] ?? '-' }}<br>
                    <small>{{ $t->pelapor['jenis'] ?? '' }} ({{ $t->pelapor['nip_or_nik'] ?? '' }})</small>
                </td>
                <td>
                    {{ $t->terlapor['name'] ?? '-' }}<br>
                    <small>{{ $t->terlapor['nip'] ?? '' }}</small>
                </td>
                <td>{{ $t->terlapor['instansi']['name'] ?? '-' }}</td>
                <td>{{ $t->violation['incidence_of_violations'] ?? '-' }}</td>
                <td>{{ Str::limit($t->violation['description'] ?? '', 80) }}</td>
                <td>{{ \Carbon\Carbon::parse($t->created_date)->format('d-m-Y H:i') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="text-center text-muted">Tidak ada data</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css"/>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>

<script>
$(function() {

    
});
</script>
@endsection