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

    @include('flash::message')

    @if(!$this->trashMode())
        <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"
                       placeholder="názov miesta"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model.defer="miesto.nazov"
                >
                <small class="form-text text-muted">Názov miesta, kde sa môže konať udalosť</small>
                @error('miesto.nazov')<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="ulica">Ulica <span class="text-red">*</span></label>
                <input type="text"
                       id="ulica"
                       name="ulica"
                       autocomplete="off"
                       class="form-control"
                       placeholder="ulica vrátane súpisného a popisného čísla"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model="miesto.ulica"
                >
                <small class="form-text text-muted">Názov ulice aj so súpisným a popisným číslom</small>
                @error('miesto.ulica')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col-12 col-md-4">
            <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"
                       placeholder="názov obce"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model.defer="miesto.obec"
                >
                <small class="form-text text-muted">Názov obce</small>
                @error('miesto.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"
                       placeholder="PSČ obce"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model.defer="miesto.psc"
                >
                <small class="form-text text-muted">PSČ obce</small>
                @error('miesto.psc')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <label for="latitude">Zemepisná šírka</label>
                <input type="number"
                       pattern="/^-?\d{1,2}.\d{0,}$/"
                       step="any"
                       lang="en"
                       id="latitude"
                       name="latitude"
                       class="form-control"
                       autocomplete="off"
                       placeholder="zemepisná šírka"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model.defer="miesto.latitude"
                >
                <small class="fomr-text text-muted">Zemepisná šírka, latitude, napr. 48.878995</small>
            </div>
        </div>

        <div class="col">
            <div class="form-group">
                <label for="longitude">Zemepisná dĺžka</label>
                <input type="number"
                       pattern="/^-?\d{1,2}.\d{0,}$/"
                       step="any"
                       lang="en"
                       id="longitude"
                       name="longitude"
                       class="form-control"
                       autocomplete="off"
                       placeholder="zemepisná dĺžka"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model.defer="miesto.longitude"
                >
                <small class="fomr-text text-muted">Zemepisná dĺžka, longitude, napr. 18.855764</small>
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col d-flex justify-content-between">
            <div class="col-auto m-0 p-0">
                @if(!$this->trashMode())
                    <button type="button" class="btn btn-info" onclick="showMap()">
                        <span class="icon-map"></span>
                        Vybrať z mapy
                    </button>
                @endif
                @can('terminy')
                    @if($this->trashMode())
                        <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->trashMode() && $this->editMode())
                    <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()">Zrušiť</button>
                @if(!$this->trashMode())
                    <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->editMode())
                            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.emit('geocoding', 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
