@extends('layouts.app')

@section('title', 'Daftar Laporan - KITA AKADEMIK')
@section('page-title', 'Daftar Laporan & Aduan')

@section('content')
<div class="row">
    <div class="col-12">
        <!-- Search & Filter Card -->
        <div class="card card-custom p-4 mb-4">
            <form action="{{ route('laporan.index') }}" method="GET" class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label for="search" class="form-label small fw-bold text-muted">CARI JUDUL</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0 text-muted"><i class="fa-solid fa-magnifying-glass"></i></span>
                        <input type="text" class="form-control border-start-0 ps-0" id="search" name="search" placeholder="Masukkan judul..." value="{{ request('search') }}">
                    </div>
                </div>

                <div class="col-md-3">
                    <label for="tipe_laporan" class="form-label small fw-bold text-muted">KATEGORI LAPORAN</label>
                    <select class="form-select" id="tipe_laporan" name="tipe_laporan">
                        <option value="">Semua Kategori</option>
                        <option value="preventif_konseling" {{ request('tipe_laporan') === 'preventif_konseling' ? 'selected' : '' }}>1. Preventif & Bimbingan</option>
                        <option value="kekerasan_bullying" {{ request('tipe_laporan') === 'kekerasan_bullying' ? 'selected' : '' }}>2. Kekerasan & Bullying</option>
                        <option value="integritas_akademik" {{ request('tipe_laporan') === 'integritas_akademik' ? 'selected' : '' }}>3. Integritas Akademik</option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label for="status" class="form-label small fw-bold text-muted">STATUS LAPORAN</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">Semua Status</option>
                        <option value="diajukan" {{ request('status') === 'diajukan' ? 'selected' : '' }}>Diajukan</option>
                        <option value="menunggu_satgas" {{ request('status') === 'menunggu_satgas' ? 'selected' : '' }}>Antrean Satgas</option>
                        <option value="menunggu_penilai" {{ request('status') === 'menunggu_penilai' ? 'selected' : '' }}>Antrean Tim Penilai</option>
                        <option value="menunggu_psikolog" {{ request('status') === 'menunggu_psikolog' ? 'selected' : '' }}>Antrean Psikolog</option>
                        <option value="menunggu_rektor" {{ request('status') === 'menunggu_rektor' ? 'selected' : '' }}>Menunggu Rektor</option>
                        <option value="selesai" {{ request('status') === 'selesai' ? 'selected' : '' }}>Selesai</option>
                    </select>
                </div>

                <div class="col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold">
                        <i class="fa-solid fa-filter"></i> Saring
                    </button>
                    <a href="{{ route('laporan.index') }}" class="btn btn-light w-100 py-2 text-muted fw-semibold">
                        Reset
                    </a>
                </div>
            </form>
        </div>

        <!-- Listing Card -->
        <div class="card card-custom p-4">
            @if($laporans->isEmpty())
                <div class="text-center py-5">
                    <div class="fs-1 text-muted mb-3"><i class="fa-solid fa-file-excel"></i></div>
                    <h6 class="fw-bold text-muted">Laporan Tidak Ditemukan</h6>
                    <p class="text-muted small mb-0">Cobalah untuk menyesuaikan filter pencarian Anda.</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr class="text-muted" style="font-size: 0.85rem;">
                                <th>KASUS ID</th>
                                <th>PELAPOR / PTS</th>
                                <th>KATEGORI</th>
                                <th>JUDUL LAPORAN</th>
                                <th>TANGGAL MASUK</th>
                                <th>STATUS</th>
                                <th class="text-center">AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($laporans as $lap)
                            <tr>
                                <td><span class="badge bg-dark text-white fw-bold">#K-{{ str_pad($lap->id, 4, '0', STR_PAD_LEFT) }}</span></td>
                                <td>
                                    <div class="fw-semibold text-dark">{{ $lap->pelapor_nama }}</div>
                                    <small class="text-muted">{{ $lap->pts_nama }}</small>
                                </td>
                                <td>
                                    @if($lap->tipe_laporan === 'preventif_konseling')
                                        <span class="badge bg-info-subtle text-info">Preventif Konseling</span>
                                    @elseif($lap->tipe_laporan === 'kekerasan_bullying')
                                        <span class="badge bg-danger-subtle text-danger">Kekerasan / Bullying</span>
                                    @elseif($lap->tipe_laporan === 'integritas_akademik')
                                        <span class="badge bg-warning-subtle text-warning">Integritas Akademik</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="fw-bold text-slate-800 text-truncate" style="max-width: 250px;">{{ $lap->judul }}</div>
                                    <small class="text-muted text-truncate d-block" style="max-width: 250px;">{{ Str::limit($lap->deskripsi, 50) }}</small>
                                </td>
                                <td>
                                    <div>{{ $lap->created_at->format('d M Y') }}</div>
                                    <small class="text-muted">{{ $lap->created_at->format('H:i') }} WIB</small>
                                </td>
                                <td>
                                    @if($lap->dipantau_lldikti)
                                        <span class="badge bg-info text-dark py-1.5 px-3 rounded-pill mb-1 d-inline-block"><i class="fa-solid fa-eye me-1"></i> Dipantau LLDIKTI</span><br>
                                    @endif
                                    @include('laporan._status_badge', ['status' => $lap->status])
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('laporan.show', $lap->id) }}" class="btn btn-sm btn-primary rounded-pill px-3 fw-bold">
                                        <i class="fa-solid fa-folder-open"></i> Detail
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-4">
                    {{ $laporans->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection