@extends('frontend.layouts.template')
@section('stylesheet')
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
    <link href="{{ asset('frontend/assetsnew/plugins/tags/tagsinput.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('frontend/assetsnew/css/profile.css') }}" rel="stylesheet" />
@endsection
@section('content')
<div class="row box-banner" style="">
    <div class="col-12 p-0 img-bg">
        <div class="box-page-profile" style="">
            <div class="box-page-login-sub">
                <div class="mb-3">
                    <h3><b class="c-black">NEW WHAT WORKS BLOG</b></h3>
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        {{ $errors->first() }}
                    </div>
                @endif

                </div>
                <form class="form-what-works" action="{{ url('profile/what-works/'. $id) }}" enctype="multipart/form-data" method="POST">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                    <div class="form-row mb-3 justify-content-md-center">
                        <div class="col-md-4 col-sm-4">
                            <div class="form-group article-banner">
                                @if ($blog->image_blogs)
                                <i class="fa fa-times text-danger remove-image remove-file pointer" data-id="{{ $blog->image_blogs->id }}"  aria-hidden="true" ></i>
                                @endif
                                <div class="file-preview">
                                    <label class="w-100 bg-white">Image preview</label>
                                    <div class="preview-banner">
                                        <div class="preview">
                                            <img class="img-preview" src="{{ $blog->image_blogs ? asset($blog->image_blogs->link) : '' }}" />
                                            <div class="text">
                                                <i class="fa fa-photo"></i>
                                            </div>
                                            <input  type="file" name="article-banner" id="article-banner" class="file-image" accept="image/*" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-row">
                        <div class="col-md-4 col-sm-4">
                            <label>Category</label>
                            <select class="form-control" id="category_id" name="category_id">
                                <option value="0">-SELECT-</option>
                                @if ($category)
                                    @foreach ($category as $cate)
                                        <option value="{{ $cate->id }}" {{ $blog->category_id == $cate->id ? 'selected' : '' }}>{{ $cate->name }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <small class="text-danger" ></small>
                        </div>
                        <div class="col-md-8 col-sm-8">
                            <label>Subject</label>
                            <input type="input" class="form-control" id="subject" name="subject" placeholder="Input article title" value="{{ $blog->subject }}" />
                            <small class="text-danger"></small>
                        </div>
                    </div>
                    <div class="form-group form-row">
                        <div class="col-md-2 col-sm-2">
                            <label>Date</label>
                            <input id="event_date" class="form-control bg-white" readonly name="event_date" value="{{ $blog->event_date ? $blog->event_date : $blog->created_at }}" />
                            <small class="text-danger"></small>
                        </div>
                        <div class="col-md-5 col-sm-5">
                            <label>Writer</label>
                            <input type="text" name="writerstags" data-role="tagsinput" value="{{ tagsList( $blog->writer ) }}"/>
                            <small class="text-danger" v-if="errors.writer"></small>
                        </div>
                        <div class="col-md-5 col-sm-5">
                            <label>Tags</label>
                            <input type="text" id="tags" name="tags" class="form-control" value="{{ tagsList( $blog->tags ) }}">
                            <small class="text-danger" v-if="errors.tags"></small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" name="description" placeholder="Article description">{{ $blog->description }}</textarea>
                        <small class="text-danger" v-if="errors.description"></small>
                    </div>
                    <div class="form-group" id="detail">
                        <textarea name="detail" id="blog-detail">{{ $blog->detail }}</textarea>
                        <small class="text-danger" v-if="errors.detail"></small>
                    </div>
                    <div class="form-group form-row">
                        <div class="col-md-4 col-sm-4">
                            <label class="w-100">File attachment</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="attach_file" accept=".pdf,.xlsx,.xls,.docx,.doc" name="attach_file">
                                <label class="custom-file-label" for="customFile">Choose file</label>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4">
                            <div class="form-group">
                                <label class="w-100 mb-1">&nbsp;</label>
                                @if ($blog->attach_blogs )
                                    <div class="input-group mb-3 mt-1">
                                        {{--
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><span></span></span>
                                        </div>
                                        --}}
                                        <div class="form-control">{{ $blog->attach_blogs->filename }}</div>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><a href="{{ url('downloads?file='. $blog->attach_blogs->link) }}"><i class="fa fa-download" aria-hidden="true"></i></a></span>
                                            <span class="input-group-text"><a href="#" data-id="{{ $blog->attach_blogs->id }}" class="remove-file"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></span>
                                        </div>
                                    </div>
                                @endif
                            {{--
                                <label>Sortable</label>
                                <input type="number" class="form-control text-right" placeholder="Sort number" name="sortable" />
                            --}}
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 pl-4">
                            <label class="w-100">Publist</label>
                            <div class="">
                                <input type="checkbox" data-toggle="toggle" name="status" {{ $blog->published == 1 || $blog->published == 2 ? 'checked' : '' }} data-onstyle="success" data-on="Publish" data-off="Draft">
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 pl-4 text-right button-center">
                            <label class="w-100">&nbsp;</label>
                            <button type="submit" class="btn button-b text-center border-r0" style="">SAVE</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
    var data_writers = {
        text : '{{ auth()->user()->name }}',
        id : '{{ auth()->user()->id }}'
    };
</script>
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<script src="{{ asset('frontend/assetsnew/plugins/tags/tagsinput.js') }}" type="text/javascript"></script>
<script src="{{ asset('frontend/assetsnew/plugins/moment.js') }}" type="text/javascript"></script>
<script src="https://cdn.tiny.cloud/1/3rhe8ho2jknd1srco7cwk4t4iu1c1pbvj3ine89vquy8ynzh/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script src="{{ asset('frontend/assetsnew/js/form-whatworks.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    (function($){
        $('.remove-file').on('click',function(e){
            e.preventDefault();

            let id = $(this).data('id');
            let url = `{{ url('profile/what-works/attach-delete/') }}/${id}`;
            console.log('delete file id : ', url );
            if( !confirm('แน่ใจว่าต้องการลบไฟล์นี้') )
                return false;
            window.location.href = `${url}`;
        })
    }(jQuery));
</script>
@endsection