{{-- EXTENDS TEMPLATE --}}
@extends('layouts.app')

{{-- TITLE --}}
@section('title', ($Artikel == TRUE)? __('lang.edit_data', ['data' => __('lang.halaman_static')]) : __('lang.add_data', ['data' => __('lang.halaman_static')]))

{{-- ADDITIONAL STYLE --}}
@push('addons-style')
<link rel="stylesheet" href="{{ url('/') }}/assets/vendor/datatables/datatables.css" />
<link rel="stylesheet" href="{{ url('/') }}/assets/vendor/select2/css/select2.css" />
<link rel="stylesheet" href="{{ url('/') }}/assets/vendor/select2-bootstrap-theme/select2-bootstrap.min.css" />
@endpush

{{-- ADDITIONAL SCRIPT --}}
@push('addons-script')
<script src="{{ url('/') }}/assets/vendor/select2/js/select2.js"></script>
<script src="{{ url('/') }}/assets/vendor/datatables/datatables.js"></script>
<script src="{{ url('/') }}/assets/vendor/parsley/parsley.min.js"></script>
<script src="{{ asset('js/tinymce/js/tinymce.min.js') }}" referrerpolicy="origin"></script>
@endpush

{{-- CUSTOM STYLESHEET --}}
@push('custom-style')

@endpush

{{-- CUSTOM SCRIPT --}}
@push('custom-script')
<script>
    $(() => {
        const tinymceCSS = $("#tinymceCSS").val();

        var editor_config = {
            path_absolute : "/",
            height: 500,
            selector: 'textarea#content',
            relative_urls: false,
            content_css: [tinymceCSS],
            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",
            file_picker_callback : function(callback, value, meta) {
                var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
                var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

                var cmsURL = editor_config.path_absolute + 'laravel-filemanager?editor=' + meta.fieldname;
                if (meta.filetype == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                tinyMCE.activeEditor.windowManager.openUrl({
                    url : cmsURL,
                    title : 'Filemanager',
                    width : x * 0.8,
                    height : y * 0.8,
                    resizable : "yes",
                    close_previous : "no",
                    onMessage: (api, message) => {
                        callback(message.content);
                    }
                });
            },
            setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });
            }
        };

        tinymce.init(editor_config);
    });
</script>

<script>
    $(() => {
        $(".btn-save").on('click', function(e) {
            e.preventDefault();

            $("#formHalamanStatic").parsley().validate();

            if ($("#formHalamanStatic").parsley().isValid()) {
                $("#formHalamanStatic").trigger('submit');
            }
        });
    });
</script>
@endpush

{{-- CONTENT --}}
@section('content')
<section role="main" class="content-body">
    <x-page-layout :breadcrumbs="$bc"></x-page-layout>
    <div class="row">
        <div class="col-md-12">
            <section class="card card-featured card-featured-primary mb-4">
                <header class="card-header">
                    <h4 class="card-title m-0 me-2">
                        @if ($Artikel == TRUE)
                            @lang('lang.edit_data', ['data' => __('lang.halaman_static')])
                        @else
                             @lang('lang.add_data', ['data' => __('lang.halaman_static')])
                        @endif
                        </h4>
                </header>
                <div class="card-body">
                    <x-forms.form method="POST" action="{{ $method }}" id="formHalamanStatic" onsubmit="btnLoading('{!! __('messages.saving_state') !!}')" autocomplete="off" enctype="multipart/form-data" data-parsley-validate="">
                    @csrf
                    <x-forms.form-help :mode="$updateMode" />
                    <div class="mb-3">
                        <x-forms.label for="title" :value="__('lang.title')" /><span class="asterisk">*</span>
                        <input id="title" type="text" class="form-control" name="title" value="{{ ($Artikel == TRUE)? $Artikel->tittle:old('title') }}" placeholder="@lang('lang.place_data', ['data' => __('lang.title')])" required/>
                    </div>
                    <div class="mb-3">
                        <input type="hidden" id="tinymceCSS" value="{{ Module::asset('artikel:css/customTinyMCE.css') }}">
                        <x-forms.label for="content" :value="__('lang.content')" /><span class="asterisk">*</span>
                        <x-forms.tinymce-editor name="content" id="content" required>@if ($Artikel == TRUE) {{$Artikel->content}} @endif</x-forms.tinymce-editor>
                    </div>
                    <div class="mb-3">
                        <x-forms.label for="youtube" :value="__('lang.youtube')" />
                        <input id="youtube" type="text" class="form-control" name="youtube" value="{{ ($Artikel == TRUE)? $Artikel->youtube:old('youtube') }}" placeholder="@lang('lang.place_data', ['data' => __('lang.youtube')])"/>
                    </div>
                    @if ($Artikel == TRUE)
                    <div class="mb-3">
                        <x-forms.label for="slug" :value="__('lang.slug')" />
                        <input id="slug" type="text" class="form-control" name="slug" value="{{ ($Artikel == TRUE)? $Artikel->slug:old('slug') }}" placeholder="@lang('lang.place_data', ['data' => __('lang.slug')])"/>
                    </div>
                    @endif
                    <div class="mb-3">
                        <x-forms.label for="status" :value="__('lang.status')" /><span class="asterisk">*</span>
                        <select class="form-control" name="status" id="status" required>
                            <option value="" selected>{{ __('messages.select_data', ['data' => __('lang.status'),]) }}</option>
                            <option value="publish" @if ($Artikel == TRUE) {{ 'publish' == $Artikel->status ? 'selected' : '' }} @endif>{{ __('lang.publish')}}</option>
                            <option value="draft" @if ($Artikel == TRUE) {{ 'draft' == $Artikel->status ? 'selected' : '' }} @endif>{{ __('lang.draft')}}</option>
                        </select>
                    </div>
                    </x-forms.form>
                    <x-forms.button-href class="btn btn-info" href="{{ route('artikel.HalamanStaticIndex') }}" icon="bx bx-chevron-left">{{ __('lang.back') }}</x-forms.button-href>
                    <x-forms.button-submit class="btn btn-primary btn-loading btn-save"><i class="bx bx-save me-1"></i> {{ __('lang.save') }}</x-forms.button-submit>
                </div>
            </section>
        </div>
    </div>
</section>
@endsection
