@extends('layouts.main')

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

@section('content')
<!-- ========================================== -->
    <!-- MODAL EDIT DATA                            -->
    <!-- ========================================== -->
    <div class="  " aria-labelledby="modal-title" role="dialog" aria-modal="true">

        <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-agri-50 px-6 py-4 border-b border-agri-100 flex justify-between items-center">
                    <h3 class="text-lg font-semibold leading-6 text-agri-900" id="modal-title">
                        <i class="fas fa-edit text-agri-600 mr-2"></i>Edit Data Panen
                    </h3>
                </div>

                <!-- Form Body -->
                <!-- We pre-fill these inputs with mock data for demonstration -->
                <form action="{{ route('admin.produksi.update', $data->id) }}" method="POST">
                @csrf
                @method('PUT')
                    <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" 
                                    value="{{ $data->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 -->
                            <div class="md:col-span-2">
                                <label for="edit_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="edit_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" {{ $data->desa == 'ASANA' ? 'selected' : '' }}>ASANA</option>
<option value="BATU PUTIH" {{ $data->desa == 'BATU PUTIH' ? 'selected' : '' }}>BATU PUTIH</option>
<option value="BENTENG" {{ $data->desa == 'BENTENG' ? 'selected' : '' }}>BENTENG</option>
<option value="BONEPUTE" {{ $data->desa == 'BONEPUTE' ? 'selected' : '' }}>BONEPUTE</option>
<option value="BURAU" {{ $data->desa == 'BURAU' ? 'selected' : '' }}>BURAU</option>
<option value="BURAU PANTAI" {{ $data->desa == 'BURAU PANTAI' ? 'selected' : '' }}>BURAU PANTAI</option>
<option value="CENDANA" {{ $data->desa == 'CENDANA' ? 'selected' : '' }}>CENDANA</option>
<option value="JALAJJA" {{ $data->desa == 'JALAJJA' ? 'selected' : '' }}>JALAJJA</option>
<option value="KALATIRI" {{ $data->desa == 'KALATIRI' ? 'selected' : '' }}>KALATIRI</option>
<option value="LAGEGO" {{ $data->desa == 'LAGEGO' ? 'selected' : '' }}>LAGEGO</option>
<option value="HARAPAN" {{ $data->desa == 'HARAPAN' ? 'selected' : '' }}>HARAPAN</option>
<option value="LAMBARESE" {{ $data->desa == 'LAMBARESE' ? 'selected' : '' }}>LAMBARESE</option>
<option value="LAGOSI" {{ $data->desa == 'LAGOSI' ? 'selected' : '' }}>LAGOSI</option>
<option value="LARO" {{ $data->desa == 'LARO' ? 'selected' : '' }}>LARO</option>
<option value="LAUWO" {{ $data->desa == 'LAUWO' ? 'selected' : '' }}>LAUWO</option>
<option value="LEWONU" {{ $data->desa == 'LEWONU' ? 'selected' : '' }}>LEWONU</option>
<option value="LUMBEWE" {{ $data->desa == 'LUMBEWE' ? 'selected' : '' }}>LUMBEWE</option>
<option value="MABONTA" {{ $data->desa == 'MABONTA' ? 'selected' : '' }}>MABONTA</option>

                                </select>
                            </div>

                            <!-- Luas Panen -->
                            <div>
                                <label for="edit_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="edit_luas_panen" required value="{{ $data->luas_panen }}"
                                        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="edit_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="edit_luas_puso" value="{{ $data->luas_puso }}"
                                        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>

                            <!-- Produksi GKP -->
                            <div>
                                <label for="edit_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="edit_produksi" required value="{{ $data->produksi }}"
                                        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="edit_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">
                                    <input type="number" step="0.01" name="produktivitas" id="edit_produktivitas" readonly value="{{ $data->produktivitas }}"
                                        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>
                            </div>

                            <!-- Jumlah Petani -->
                            <div class="md:col-span-2">
                                <label for="edit_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="jml_petani" id="edit_jml_petani" required value="{{ $data->jumlah_petani }}" 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"  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-agri-700 sm:ml-3 sm:w-auto transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Simpan Perubahan
                        </button>
                        <a href="{{ route('admin.produksi.index') }}"
                        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
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
function hitungProduktivitas() {
    let produksi = parseFloat(document.getElementById('edit_produksi').value) || 0;
    let luas = parseFloat(document.getElementById('edit_luas_panen').value) || 0;

    let hasil = luas > 0 ? (produksi / luas) : 0;

    document.getElementById('edit_produktivitas').value = hasil.toFixed(2);
}

document.getElementById('edit_produksi').addEventListener('input', hitungProduktivitas);
document.getElementById('edit_luas_panen').addEventListener('input', hitungProduktivitas);
</script>
@endsection