@extends('layouts.app')

@section('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('css/admin.css') }}">
@endsection


@section('content')


    {{-- ── PHP VARIABLES ─────────────────────────────────────────── --}}
    @php
        $tot       = $laporan->count();
        $cMenunggu = $laporan->where('status', 'menunggu')->count();
        $cProses   = $laporan->where('status', 'diproses')->count();
        $cSelesai  = $laporan->where('status', 'selesai')->count();
        $cTolak    = $laporan->where('status', 'ditolak')->count();
    @endphp


    {{-- ── PAGE HEADER ─────────────────────────────────────────────── --}}
    <div class="dash-page-header">
        <div>
            <h2 class="dash-page-title">📋 Data Laporan</h2>
            <p class="dash-page-sub">Manajemen laporan serangan hama — Kabupaten Gowa</p>
        </div>
        <a href="/admin/dashboard">
            <button class="dash-btn-back">← Dashboard</button>
        </a>
    </div>


    {{-- ── SUMMARY STRIP ────────────────────────────────────────────── --}}
    <div class="dash-summary-strip">

        <div class="dash-sum-item">
            <div class="dash-sum-ico" style="background:#e8f5e9;">📋</div>
            <div>
                <div class="dash-sum-val">{{ $tot }}</div>
                <div class="dash-sum-lbl">Total Hasil</div>
            </div>
        </div>

        <div class="dash-sum-sep"></div>

        <div class="dash-sum-item">
            <div class="dash-sum-ico" style="background:#fff3e0;">⏳</div>
            <div>
                <div class="dash-sum-val" style="color:#b45309;">{{ $cMenunggu }}</div>
                <div class="dash-sum-lbl">Menunggu</div>
            </div>
        </div>

        <div class="dash-sum-sep"></div>

        <div class="dash-sum-item">
            <div class="dash-sum-ico" style="background:#e3f2fd;">🔄</div>
            <div>
                <div class="dash-sum-val" style="color:#1565c0;">{{ $cProses }}</div>
                <div class="dash-sum-lbl">Diproses</div>
            </div>
        </div>

        <div class="dash-sum-sep"></div>

        <div class="dash-sum-item">
            <div class="dash-sum-ico" style="background:#e8f5e9;">✅</div>
            <div>
                <div class="dash-sum-val" style="color:#2e7d32;">{{ $cSelesai }}</div>
                <div class="dash-sum-lbl">Selesai</div>
            </div>
        </div>

        <div class="dash-sum-sep"></div>

        <div class="dash-sum-item">
            <div class="dash-sum-ico" style="background:#ffebee;">❌</div>
            <div>
                <div class="dash-sum-val" style="color:#c53030;">{{ $cTolak }}</div>
                <div class="dash-sum-lbl">Ditolak</div>
            </div>
        </div>

    </div>


    {{-- ── FILTER CARD ──────────────────────────────────────────────── --}}
    <div class="dash-filter-card">
        <div class="dash-filter-title">🔍 Filter Data Laporan</div>

        <form method="GET" action="/admin/laporan" class="dash-filter-form">

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

            <div class="dash-filter-field">
                <label>Kecamatan</label>
                <select name="kecamatan">
                    <option value="all">Semua Kecamatan</option>
                    @foreach ($kecamatanGowa as $kec)
                        <option value="{{ $kec }}"
                                {{ request('kecamatan') === $kec ? 'selected' : '' }}>
                            {{ $kec }}
                        </option>
                    @endforeach
                </select>
            </div>

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

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

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

            <div class="dash-filter-field">
                <label>Status</label>
                <select name="status">
                    <option value="all">Semua Status</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>
                    <option value="ditolak"  {{ request('status') === 'ditolak'  ? 'selected' : '' }}>Ditolak</option>
                </select>
            </div>

            <div class="dash-filter-actions">
                <button type="submit" class="dash-btn-filter">🔍 Filter</button>
                <a href="/admin/laporan" class="dash-btn-reset">Reset</a>
            </div>

        </form>
    </div>


    {{-- ── TABEL LAPORAN ────────────────────────────────────────────── --}}
    <div class="dash-tbl-wrap">
        <table class="dash-tbl">
            <thead>
                <tr>
                    <th style="width:40px;">No</th>
                    <th>Nama Petani</th>
                    <th>Jenis Hama</th>
                    <th>Tingkat</th>
                    <th>Luas</th>
                    <th>Status</th>
                    <th>Tanggal</th>
                    <th style="text-align:center;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($laporan as $i => $item)
                    <tr>
                        <td style="color:#9ca3af; font-size:12px;">{{ $i + 1 }}</td>

                        <td>
                            <div class="dash-tbl-name">{{ $item->nama_petani }}</div>
                            <div class="dash-tbl-sub">📍 {{ Str::limit($item->lokasi, 40) }}</div>
                        </td>

                        <td>{{ $item->jenis_hama }}</td>

                        <td>
                            <span class="badge {{ strtolower($item->tingkat_serangan) }}">
                                {{ $item->tingkat_serangan }}
                            </span>
                        </td>

                        <td>
                            <span class="dash-luas-chip luas-{{ $item->luas_lahan }}">
                                {{ ucwords(str_replace('luas_', '', $item->luas_lahan)) }}
                            </span>
                        </td>

                        <td>
                            <span class="dash-status-chip status-{{ $item->status }}">
                                {{ ucfirst($item->status) }}
                            </span>
                        </td>

                        <td style="font-size:12px; color:#6b7280; white-space:nowrap;">
                            {{ $item->created_at->format('d M Y') }}<br>
                            <span style="font-size:11px;">{{ $item->created_at->format('H:i') }}</span>
                        </td>

                        <td style="text-align:center;">
                            <a href="/lapor/{{ $item->id }}">
                                <button class="dash-btn-detail">Detail →</button>
                            </a>
                        </td>
                    </tr>

                @empty
                    <tr>
                        <td colspan="8" style="text-align:center; padding:50px; color:#9ca3af;">
                            <div style="font-size:32px; margin-bottom:8px;">📭</div>
                            <div style="font-size:14px; font-weight:600;">Tidak ada data laporan</div>
                            <div style="font-size:12px; margin-top:4px;">Coba ubah filter pencarian</div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>


@endsection