@extends('layouts.master')

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

@section('sub_title')
    จัดการบทความ
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">บทความ</h3>
                        </div>
                        <div class="col text-right">
                            <a href="#addArticleModal" data-toggle="modal" class="btn btn-sm btn-primary"><i class="fas fa-plus text-white-50 mr-1"></i> เพิ่มบทความ</a>
                        </div>
                    </div>
                </div>
                <div class="card-body table-responsive py-3">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold">#</th>
                                <th class="align-middle text-center font-weight-bold" width="20%">รูปภาพ</th>
                                <th class="align-middle text-center font-weight-bold">หัวข้อหลัก</th>
                                <th class="align-middle text-center font-weight-bold">หัวข้อรอง</th>
                                <th class="align-middle text-center font-weight-bold"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = 0; @endphp
                            @foreach ($articles as $article)
                            <tr>
                                <td class="align-middle text-center font-weight-bold">{{ ++$i }}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:;" class="avatar avatar-xl">
                                        <img alt="Image placeholder" src="{{ asset("storage/{$article->picture}") }}">
                                    </a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">{{ $article->title }}</td>
                                <td class="align-middle text-center font-weight-bold">{{ $article->sub_title ?? '-' }}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <div class="dropdown">
                                        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                            <a class="dropdown-item" href="{{ route('manage.article.edit', $article->id) }}"><i class="fas fa-edit"></i> แก้ไขบทความ</a>
                                            <a class="dropdown-item text-danger" href="javascript:;" onclick="removeArticle(this)" data-id="{{ $article->id }}"><i class="fas fa-trash-alt fa-fw"></i> ลบบทความ</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addArticleModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <form onsubmit="formSubmitHandler(event, this)" class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">เพิ่มบทความ</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <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 for="articleName">หัวข้อหลัก</label>
                        <input type="text" class="form-control" id="articleName" name="article_name" placeholder="กรุณากรอกหัวข้อหลัก" />
                    </div>
                    <div class="form-group">
                        <label>หัวข้อรอง</label>
                        <input type="text" class="form-control" id="articleName" name="article_sub_name" placeholder="กรุณากรอกหัวข้อรอง" />
                    </div>
                    <div class="form-group">
                        <label for="articleDescription">เนื้อหา</label>
                        <textarea class="form-control" id="articleDescription" placeholder="กรุณากรอกเนื้อหา" rows="3"></textarea>
                    </div>           
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                    <button type="submit" class="btn btn-primary">บันทึก</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="editArticleModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <form class="modal-content">
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">เพิ่มบทความ</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">         
                    <div class="form-group">
                        <label>หัวข้อหลัก</label>
                        <input type="text" class="form-control" name="article_title" placeholder="กรุณากรอกหัวข้อหลัก" />
                    </div>
                    <div class="form-group">
                        <label>หัวข้อรอง</label>
                        <input type="text" class="form-control" name="article_sub_title" placeholder="กรุณากรอกหัวข้อรอง" />
                    </div>
                    <div class="form-group">
                        <label for="articleDescription">เนื้อหา</label>
                        <textarea class="form-control" id="articleDescriptionEdit" placeholder="กรุณากรอกเนื้อหา" rows="3"></textarea>
                    </div>  
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                    <button type="submit" class="btn btn-warning">แก้ไข</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="//cdn.ckeditor.com/4.16.2/full/ckeditor.js"></script>
    <script>
        $(function () {
            CKEDITOR.replace('articleDescription', {
                filebrowserUploadUrl: "{{route('manage.ckeditor.upload', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });
        async function formSubmitHandler(e, el)
        {
            e.preventDefault();
            const self = $(el);
            const formData = new FormData(el);
            formData.append('article_description', CKEDITOR.instances['articleDescription'].getData());
            const url = `{{ route('manage.article.index') }}`;

            const fetch = await fetchApi(url, 'post', formData);
            const result = await fetch.json();
            if (result.success) {
                self[0].reset();
                swalSuccess();
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                swalError();
            }
        }

        async function removeArticle(el)
        {
            const self = $(el);
            const url = `{{ route('manage.article.index') }}/${self.data('id')}`;
            const fetch = await fetchApi(url, 'delete', {});
            const result = await fetch.json();
            if (result.success) {
                swalSuccess();
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                swalError();
            }
        }
        function editArticle(el)
        {
            const self = $(el);
            const articleData = self.data('article');
            const target = $('#editArticleModal');
            target.find('input[name="article_title"]').val(articleData.title);
            target.find('input[name="article_sub_title"]').val(articleData.sub_title);
            target.find('#articleDescriptionEdit').val(articleData.description);
            if (CKEDITOR.instances['articleDescriptionEdit']) {
                CKEDITOR.instances['articleDescriptionEdit'].destroy();
            }
            CKEDITOR.replace('articleDescriptionEdit', {
                filebrowserUploadUrl: "{{route('manage.ckeditor.upload', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
            target.modal('show');

            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.article.index') }}/${articleData.id}`, 'post', formData);
                const result = await fetch.json();
                fetchedResultHandler(result);
            });
        }
    </script>
@endsection