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

    @include('flash::message')
    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <label for="nazov">Názov <span class="text-red">*</span></label>
                <input type="text"
                       autocomplete="off"
                       id="nazov"
                       class="form-control"
                       name="nazov"
                       placeholder="názov udalosti"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model.defer="udalost.nazov"
                >
                <small class="form-text text-muted">Názov udalosti, napr. "Školenie administratívnych pracovníkov..."</small>
                @error('udalost.nazov')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <label for="datum_konania_od">Dátum a čas začiatku <span class="text-red">*</span></label>
                <div wire:ignore>
                    <input type="text"
                           class="form-control"
                           data-flatpickr
                           data-alt-input="true"
                           data-alt-format="d.m.Y o H:i"
                           data-date-format="Y-m-d\TH:i"
                           data-week-numbers="true"
                           data-time_24hr="true"
                           data-month-selector-type="static"
                           data-enable-time="true"
                           id="datum_konania_od"
                           name="datum_konania_od"
                           placeholder="dátum a čas začiatku udalosti"
                           @if($this->trashMode()) disabled="disabled" @endif
                           wire:model.defer="udalost.datum_od"
                    >
                </div>
                <small class="form-text text-muted">Zadajte prosím dátum a čas začiatku udalosti.</small>
                @error('udalost.datum_od')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col">
            <div class="form-group">
                <label for="datum_konania_do">Dátum a čas ukončenia <span class="text-red">*</span></label>
                <div wire:ignore>
                    <input type="text"
                           class="form-control"
                           data-flatpickr
                           data-enable-time="true"
                           data-alt-input="true"
                           data-alt-format="d.m.Y o H:i"
                           data-date-format="Y-m-d\TH:i"
                           data-week-numbers="true"
                           data-time_24hr="true"
                           data-month-selector-type="static"
                           id="datum_konania_do"
                           name="datum_konania_do"
                           placeholder="dátum a čas ukončenia udalosti"
                           @if($this->trashMode()) disabled="disabled" @endif
                           wire:model.defer="udalost.datum_do"
                    >
                </div>
                <small class="form-text text-muted">Zadajte prosím dátum a čas ukončenia udalosti.</small>
                @error('udalost.datum_do')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>
    <div class="form-row">
        <div class="col-md-9 col-sm-12">
            <div class="form-group">
                <label for="miesto_konania">Miesto konania <span class="text-red">*</span></label>
                <select class="custom-select form-control"
                        id="miesto_konania"
                        name="miesto_konania"
                        autocomplete="off"
                        @if($this->trashMode()) disabled="disabled" @endif
                        wire:model="udalost.miesto_konania_id"
                >
                @forelse($miestaKonania as $miestoKonania)
                    <option value="{{ $miestoKonania->id }}"
                        @if($udalost->miesto_konania_id === $miestoKonania->id) selected="selected" @endif
                    >{{ $miestoKonania->adresa }}</option>
                @empty
                    <option value="0">neexistuje žiadne miesto konania udalosti</option>
                @endforelse
                </select>
                <small class="form-text text-muted">Zadajte miesto konania udalosti.</small>
                @error('udalost.miesto_konania_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col-md-3 col-sm-12">
            <div class="form-group">
                <label for="kapacita">Kapacita <span class="text-red">*</span></label>
                <input type="number"
                       min="1"
                       class="form-control"
                       id="kapacita"
                       name="kapacita"
                       placeholder="maximálna kapacita udalosti"
                       @if($this->trashMode()) disabled="disabled" @endif
                       wire:model.defer="udalost.kapacita"
                >
                <small class="form-text text-muted">Zadajte maximálnu kapacitu udalosti.</small>
                @error('udalost.kapacita')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col">
            <div class="form-group" wire:ignore>
                <label for="stav">Stav udalosti <span class="text-red">*</span></label>
                <select class="custom-select form-control"
                        name="stav"
                        id="stav"
                        autocomplete="off"
                        @if($this->trashMode()) disabled="disabled" @endif
                        wire:model="udalost.stav"
                >
                @foreach(\Seka\Portal\Modul\Terminy\Entities\Udalost\StavUdalosti::toArray() as $hodnota => $label)
                    <option
                            value="{{ $hodnota }}"
                            @if(\Seka\Portal\Modul\Terminy\Entities\Udalost\StavUdalosti::make($hodnota)->equals($udalost->stav)) selected="selected" @endif
                    >{{ \Illuminate\Support\Str::ucfirst($label) }}</option>
                @endforeach
                </select>
                @error('udalost.stav')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col">
            <div class="form-group" wire:ignore>
                <label for="druh">Druh udalosti <span class="text-red">*</span></label>
                <select class="custom-select form-control"
                        name="druh"
                        id="druh"
                        autocomplete="off"
                        @if($this->trashMode()) disabled="disabled" @endif
                        wire:model="udalost.druh"
                >
                @foreach(\Seka\Portal\Modul\Terminy\Entities\Udalost\DruhUdalosti::toArray() as $hodnota => $label)
                    <option value="{{ $hodnota }}"
                            @if(\Seka\Portal\Modul\Terminy\Entities\Udalost\DruhUdalosti::make($hodnota)->equals($udalost->druh)) selected="selected" @endif
                    >{{ \Illuminate\Support\Str::ucfirst($label) }}</option>
                @endforeach
                </select>
                @error('udalost.druh')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="col">
            <div class="form-group" wire:ignore>
                <label for="registracia">Registrácia <span class="text-red">*</span></label>
                <select class="custom-select form-control"
                        name="registracia"
                        id="registracia"
                        autocomplete="off"
                        @if($this->trashMode()) disabled="disabled" @endif
                        wire:model="udalost.registracia"
                >
                @foreach(\Seka\Portal\Modul\Terminy\Entities\Udalost\StavRegistracie::toArray() as $hodnota => $label)
                    <option value="{{ $hodnota }}"
                            @if(\Seka\Portal\Modul\Terminy\Entities\Udalost\StavRegistracie::make($hodnota)->equals($udalost->registracia)) selected="selected" @endif
                    >{{ \Illuminate\Support\Str::ucfirst($label) }}</option>
                @endforeach
                </select>
                @error('udalost.registracia')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-row">
        <div class="col">
            <div class="form-group" wire:ignore>
                <label for="">Upozorniť pracoviská na udalosť</label>
                <div class="custom-control custom-switch align-middle">
                    <input type="checkbox" class="custom-control-input" id="user-notification-switch" name="user-notification-switch" wire:model.defer="udalost.povolene_upozornenie" wire:click="toggleStavUpozornenia()">
                    <label class="custom-control-label" for="user-notification-switch">zapnite v prípade, ak si želáte informovať pracoviská o vytvorení, resp. zmene udalosti formou notifikácie</label>
                </div>
                @error('udalost.povolene_upozornenie')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="form-group" wire:ignore>
        <label for="popis">Poznámka</label>
        <textarea class="form-control popis"
                  id="popis"
                  name="popis"
                  placeholder="poznámka k udalosti"
                  rows="16"
                  wire:model.defer="udalost.popis"
        ></textarea>
        <small class="form-text text-muted">Zadajte poznámku k udalosti.</small>
        @error('udalost.popis')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-row">
        <div class="col d-flex justify-content-between">
            <div class="col-auto m-0 p-0">
                @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>
                        Odstrániť
                    </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')
    <style type="text/css">
        div.flatpickr-time {
            height: auto !important;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://npmcdn.com/flatpickr/dist/l10n/sk.js"></script>
    <script type="application/javascript">
      flatpickr.localize(flatpickr.l10ns.sk);
      flatpickr.l10ns.default.firstDayOfWeek = 1;
    </script>
@endpush

@push('scripts')
    <script src="{{mix('/js/tinymce/tinymce.min.js', '/vendor/seka/terminy')}}"></script>
    <script>
      const editorElement = 'textarea.popis'
      const editor_config = {
        path_absolute : "/",
        selector: editorElement,
        language_url: "{{asset('/vendor/seka/terminy/js/tinymce/langs/sk.js')}}",
        language: 'sk',
        plugins: [
          "advlist autolink lists link image charmap print preview hr anchor pagebreak",
          "searchreplace wordcount visualblocks visualchars code fullscreen",
          "insertdatetime media nonbreaking save table directionality",
          "emoticons template paste textpattern"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | fullscreen",
        relative_urls: false,
        file_picker_callback : function(callback, value, meta) {
          const x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth
          const y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight
          const cmsURL = editor_config.path_absolute + 'file-manager?editor=tinymce5&type=Files'

          tinyMCE.activeEditor.windowManager.openUrl({
            url : cmsURL,
            title : 'Správca súborov',
            width : x * 0.8,
            height : y * 0.8,
            resizable : 'yes',
            close_previous : 'no',
            onMessage: (api, message) => {
              callback(message.content)
            }
          })
        },
        setup: function (editor) {
          editor.on('init change', function () {
            editor.save()
          })

          editor.on('change', function () {
            @this.set('udalost.popis', editor.getContent(), true)
          })
        }
      }

      @if($this->trashMode())
      editor_config.readonly = 1
      @endif

      tinymce.init(editor_config)
    </script>
@endpush

@push('styles')
    <style type="text/css">
        div.mce-fullscreen {
            position: fixed;
            top: 80px !important;
            left: 0;
        }
    </style>
@endpush
