@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.admin-update', $jobRecord->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div id="mainDiv" class="grid grid-cols-1 mt-4">
                <div class="relative flex justify-between flex-col mt-2">
                    <div class="md:flex gap-2">
                        <div class="md:w-1/6">
                            <label class="text-gray-700">Gündəlik görülmüş iş (hektarla) Filial</label>
                            <input
                                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="number" step="any" value="{{ old('daily_work_ha_branch', $jobRecord->daily_work_ha_branch) }}" disabled>
                        </div>
                        <div class="md:w-1/6">
                            <label class="text-gray-700">Cəm iş (hektarla)</label>
                            <input id="total_work_office"
                                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="number" step="any" disabled>
                        </div>
                        <div class="md:w-1/3">
                            <label class="text-gray-700">Filial km</label>
                            <input
                                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="number" step="any" value="{{ old('branch_km', $jobRecord->branch_km) }}" disabled>
                        </div>
                        <div class="md:w-1/3">
                            <label class="text-gray-700">GPS km</label>
                            <input name="office_km"
                                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="number" step="any" value="{{ old('office_km', $jobRecord->office_km) }}">
                        </div>
                    </div>
                    <div class="md:flex gap-2">
                        <div class="md:w-1/3">
                            <label class="text-gray-700" for="assignment">Təyinat</label>
                            <select id="assignment" name="assignment_id"
                                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">
                                @foreach ($assignments as $assignment)
                                    <option {{ $jobRecord->assignment_id == $assignment->id ? 'selected' :  '' }} value="{{ $assignment->id }}">{{ $assignment->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="md:w-1/3">
                            <label class="text-gray-700">Qeydlər</label>
                            <input name="notes"
                                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" value="{{ old('notes', $jobRecord->notes) }}">
                        </div>
                    </div>
                    <div id="lands-container" class="relative mt-2 border-2 border-blue-500 rounded-lg px-3 pt-3 pb-12">
                        {{-- lands here --}}
                    </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>
@endsection

@section('script')

<script>
    const landsContainer = document.getElementById('lands-container');
    const totalWorkOffice = document.getElementById('total_work_office');
    
    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;
                    let newLandHtml = `
                        <div class="md:w-1/6">
                            <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/6">
                            <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/6">
                            <label class="text-gray-700" for="land_type">Statusu</label>
                            <select id="land_type_id_${i}" disabled
                                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>
                        <div class="md:w-1/6">
                            <label class="text-gray-700">Məntəqəyə qədər məsafə</label>
                            <input name="distances[${data[i].id}]"
                                class="land-ha 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="${data[i].distance ?? 0}">
                        </div>
                        <div class="md:w-1/6">
                            <label class="text-gray-700">KML file</label>
                            <input type="file" name="kml_files[${data[i].id}]" accept=".kml" onchange="this.previousElementSibling.value=this.files.length ? 1 : 0" 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/6">
                            <label class="text-gray-700">İş (ha)</label>
                            <input name="works[${data[i].id}]"
                                class="work-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].work_ha}">
                        </div>
                    `
                    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;
                }
                const allWorks = [...document.querySelectorAll('.work-ha')];
                allWorks.forEach(work => {
                    totalWorkOffice.value = parseFloat(totalWorkOffice.value ? totalWorkOffice.value : 0) + parseFloat(work.value);
                    work.addEventListener('focus', function(e) {
                        if (e.target.matches('.work-ha')) {
                            e.target.dataset.oldValue = e.target.value;
                        }
                    }, true);
                    work.addEventListener('change', function(e){
                        const oldValue = e.target.dataset.oldValue ? e.target.dataset.oldValue : 0;
                        totalWorkOffice.value = parseFloat(totalWorkOffice.value ? totalWorkOffice.value : 0) + parseFloat(this.value) - parseFloat(oldValue);
                    })
                });
            })
            .catch(error => console.error('Error fetching lands:', error));
    }
    
    // totalWorkOffice.value = 

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

@endsection