@extends('layouts.app')

@section('title', @$edit ? __('Edit Articles') : 'Add Article')

@push('css')
    @include('panel.inc.datatable.css')
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ __('Data') }}
                </div>
                <h2 class="page-title">
                    {{ @$edit ? __("Edit Article") : __("Add Article") }}
                </h2>
            </div>
            <!-- Page title actions -->
        </div>
    </div>

    <form id="articleForm" method="post" action="{{ @$edit ? route('panel.data.articles.update', $module->id) : route('panel.data.articles.add') }}">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb">
                        <label class="form-label">Title</label>
                        <input class="form-control" name="title" placeholder="Title" required value="{{ $module->title }}">
                    </div>

                    <div class="col-md-6 mb">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">Category</label>
                                <select name="category_id" id="category" class="form-control" required>
                                    <option value=""></option>
                                    @foreach($categories as $category)
                                        <option {{ $module->category_id == $category->id ? 'selected' : '' }} data-data="{{ json_encode($category) }}" value="{{ $category->id }}">{{ $category->title }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Sub Category</label>
                                <select name="sub_category_id[]" id="sub_category" class="form-control" required multiple>
                                    @if(@$edit)
                                        <option value=""></option>
                                        @foreach($module->category->subCategories as $subCat)
                                            <option {{ $module->subCategories->contains($subCat->id) ? 'selected' : '' }} value="{{ $subCat->id }}">{{ $subCat->title }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label">Body</label>
                        <textarea class="form-control" placeholder="Enter Body" id="body" name="body">{{ $module->body }}</textarea>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <a class="btn btn-danger" href="{{ route('panel.data.articles') }}">Cancel</a>
                <button type="submit" class="btn btn-primary submission">Submit</button>
            </div>
        </div>
    </form>


@stop

@push('script')
    @include('panel.inc.tinymce.js')

    <script>
        tinymce.init({
            selector: '#body',
            plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            toolbar_mode: 'floating',
            height : 400
        });

        $('#category').selectize({
            placeholder: 'Select Category',
            valueField: 'id',
            labelField: 'title',
            searchField: ['title'],
            onChange: function(value){
                let data = this.options[value];
                let selector = $('#sub_category').data('selectize');
                selector.clear();
                selector.clearOptions();
                if (data) {
                    console.log(data);
                    selector.addOption(data.sub_categories);
                }
            }
        })

        $('#sub_category').selectize({
            placeholder: 'Select Sub Categories',
            valueField: 'id',
            labelField: 'title',
            searchField: ['title'],
            plugins: ['remove_button']
        });

        $('#articleForm').submit(function (e) {
            let form = this;
            $(form).find('.submission').btnloading();
            tinymce.triggerSave();

            formHandler({form, e}).then(function (r) {
                notify('success', r.data.message);

                setTimeout(function(){
                    window.location = '{{ route('panel.data.articles') }}';
                }, 1000);
            }).catch(function (e) {
                notify('error', e.response.data.message);
            }).then(function () {
                $(form).find('.submission').btnreset();
            })
        });
    </script>
@endpush