<div class="flex flex-col divide-y space-y-4 m-2"
     x-data="{
                processFile(file,type) {
                    let filetype = ['json','geojson'];
                    if(!filetype.includes(file.name.split('.').pop())) return;
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        const data = event.target.result;
                        try {
                            this.showMap(JSON.parse(data),type);
                        } catch (error) {
                            console.error('Error parsing GeoJSON:', error);
                        }
                    };
                    reader.readAsText(file);
                },
                initMap(){
                    window.map.style.height = '300px';
                    if(window.geoJsonMap) return;
                    try{
                        window.geoJsonMap = L.map('map').setView([51.505, -0.09], 13);
                        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                maxZoom: 19,
                                attribution: '&copy; <a href=`http://www.openstreetmap.org/copyright`>OpenStreetMap</a>'
                             }).addTo(window.geoJsonMap);
                    }catch(err){
                        console.log(err);
                    }
                },
                initMapLayer(){
                    if(window.geoJsonMap && window.groupLayer) return;
                    window.pivotLayer = L.geoJson();
                    window.spanLayer = L.geoJson();
                    window.groupLayer = L.featureGroup([window.pivotLayer,window.spanLayer]);
                    window.groupLayer.addTo(window.geoJsonMap);
                    L.control.layers(null,{'Pivot':window.pivotLayer,'Span':window.spanLayer}).addTo(window.geoJsonMap);
                    window.mapLayers=[];
                },
                showMap(data,type){
                    this.initMap();
                    this.initMapLayer();
                    this.addLayer(data,type);
                    console.log('GeoJson loaded.');
                },
                addLayerData(data,layer){
                    var basicColors = ['orange', 'purple'];
                    if(data && layer){
                        layer.clearLayers();
                        layer.addData(data);
                        layer.setStyle(function(feature) {
                            return {
                                color: (layer === window.pivotLayer) ? 'purple' : 'orange',
                                weight: 2,
                                opacity: 0.5,
                                fillOpacity: 0.5
                            };
                        });
                    }
                    window.geoJsonMap.fitBounds(window.groupLayer.getBounds());
                    window.map.focus();
                },
                addLayer(layerData,type){
                    switch(type){
                        case 'pivot_file':
                            this.addLayerData(layerData,window.pivotLayer);
                            console.log('Pivot file added.');
                            break;
                        case 'span_file':
                            this.addLayerData(layerData,window.spanLayer);
                            console.log('Span file added.');
                            break;
                        default:
                            break;
                    }
                }
             }"
     x-on:livewire-upload-finish.document="processFile($event.target.files[0],$event.target.closest('[id]').id);"
>
    <div id="edit" class="flex flex-col md:flex-row gap-2">
        <div class="flex flex-col md:w-1/3">
            <div class="text-xl font-bold ">
                {{ __('General') }}
            </div>
            <div class="text-gray-500 text-md">
                {{__('Manage the general settings of this project and the reports.')}}
                @if($this->pivotNameAnalyser)
                    @if($this->pivotNameAnalyser->hasErrors())
                        {{__('The name analyser has errors. Please check the harvest file and pivot geojson.')}}

                        <div class="text-red-500 text-sm pt-10">
                            <p class="pb-5">{{__('The project has errors. Please check the harvest file and pivot geojson.')}}
                            </p>
                            <x-danger-button wire:click="$set('showFieldNameModal', true)">Show Errors</x-danger-button>
                            <x-confirmation-modal wire:model.live="showFieldNameModal" wire:loading.class="opacity-50">
                                    <x-slot name="title">
                                        <h2 class="text-xl font-medium text-gray-900"> {{ __('Problem(s) in pivot.json and or harvest files') }}</h2>
                                    </x-slot>

                                    <x-slot name="content">
                                        <div class="text-gray-900 text-sm">
                                            {{__('Note: The report will run but not all historical production graphs will be shown correctly.')}}
                                        </div>


                                        <div class="">
                                            @foreach($this->pivotNameAnalyser->getGeoJsonPivotNamesNotInHarvest() as $name)
                                                @if($loop->first)
                                                    <div class="text-gray-900 text-sm">
                                                        {{__('The following names are in the pivot geojson but not in the harvest data.')}}
                                                    </div>
                                                @endif
                                                <div class="text-red-500 text-sm">
                                                    {{ $name }}
                                                </div>
                                            @endforeach

                                            @foreach($this->pivotNameAnalyser->getHarvestPivotNamesNotInGeoJson() as $name)
                                                @if($loop->first)
                                                    <div class="text-gray-900 text-sm">
                                                        {{__('The following names are in the harvest data but not in the pivot geojson.')}}
                                                    </div>
                                                @endif
                                                <div class="text-red-500 text-sm">
                                                    {{ $name }}
                                                </div>
                                            @endforeach
                                        </div>
                                    </x-slot>

                                    <x-slot name="footer">
                                        <x-secondary-button class="mr-3"
                                                            type="button"
                                                            x-on:click="$wire.showFieldNameModal = false"
                                        >
                                            {{ __('Cancel') }}
                                        </x-secondary-button>
                                    </x-slot>

                            </x-confirmation-modal>
                        </div>
                    @else
                        <div class="text-green-500">
                            {{__('The harvest data and pivot json are insync.')}}
                        </div>
                    @endif
                @else
                    <div class="text-red-500">
                        {{__('Please upload the harvest file and pivot geojson to enable the name analyser.')}}
                    </div>
                @endif

            </div>
        </div>
        <div class="md:w-2/3">
            <form x-init="
                    $nextTick(() => {
                    @if($formData['pivot_file'] && is_string($formData['pivot_file']))
                        showMap({{$formData['pivot_file']}},'pivot_file');
                    @endif
                    @if($formData['span_file'] && is_string($formData['span_file']))
                        showMap({{$formData['span_file']}},'span_file');
                    @endif
                     })
                ">
                <div id="map">

                </div>
                <!-- Token Name -->
                <div class="mb-2">
                    <x-label for="name" value="{{ __('Name') }}"/>
                    <x-input id="name" type="text" class="mt-1 block w-full" wire:model="formData.name" autofocus/>
                    <x-input-error for="name" class="mt-2"/>
                </div>
                <div class="flex flex-col mb-2 gap-2">
                    <p>{{__('Pivot GeoJSON file.')}}</p>
                    <div id="pivot_file">
                        <livewire:components.custom-dropzone
                            wire:model="pivotFiles"
                            wire:key="'pivotFiles'"
                            :type="'pivot'"
                        />
                    </div>
                    @error('pivotFiles')
                    <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                    @enderror
                    @error('pivot_file.extension')
                    <div class="bg-red-50 p-4 w-full mb-4 rounded dark:bg-red-600">
                        <div class="flex gap-3 items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                 class="w-5 h-5 text-red-400 dark:text-red-200">
                                <path fill-rule="evenodd"
                                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
                                      clip-rule="evenodd"></path>
                            </svg>
                            <h3 class="text-sm text-red-800 font-medium dark:text-red-100">{{ $message }}</h3>
                        </div>
                    </div>
                    @enderror
                </div>
                <div class="flex flex-col mb-2 gap-2">
                    <p>{{__('Span GeoJSON file.')}}</p>
                    <div id="span_file">
                        <livewire:components.custom-dropzone
                            wire:model="spanFiles"
                            wire:key="'spanFiles'"
                            :type="'span'"
                        />
                    </div>
                    @error('spanFiles')
                    <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                    @enderror
                    @error('span_file.extension')
                    <div class="bg-red-50 p-4 w-full mb-4 rounded dark:bg-red-600">
                        <div class="flex gap-3 items-start">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                 class="w-5 h-5 text-red-400 dark:text-red-200">
                                <path fill-rule="evenodd"
                                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
                                      clip-rule="evenodd"></path>
                            </svg>
                            <h3 class="text-sm text-red-800 font-medium dark:text-red-100">{{ $message }}</h3>
                        </div>
                    </div>
                    @enderror
                </div>
                <div class="flex flex-col mb-2 gap-2">
                    <p>{{__('Harvested Data file.')}}</p>
                    <div id="harvest_file">
                        <livewire:components.custom-dropzone
                            wire:model="harvestDataFiles"
                            :rules="['extensions:xls,xlsx,ods','mimes:xls,xlsx,ods','required']"
                            wire:key="'harvest_file'"
                            :type="'harvest'"
                        />
                    </div>
                    @error('harvest_file')
                    <span class="bg-red-100 text-red-400 p-1 rounded">{{ $message }}</span>
                    @enderror
                </div>
                <div class="flex justify-between my-4">
                    <div class="inline-flex items-center gap-2">
                        <div class=" text-md font-bold">
                            {{ __('Show borders in report') }}
                        </div>
                    </div>
                    <label class="inline-flex items-center cursor-pointer gap-4"
                           x-data="{showBorders: $wire.entangle('formData.borders')}">
                        <input type="checkbox" class="sr-only peer" x-init="$el.checked = @js($formData['borders'])"
                               @click="showBorders = $el.checked">
                        <div
                            class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
                    </label>
                </div>
                <div class="mb-2">
                    <x-label for="client_type" value="{{ __('Client Type') }}"/>
                    <select id="client_type" class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm mt-1 block w-full" 
                            wire:model="formData.client_type"
                            @if($this->formData['id'] ?? false) disabled @endif>
                        <option value="agronomic_support">{{ __('Agronomic Support') }}</option>
                        <option value="cane_supply">{{ __('Cane Supply') }}</option>
                    </select>
                    @if($this->formData['id'] ?? false)
                        <p class="text-sm text-gray-500 mt-1">{{ __('Client type cannot be changed after project creation') }}</p>
                    @endif
                    <x-input-error for="client_type" class="mt-2"/>
                </div>
            </form>
        </div>
    </div>
    <div id="scheduling"
         class="flex flex-col md:flex-row">
        <div class="flex flex-col my-4 md:w-1/3">
            <span class="text-xl font-bold dark:text-gray-300">{{__('Schedule')}}</span>
            <div class="text-gray-500 text-md">
                {{ __('Schedule an action for this project') }}
            </div>
        </div>
        <div id="mail"
             class="flex flex-col md:w-2/3"
             x-data="{showMail: $wire.entangle('formData.mail_scheduled')}"
        > {{-- flex col--}}
            <div class="flex justify-between my-4">
                <div class="inline-flex items-center gap-2">
                    {{--                    <span class="text-lg font-semibold dark:text-gray-300">{{__('Mail')}}</span>---}}
                    <div class=" text-md font-bold">
                        {{ __('Send a mail to recipients periodically') }}
                    </div>
                </div>
                <label class="inline-flex items-center cursor-pointer gap-4">
                    <input type="checkbox" class="sr-only peer" x-init="$el.checked = @js($formData['mail_scheduled'])"
                           @click="showMail = $el.checked">
                    <div
                        class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600"></div>
                </label>
            </div>
            <div class="flex w-full ">
                <form submit="saveMailSettings">
                    <div class="col-span-6 sm:col-span-4">
                        <x-label for="email_subject" value="{{ __('Subject') }}"/>
                        <x-input id="email_subject" type="text"
                                 class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
                                 wire:model="formData.mail_subject"
                                 x-bind:disabled="!showMail"
                                 autofocus/>
                        <x-input-error for="mail_subject" class="mt-2"/>
                    </div>
                    <div class="col-span-6 sm:col-span-4">
                        <x-label for="email_template" value="{{ __('Template') }}"/>
                        <textarea id="email_template" type="text"
                                  class="mt-1 block w-full h-[200px] border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:bg-gray-50 disabled:text-gray-500"
                                  wire:model="formData.mail_template"
                                  x-bind:disabled="!showMail"
                        >
                </textarea>
                        <x-input-error for="mail_template" class="mt-2"/>
                    </div>
                    <div class="col-span-6 sm:col-span-4">
                        <x-label for="email_frequency" value="{{ __('Frequency') }}"/>
                        <select id="email_frequency"
                                class="mt-1 block w-full rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500"
                                wire:model="formData.mail_frequency"
                                x-bind:disabled="!showMail"
                        >
                            @foreach(App\Helper::getMailFrequencies() as $frequency)
                                <option value="{{ $frequency }}">{{ $frequency }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="mail_frequency" class="mt-2"/>
                    </div>
                    <div class="col-span-6 sm:col-span-4">
                        <x-label for="mail_day" value="{{ __('Day') }}"/>
                        <select id="mail_day"
                                wire:model="formData.mail_day"
                                x-bind:disabled="!showMail"
                                class="mt-1 block w-full  rounded-md border-gray-300 disabled:bg-gray-50 disabled:text-gray-500">
                            @foreach(App\Helper::getDays() as $day)
                                <option value="{{ $day }}">{{ $day }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="mail_day" class="mt-2"/>
                    </div>
                    <div class="col-span-6 sm:col-span-4 text-lg my-2 font-semibold">
                        {{ __('Recipients') }}
                    </div>
                    <div class="divide-y divide-indigo-200 divide-dashed">
                        @foreach($formData['mail_recipients'] as $key => $email_recipient)
                            <div class="gap-1 my-1 py-2 flex flex-col md:flex-row justify-between">
                                <div class="">
                                    <x-label for="mail_recipient_{{ $key }}_name" value="{{ __('Name') }}"/>
                                    <x-input id="mail_recipient_{{ $key }}_name" type="text"
                                             class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
                                             x-bind:disabled="!showMail"
                                             wire:model="formData.mail_recipients.{{ $key }}.name" autofocus/>
                                    <x-input-error for="mail_recipients.{{ $key }}.name" class="mt-2"/>
                                </div>

                                <div class="">
                                    <x-label for="bounding_box_{{ $key }}_top_left_latitude"
                                             value="{{ __('Email') }}"/>
                                    <x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
                                             class="mt-1 block w-full disabled:bg-gray-50 disabled:text-gray-500"
                                             x-bind:disabled="!showMail"
                                             wire:model="formData.mail_recipients.{{ $key }}.email"
                                             autofocus/>
                                    <x-input-error for="mail_recipients.{{ $key }}.email" class="mt-2"/>
                                </div>
                                <div class="flex">
                                    @if( count($formData['mail_recipients']) > 1)
                                        <button
                                            class="cursor-pointer text-sm text-red-500 disabled:cursor-default disabled:opacity-0 py-3 mx-2 self-end"
                                            type="button"
                                            x-bind:disabled="!showMail"
                                            wire:click="deleteEmailRecipient({{ $key }})"
                                            wire:confirm="{{ __('Are you sure you want to delete this Recipient?') }}"
                                        >
                                            Delete
                                        </button>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div x-show="showMail" class="flex">
                        <x-secondary-button class="mr-3"
                                            type="button"
                                            wire:click="addEmailRecipient"
                        >
                            {{ __('Add recipient') }}
                        </x-secondary-button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="flex justify-end items-center py-4">
        <span>
            <x-action-message class="mr-3 text-indigo-500 font-semibold rounded p-2" on="saved">
                {{ __('Saved.') }}
            </x-action-message>
        </span>
        <x-button type="button"
                  wire:click="saveSettings">
            {{__('Save settings')}}
        </x-button>
    </div>
</div>
