@extends('layouts.app')

@section('styles')
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
@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">Edit Post</p>
                <form action="{{ url('/save-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" value="{{ $post->title }}"
                               class="form-control" placeholder="Post title" required />
                        <br />

                        <label for="preview">Preview: </label>
                        <input type="text" name="preview"
                               id="preview" value="{{ $post->preview }}"
                               class="form-control" placeholder="Post preview" required />
                        <br />

                        <label for="subtitle">Subtitle: </label>
                        <input type="text" name="subtitle"
                               id="subtitle" value="{{ $post->subtitle }}"
                               class="form-control" placeholder="Post subtitle" />
                        <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="{{ $post->meta_description }}" />
                        <br />

                        <label for="outstanding">Is outstanding: </label>
                        <select name="outstanding" id="outstanding" class="form-control">
                            <option value="0" @if(!$post->outstanding) selected @endif>No</option>
                            <option value="1" @if($post->outstanding) selected @endif>Yes</option>
                        </select>
                        <br />

                        <label for="active">Is active: </label>
                        <select name="active" id="active" class="form-control">
                            <option value="0" @if(!$post->active) selected @endif>No</option>
                            <option value="1" @if($post->active) selected @endif>Yes</option>
                        </select>
                        <br />

                        <label for="english">Post in english: </label>
                        <select name="english" id="english" class="form-control">
                            <option value="0" @if(!$post->english) selected @endif>No</option>
                            <option value="1" @if($post->english) selected @endif>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 }}" @if($writer->id == $post->area_id) selected @endif>{{ $writer->name }}</option>
                            @endforeach
                        </select>
                        <br />

                        <label for="category_id">Post category: </label>
                        <select name="category_id" id="category_id" class="form-control">
                            <option value="{{ $post->category->id }}">{{ $post->category->name }}</option>
                            @foreach($categories as $category)
                                @if($category->id !== $post->category->id)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endif
                            @endforeach
                        </select>
                        <br />

                    </div>
                    <div class="col-6">
                        <label for="image">Post category:</label>
                        <br />
                        <img src="/storage/posts/{{ $post->image }}"
                             alt="The post main image"
                             title="The post main image"
                             style="width: 200px;margin: 20px 0;"
                        />
                        <input type="file" name="image" id="image" class="form-control" />
                        <br />

                        <label for="inner_image">Post inner image</label>
                        <br />
                        @if($post->inner_image)
                        <div style="display:flex;align-items:center" id="inner-div">
                            <img src="/storage/posts/{{ $post->inner_image }}"
                                 alt="The post main image"
                                 title="The post main image"
                                 style="width: 200px;margin: 20px 0;"
                            />
                            <button class='btn btn-danger' id="delete-inner" data-id-inner="{{$post->id}}">Delete</button>
                        </div>

                        @else
                            <strong>This post does not have an inner image.</strong>
                        @endif
                        <input type="file" name="inner_image" id="inner_image" class="form-control" />
                        <br />

                        <label for="file">Post file</label>
                        <br />
                        @if($post->file)
                        <div style="display:flex;align-items:center" id="file-div">
                            <a href="/storage/posts/{{$post->file}}" download><img class="mx-4 mb-3" src="/images/dashboard/dl.png" alt="" width="50px" height="50px"></a>
                            <button class='btn btn-danger' id="delete-file" data-id-file="{{$post->id}}">Delete</button>
                        </div>

                        @else
                            <strong>This post does not have an asociated file.</strong>
                        @endif
                        <input type="file" name="file" id="file" class="form-control" />
                        <br />

                        <label for="pair_id">Link post (For other language): </label>
                        <select name="pair_id" id="pair_id" class="form-control">
                            @if($pair)
                                <option value="0">None</option>
                                <option value="{{ $pair->id }}" selected>{{ $pair->title }}</option>
                                @foreach($allPosts as $relPost)
                                    @if($relPost->id !== $pair->id && $relPost->english != $post->english)
                                        <option value="{{ $relPost->id }}">{{ $relPost->title }}</option>
                                    @endif
                                @endforeach
                            @else
                                <option value="0">None</option>
                                @foreach($allPosts as $relPost)
                                    @if($relPost->id !== $post->id && $relPost->english != $post->english)
                                        <option value="{{ $relPost->id }}">{{ $relPost->title }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                        <br />
                        <p style="background:#F66A6A; color:white; padding: 5px 10px">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>
                            {!! $post->content !!}
                        </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="id" value="{{$post->id}}">
                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                        <button type="submit" class="btn btn-primary">Save</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>

    <script>
        $('#delete-inner').on('click', function(e){
            e.preventDefault();
            let id = $(this).attr('data-id-inner');
            console.log(id);
            let parentDiv = $(this).closest('#inner-div');


            if(confirm("Are you sure you want to delete this image?")){
                $.ajax({
                    type : 'POST',
                    url : '/delete-inner',
                    data : {
                        id : id,
                    },
                    headers: {'X-CSRF-TOKEN': '