@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('css/penyuluh.css') }}">
@endsection

@section('content')

<div class="page-wrapper">

    <div class="page-header">
        <div>
            <h2 class="page-title">📄 Data Laporan</h2>
            <p class="page-sub">Seluruh laporan yang telah divalidasi</p>
        </div>
        <div class="header-badge">{{ $laporan->count() }} Laporan</div>
    </div>

    {{-- FILTER --}}
    <div class="filter-card">
        <div class="filter-title">🔍 Filter Data</div>
        <form method="GET" action="" class="filter-form">

            <div class="filter-item">
                <label>Cari Petani</label>
                <input type="text" name="keyword" placeholder="Nama petani..."
                    value="{{ request('keyword') }}">
            </div>

            <div class="filter-item">
                <label>Status</label>
                <select name="status">
                    <option value="">Semua</option>
                    <option value="menunggu" {{ request('status')=='menunggu'?'selected':'' }}>Menunggu</option>
                    <option value="diproses" {{ request('status')=='diproses'?'selected':'' }}>Diproses</option>
                    <option value="selesai"  {{ request('status')=='selesai'?'selected':'' }}>Selesai</option>
                </select>
            </div>

            <div class="filter-item">
                <label>Bulan</label>
                <input type="month" name="bulan" value="{{ request('bulan') }}">
            </div>

            <div class="filter-item">
                <label>Dari Tanggal</label>
                <input type="date" name="tanggal_awal" value="{{ request('tanggal_awal') }}">
            </div>

            <div class="filter-item">
                <label>Sampai Tanggal</label>
                <input type="date" name="tanggal_akhir" value="{{ request('tanggal_akhir') }}">
            </div>

            <div class="filter-item">
                <label>Kecamatan</label>

                <select name="kecamatan">
                    <option value="">Semua Kecamatan</option>

                    @foreach($kecamatanList as $kecamatan)
                        <option value="{{ $kecamatan }}"
                            {{ request('kecamatan') == $kecamatan ? 'selected' : '' }}>
                            {{ $kecamatan }}
                        </option>
                    @endforeach

                </select>
            </div>

            <div class="filter-actions">
                <button type="submit" class="btn-filter">🔍 Filter</button>
                <a href="{{ url()->current() }}" class="btn-reset">↺ Reset</a>
            </div>

        </form>
    </div>

    {{-- TABLE --}}
    <div class="table-card">
        <div class="table-scroll">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Petani</th>
                        <th>Hama</th>
                        <th>Tingkat</th>
                        <th>Status</th>
                        <th>Tanggal</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($laporan as $i => $item)
                    <tr class="data-row row-click" onclick="window.location='/lapor/{{ $item->id }}'">
                        <td class="no-cell">{{ $i + 1 }}</td>
                        <td>
                            <div class="petani-name">{{ $item->nama_petani }}</div>
                        </td>
                        <td><span class="hama-tag">{{ $item->jenis_hama }}</span></td>
                        <td>
                            <span class="tingkat-badge
                                @if($item->tingkat_serangan=='Berat') t-berat
                                @elseif($item->tingkat_serangan=='Sedang') t-sedang
                                @else t-ringan
                                @endif">
                                {{ $item->tingkat_serangan ?? '-' }}
                            </span>
                        </td>
                        <td>
                            <span class="status-badge
                                @if($item->status=='menunggu_validasi') s-waiting
                                @elseif($item->status=='menunggu') s-info
                                @elseif($item->status=='diproses') s-process
                                @elseif($item->status=='selesai') s-success
                                @else s-danger
                                @endif">
                                {{ str_replace('_',' ',$item->status) }}
                            </span>
                        </td>
                        <td class="date-cell">{{ $item->created_at->format('d M Y') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="empty-cell">
                            <div class="empty-state"><span>📭</span><p>Tidak ada data</p></div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

@endsection