@extends('layouts.app')

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

@section('content')

<div class="wrapper">

    {{-- HEADER --}}
    <div class="page-header">
        <div class="page-header-left">
            <h2>Dashboard Petani</h2>
            <p>Selamat datang, <strong>{{ auth()->user()->name }}</strong> — pantau laporan hama Anda di sini</p>
        </div>
        <a href="/lapor/create" class="btn-lapor">
            <span class="btn-lapor-icon">＋</span>
            Input Laporan
        </a>
    </div>

    {{-- CARDS --}}
    <div class="cards">

        <div class="card total">
            <div class="card-icon">📋</div>
            <div class="card-body">
                <h3>{{ $total }}</h3>
                <p>Total Laporan</p>
            </div>
            <div class="card-bar"></div>
        </div>

        <div class="card menunggu">
            <div class="card-icon">⏳</div>
            <div class="card-body">
                <h3>{{ $laporan->where('status','menunggu_validasi')->count() }}</h3>
                <p>Menunggu Validasi</p>
            </div>
            <div class="card-bar"></div>
        </div>

        <div class="card proses">
            <div class="card-icon">⚙️</div>
            <div class="card-body">
                <h3>{{ $diproses }}</h3>
                <p>Sedang Diproses</p>
            </div>
            <div class="card-bar"></div>
        </div>

        <div class="card selesai">
            <div class="card-icon">✅</div>
            <div class="card-body">
                <h3>{{ $selesai }}</h3>
                <p>Selesai</p>
            </div>
            <div class="card-bar"></div>
        </div>

    </div>

    {{-- TABLE --}}
    <div class="table-section">

        <div class="table-header">
            <div class="table-title">📄 Riwayat Laporan</div>
            <div class="table-search">
                <input type="text" id="searchInput" placeholder="Cari hama atau status..." oninput="filterTable()">
            </div>
        </div>

        <div class="table-wrapper">
            <table class="table" id="laporanTable">

                <thead>
                    <tr>
                        <th>No</th>
                        <th>Jenis Hama</th>
                        <th>Tingkat</th>
                        <th>Status</th>
                        <th>Tanggal</th>
                        <th>Aksi</th>
                    </tr>
                </thead>

                <tbody>

                @forelse($laporan as $i => $item)
                <tr class="table-row">

                    <td class="td-no">{{ $i + 1 }}</td>

                    <td>
                        <span class="hama-name">{{ $item->jenis_hama }}</span>
                    </td>

                    <td>
                        @if(isset($item->tingkat_serangan))
                        <span class="badge-tingkat {{ strtolower($item->tingkat_serangan) }}">
                            {{ $item->tingkat_serangan }}
                        </span>
                        @else
                        <span class="badge-tingkat">—</span>
                        @endif
                    </td>

                    <td>
                        <span class="badge badge-{{ $item->status }}">
                            {{ str_replace('_',' ', $item->status) }}
                        </span>
                    </td>

                    <td class="td-date">
                        <span class="date-day">{{ $item->created_at->format('d') }}</span>
                        <span class="date-month">{{ $item->created_at->format('M Y') }}</span>
                    </td>

                    <td>
                        <div class="action-btns">

                            <a href="/lapor/{{ $item->id }}" class="btn-action detail" title="Lihat Detail">
                                🔍 Detail
                            </a>

                            @if($item->status == 'menunggu_validasi')
                            <a href="/lapor/{{ $item->id }}/edit" class="btn-action edit" title="Edit Laporan">
                                ✏ Edit
                            </a>
                            @endif

                        </div>
                    </td>

                </tr>
                @empty
                <tr>
                    <td colspan="6" class="empty-state">
                        <div class="empty-icon">🌾</div>
                        <div>Belum ada laporan yang dibuat</div>
                        <a href="/lapor/create" class="empty-link">Buat laporan pertama Anda →</a>
                    </td>
                </tr>
                @endforelse

                </tbody>

            </table>
        </div>

        {{-- PAGINATION --}}
        @if(method_exists($laporan, 'links'))
        <div class="pagination-wrapper">
            {{ $laporan->links() }}
        </div>
        @endif

    </div>

</div>

@endsection

@section('scripts')
<script>
function filterTable(){
    const q     = document.getElementById('searchInput').value.toLowerCase();
    const rows  = document.querySelectorAll('#laporanTable tbody .table-row');

    rows.forEach(row => {
        const text = row.innerText.toLowerCase();
        row.style.display = text.includes(q) ? '' : 'none';
    });
}
</script>
@endsection