@php use App\Enums\RolaPouzivatelaEnum;use App\Models\Informacia\Enums\StavInformacieEnum;use Illuminate\Support\Facades\URL;use Illuminate\Support\Str; @endphp
<form wire:submit="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="titulok"
                >
                <small class="form-text text-muted">Titulok informácie, napr. "Plánovaná údržba AISEK..."</small>
                @error('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="uvod"
        ></textarea>
        <small class="form-text text-muted">Zadajte úvod informácie.</small>
        @error('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="obsah"
        ></textarea>
        <small class="form-text text-muted">Zadajte obsah informácie.</small>
        @error('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.change="stav"
                >
                    @foreach(StavInformacieEnum::cases() as $case)
                        <option
                                value="{{ $case->name }}"
                                @if($case->equal($this->stav)) selected="selected" @endif
                                wire:key="wk-{{ $loop->index  }}"
                        >{{ Str::ucfirst($case->getLabel()) }}</option>
                    @endforeach
                </select>
                @error('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="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('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::cases() as $case)
                <div class="col-md-3">
                    <div class="form-check">
                        <input type="checkbox"
                               class="form-check-input"
                               id="role-{{ $case->name }}"
                               value="{{ $case->name }}"
                               wire:model.live="selectedRoles"
                        >
                        <label class="form-check-label" for="role-{{ $case->name }}">
                            {{ $case->getLabel() }}
                        </label>
                    </div>
                </div>
            @endforeach
        </div>
        @error('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="{{ $this->informacia->odporucane }}"
                               wire:model.live="odporucane"
                        >
                        <label class="custom-control-label" for="doporucana-switch">zvýrazniť informáciu</label>
                    </div>
                    @error('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="{{ $this->informacia->odoslat_email_na_pek }}"
                               wire:model.live="odoslat_email_na_pek"
                        >
                        <label class="custom-control-label" for="pek-email-switch">upozorniť pracoviská emailom</label>
                    </div>
                    @error('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="{{ $this->informacia->odoslat_email_pouzivatelom }}"
                               wire:model="odoslat_email_pouzivatelom"
                        >
                        <label class="custom-control-label" for="pouzivatelia-email-switch">upozorniť používateľov
                            emailom</label>
                    </div>
                    @error('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="{{ $this->informacia->odoslat_push_notifikacie_pouzivatelom }}"
                               wire:model="odoslat_push_notifikacie_pouzivatelom"
                        >
                        <label class="custom-control-label" for="user-notification-switch">upozorniť používateľov push
                            notifikáciou</label>
                    </div>
                    @error('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('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
