@extends('layouts.app')

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

@section('content')

<div class="page-wrapper">

    {{-- HEADER --}}
    <div class="page-header">
        <div>
            <h2 class="page-title">📋 Validasi Laporan</h2>
            <p class="page-sub">Laporan masuk menunggu persetujuan penyuluh</p>
        </div>
        <div class="header-badge">
            {{ $laporan->count() }} Menunggu
        </div>
    </div>

    {{-- TABLE CARD --}}
    <div class="table-card">

        {{-- SEARCH --}}
        <div class="table-topbar">
            <input type="text" id="searchInput" placeholder="🔍 Cari petani atau hama..." oninput="filterTable()">
        </div>

        <div class="table-scroll">
            <table class="data-table" id="mainTable">
                <thead>
                    <tr>
                        <th>Petani</th>
                        <th>Hama</th>
                        <th>Tanggal</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($laporan as $item)
                    <tr class="data-row">
                        <td>
                            <div class="petani-name">{{ $item->nama_petani }}</div>
                            <div class="petani-loc">{{ $item->lokasi ?? '-' }}</div>
                        </td>
                        <td>
                            <span class="hama-tag">{{ $item->jenis_hama }}</span>
                        </td>
                        <td class="date-cell">
                            {{ $item->created_at->format('d M Y') }}
                        </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
                                @elseif($item->status == 'ditolak') s-danger
                                @endif">
                                {{ str_replace('_',' ', $item->status) }}
                            </span>
                        </td>
                        <td>
                            <div class="action-group">
                                <a href="{{ url('/lapor/'.$item->id) }}" class="btn-sm btn-detail">
                                    🔍 Detail
                                </a>
                                @if($item->status == 'menunggu_validasi')
                                <button onclick="openModal({{ $item->id }})" class="btn-sm btn-validasi">
                                    ✔ Validasi
                                </button>
                                <button onclick="openModalTolak({{ $item->id }})" class="btn-sm btn-tolak">
                                    ✕ Tolak
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="empty-cell">
                            <div class="empty-state">
                                <span>📭</span>
                                <p>Tidak ada laporan yang menunggu validasi</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>

</div>

{{-- MODAL VALIDASI --}}
<div id="modalValidasi" class="modal-overlay">
    <div class="modal-box">
        <div class="modal-icon">✅</div>
        <h3>Konfirmasi Validasi</h3>
        <p>Laporan ini akan divalidasi dan masuk antrian penanganan.</p>
        <div class="modal-actions">
            <button onclick="closeModal()" class="btn-cancel">Batal</button>
            <form id="formValidasi" method="POST">
                @csrf
                <button type="submit" class="btn-confirm">Ya, Validasi</button>
            </form>
        </div>
    </div>
</div>

{{-- MODAL TOLAK --}}
<div id="modalTolak" class="modal-overlay">
    <div class="modal-box">
        <div class="modal-icon danger">❌</div>
        <h3>Tolak Laporan</h3>
        <p>Laporan ini akan ditolak dan tidak diproses lebih lanjut.</p>
        <div class="modal-actions">
            <button onclick="closeModalTolak()" class="btn-cancel">Batal</button>
            <form id="formTolak" method="POST">
                @csrf
                <button type="submit" class="btn-danger-confirm">Ya, Tolak</button>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function openModal(id){
    document.getElementById('formValidasi').action = "/lapor/"+id+"/validasi";
    document.getElementById('modalValidasi').classList.add('active');
    document.body.style.overflow = 'hidden';
}
function closeModal(){
    document.getElementById('modalValidasi').classList.remove('active');
    document.body.style.overflow = '';
}
function openModalTolak(id){
    document.getElementById('formTolak').action = "/lapor/"+id+"/tolak";
    document.getElementById('modalTolak').classList.add('active');
    document.body.style.overflow = 'hidden';
}
function closeModalTolak(){
    document.getElementById('modalTolak').classList.remove('active');
    document.body.style.overflow = '';
}
// Tutup modal klik luar
document.querySelectorAll('.modal-overlay').forEach(m => {
    m.addEventListener('click', e => {
        if(e.target === m){ m.classList.remove('active'); document.body.style.overflow=''; }
    });
});
// Search filter
function filterTable(){
    const q = document.getElementById('searchInput').value.toLowerCase();
    document.querySelectorAll('#mainTable tbody .data-row').forEach(row => {
        row.style.display = row.innerText.toLowerCase().includes(q) ? '' : 'none';
    });
}
</script>
@endsection