@extends('layouts.master')

@section('body')
    <h3 class="text-orange-400 text-base md:text-3xl font-medium">Düzəliş et</h3>

    <div class="flex flex-col mt-4">
        <form action="{{ route('dashboard.update', $jobRecord->id) }}" method="POST" enctype="multipart/form-data" id="myForm">
            @csrf
            @method('PUT')
            <div id="mainDiv" class="grid grid-cols-1 mt-4">
                <div class="relative md:flex mt-2">
                    <div class="left-side w-full md:w-3/5 pr-2 md:border-r-4 border-r-slate-900">
                        <div class="md:flex gap-2">
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="tractor_higway">Traktorun Şassi Nömrəsi</label>
                                <input type="hidden" name="tractor_highway_id" id="tractor_highway_id"
                                    value="{{ $jobRecord->tractor_number?->tractor_highway_id }}">
                                <input list="tractor_higways" id="tractor_higway" name="tractor_higway"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" autocomplete="off" required value="{{ $jobRecord->tractor_number?->tractor_highway->code }}">
                                <datalist id="tractor_higways">
                                    @foreach ($tractorHighways as $tractorHighway)
                                        <option 
                                            data-id="{{ $tractorHighway->id }}" data-branch="{{ $tractorHighway->branch?->name }}"
                                            data-tractor-number="{{ count($tractorHighway->tractor_numbers) ? $tractorHighway->tractor_numbers[count($tractorHighway->tractor_numbers) - 1]->tractor_number : '' }}"
                                            data-tractor-numbers="{{ $tractorHighway->tractor_numbers->pluck('tractor_number') }}"
                                            data-tractor-brand="{{ $tractorHighway->tractor_brand }}"
                                            value="{{ $tractorHighway->code }}">
                                        </option>
                                    @endforeach
                                </datalist>
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="branch">Filial</label>
                                <input id="branch" name="branch"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" autocomplete="off" value="{{ $jobRecord->tractor_number?->tractor_highway->branch?->name }}">
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="tractor_brand">Traktorun Markasi</label>
                                <input id="tractor_brand" name="tractor_brand"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" autocomplete="off" value="{{ $jobRecord->tractor_number->tractor_highway->tractor_brand }}">
                            </div>
                        </div>
                        <div class="md:flex gap-2">
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="tractor_number">
                                    Traktorun nömrəsi 
                                    <span id="show_tractor_numbers" onclick="document.getElementById('myModal').classList.remove('hidden')" class="cursor-pointer text-indigo-400">
                                        Göstər
                                    </span>
                                </label>
                                <input id="tractor_number" name="tractor_number"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" autocomplete="off"
                                    value="{{ $jobRecord->tractor_number->tractor_number }}">
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="mechanic">Mexanizatorun adı və soyadı</label>
                                <input type="hidden" name="mechanic_id" id="mechanic_id" value="{{ $jobRecord->mechanic_id }}">
                                <input list="mechanics" id="mechanic" name="mechanic"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" autocomplete="off" required value="{{ $jobRecord->mechanic?->full_name }}">
                                <datalist id="mechanics">
                                    @foreach ($mechanics as $mechanic)
                                        <option data-id="{{ $mechanic->id }}" value="{{ $mechanic->full_name }}"></option>
                                    @endforeach
                                </datalist>
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="fin">Fermerin FİN - i</label>
                                <input list="farmers" id="fin" name="fin"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" autocomplete="off" value="{{ old('fin', $jobRecord->farmer?->fin) }}">
                                <datalist id="farmers">
                                    @foreach ($farmers as $farmer)
                                        <option data-full-name="{{ $farmer->full_name }}"
                                            data-id-card-photo="{{ isset($farmer->photos[0]) ? $farmer->photos[0]->photo : '' }}" data-id-card-photo2="{{ isset($farmer->photos[1]) ? $farmer->photos[1]->photo : '' }}" value="{{ $farmer->fin }}">
                                        </option>
                                    @endforeach
                                </datalist>
                            </div>
                        </div>
                        <div class="md:flex gap-2">
                            <div class="md:w-1/2">
                                <label class="text-gray-700" for="farmer_full_name">Fermerin Adı, Soyadı</label>
                                <input id="farmer_full_name" name="farmer_full_name"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" autocomplete="off"
                                    value="{{ old('farmer_full_name', $jobRecord->farmer?->full_name) }}">
                            </div>
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Fermerin vəsiqəsi</label>
                                <input type="file" name="id_card_photo[]" multiple id="id_card_photo" accept="image/*"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
                                <div class="flex mb-2">
                                    @if (isset($jobRecord->farmer->photos[0]))
                                        <img id="preview" src="/storage/{{ $jobRecord->farmer->photos[0]->photo }}" alt="ID Card" width="200">
                                    @endif
                                    @if (isset($jobRecord->farmer->photos[1]))
                                        <img id="preview2" src="/storage/{{ $jobRecord->farmer->photos[1]->photo }}" alt="ID Card2" width="200">
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div id="lands-container" class="relative mt-2 border-2 border-blue-500 rounded-lg px-3 pt-3 pb-12">
    
                            <button id="addMore"
                                class="absolute bottom-0 my-2 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full flex items-center justify-center shadow-lg focus:outline-none focus:ring-2 focus:ring-green-400">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H5a1 1 0 110-2h3V6a1 1 0 011-1z"
                                        clip-rule="evenodd" />
                                </svg>
                            </button>
                        </div>
                        
                    </div>

                    <div class="right-side w-full md:w-2/5 md:pl-2">
                        <div class="md:flex gap-2">
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Müqavilə bağlanmış sahə (say ilə)</label>
                                <input id="contract-quantity"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5"
                                    type="number" step="any" disabled>
                            </div>
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Müqavilə bağlanmış sahə (hektarla)</label>
                                <input id="contract-quantity-ha"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5"
                                    type="number" step="any" disabled>
                            </div>
                        </div>
                        <div class="md:flex gap-2">
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Əlavə əkin sahəsi (say ilə)</label>
                                <input id="plant-quantity"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5"
                                    type="number" step="any" disabled>
                            </div>
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Əlavə əkin sahəsi (hektarla)</label>
                                <input id="plant-quantity-ha"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5"
                                    type="number" step="any" disabled>
                            </div>
                        </div>
                        <div class="md:flex gap-2">
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Cəm əkin (hektarla)</label>
                                <input id="total-ha"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg block w-full p-2.5"
                                    type="number" step="any" disabled>
                            </div>
                        </div>
                        <div class="md:flex gap-2">
                            <div class="md:w-1/2">
                                <label class="text-gray-700" for="date">İşin görülmə tarixi</label>
                                <input name="date" id="date"
                                    class="mt-2 bg-green-300 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="date" required value="{{ old('date', $jobRecord->date ? \Carbon\Carbon::parse($jobRecord->date)->format('Y-m-d') : '') }}" max="{{ \Carbon\Carbon::now()->format('Y-m-d') }}">
                            </div>
                            <div class="md:w-1/2">
                                <label class="text-gray-700" for="category">Xidmətin adı</label>
                                <select id="category" name="category_id"
                                    class="mt-2 bg-green-300 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
                                    @foreach ($categories as $category)
                                        <option {{ $jobRecord->category_id == $category->id ? 'selected' : '' }}
                                            value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="md:flex gap-2">
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Gündəlik görülmüş iş (hektarla) Filial</label>
                                <input name="daily_work_ha_branch"
                                    class="mt-2 bg-green-300 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="number" step="any"
                                    value="{{ old('daily_work_ha_branch', $jobRecord->daily_work_ha_branch) }}">
                            </div>
                            <div class="md:w-1/2">
                                <label class="text-gray-700">Filial km</label>
                                <input name="branch_km"
                                    class="mt-2 bg-green-300 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="number" step="any" value="{{ old('branch_km', $jobRecord->branch_km) }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-end mt-4">
                <button type="submit"
                    class="px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-700 focus:outline-none focus:bg-orange-700">Dəyiş</button>
            </div>
        </form>
    </div>
    <div id="myModal" class="fixed inset-0 bg-gray-800 bg-opacity-50 hidden flex items-center justify-center">
        <!-- Modal Box -->
        <div class="bg-white rounded-2xl shadow-lg max-h-[80vh] flex flex-col md:min-w-[800px] max-w-lg">
            <!-- Modal Header -->
            <div class="flex justify-between items-center border-b px-4 py-2">
                <h2 class="text-lg font-semibold">Bütün Traktor nömrələri</h2>
                <button class="text-gray-500 hover:text-gray-700"
                    onclick="document.getElementById('myModal').classList.add('hidden')">
                    ✕
                </button>
            </div>

            <!-- Modal Content -->
            <div class="p-4 overflow-y-auto flex-1">
                <table class="w-full border border-gray-200 text-left">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="px-3 py-2 border">Traktor Nömrəsi</th>
                        </tr>
                    </thead>
                    <tbody id="tractor-data">
                    </tbody>
                </table>
            </div>

            <!-- Modal Footer -->
            <div class="flex justify-end border-t px-4 py-2">
                <button class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400"
                    onclick="document.getElementById('myModal').classList.add('hidden')">
                    Bağla
                </button>
            </div>
        </div>
    </div>
@endsection



@section('script')
    <script>
        const myForm = document.getElementById('myForm');
        const landsContainer = document.getElementById('lands-container');
        // Tractor Highway
        const branch = document.getElementById('branch');
        const tractorNumber = document.getElementById('tractor_number');
        const tractorBrand = document.getElementById('tractor_brand');
        const showTractorNumbers = document.getElementById('show_tractor_numbers');
        let tractorNumbersArray = [];
        // Farmer
        const farmerFullName = document.getElementById('farmer_full_name');
        const idCardPhoto = document.getElementById('id_card_photo');
        const previewIdCard = document.getElementById('preview');
        const previewIdCard2 = document.getElementById('preview2');
        const farmerFin = document.getElementById('fin');
        // Contract and Plant quantities
        const contractQuantity = document.getElementById("contract-quantity");
        const contractQuantityHa = document.getElementById("contract-quantity-ha");
        const plantQuantity = document.getElementById("plant-quantity");
        const plantQuantityHa = document.getElementById("plant-quantity-ha");
        const totalHa = document.getElementById("total-ha");
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        idCardPhoto.addEventListener('change', function(){
            previewIdCard.classList.add('hidden');
            previewIdCard.src = ''
            previewIdCard2.classList.add('hidden');
            previewIdCard2.src = ''
        })

        myForm.addEventListener('submit', function(e){
            e.preventDefault();
                // check valid farmer fin
            fetch(`/check-valid-fin`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                },
                body: JSON.stringify({
                    fin: farmerFin.value,
                }),
            })
            .then(response => response.json())
            .then(data => {
                if(data.status){
                    myForm.submit();
                }else{
                    farmerFin.classList.add('input-error')
                }
            })
            .catch(error => console.error('Error:', error));
        })

        document.getElementById('tractor_higway').addEventListener('change', function() {
            const tractorHighwayId = document.getElementById('tractor_highway_id');
            const inputValue = this.value;
            const option = [...document.getElementById('tractor_higways').options].find(o => o.value === inputValue);
            if (option) {
                tractorNumbersArray = JSON.parse(option.dataset.tractorNumbers);
                const uniqueNumbers = [];
                showTractorNumbers.classList.remove('hidden');
                const tractorTbody = document.getElementById('tractor-data');
                let tableData = '';
                tractorNumbersArray.forEach(e => {
                    if(uniqueNumbers.includes(e)) return
                        tableData += `
                        <tr>
                            <td class="px-3 py-2 border">${e}</td>
                        </tr>
                    `;
                    uniqueNumbers.push(e)
                })
                tractorTbody.innerHTML = tableData;
                tractorHighwayId.value = option.dataset.id;
                branch.value = option.dataset.branch ?? '';
                tractorNumber.value = option.dataset.tractorNumber ?? '';
                tractorBrand.value = option.dataset.tractorBrand ?? '';
                tractorBrand.readOnly = true;
            } else {
                tractorNumbersArray = [];
                showTractorNumbers.classList.add('hidden');
                tractorHighwayId.value = '';
                tractorNumber.value = '';
                tractorBrand.value = '';
                tractorBrand.readOnly = false;
            }
        });

        document.getElementById('mechanic').addEventListener('change', function() {
            const mechanicId = document.getElementById('mechanic_id');
            const inputValue = this.value;
            const option = [...document.getElementById('mechanics').options].find(o => o.value === inputValue);
            mechanicId.value = option ? option.dataset.id : '';
        });

        document.getElementById('fin').addEventListener('change', function() {
            landsContainer.querySelectorAll('.land').forEach(div => div.remove());
            const inputValue = this.value;
            const option = [...document.getElementById('farmers').options].find(o => o.value === inputValue);
            if (option) {
                farmerFullName.value = option.dataset.fullName ?? '';
                farmerFullName.readOnly = true;
                previewIdCard.classList.remove('hidden');
                previewIdCard2.classList.remove('hidden');
                previewIdCard.src = option.dataset.idCardPhoto ? '/storage/' + option.dataset.idCardPhoto : '';
                previewIdCard2.src = option.dataset.idCardPhoto2 ? '/storage/' + option.dataset.idCardPhoto2 : '';
                // fetch farmer's lands
                fetch(`/get-lands/${inputValue}`)
                    .then(response => response.json())
                    .then(data => {
                        for (let i = 0; i < data.length; i++) {
                            let currentLandTypeId = data[i].land_type_id;
                            if (currentLandTypeId == 1) {
                                // Muqavile
                                contractQuantityHa.value = (parseFloat(contractQuantityHa.value ?
                                    contractQuantityHa.value : 0) + parseFloat(data[i].land_ha)).toFixed(2);
                                contractQuantity.value++;
                            } else {
                                // Ekin
                                plantQuantityHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value :
                                    0) + parseFloat(data[i].land_ha)).toFixed(2);
                                plantQuantity.value++;
                            }
                            totalHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) +
                                parseFloat(contractQuantityHa.value ? contractQuantityHa.value : 0)).toFixed(2);
                            let newLandHtml = `
                            <div class="md:w-1/3">
                                <label class="text-gray-700">${data[i].name} (ha)</label>
                                <input
                                    class="land-ha mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="number" step="any" value="${data[i].land_ha}" readOnly>
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700">Hektarı, müqaviləsi, aqronomun aktı</label>
                                <div class="mt-2 w-full">
                                    ${data[i].contract ? '<a class="text-blue-400 underline" href="/storage/' + data[i].contract + '" target="_blank">Müqaviləni göstər</a>' : ""}
                                </div>
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="land_type">Statusu</label>
                                <select id="land_type_id_${i}"
                                    class="land-type mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
                                    @foreach ($landTypes as $landType)
                                        <option value="{{ $landType->id }}">{{ $landType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" name="is_old[]" value="f-${data[i].id}">
                            <button type="button" 
                                class="delete-land text-red-500 hover:text-red-700 ml-2 p-2 rounded-full transition"
                                title="Remove this land">
                                ✕
                            </button>
                        `

                            const newLandElement = document.createElement('div');
                            newLandElement.classList.add("land", "md:flex", "gap-2")
                            newLandElement.innerHTML = newLandHtml;
                            landsContainer.appendChild(newLandElement);
                            currentLandType = document.getElementById(`land_type_id_${i}`);
                            currentLandType.value = currentLandTypeId;
                        }
                    })
                    .catch(error => console.error('Error fetching lands:', error));
            } else {
                farmerFullName.value = '';
                farmerFullName.readOnly = false;
                // idCardPhoto.classList.remove('hidden');
                previewIdCard.classList.add('hidden');
                previewIdCard.src = '';
                previewIdCard2.classList.add('hidden');
                previewIdCard2.removeAttribute('src');
                // Avtomatik hesablanma fieldlerini 0 la
                contractQuantity.value = 0;
                contractQuantityHa.value = 0;
                plantQuantity.value = 0;
                plantQuantityHa.value = 0;
                totalHa.value = 0;
            }
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('delete-land')) {
                const landDiv = e.target.closest('.land');
                const landType = landDiv.querySelector('.land-type');
                const landHa = landDiv.querySelector('.land-ha');
                if (landType.value == 1) {
                    // Muqavile silinir
                    contractQuantity.value--;
                    contractQuantityHa.value = (parseFloat(contractQuantityHa.value ? contractQuantityHa.value : 0) -
                        parseFloat(landHa.value ? landHa.value : 0)).toFixed(2);
                } else {
                    // Ekin silinir
                    plantQuantity.value--;
                    plantQuantityHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) - parseFloat(
                        landHa.value ? landHa.value : 0)).toFixed(2);
                }
                totalHa.value = (parseFloat(totalHa.value) - parseFloat(landHa.value ? landHa.value : 0)).toFixed(2);
                landDiv.remove();
            }
        });

        document.getElementById('addMore').addEventListener('click', function(event) {
            event.preventDefault();
            let newLandHtml = `
            <div class="md:w-1/3">
                <label class="text-gray-700">Torpaq sahəsi (hektarla)</label>
                <input name="land_ha[]"
                    class="land-ha mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                    type="number" step="any">
            </div>
            <div class="md:w-1/3">
                <label class="text-gray-700">Hektarı, müqaviləsi, aqronomun aktı</label>
                <input required type="file" name="contracts[]" accept=".pdf, .doc, .docx" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
            </div>
            <div class="md:w-1/3">
                <label class="text-gray-700" for="land_type">Statusu</label>
                <select name="land_types[]"
                    class="land-type mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
                    @foreach ($landTypes as $landType)
                        <option value="{{ $landType->id }}">{{ $landType->name }}</option>
                    @endforeach
                </select>
            </div>
            <input type="hidden" name="is_old[]" value="false">
            <button type="button" 
                class="delete-land text-red-500 hover:text-red-700 ml-2 p-2 rounded-full transition"
                title="Remove this land">
                ✕
            </button>
        `
            const newLandElement = document.createElement('div');
            newLandElement.classList.add("land", "md:flex", "gap-2")
            newLandElement.innerHTML = newLandHtml;
            landsContainer.appendChild(newLandElement);
            // Muqavile sahesi sayi artsin
            contractQuantity.value++;
        })

        landsContainer.addEventListener('focus', function(e) {
            if (e.target.matches('.land-ha')) {
                e.target.dataset.oldValue = e.target.value;
            }
            if (e.target.matches('.land-type')) {
                e.target.dataset.oldValue = e.target.value;
            }
        }, true);

        landsContainer.addEventListener('change', function(e) {
            if (e.target.matches('.land-ha')) {
                const oldValue = e.target.dataset.oldValue ? e.target.dataset.oldValue : 0;
                const newValue = e.target.value ? e.target.value : 0;
                const landDiv = e.target.closest('.land');
                const landType = landDiv.querySelector('select[name="land_types[]"]');
                const landTypeValue = landType?.value;
                if (landTypeValue == 1) {
                    contractQuantityHa.value = (parseFloat(contractQuantityHa.value ? contractQuantityHa.value : 0) +
                        parseFloat(newValue) - parseFloat(oldValue)).toFixed(2);
                } else {
                    plantQuantityHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) + parseFloat(
                        newValue) - parseFloat(oldValue)).toFixed(2);
                }
                totalHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) + parseFloat(
                    contractQuantityHa.value ? contractQuantityHa.value : 0)).toFixed(2);
            }
            if (e.target.matches('.land-type')) {
                const oldValue = e.target.dataset.oldValue;
                const newValue = e.target.value;
                if (oldValue != newValue) {
                    const landDiv = e.target.closest('.land');
                    const landHa = landDiv.querySelector('input[name="land_ha[]"]');
                    const landContract = landDiv.querySelector('input[name="contracts[]"]');
                    if (oldValue == 1) {
                        // kohnesi muqavile yenisi ekin
                        contractQuantity.value--;
                        plantQuantity.value++;
                        contractQuantityHa.value = (parseFloat(contractQuantityHa.value ? contractQuantityHa.value : 0) - parseFloat(landHa.value ? landHa.value : 0)).toFixed(2);
                        plantQuantityHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) + parseFloat(landHa.value ? landHa.value : 0)).toFixed(2);
                    
                        // Contracti seche bilmesin
                        landContract.required = false;
                        landContract.disabled = false;

                        // create a fake value "false"
                        const dataTransfer = new DataTransfer();
                        // const fakeFile = new File(["false"], "false.txt", {
                        //     type: "text/plain"
                        // });
                        const fakeFile = new File(["Hello PDF"], "fake.pdf", { type: "application/pdf" });
                        dataTransfer.items.add(fakeFile);
                        landContract.files = dataTransfer.files;
                    } else {
                        // kohnesi ekin yenisi muqavile
                        plantQuantity.value--;
                        contractQuantity.value++;
                        plantQuantityHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) -
                            parseFloat(landHa.value ? landHa.value : 0)).toFixed(2);
                        contractQuantityHa.value = (parseFloat(contractQuantityHa.value ? contractQuantityHa.value :
                            0) + parseFloat(landHa.value ? landHa.value : 0)).toFixed(2);

                        // Contracti seche bilsin
                        landContract.required = true;
                        landContract.disabled = false;
                        landContract.value = '';
                    }
                }
                e.target.blur();
            }
        });

        function setInitialLands(recordId) {
            fetch(`/get-record-lands/${recordId}`)
                .then(response => response.json())
                .then(data => {
                    for (let i = 0; i < data.length; i++) {
                        let currentLandTypeId = data[i].land_type_id;
                        if (currentLandTypeId == 1) {
                            // Muqavile
                            contractQuantityHa.value = (parseFloat(contractQuantityHa.value ? contractQuantityHa.value :
                                0) + parseFloat(data[i].land_ha)).toFixed(2);
                            contractQuantity.value++;
                        } else {
                            // Ekin
                            plantQuantityHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) +
                                parseFloat(data[i].land_ha)).toFixed(2);
                            plantQuantity.value++;
                        }
                        totalHa.value = (parseFloat(plantQuantityHa.value ? plantQuantityHa.value : 0) + parseFloat(
                            contractQuantityHa.value ? contractQuantityHa.value : 0)).toFixed(2);
                        let newLandHtml = `
                            <div class="md:w-1/3">
                                <label class="text-gray-700">${data[i].name} (ha)</label>
                                <input
                                    class="land-ha mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="number" step="any" value="${data[i].land_ha}" readOnly>
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700">Hektarı, müqaviləsi, aqronomun aktı</label>
                                <div class="mt-2 w-full">
                                    ${data[i].contract ? '<a class="text-blue-400 underline" href="/storage/' + data[i].contract + '" target="_blank">Müqaviləni göstər</a>' : ""}
                                </div>
                            </div>
                            <div class="md:w-1/3">
                                <label class="text-gray-700" for="land_type">Statusu</label>
                                <select id="land_type_id_${i}"
                                    class="land-type mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
                                    @foreach ($landTypes as $landType)
                                        <option value="{{ $landType->id }}">{{ $landType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" name="is_old[]" value="${data[i].id}">
                            <button type="button" 
                                class="delete-land text-red-500 hover:text-red-700 ml-2 p-2 rounded-full transition"
                                title="Remove this land">
                                ✕
                            </button>
                        `

                        const newLandElement = document.createElement('div');
                        newLandElement.classList.add("land", "md:flex", "gap-2")
                        newLandElement.innerHTML = newLandHtml;
                        landsContainer.appendChild(newLandElement);
                        currentLandType = document.getElementById(`land_type_id_${i}`);
                        currentLandType.value = currentLandTypeId;
                    }
                })
                .catch(error => console.error('Error fetching lands:', error));
        }

        function setInitialTractorNumbers(){
            const currentInputValue = document.getElementById('tractor_higway').value;
            const currentOption = [...document.getElementById('tractor_higways').options].find(o => o.value === currentInputValue);
            tractorNumbersArray = JSON.parse(currentOption.dataset.tractorNumbers);
            const uniqueNumbers = [];
            const tractorTbody = document.getElementById('tractor-data');
            let tableData = '';
            tractorNumbersArray.forEach(e => {
                if(uniqueNumbers.includes(e)) return
                tableData += `
                    <tr>
                        <td class="px-3 py-2 border">${e}</td>
                    </tr>
                `;
                uniqueNumbers.push(e)
            })
            tractorTbody.innerHTML = tableData;
        }

        document.addEventListener('DOMContentLoaded', function() {
            const recordId = @json($jobRecord->id);
            setInitialLands(recordId);
            setInitialTractorNumbers();
        });
    </script>
@endsection