@extends('admin.layouts.master')
<style>
    .select2-container--default .select2-selection--multiple .select2-selection__rendered{
        padding-bottom: 6px!important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice{
        background-color: #007BFF!important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        color: white!important;
    }
</style>
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Add New Article</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
                        <li class="breadcrumb-item active">
                            <a href="{{asset(route('article.index'))}}">Article</a>
                        </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-success">
            {{ session()->get('error') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div><br />
    @endif
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">New Article</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{!isset($article['title']) ? route('article.store') : route('article.update',$article['id'])}}" method="post" enctype="multipart/form-data">
                            @csrf
                            @if(isset($article['title']))
                                {{ method_field('PUT') }}
                            @endif

                            @foreach ($languages as $language)
                                <div class="row form-group">
                                    <div class="col">
                                        <label>Title in {{$language}}</label>
                                        <input type = "text" name = "title_{{strtolower($language)}}" class="form-control" {{$language == 'English' ? 'required' : ''}} value="{{ old('title_'.strtolower($language), $article['title_'.strtolower($language)]) }}">
                                    </div>
                                </div>
                            @endforeach

                            <div class="row form-group">
                                <div class="col">
                                    @include('admin.components.mutisource-company-options', [
                                        'all_option' => false,
                                        'source_company' => old('source_company', $article['source_company'])
                                    ])
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label>Category</label>
                                <select class="form-control select2x custom-select2" style="width: 100%;" name="categories[]" multiple>
                                    @foreach ($categories as $category)
                                        <optgroup label="{{ $category->name }}">
                                            <option @if($article->categories->contains($category)) selected @endif value="{{ $category->id }}" >{{ $category->name }}</option>
                                            @foreach ($category->children as $child)
                                                <option @if($article->categories->contains($child)) selected @endif value="{{ $child->id }}" >{{ $child->name }}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label>Pillar</label>
                                <select class="form-control select2x pillars-select2" style="width: 100%;" name="pillars[]" multiple>
                                    @foreach ($pillars as $pillar)
                                        <option @if($article->pillars->contains($pillar)) selected @endif value="{{ $pillar->id }}" >{{ $pillar->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group" style="display:none">
                                <label>Language</label>
                                <select class="form-control" style="width: 100%;" name="language">
                                    @foreach ($languages as $language)
                                        <option @if($article->language && $article->language == $language )) selected @endif value="{{ $language }}" >{{ $language }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="row form-group">
                                <div class="col">
                                    <label>Thumbnail</label>
                                    <input type = "file" {{!$article['id'] ? 'required' : ''}} name = "thumbnail"  class="dropify" data-default-file="{{ old('thumbnail', $article['thumbnail']) }}" data-show-remove="false">
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col">
                                    <label>Active</label>
                                    <select class="form-control" name="status" required>
                                        <option value="1" {{(isset($article['status']) && $article['status'] == 1) ? "selected" : ""}} selected>Yes</option>
                                        <option value="0" {{(isset($article['status']) && $article['status'] == 0) ? "selected" : ""}}>No</option>
                                    </select>
                                </div>
                            </div>

                            @foreach ($languages as $language)
                                <div class="row form-group">
                                    <div class="col">
                                        <label>Content in {{$language}}</label>
                                        <textarea type = "text" name = "content_{{strtolower($language)}}" id="content_{{strtolower($language)}}" class="ckeditor form-control" required>{{ old('content_'.strtolower($language), $article['content_'.strtolower($language)]) }}</textarea>
                                    </div>
                                </div>
                            @endforeach

                            <div class="row form-group">
                                <div class="col-md-12 text-right">
                                    <button class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
<script src="{{asset('admin_assets/plugins/ckeditor/ckeditor.js')}}"></script>
<script>
    // Ensure the DOM is fully loaded
    document.addEventListener("DOMContentLoaded", function() {
        // Query all elements with the class 'ckeditor-area'
        var editors = document.querySelectorAll('.ckeditor');
        
        // Loop through each element
        editors.forEach(function(editor) {
            CKEDITOR.replace(editor, {
                extraPlugins: 'imageuploader',
                height: '25em',
                filebrowserImageUploadUrl: "{{route('editor.image_upload', ['_token' => csrf_token() ])}}",
                toolbarGroups: [
                    { "name": "basicstyles", "groups": ["basicstyles"] },
                    { "name": "links", "groups": ["links"] },
                    { "name": "paragraph", "groups": ["list", "blocks"] },
                    { "name": "document", "groups": ["mode"] },
                    { "name": "insert", "groups": ["insert"] },
                    { "name": "styles", "groups": ["styles"] },
                    { "name": "about", "groups": ["about"] }
                ]
            });
        });
    });

    $(document).ready(function(){
        

        var drEvent = $('.dropify').dropify();
        drEvent.on('dropify.beforeClear', function(event, element){
            return confirm("Do you really want to delete \"" + element.filename + "\" ?");
        });

        setTimeout(() => {
            $('.custom-select2').select2({
                placeholder: "Please Select a Category",
                formatNoMatches: function () { return "There isn't any category similar to entered query"; }
            });
            $('.pillars-select2').select2({
                placeholder: "Please Select a Pillar",
                formatNoMatches: function () { return "There isn't any pillar similar to entered query"; }
            });
        }, 500);
    });
</script>
@endsection