@extends('layouts.app')

@section('title', 'Laporan')
@section('page-title', 'Daftar Laporan')

@section('content')

    <div class="card table-card mb-3">
        <div class="card-body">
            <form method="GET" action="{{ route('reports.index') }}" class="row g-2 align-items-end">
                <div class="col-12 col-md-4">
                    <label class="form-label small text-muted mb-1">Cari judul / pelapor</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" name="q" value="{{ request('q') }}" class="form-control border-start-0"
                               placeholder="Cari laporan...">
                    </div>
                </div>

                <div class="col-6 col-md-3">
                    <label class="form-label small text-muted mb-1">Status</label>
                    <select name="status" class="form-select">
                        <option value="">Semua Status</option>
                        @foreach(['menunggu', 'diverifikasi', 'diproses', 'selesai', 'ditolak'] as $s)
                            <option value="{{ $s }}" @selected(request('status') === $s)>
                                {{ ucfirst($s) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-6 col-md-3">
                    <label class="form-label small text-muted mb-1">Kategori</label>
                    <select name="category_id" class="form-select">
                        <option value="">Semua Kategori</option>
                        @foreach($categories ?? [] as $category)
                            <option value="{{ $category->id }}" @selected((string) request('category_id') === (string) $category->id)>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-12 col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-success flex-fill">
                        <i class="bi bi-funnel"></i> Filter
                    </button>
                    <a href="{{ route('reports.index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                </div>
            </form>
        </div>
    </div>

    <div class="card table-card">
        <div class="table-responsive">
            <table class="table align-middle mb-0">
                <thead>
                    <tr>
                        <th style="width:70px;">Foto</th>
                        <th>Judul</th>
                        <th>Pelapor</th>
                        <th>Kategori</th>
                        <th>Lokasi</th>
                        <th>Status</th>
                        <th>Tanggal</th>
                        <th class="text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($reports as $report)
                        <tr>
                            <td>
                                @if($report->photo)
                                    <img src="{{ asset('storage/' . $report->photo) }}"
                                         class="rounded-3" style="width:48px;height:48px;object-fit:cover;" alt="foto">
                                @else
                                    <div class="bg-light rounded-3 d-flex align-items-center justify-content-center text-muted"
                                         style="width:48px;height:48px;">
                                        <i class="bi bi-image"></i>
                                    </div>
                                @endif
                            </td>
                            <td>
                                <div class="fw-semibold">{{ $report->title }}</div>
                                <div class="text-muted small text-truncate" style="max-width:220px;">
                                    {{ $report->description }}
                                </div>
                            </td>
                            <td>{{ $report->user->name ?? '-' }}</td>
                            <td>
                                <span class="badge bg-light text-dark border fw-medium">{{ $report->category->name ?? '-' }}</span>
                            </td>
                            <td class="text-muted small text-truncate" style="max-width:160px;">
                                {{ $report->address ?? '-' }}
                            </td>
                            <td>
                                <x-status-badge :status="$report->status" />
                            </td>
                            <td class="text-muted small">{{ $report->created_at->format('d M Y, H:i') }}</td>
                            <td class="text-end">
                                <a href="{{ route('reports.show', $report->id) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-eye"></i> Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-5">
                                <i class="bi bi-inbox fs-2 d-block mb-2 text-muted"></i>
                                Tidak ada laporan yang ditemukan.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($reports instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator)
            <div class="card-footer bg-white d-flex justify-content-between align-items-center">
                <span class="text-muted small">
                    Menampilkan {{ $reports->firstItem() ?? 0 }}-{{ $reports->lastItem() ?? 0 }}
                    dari {{ $reports->total() }} laporan
                </span>
                {{ $reports->withQueryString()->links() }}
            </div>
        @endif
    </div>

@endsection