@extends('layouts.admin')

{{-- Customize layout sections --}}
@section('subtitle', 'Post')
@section('content_header_title', 'Home')
@section('content_header_subtitle', 'Post')

{{-- Content body: main page content --}}

@section('content_body')
    <form method="POST" action="{{ route('admin.posts.update', $post->slug) }}" enctype="multipart/form-data">
        @method('PUT')
        @csrf
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        {{ trans('global.create') }} {{ trans('cruds.post.title_singular') }}
                    </div>

                    <div class="card-body">
                        <div class="form-group">
                            <label class="required" for="title">{{ trans('cruds.post.fields.title') }}</label>
                            <input class="form-control {{ $errors->has('title') ? 'is-invalid' : '' }}" type="text" name="title" id="title" value="{{ $post->title }}" required>
                            @if ($errors->has('title'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('title') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.title_helper') }}</span>
                        </div>
                        {{-- <div class="form-group">
                            <label for="slug">{{ trans('cruds.post.fields.slug') }}</label>
                            <input class="form-control {{ $errors->has('slug') ? 'is-invalid' : '' }}" type="text"
                                name="slug" id="slug" value="{{ old('slug', '') }}">
                            @if ($errors->has('slug'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('slug') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.slug_helper') }}</span>
                        </div> --}}
                        <div class="form-group">
                            <label for="excerpt">{{ trans('cruds.post.fields.excerpt') }}</label>
                            <textarea class="form-control {{ $errors->has('excerpt') ? 'is-invalid' : '' }}" type="text" name="excerpt" id="excerpt">{{ $post->excerpt }}</textarea>
                            @if ($errors->has('excerpt'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('excerpt') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.excerpt_helper') }}</span>
                        </div>
                        <div class="form-group">                           
                            <div id="quill-editor" class="mb-3" style="height: 300px;"></div> 
                            <textarea rows="3" class="mb-3 d-none" name="content" id="quill-editor-area">{{ $post->content }}</textarea>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-danger" type="submit">
                                {{ trans('global.save') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        {{ trans('global.create') }} {{ trans('cruds.post.title_singular') }}
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="required" for="schedule">{{ trans('cruds.post.fields.schedule') }}</label>
                            <input class="form-control date {{ $errors->has('schedule') ? 'is-invalid' : '' }}" type="text" name="schedule" id="schedule" value="{{ old('schedule', now()) }}" required>
                            @if ($errors->has('schedule'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('schedule') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.schedule_helper') }}</span>
                        </div>                        
                        <div class="form-group">
                            <label>{{ trans('cruds.post.fields.category') }}</label>
                            @foreach (App\Models\Post::CATEGORY_RADIO as $key => $label)
                                <div class="form-check {{ $errors->has('category') ? 'is-invalid' : '' }}">
                                    <input class="form-check-input" type="radio" id="status_{{ $key }}" name="category" value="{{ $key }}"
                                        {{ old('category', 'article') === (string) $key ? 'checked' : '' }}>
                                    <label class="form-check-label" for="category_{{ $key }}">{{ $label }}</label>
                                </div>
                            @endforeach
                            @if ($errors->has('category'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('category') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.category_helper') }}</span>
                        </div>      
                        <div class="form-group">
                            <label>{{ trans('cruds.post.fields.status') }}</label>
                            @foreach (App\Models\Post::STATUS_RADIO as $key => $label)
                                <div class="form-check {{ $errors->has('status') ? 'is-invalid' : '' }}">
                                    <input class="form-check-input" type="radio" id="status_{{ $key }}" name="status" value="{{ $key }}"
                                        {{ old('status', 'draft') === (string) $key ? 'checked' : '' }}>
                                    <label class="form-check-label" for="status_{{ $key }}">{{ $label }}</label>
                                </div>
                            @endforeach
                            @if ($errors->has('status'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('status') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.status_helper') }}</span>
                        </div>      
                        <div class="form-group">
                            <label class="required" for="topic_id">{{ trans('cruds.post.fields.topic') }}</label>
                            <select class="form-control select2 {{ $errors->has('topic') ? 'is-invalid' : '' }}" name="topic_id" id="topic_id">
                                @foreach ($topics as $id => $entry)
                                    <option value="{{ $id }}" {{ old('topic_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('topic'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('topic') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.topic_helper') }}</span>
                        </div>                                     
                        <div class="form-group">
                            <label for="tags">{{ trans('cruds.post.fields.tags') }}</label>
                            <div style="padding-bottom: 4px">
                                <span class="btn btn-info btn-xs select-all" style="border-radius: 0">{{ trans('global.select_all') }}</span>
                                <span class="btn btn-info btn-xs deselect-all" style="border-radius: 0">{{ trans('global.deselect_all') }}</span>
                            </div>
                            <select class="form-control select2 {{ $errors->has('tags') ? 'is-invalid' : '' }}" name="tags[]" id="tags" multiple>
                                @foreach ($tags as $id => $tag)
                                    <option value="{{ $id }}" {{ in_array($id, old('tags', [])) ? 'selected' : '' }}>{{ $tag }}</option>
                                @endforeach
                            </select>
                            @if ($errors->has('tags'))
                                <div class="invalid-feedback">
                                    {{ $errors->first('tags') }}
                                </div>
                            @endif
                            <span class="help-block">{{ trans('cruds.post.fields.tags_helper') }}</span>
                        </div>                      
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() { 
            if (document.getElementById('quill-editor-area')) { 
                var editor = new Quill('#quill-editor', { 
                    modules: { 
                        syntax: true,
                        toolbar: [ 
                            [{ 'header': [1, 2, false] }], 
                            [{ 'font': [] }],                            
                            ['bold', 'italic', 'underline', 'strike'], 
                            ['blockquote', 'code-block'], 
                            [{ 'list': 'ordered' },{ 'list': 'bullet' }, 'align'], 
                            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent                            
                            ['link', 'image', 'video'], ['clean'] 
                        ] 
                    },
                    placeholder: 'Write a post...',
                    theme: 'snow' 
                }); 
                var textArea = document.getElementById('quill-editor-area'); 
                editor.on('text-change', function() { 
                    // quillEditor.value = editor.root.innerHTML; 
                    textArea.value = JSON.stringify(editor.getContents().ops); 
                }); 
                textArea.addEventListener('input', function() { 
                    editor.root.innerHTML = textArea.value; 
                }); 
                editor.setContents({!! $post->content !!})
            } 
        });
    </script>
@endpush