@extends('layouts.master')

@section('body')
    <h3 class="text-orange-400 text-base md:text-3xl font-medium">Yeni dəstək yarat</h3>

    <div class="flex flex-col mt-4">
        <form action="{{ route('technical-support.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="grid md:grid-cols-2 mt-4">
                <div>
                    <label class="text-gray-700" for="survey_name">Sorğu sahəsi</label>
                    <select name="survey_name" id="survey_name" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"> 
                        <option value="gps">GPS</option>
                        <option value="it">IT</option>
                    </select>
                </div>
                <div>
                    <label class="text-gray-700" for="tractor_higway" id="tractor_higway_label">Şassi Nömrəsi</label>
                    <input list="highway_codes" id="tractor_higway" name="highway_code"
                        class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                        type="text" autocomplete="off">
                    <datalist id="highway_codes">
                        @foreach ($tractorHighways as $tractorHighway)
                            <option 
                                data-id="{{ $tractorHighway->id }}" value="{{ $tractorHighway->code }}">
                            </option>
                        @endforeach
                    </datalist>
                </div>
                <div>
                    <label class="text-gray-700" for="description">Açıqlama</label>
                    <input name="description" id="description" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5" type="text">
                </div>
                <div>
                    <label class="text-gray-700" for="file">File</label>
                    <input type="file" name="file" id="file" accept=".pdf,.doc,.docx,.txt,image/*,.png,.jpg,.jpeg,.webp" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
                </div>
                <div id="seals-container" class="md:col-span-2 flex flex-wrap relative mt-2 border-2 border-blue-500 rounded-lg px-3 pt-3 pb-12">
                    {{-- seals here --}}

                    <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="flex justify-end mt-4">
                <button type="submit" class="px-4 py-2 bg-gray-800 text-gray-200 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Yarat</button>
            </div>
        </form>
    </div>
@endsection

@section('script')
<script>
    const sealsContainer = document.getElementById('seals-container');
    const tractorHighwayLabel = document.getElementById('tractor_higway_label');
    document.getElementById('survey_name').addEventListener('change', function(){
        if(this.value == 'it'){
            tractorHighwayLabel.innerHTML = "Bar kod";
        }else{
            tractorHighwayLabel.innerHTML = "Şassi Nömrəsi";
        }
    })

    document.getElementById('tractor_higway').addEventListener('change', function() {
        sealsContainer.querySelectorAll('.seal').forEach(div => div.remove());
        const inputValue = this.value;
        const option = [...document.getElementById('highway_codes').options].find(o => o.value === inputValue);
        if (option) {
            console.log(option)
            // fetch farmer's lands
            fetch(`/get-seals/${option.dataset.id}`)
                .then(response => response.json())
                .then(data => {
                    for (let i = 0; i < data.length; i++) {
                        let newHtml = `
                            <div class="w-2/3">
                                <label class="text-gray-700">Möhür</label>
                                <input name="seals[${i}][value]"
                                    class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5"
                                    type="text" value="${data[i].name}">
                                <input type="hidden" name="seals[${i}][id]" value="${data[i].id}">
                            </div>
                            <div class="ml-2">
                                <label class="flex items-center gap-2 mt-2">
                                    <input 
                                        type="checkbox"
                                        ${!data[i].removal_date ? 'checked' : ''}
                                        name="seals[${i}][status]"
                                        class="w-4 h-4 text-orange-400 bg-gray-50 border border-gray-300 rounded focus:ring-orange-500 focus:ring-2 focus:outline-none"
                                    >
                                    <span class="text-sm text-gray-900">Möhür statusu</span>
                                </label>
                            </div>
                        `
                        const newElement = document.createElement('div');
                        newElement.classList.add("flex", "items-center", "md:w-1/2", "seal")
                        newElement.innerHTML = newHtml;
                        sealsContainer.appendChild(newElement);
                    }
                })
                .catch(error => console.error('Error fetching lands:', error));
        }
    });

    document.getElementById('addMore').addEventListener('click', function(event) {
        let index = sealsContainer.children.length - 1; // add buttonsuz
        event.preventDefault();
        let newHtml = `
            <div class="w-2/3">
                <label class="text-gray-700">Möhür</label>
                <input name="seals[${index}][value]"
                    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">
            </div>
            <div class="ml-2">
                <label class="flex items-center gap-2 mt-2">
                    <input 
                        type="checkbox"
                        checked
                        name="seals[${index}][status]"
                        class="w-4 h-4 text-orange-400 bg-gray-50 border border-gray-300 rounded focus:ring-orange-500 focus:ring-2 focus:outline-none"
                    >
                    <span class="text-sm text-gray-900">Möhür statusu</span>
                </label>
            </div>
        `
        const newElement = document.createElement('div');
        newElement.classList.add("flex", "items-center", "md:w-1/2", "seal")
        newElement.innerHTML = newHtml;
        sealsContainer.appendChild(newElement);
    })
</script>
@endsection