@extends('layouts.uiMaster')

@section('title')
    LT-168 :: จัดการหน้าเว็บ
@endsection

@section('sub_title')
    จัดการหน้าเว็บ
@endsection

@section('content')
    <div class="row justify-content-center">

        <div class="col-md-12">
            <div class="card">
                <div class="card-header form-inline border-0">
                    <h3>จัดการบทความ</h3>
                    <button data-toggle="modal" data-target="#addArticle" class="btn ml-auto btn-success"><i
                            class="fa fa-edit"></i> เพิ่มบทความ</button>
                </div>
                <div class="card-body">
                    <table id="articlesTable" class="table table-strip">
                        <thead>
                            <tr>
                                <th class="text-center">ลำดับ</th>
                                <th class="text-center">รูปภาพ</th>
                                <th class="text-center">หัวข้อ</th>
                                <th class="text-center">จัดการ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $i = 0;
                            @endphp
                            @foreach ($article as $item)
                                @php
                                    $i++;
                                @endphp
                                <tr>
                                    <td class="text-center">{{ $i }}</td>
                                    <td class="text-center"><img id="imgInputPc"
                                            src="{{ asset('storage/' . $item->picture) }}" width="150"></td>
                                    <td class="text-center" style="font-size: 20px; font-weight: 600;">{{ $item->title }}
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ url('uiManage/articleEdit/' . $item->id) }}"><i
                                                class="fa fa-edit text-warning m-2" style="font-size: 30px;"></i></span></a>
                                        <span onclick="deleteThis({{ $item->id }})"><i
                                                class="fa fa-trash text-danger m-2" style="font-size: 30px;"></i></span>
                                    </td>
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <div class="modal fade" id="addArticle" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h6 class="modal-title" id="modal-title-default">ฟอร์มการเพิ่มบทความ</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">

                    <form method="POST" action="{{ route('article.store') }}" enctype="multipart/form-data">
                        @csrf
                        <span class="mt-3"><strong class="text-danger">รูปภาพบทความ:</strong></span>
                        <file-input class="d-block my-3">
                            <input slot="input" accept="image/*" type="file" name="picture"
                                class="form-control-file form-control-sm p-0">
                        </file-input>
                        <div class="form-group mb-3">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">หัวข้อบทความ</span>
                                </div>
                                <input type="text" name="title" class="form-control" placeholder="หัวข้อ">
                            </div>
                        </div>
                        <div class="form-group">
                            <textarea name="editor1" id=""></textarea>

                        </div>


                        <div class="form-inline ml-auto">
                            <button type="submit" class="btn  ml-auto btn-success">เพิ่มบทความ</button>
                            <button type="button" class="btn btn-warning" data-dismiss="modal">ยกเลิก</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>


@endsection

@section('scripts')
    <script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
    <script>
        $(document).ready(function() {
            CKEDITOR.replace('editor1');
        });



        $('#articlesTable').DataTable();

    </script>
    <script type="text/javascript">
        const _token = $('meta[name="csrf-token"]').attr('content');


        function deleteThis(id) {
            swal({
                    title: "คุณแน่ใจ?",
                    text: "หากลบแล้วจะไม่สามารถกู้คืนกลับมาได้อีก",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        $.post(`{{ route('article.delete') }}`, {
                            id: id,
                            _token: _token
                        }, function(data) {
                            swal('สำเร็จ', 'ลบสำเร็จแล้ว', 'success').then(function() {
                                location.reload();
                            });
                        });
                    }
                });
        }

        function readInputPc(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#imgShow').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

    </script>
@endsection