@php use App\Enums\RolaPouzivatelaEnum;use App\Models\Informacia\Enums\StavInformacieEnum;use Illuminate\Support\Facades\URL;use Illuminate\Support\Str; @endphp
<form wire:submit.prevent="submit">

    @include('flash::message')
    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <label for="titulok">Titulok <span class="text-red">*</span></label>
                <input type="text"
                       autocomplete="off"
                       id="titulok"
                       class="form-control"
                       name="titulok"
                       placeholder="titulok informácie"
                       wire:model.defer="informacia.titulok"
                >
                <small class="form-text text-muted">Titulok informácie, napr. "Plánovaná údržba AISEK..."</small>
                @error('informacia.titulok')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="uvod">Úvod <span class="text-red">*</span></label>
        <textarea class="form-control"
                  id="uvod"
                  name="uvod"
                  placeholder="úvod informácie"
                  rows="2"
                  wire:model.defer="informacia.uvod"
        ></textarea>
        <small class="form-text text-muted">Zadajte úvod informácie.</small>
        @error('informacia.uvod')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group" wire:ignore>
        <label for="obsah">Obsah <span class="text-red">*</span></label>
        <textarea class="form-control obsah"
                  id="obsah"
                  name="obsah"
                  placeholder="obsah informácie"
                  rows="24"
                  wire:model.defer="informacia.obsah"
        ></textarea>
        <small class="form-text text-muted">Zadajte obsah informácie.</small>
        @error('informacia.obsah')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="stav">Stav informácie <span class="text-red">*</span></label>
                <select class="custom-select form-control"
                        name="stav"
                        id="stav"
                        autocomplete="off"
                        wire:model="informacia.stav"
                >
                    @foreach(StavInformacieEnum::toArray() as $hodnota => $label)
                        <option
                                value="{{ $hodnota }}"
                                @if(StavInformacieEnum::from($hodnota)->equals(StavInformacieEnum::from($this->informacia->stav))) selected="selected" @endif
                        >{{ Str::ucfirst($label) }}</option>
                    @endforeach
                </select>
                @error('informacia.stav')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label for="planovany_cas_zverejnenia">Dátum a čas zverejnenia</label>
                <div wire:ignore>
                    <input type="datetime-local"
                           class="form-control"
                           readonly
                           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"
                           data-min-date="today"
                           id="planovany_cas_zverejnenia"
                           name="planovany_cas_zverejnenia"
                           placeholder="dátum a čas zverejnenia informácie"
                           wire:model.defer="informacia.planovany_cas_zverejnenia"
                    >
                </div>
                <small class="form-text text-muted">Ak požadujete informáciu zverejniť v konkrétnom čase, tak zadajte
                    dátum a čas plánovaného zverejnenia informácie.</small>
                @error('informacia.planovany_cas_zverejnenia')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="form-group">
        <label>Zverejniť pre používateľov s rolou</label>
        <div class="row">
            @foreach(RolaPouzivatelaEnum::toArray() as $key => $label)
                <div class="col-md-3">
                    <div class="form-check">
                        <input type="checkbox"
                               class="form-check-input"
                               id="role-{{ $key }}"
                               value="{{ $key }}"
                               wire:model="selectedRoles"
                        >
                        <label class="form-check-label" for="role-{{ $key }}">
                            {{ $label }}
                        </label>
                    </div>
                </div>
            @endforeach
        </div>
        @error('informacia.zverejnit_pre_pouzivatelov_podla_role')
        <div class="invalid-feedback">{{ $message }}</div>
        @enderror
        <small class="form-text text-muted">Vyberte role používateľov, pre ktorých bude informácia zverejnená. Ak
            nezvolíte žiadnu rolu, tak informácia bude zverejnená pre všetkých používateľov.</small>
    </div>

    <div class="form-group">
        <label for="popis">Možnosti informovania používateľov</label>
        <div class="form-row">
            <div class="col-md-6">
                <div class="form-group" wire:ignore>
                    <div class="custom-control custom-switch align-middle">
                        <input type="checkbox" class="custom-control-input" id="doporucana-switch"
                               name="user-notification-switch"
                               value="{{(bool) $this->informacia->odporucane}}"
                               wire:model="informacia.odporucane"
                        >
                        <label class="custom-control-label" for="doporucana-switch">zvýrazniť informáciu</label>
                    </div>
                    @error('informacia.odporucane')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group" wire:ignore>
                    <div class="custom-control custom-switch align-middle">
                        <input type="checkbox" class="custom-control-input" id="pek-email-switch"
                               name="user-notification-switch"
                               value="{{(bool) $this->informacia->odoslat_email_na_pek}}"
                               wire:model="informacia.odoslat_email_na_pek"
                        >
                        <label class="custom-control-label" for="pek-email-switch">upozorniť pracoviská emailom</label>
                    </div>
                    @error('informacia.odoslat_email_na_pek')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="col-md-6">
                <div class="form-group" wire:ignore>
                    <div class="custom-control custom-switch align-middle">
                        <input type="checkbox" class="custom-control-input" id="pouzivatelia-email-switch"
                               name="user-notification-switch"
                               value="{{(bool) $this->informacia->odoslat_email_pouzivatelom}}"
                               wire:model.defer="informacia.odoslat_email_pouzivatelom"
                        >
                        <label class="custom-control-label" for="pouzivatelia-email-switch">upozorniť používateľov
                            emailom</label>
                    </div>
                    @error('informacia.odoslat_email_pouzivatelom')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group" wire:ignore>
                    <div class="custom-control custom-switch align-middle">
                        <input type="checkbox" class="custom-control-input" id="user-notification-switch"
                               name="user-notification-switch"
                               value="{{(bool) $this->informacia->odoslat_push_notifikacie_pouzivatelom}}"
                               wire:model.defer="informacia.odoslat_push_notifikacie_pouzivatelom"
                        >
                        <label class="custom-control-label" for="user-notification-switch">upozorniť používateľov push
                            notifikáciou</label>
                    </div>
                    @error('informacia.odoslat_push_notifikacie_pouzivatelom')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </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->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
                @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>
                <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>
            </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.obsah'
        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('informacia.obsah', editor.getContent(), true)
                })
            }
        }

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

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