@extends('layouts.master')

@section('title')
    LT-168 :: บทความ
@endsection

@section('sub_title')
    แก้ไขบทความ
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div id="editArticleModal" class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">แก้ไขบทความ</h3>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form onsubmit="formSubmitHandler(event, this)" data-id="{{ $article->id }}">
                        @method('PUT')
                        <div class="text-center">
                            <img src="{{ asset("storage/{$article->picture}") }}" alt="..." class="img-thumbnail" style="max-width: 15%;">
                        </div>
                        <div class="form-group">
                            <label for="articleImage">แก้ไขรูปภาพ</label>
                            <input type="file" class="form-control-file" name="article_image" id="articleImage">
                        </div>
                        <div class="form-group">
                            <label>หัวข้อหลัก</label>
                            <input type="text" name="article_title" value="{{ $article->title }}" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label>หัวข้อรอง</label>
                            <input type="text" name="article_sub_title" value="{{ $article->sub_title }}"  class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label for="articleDescriptionEdit">เนื้อหา</label>
                            <textarea class="form-control" name="" id="articleDescriptionEdit" placeholder="กรุณากรอกเนื้อหา" rows="3">{{ $article->description }}</textarea>
                        </div>
                        <div class="text-right">
                            <button type="submit" class="btn btn-primary">บันทึก</button>
                        </div>
                    </form>                    
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="//cdn.ckeditor.com/4.16.2/full/ckeditor.js"></script>
    <script>
        $(function () {
            CKEDITOR.replace('articleDescriptionEdit', {
                filebrowserUploadUrl: "{{route('manage.ckeditor.upload', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });

        async function formSubmitHandler(e, el)
        {
            e.preventDefault();
            const self = $(el);
            const formData = new FormData(self[0]);
            formData.append('article_description', CKEDITOR.instances['articleDescriptionEdit'].getData());
            const fetch = await fetchApi(`{{ route('manage.howtoplay.index') }}/${self.data('id')}`, 'post', formData);
            const result = await fetch.json();
            fetchedResultHandler(result);
        }

        function editArticle(el)
        {
            const self = $(el);
            const articleData = self.data('article');
            const target = $('#editArticleModal');

            target.find('form').on('submit', async function (e) {
                e.preventDefault();
                const formData = new FormData($(this)[0]);
                formData.append('article_description', CKEDITOR.instances['articleDescriptionEdit'].getData());

                const fetch = await fetchApi(`{{ route('manage.howtoplay.index') }}/${articleData.id}`, 'post', formData);
                const result = await fetch.json();
                fetchedResultHandler(result);
            });
        }
    </script>
@endsection