@extends('layouts.app')

@section('styles')
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endsection

@section('content')

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <p class="card-title">Create Post</p>
                <form action="{{ url('/store-post') }}" method="post" class="row d-flex" id="postForm" enctype="multipart/form-data">
                    @csrf
                    <div class="col-6">
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <label for="title">The post title: </label>
                        <input type="text" name="title" id="title" 
                            class="form-control" placeholder="Post title" 
                            value="{{ old('title') }}" required maxlength="255" />
                        <br />

                        <label for="preview">Preview: </label>
                        <input type="text" name="preview" id="preview" 
                            class="form-control" placeholder="Post preview (max: 255 characters) " 
                            value="{{ old('preview') }}" maxlength="255" required />
                        <br />

                        <label for="subtitle">Subtitle: </label>
                        <input type="text" name="subtitle" id="subtitle" 
                            class="form-control" placeholder="Post subtitle"
                            value="{{ old('subtitle') }}" maxlength="255" />
                        <br />

                        <label for="meta_description">SEO Meta Description: </label>
                        <input type="text" name="meta_description" id="meta_description" 
                            class="form-control" placeholder="SEO Meta Description"
                            value="{{ old('meta_description') }}" maxlength="255" />
                        <br />

                        <label for="outstanding">Is outstanding: </label>
                        <select name="outstanding" id="outstanding" class="form-control">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                        <br />

                        <label for="active">Is active: </label>
                        <select name="active" id="active" class="form-control">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                        <br />
                        <label for="category_id">Post category: </label>
                        <select name="category_id" id="category_id" class="form-control">
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <br />

                    </div>
                    <div class="col-6">
                        <label for="image">Post image</label>
                        <input type="file" name="image" id="image" class="form-control" required />
                        <br />

                        <label for="inner_image">Post inner image</label>
                        <input type="file" name="inner_image" id="inner_image" class="form-control" />
                        <br />

                        <label for="file">Post file</label>
                        <input type="file" name="file" id="file" class="form-control" />
                        <br />

                        <label for="english">Post in english: </label>
                        <select name="english" id="english" class="form-control">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                        <br />

                        <label for="area_id">Writer: </label>
                        <select name="area_id" id="area_id" class="form-control">
                            @foreach($writers as $writer)
                                    <option value="{{ $writer->id }}">{{ $writer->name }}</option>
                            @endforeach
                        </select>
                        <br />
                        <label for="pair_id">Link post (For another language): </label>
                        <select name="pair_id" id="pair_id" class="form-control">
                            <option value="0">None</option>
                            @foreach($allPosts as $relPost)
                                <option value="{{ $relPost->id }}">{{ $relPost->title }}</option>
                            @endforeach
                        </select>
                        <br />
                        <p style="color:red">Link this post to an existent one in another language.</p>
                    </div>
                    <div class="col-12">
                    <label for="body">Cuerpo de la noticia</label>

                        <!-- the toolbar -->
                        <div id="toolbar">
                        </div>
                        <!-- the editor container -->
                        <div id="editor" style="height: 300px;"><style>.ql-clipboard{ display: none}</style>
                        </div>

                        <!--textarea name="body" style="display:none" id="hiddenArea"></textarea-->
                        <textarea name="body" style="display:none" id="hiddenArea" class="form-control" rows="5" required>
                        </textarea>
                        <br />
                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                        <button class="btn btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
        var form = $("#postForm");
        var ColorClass = Quill.import('attributors/class/color');
        var SizeStyle = Quill.import('attributors/style/size');
        Quill.register(ColorClass, true);
        Quill.register(SizeStyle, true);

        var tools = [
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'header': 1 }, { 'header': 2 }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'list': 'ordered'}],
            [{ 'direction': 'rtl' }],
            [{ 'indent': '-1'}, { 'indent': '+1' }],
            [{ 'align': [] }],
            [{ 'list': 'bullet' }],
            ['blockquote', 'code-block'],
            [ 'link', 'image'],

            ['clean']
        ];

        var quill = new Quill('#editor', {
            modules: {
                toolbar: tools,
            },
            placeholder: 'Cuerpo de la noticia',
            theme: 'snow',
            imageCompressor: {
                quality: 0.9,
                maxWidth: 1000, // default
                maxHeight: 1000, // default
            }
        });


        $("#postForm").on("submit",function() {
            $("#hiddenArea").val($(".ql-editor").first().html());
        })
    </script>

@endsection