@php use Illuminate\Support\Facades\URL; @endphp
<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>
        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: '{{ URL::secure('/') }}',
            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 code | fullscreen",
            relative_urls: false,
            convert_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>
        div.mce-fullscreen {
            position: fixed;
            top: 80px !important;
            left: 0;
        }
    </style>
@endpush
