<form wire:submit.prevent="save">

    @include('flash::message')

    @if(!$this->trashed)
        <div class="modal fade" id="mapModal" role="dialog" wire:ignore>
            <div class="modal-dialog modal-lg modal-center-viewport" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12 w-100">
                                @map([
                                'lat' => 48.7,
                                'lng' => 19.7,
                                'zoom' => 7,
                                ])
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer modal-footer-borderless justify-content-center">
                        <button type="button" class="btn btn-lg btn-primary my-4" data-dismiss="modal"
                                aria-hidden="true">Zavrieť
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="form-row">
        <div class="col-12">
            <div class="form-group">
                <label for="nazov">Názov <span class="text-red">*</span></label>
                <input type="text"
                       id="nazov"
                       name="nazov"
                       autocomplete="off"
                       class="form-control @error('nazov') is-invalid @enderror"
                       placeholder="názov miesta"
                       @disabled($this->trashed)
                       wire:model.blur.live="nazov"
                >
                <small class="form-text text-muted">Názov miesta, kde sa môže konať udalosť</small>
                @error('nazov')
                <div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <label for="ulica">Ulica <span class="text-red">*</span></label>
                <input type="text"
                       id="ulica"
                       name="ulica"
                       autocomplete="off"
                       class="form-control @error('ulica') is-invalid @enderror"
                       placeholder="ulica vrátane súpisného a popisného čísla"
                       @disabled($this->trashed)
                       wire:model.blur.live="ulica"
                >
                <small class="form-text text-muted">Názov ulice aj so súpisným a popisným číslom</small>
                @error('ulica')
                <div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-12 col-md-6">
            <div class="form-group">
                <label for="obec">Obec <span class="text-red">*</span></label>
                <input type="text"
                       id="obec"
                       name="obec"
                       autocomplete="off"
                       class="form-control @error('obec') is-invalid @enderror"
                       placeholder="názov obce"
                       @disabled($this->trashed)
                       wire:model.blur.live="obec"
                >
                <small class="form-text text-muted">Názov obce</small>
                @error('obec')
                <div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col-12 col-md-2">
            <div class="form-group">
                <label for="psc">PSČ <span class="text-red">*</span></label>
                <input type="text"
                       id="psc"
                       name="psc"
                       autocomplete="off"
                       class="form-control @error('psc') is-invalid @enderror"
                       placeholder="PSČ obce"
                       @disabled($this->trashed)
                       wire:model.blur.live="psc"
                >
                <small class="form-text text-muted">PSČ obce</small>
                @error('psc')
                <div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="form-group">
                <label for="krajina">Krajina <span class="text-red">*</span></label>
                <input type="text"
                       id="krajina"
                       name="krajina"
                       autocomplete="off"
                       class="form-control @error('krajina') is-invalid @enderror"
                       placeholder="Krajina"
                       @disabled($this->trashed)
                       wire:model.blur.live="krajina"
                >
                <small class="form-text text-muted">Krajina</small>
                @error('krajina')
                <div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-12 col-md-6">
            <div class="form-group">
                <label for="latitude">Zemepisná šírka <span class="text-red">*</span></label>
                <input type="number"
                       pattern="/^-?\d{1,2}.\d{0,}$/"
                       step="any"
                       lang="en"
                       id="latitude"
                       name="latitude"
                       class="form-control @error('latitude') is-invalid @enderror"
                       autocomplete="off"
                       placeholder="zemepisná šírka"
                       @disabled($this->trashed)
                       wire:model.blur.live="latitude"
                >
                <small class="fomr-text text-muted">Zemepisná šírka, latitude, napr. 48.878995</small>
                @error('latitude')
                <div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="form-group">
                <label for="longitude">Zemepisná dĺžka <span class="text-red">*</span></label>
                <input type="number"
                       pattern="/^-?\d{1,2}.\d{0,}$/"
                       step="any"
                       lang="en"
                       id="longitude"
                       name="longitude"
                       class="form-control @error('longitude') is-invalid @enderror"
                       autocomplete="off"
                       placeholder="zemepisná dĺžka"
                       @disabled($this->trashed)
                       wire:model.blur.live="longitude"
                >
                <small class="fomr-text text-muted">Zemepisná dĺžka, longitude, napr. 18.855764</small>
                @error('longitude')
                <div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <hr>

    <div class="form-row">
        <div class="col d-flex justify-content-between">
            <div class="col-auto m-0 p-0">
                @if(!$this->trashed)
                    <button type="button" class="btn btn-info" onclick="showMap()">
                        <span class="icon-map"></span>
                        Vybrať z mapy
                    </button>
                @endif
                @can('terminy')
                    @if($this->trashed)
                        <button type="button" wire:click="restore()" class="btn btn-secondary">
                            <span wire:loading.remove wire:target="restore" class="icon-cw"></span>
                            <span wire:loading wire:target="restore" class="spinner-grow spinner-grow-sm"
                                  role="status"></span>
                            Obnoviť
                        </button>
                    @endif
                @endcan
                @if(!$this->trashed && $this->exists)
                    <button type="button" class="btn btn-danger" wire:click="trash()">
                        <span wire:loading.remove wire:target="trash" class="icon-cancel-circled"></span>
                        <span wire:loading wire:target="trash" class="spinner-grow spinner-grow-sm"
                              role="status"></span>
                        Zneplatniť
                    </button>
                @endif
            </div>

            <div class="col-auto m-0 p-0">
                <button type="button" class="btn btn-link" wire:click="cancel()">Zavrieť</button>
                @if(!$this->trashed)
                    <button type="button" wire:click="save()" class="btn btn-primary">
                        <span wire:loading.remove wire:target="save" class="icon-floppy"></span>
                        <span wire:loading wire:target="save" class="spinner-grow spinner-grow-sm" role="status"></span>
                        @if($this->exists)
                            Upraviť
                        @else
                            Vytvoriť
                        @endif
                    </button>
                @endif
            </div>
        </div>
    </div>

</form>

@push('styles')
    @mapstyles
@endpush

@push('scripts')
    @mapscripts

    <script type="text/javascript">
        let map = null

        function updateForm(lat, lng) {
            Livewire.dispatch('geocodingReceived', [lat, lng])
        }

        function showMap() {
            $('#mapModal').modal('toggle')

            setTimeout(function () {
                map.invalidateSize()
            }, 700)
        }

        window.addEventListener('LaravelMaps:MapInitialized', function (event) {
            const service = event.detail.service

            if (service === 'osm') {
                map = event.detail.map
                let marker = new L.Marker()

                map.on('click', function (e) {
                    marker.setLatLng(e.latlng)
                    marker.addTo(map)
                    updateForm(e.latlng.lat, e.latlng.lng)
                })
            }
        })
    </script>
@endpush
