@props([
    'formData',
    /** @var \App\Livewire\Projects\ProjectManager */
    'projectManager'
])

<x-modal wire:model.live="showProjectModal" {{ $attributes }}>
    <x-form-modal submit="saveProject">
        <x-slot name="title">
            {{ __('Project') }}
        </x-slot>

        <x-slot name="description">
            {{ __('Report generator for generating reports') }}
        </x-slot>

        <x-slot name="form">
            <!-- Token Name -->
            <div class="col-span-6 sm:col-span-4">
                <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>
            @foreach($projectManager->formData['boundingBoxes'] as $key => $boundingBox)
                {{--                <div wire:key="bounding_box_{{ $key }}">--}}
                <div class="col-span-6 sm:col-span-4">
                    {{ __('Bounding box') }}
                    @if( count($projectManager->formData['boundingBoxes']) > 1)
                        <button
                                class="cursor-pointer ml-6 text-sm text-red-500"
                                type="button"
                                wire:click="deleteBoundingBox({{ $key }})"
                                wire:confirm="{{ __('Are you sure you want to delete this BoundingBox?') }}"
                        >
                            Delete
                        </button>
                    @endif
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <x-label for="bounding_box_{{ $key }}_name" value="{{ __('Name') }}"/>
                    <x-input id="bounding_box_{{ $key }}_name" type="text" class="mt-1 block w-full"
                             wire:model="formData.boundingBoxes.{{ $key }}.name" autofocus/>
                    <x-input-error for="boundingBoxes.{{ $key }}.name" class="mt-2"/>
                </div>
                <div class="col-span-6 grid grid-cols-6 gap-1">
                    <div class="col-span-3">
                        <x-label for="bounding_box_{{ $key }}_top_left_latitude"
                                 value="{{ __('Top left Latitude') }}"/>
                        <x-input id="bounding_box_{{ $key }}_top_left_latitude" type="text"
                                 class="block w-full"
                                 wire:model="formData.boundingBoxes.{{ $key }}.top_left_latitude"
                                 autofocus/>
                        <x-input-error for="boundingBoxes.{{ $key }}.top_left_latitude" class="mt-2"/>
                    </div>
                    <div class="col-span-3">
                        <x-label for="bounding_box_{{ $key }}_top_left_longitude" value="{{ __('Longitude') }}"/>
                        <x-input id="name" type="text" class="block w-full"
                                 wire:model="formData.boundingBoxes.{{ $key }}.top_left_longitude"
                                 autofocus/>
                        <x-input-error for="boundingBoxes.{{ $key }}.top_left_longitude" class="mt-2"/>
                    </div>
                    <div class="col-span-3">
                        <x-label for="bounding_box_{{ $key }}_bottom_right_latitude"
                                 value="{{ __('Bottom right Latitude') }}"/>
                        <x-input id="bounding_box_{{ $key }}_bottom_right_latitude" type="text"
                                 class="block w-full"
                                 wire:model="formData.boundingBoxes.{{ $key }}.bottom_right_latitude"
                                 autofocus/>
                        <x-input-error for="boundingBoxes.{{ $key }}.bottom_right_latitude" class="mt-2"/>
                    </div>
                    <div class="col-span-3">
                        <x-label for="boundingBox_{{ $key }}_bottom_right_longitude" value="{{ __('Longitude') }}"/>
                        <x-input id="boundingBox_{{ $key }}_bottom_right_longitude" type="text"
                                 class="block w-full"
                                 wire:model="formData.boundingBoxes.{{ $key }}.bottom_right_longitude"
                                 autofocus/>
                        <x-input-error for="boundingBoxes.{{ $key }}.bottom_right_longitude" class="mt-2"/>
                    </div>
                </div>
                {{--                </div>--}}
            @endforeach
        </x-slot>

        <x-slot name="actions">
            <x-action-message class="mr-3" on="saved">
                {{ __('Saved.') }}
            </x-action-message>
            <x-secondary-button class="mr-3"
                                type="button"
                                wire:click="addBoundingBox"
            >
                {{ __('Add Bounding box') }}
            </x-secondary-button>
            <x-secondary-button class="mr-3"
                                type="button"
                                x-on:click="$wire.showProjectModal = false"
            >
                {{ __('Cancel') }}
            </x-secondary-button>
            <x-button>
                {{ __('Save') }}
            </x-button>

        </x-slot>
    </x-form-modal>
</x-modal>