@extends('layouts.main')

@section('title', 'WebGIS Admin Panel - Data Produksi Admin')

@section('content')

                
                <!-- Judul Halaman -->
                <div class="mb-6">
                    <h3 class="text-2xl font-bold text-gray-800 uppercase tracking-tight">Data Produksi Padi</h3>
                    <p class="text-gray-500 text-sm mt-1">Kelola data produksi padi (GKP) berdasarkan desa di Kecamatan Burau.</p>
                </div>

                <!-- Filter Row & Tombol Tambah -->
                <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 mb-6 flex flex-col md:flex-row justify-between items-center gap-4">
                    <form method="GET">
    <div class="flex flex-col sm:flex-row gap-4 items-end">

        <!-- TAHUN -->
        <div class="w-full sm:w-32">
            <label class="block text-xs font-medium text-gray-500 mb-1">Tahun</label>
            <select name="tahun" onchange="this.form.submit()"
                class="w-full rounded-lg border-gray-300 border bg-white px-4 py-2 text-sm">
                
                <option value="">Semua</option>

                @foreach($tahunList as $tahun)
                    <option value="{{ $tahun }}" 
                        {{ request('tahun') == $tahun ? 'selected' : '' }}>
                        {{ $tahun }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- SEARCH -->
        <div class="w-full sm:w-64">
            <label class="block text-xs font-medium text-gray-500 mb-1">Cari Desa</label>
            <input 
                type="text" 
                name="cari"
                value="{{ request('cari') }}"
                onchange="this.form.submit()"
                placeholder="Masukkan nama desa..."
                class="w-full rounded-lg border-gray-300 border px-4 py-2 text-sm">
        </div>

        <!-- RESET BUTTON -->
        <div>
            <a href="{{ url()->current() }}"
                class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-slate-500 rounded-lg hover:bg-slate-600 transition">
                <i class="fa-solid fa-rotate-right me-2"></i>
                Reset
            </a>
        </div>

    </div>
</form>
                    <!-- Tombol Tambah Data -->
                    <div class="w-full md:w-auto mt-4 md:mt-0 flex items-end h-full pt-5">
                        <button onclick="openModal('addModal')" class="w-full md:w-auto flex items-center justify-center px-4 py-2 bg-agri-600 text-white rounded-lg hover:bg-agri-700 transition-colors shadow-sm font-medium text-sm">
                            <i class="fa-solid fa-plus mr-2"></i> Tambah Data
                        </button>
                    </div>
                </div>

               

                <!-- Tabel Manajemen Data -->
                <div class="bg-white shadow-sm border border-gray-200 rounded-xl overflow-hidden flex flex-col">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50 border-b border-gray-200">
                                <tr>
                                    <th scope="col" class="px-4 py-3 text-center text-xs font-bold text-gray-700 w-12">No.</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-700">Nama Desa</th>
                                    <th scope="col" class="px-4 py-3 text-right text-xs font-bold text-gray-700">Luas Panen<br><span class="text-[10px] font-normal text-gray-500">(Ha)</span></th>
                                    <th scope="col" class="px-4 py-3 text-right text-xs font-bold text-gray-700">Luas Puso<br><span class="text-[10px] font-normal text-gray-500">(Ha)</span></th>
                                    <th scope="col" class="px-4 py-3 text-right text-xs font-bold text-gray-700">Produksi GKP<br><span class="text-[10px] font-normal text-gray-500">(Ton)</span></th>
                                    <th scope="col" class="px-4 py-3 text-right text-xs font-bold text-gray-700">Produktivitas<br><span class="text-[10px] font-normal text-gray-500">(Ton/Ha)</span></th>
                                    <th scope="col" class="px-4 py-3 text-right text-xs font-bold text-gray-700">Jumlah Petani<br><span class="text-[10px] font-normal text-gray-500">(Orang)</span></th>
                                    <th scope="col" class="px-4 py-3 text-center text-xs font-bold text-gray-700 w-28">Aksi</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-100 text-sm">
                                <!-- Data Desa 1 -->
                                @foreach($produksi as $index => $item)
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-4 py-3 text-center text-gray-500">
                                        {{ $index + 1 }}
                                    </td>

                                    <td class="px-4 py-3 font-medium text-gray-800">
                                        {{ $item->desa }}
                                    </td>

                                    <td class="px-4 py-3 text-right text-gray-600">
                                        {{ number_format($item->luas_panen, 2, ',', '.') }}
                                    </td>

                                    <td class="px-4 py-3 text-right text-gray-600">
                                        {{ number_format($item->luas_puso, 2, ',', '.') }}
                                    </td>

                                    <td class="px-4 py-3 text-right font-semibold text-gray-900">
                                        {{ number_format($item->produksi, 2, ',', '.') }}
                                    </td>

                                    <td class="px-4 py-3 text-right text-gray-600">
                                        {{ number_format($item->produktivitas, 2, ',', '.') }}
                                    </td>

                                    <td class="px-4 py-3 text-right text-gray-600">
                                        {{ $item->jumlah_petani }}
                                    </td>

                                    <td class="px-4 py-3 text-center">
                                        <div class="flex items-center justify-center space-x-2">
                                            
                                            <!-- EDIT -->
                                            <a href="{{ route('admin.produksi.edit', $item->id) }}"
                                                class="w-8 h-8 rounded bg-blue-50 text-blue-600 hover:bg-blue-100 flex items-center justify-center"
                                                title="Edit Data">
                                                <i class="fa-solid fa-pen text-xs"></i>
                                            </a>

                                            <!-- DELETE -->
                                            <form action="{{ route('admin.produksi.destroy', $item->id) }}" method="POST"
                                                onsubmit="return confirm('Yakin hapus data?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="w-8 h-8 rounded bg-red-50 text-red-600 hover:bg-red-100 flex items-center justify-center"
                                                    title="Hapus Data">
                                                    <i class="fa-solid fa-trash text-xs"></i>
                                                </button>
                                            </form>

                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination Admin -->
                    <div class="px-5 py-3 border-t border-gray-200 bg-gray-50 flex flex-col sm:flex-row items-center justify-between gap-4">
                        <div class="text-xs text-gray-500">
                           Menampilkan 
                            <span class="font-medium text-gray-700">{{ $produksi->firstItem() }}</span> 
                            - 
                            <span class="font-medium text-gray-700">{{ $produksi->lastItem() }}</span> 
                            dari 
                            <span class="font-medium text-gray-700">{{ $produksi->total() }}</span> desa
                        </div>
                        

@php
    $current = $produksi->currentPage();
    $lastPage = $produksi->lastPage();
@endphp

<div class="flex items-center gap-1.5">

    {{-- Previous --}}
    @if($produksi->onFirstPage())
        <span class="w-8 h-8 flex items-center justify-center rounded-md border border-slate-200 text-slate-300">
            <i class="fa-solid fa-angle-left text-xs"></i>
        </span>
    @else
        <a href="{{ $produksi->previousPageUrl() }}"
            class="w-8 h-8 flex items-center justify-center rounded-md border border-slate-200 hover:bg-slate-50">
            <i class="fa-solid fa-angle-left text-xs"></i>
        </a>
    @endif

    {{-- Halaman Awal --}}
    <a href="{{ $produksi->url(1) }}"
        class="w-8 h-8 flex items-center justify-center rounded-md
        {{ $current == 1 ? 'bg-slate-900 text-white' : 'border border-slate-200 text-slate-600' }}">
        1
    </a>

    {{-- Titik kiri --}}
    @if($current > 3)
        <span class="px-2 text-slate-400">...</span>
    @endif

    {{-- Halaman sekitar current --}}
    @for($i = max(2, $current - 1); $i <= min($lastPage - 1, $current + 1); $i++)
        <a href="{{ $produksi->url($i) }}"
            class="w-8 h-8 flex items-center justify-center rounded-md
            {{ $current == $i ? 'bg-slate-900 text-white' : 'border border-slate-200 text-slate-600' }}">
            {{ $i }}
        </a>
    @endfor

    {{-- Titik kanan --}}
    @if($current < $lastPage - 2)
        <span class="px-2 text-slate-400">...</span>
    @endif

    {{-- Halaman terakhir --}}
    @if($lastPage > 1)
        <a href="{{ $produksi->url($lastPage) }}"
            class="w-8 h-8 flex items-center justify-center rounded-md
            {{ $current == $lastPage ? 'bg-slate-900 text-white' : 'border border-slate-200 text-slate-600' }}">
            {{ $lastPage }}
        </a>
    @endif

    {{-- Next --}}
    @if($produksi->hasMorePages())
        <a href="{{ $produksi->nextPageUrl() }}"
            class="w-8 h-8 flex items-center justify-center rounded-md border border-slate-200 hover:bg-slate-50">
            <i class="fa-solid fa-angle-right text-xs"></i>
        </a>
    @else
        <span class="w-8 h-8 flex items-center justify-center rounded-md border border-slate-200 text-slate-300">
            <i class="fa-solid fa-angle-right text-xs"></i>
        </span>
    @endif

</div>

                    </div>
                </div>


   <!-- ========================================== -->
    <!-- MODAL TAMBAH DATA                          -->
    <!-- ========================================== -->
    <div id="addModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-gray-900/75 backdrop-blur-sm transition-opacity" onclick="closeModal('addModal')"></div>

        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <!-- Modal Panel -->
            <div class="relative transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl border border-gray-100">
                
                <!-- Header -->
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h3 class="text-lg font-semibold leading-6 text-gray-900" id="modal-title">
                        <i class="fas fa-file-circle-plus text-agri-600 mr-2"></i>Tambah Data Panen
                    </h3>
                    <button type="button" onclick="closeModal('addModal')" class="text-gray-400 hover:text-gray-600 focus:outline-none rounded-full p-1 hover:bg-gray-200 transition-colors">
                        <span class="sr-only">Tutup</span>
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>

                <!-- Form Body -->
                <form action="{{ route('admin.produksi.store') }}" method="POST" id="formTambah">
                @csrf
                    <div class="px-6 py-5 modal-scroll">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5">
                            <!-- Tanggal -->
                            <div class="md:col-span-2">
                                <label for="add_tanggal" class="block text-sm font-medium text-gray-700 mb-1">
                                    Tanggal <span class="text-red-500">*</span>
                                </label>
                                <input 
                                    type="date" 
                                    name="tanggal" 
                                    id="add_tanggal" 
                                    required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2.5 border text-gray-700">
                            </div>
                            <!-- Nama Desa (Full Width) -->
                            <div class="md:col-span-2">
                                <label for="add_nama_desa" class="block text-sm font-medium text-gray-700 mb-1">
                                    Nama Desa <span class="text-red-500">*</span>
                                </label>

                                <select name="nama_desa" id="add_nama_desa" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2.5 border text-gray-700">

                                    <option value="">-- Pilih Desa --</option>

                                    <option value="ASANA">ASANA</option>
                                    <option value="BATU PUTIH">BATU PUTIH</option>
                                    <option value="BENTENG">BENTENG</option>
                                    <option value="BONEPUTE">BONEPUTE</option>
                                    <option value="BURAU">BURAU</option>
                                    <option value="BURAU PANTAI">BURAU PANTAI</option>
                                    <option value="CENDANA">CENDANA</option>
                                    <option value="JALAJJA">JALAJJA</option>
                                    <option value="KALATIRI">KALATIRI</option>
                                    <option value="LAGEGO">LAGEGO</option>
                                    <option value="HARAPAN">HARAPAN</option>
                                    <option value="LAMBARESE">LAMBARESE</option>
                                    <option value="LAGOSI">LAGOSI</option>
                                    <option value="LARO">LARO</option>
                                    <option value="LAUWO">LAUWO</option>
                                    <option value="LEWONU">LEWONU</option>
                                    <option value="LUMBEWE">LUMBEWE</option>
                                    <option value="MABONTA">MABONTA</option>

                                </select>
                            </div>

                            <!-- Luas Panen -->
                            <div>
                                <label for="add_luas_panen" class="block text-sm font-medium text-gray-700 mb-1">Luas Panen</label>
                                <div class="relative mt-1 rounded-md shadow-sm">
                                    <input type="number" step="0.01" name="luas_panen" id="add_luas_panen" required placeholder="0.00"
                                        class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2.5 border pr-12">
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
                                        <span class="text-gray-500 sm:text-sm">Ha</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Luas Puso -->
                            <div>
                                <label for="add_luas_puso" class="block text-sm font-medium text-gray-700 mb-1">Luas Puso</label>
                                <div class="relative mt-1 rounded-md shadow-sm">
                                    <input type="number" step="0.01" name="luas_puso" id="add_luas_puso" placeholder="0.00"
                                        class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2.5 border pr-12">
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
                                        <span class="text-gray-500 sm:text-sm">Ha</span>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">Kosongkan jika tidak ada gagal panen.</p>
                            </div>

                            <!-- Produksi GKP -->
                            <div>
                                <label for="add_produksi" class="block text-sm font-medium text-gray-700 mb-1">Produksi GKP</label>
                                <div class="relative mt-1 rounded-md shadow-sm">
                                    <input type="number" step="0.01" name="produksi" id="add_produksi" required placeholder="0.00"
                                        class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2.5 border pr-14">
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
                                        <span class="text-gray-500 sm:text-sm">Ton</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Produktivitas -->
                            <div>
                                <label for="add_produktivitas" class="block text-sm font-medium text-gray-700 mb-1 flex items-center justify-between">
                                    <span>Produktivitas</span>
                                    <span class="text-[10px] bg-agri-100 text-agri-800 px-2 py-0.5 rounded">Otomatis</span>
                                </label>
                                <div class="relative mt-1 rounded-md shadow-sm">
                                    <!-- Using readonly and slight bg color to indicate it's calculated -->
                                    <input type="number" step="0.01" name="produktivitas" id="add_produktivitas" readonly placeholder="0.00"
                                        class="w-full rounded-lg border-gray-300 bg-gray-50 text-gray-600 focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2.5 border pr-16 cursor-not-allowed">
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <span class="text-gray-500 sm:text-sm">Ton/Ha</span>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">(Produksi / Luas Panen)</p>
                            </div>

                            <!-- Jumlah Petani (Full Width for layout balance) -->
                            <div class="md:col-span-2">
                                <label for="add_jml_petani" class="block text-sm font-medium text-gray-700 mb-1">Jumlah Petani</label>
                                <div class="relative mt-1 rounded-md shadow-sm lg:w-1/2">
                                    <input type="number" name="jumlah_petani" id="add_jml_petani" required placeholder="0" min="0"
                                        class="w-full rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2.5 border pr-16">
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
                                        <span class="text-gray-500 sm:text-sm">Orang</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Footer / Actions -->
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 sm:flex sm:flex-row-reverse rounded-b-2xl">
                        <button type="submit" onclick="showNotification('Data berhasil disimpan!')" class="inline-flex w-full justify-center rounded-lg bg-agri-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 sm:ml-3 sm:w-auto transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Simpan Data
                        </button>
                        <button type="button" onclick="closeModal('addModal')" class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto transition-colors">
                            Batal
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Simple Notification Toast -->
    <div id="notification" class="fixed bottom-4 right-4 bg-gray-900 text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-y-20 opacity-0 flex items-center z-50">
        <i class="fas fa-check-circle text-green-400 mr-3 text-lg"></i>
        <span id="notificationMessage" class="font-medium">Success!</span>
    </div>

    <script>
        // Modal Handlers
        function openModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.remove('hidden');
            // Small delay to allow display block to apply before animating opacity
            setTimeout(() => {
                modal.firstElementChild.classList.remove('opacity-0');
                modal.children[1].firstElementChild.classList.remove('scale-95', 'opacity-0');
                modal.children[1].firstElementChild.classList.add('scale-100', 'opacity-100');
            }, 10);
        }

        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            // Animate out
            modal.firstElementChild.classList.add('opacity-0');
            modal.children[1].firstElementChild.classList.remove('scale-100', 'opacity-100');
            modal.children[1].firstElementChild.classList.add('scale-95', 'opacity-0');
            
            // Hide after animation
            setTimeout(() => {
                modal.classList.add('hidden');
            }, 300); // Matches Tailwind default transition duration
        }

        // Auto-calculate Productivity (Produksi / Luas Panen)
        function setupCalculator(luasId, prodId, resultId) {
            const luasInput = document.getElementById(luasId);
            const prodInput = document.getElementById(prodId);
            const resultInput = document.getElementById(resultId);

            function calculate() {
                const luas = parseFloat(luasInput.value) || 0;
                const prod = parseFloat(prodInput.value) || 0;
                
                if (luas > 0) {
                    const res = (prod / luas).toFixed(2);
                    resultInput.value = res;
                } else {
                    resultInput.value = '';
                }
            }

            luasInput.addEventListener('input', calculate);
            prodInput.addEventListener('input', calculate);
        }

        // Apply calculator to both forms
        setupCalculator('add_luas_panen', 'add_produksi', 'add_produktivitas');


        // Notification logic (replacing ugly alerts)
        function showNotification(message) {
            const toast = document.getElementById('notification');
            document.getElementById('notificationMessage').textContent = message;
            
            // Close modals if open when saving
            document.getElementById('addModal').classList.add('hidden');

            // Slide up and fade in
            toast.classList.remove('translate-y-20', 'opacity-0');
            
            // Hide after 3 seconds
            setTimeout(() => {
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }
    </script>


    @endsection