@extends('admin.layout')

@section('content')
    <div class="container-fluid">
        @php $type_title = \App\Models\PostSale::$type_title_key @endphp
        <div class="row">
            <div class="col-md-12">
                <!-- DATA TABLE -->
                <div class="card">
                    <form class="form-horizontal" action="save-post" method="post">
                        {{ csrf_field() }}
                        <div class="card-header">
                            <strong>Chỉnh sửa tin khuyến mãi</strong>
                        </div>
                        <div class="card-body card-block">
                            <div class="row"  style="min-height: 660px;">
                                <div class="col-8">
                                    <div class="row form-group">
                                        <div class="col col-md-3">
                                            <label class="form-control-label">Loại bài viết <em class="red-color">*</em></label>
                                        </div>
                                        <div class="col-12 col-md-9">
                                            <select name="type" class="form-control" required>
                                                <option value="{{\App\Models\PostSale::TYPE_SALE}}"
                                                        @if(old('type') && old('type') == \App\Models\PostSale::TYPE_SALE) selected
                                                        @elseif(!old('type') && $postSale->type == \App\Models\PostSale::TYPE_SALE) selected @endif>
                                                    {{__($type_title[\App\Models\PostSale::TYPE_SALE])}}
                                                </option>
                                                <option @if(old('type') && old('type') == \App\Models\PostSale::TYPE_TUTORIAL) selected
                                                        @elseif(!old('type') && $postSale->type == \App\Models\PostSale::TYPE_TUTORIAL) selected @endif
                                                value="{{\App\Models\PostSale::TYPE_TUTORIAL}}">
                                                    {{__($type_title[\App\Models\PostSale::TYPE_TUTORIAL])}}
                                                </option>
                                            </select>
                                            @if($errors->has('type'))
                                                <small class="help-block form-text red-color">{{$errors->first('type')}}</small>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col col-md-3">
                                            <label class="form-control-label">Tiêu đề <em class="red-color">*</em></label>
                                        </div>
                                        <div class="col-12 col-md-9">
                                            <input id="title" type="text" name="title" placeholder="Tiêu đề"
                                                   value="{{old('title') ? old('title') : $postSale->title}}"
                                                   class="form-control">
                                            @if($errors->has('title'))
                                                <small class="help-block form-text red-color">{{$errors->first('title')}}</small>
                                            @endif
                                            <input type="hidden" name="id" value="{{$postSale->id}}">
                                        </div>
                                    </div>

                                    <div class="row form-group">
                                        <div class="col col-md-3">
                                            <label class="form-control-label">Mô tả <em class="red-color">*</em></label>
                                        </div>
                                        <div class="col-12 col-md-9">
                                            <input id="desc" type="text" name="desc" placeholder="Mô tả"
                                                   value="{{old('desc')? old('desc') : $postSale->desc}}"
                                                   class="form-control">
                                            @if($errors->has('desc'))
                                                <small class="help-block form-text red-color">{{$errors->first('desc')}}</small>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="row form-group">
                                        <div class="col col-md-3">
                                            <label class="form-control-label">Hình mô tả <em class="red-color">*</em></label>
                                        </div>
                                        <div class="col-12 col-md-9">
                                            <div class="input-group">
                                                <input id="thumbnail" type="text" name="thumbnail" placeholder="Hình mô tả " value="{{old('thumbnail')? old('thumbnail') : $postSale->thumbnail}}"
                                                       class="form-control">
                                                <div class="input-group-btn">
                                                    <div class="btn btn-primary" style="position: relative">
                                                        Upload
                                                        <input type="file" id="thumbImage" onchange="uploadThumb(this)" class="file-small">
                                                    </div>
                                                    {{--<input type="file" id="thumbImage" onchange="uploadThumb(this)" class="btn btn-primary">--}}
                                                </div>
                                                @if($errors->has('thumbnail'))
                                                    <small class="help-block form-text red-color">{{$errors->first('thumbnail')}}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row form-group">
                                        <div class="col col-md-3">
                                            <label class="form-control-label">Nội dung <em class="red-color">*</em></label>
                                        </div>
                                        <div class="col-12 col-md-9">
                                            <textarea id="texteditor" name="content" class="align-content-center">
                                                {{old('content') ? old('content') : $postSale->content}}
                                            </textarea>
                                            @if($errors->has('thumbnail'))
                                                <small class="help-block form-text red-color">{{$errors->first('content')}}</small>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="card-footer text-right">
                                        <button type="button" id="btnPreview" class="btn btn-success btn-sm">
                                            <i class="fa fa-play-circle"></i> Preview
                                        </button>
                                    </div>


                                </div>
                                <div class="col-4 mobile-preview">
                                    <div style="width: auto; height: 60px;">
                                        <div class="row">
                                            <div class="col-4">
                                                <img id="imgthumb" src="{{$postSale->thumbnail}}" class="img-thumbnail" alt="">
                                            </div>
                                            <div class="col-8">
                                                <strong id="titlePreview">{{$postSale->title}}</strong>
                                                <p id="descPreview">{{$postSale->desc}}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="preview" style="width: auto; height: 640px; overflow-y: scroll; margin-top: 25%;">
                                        {!! $postSale->content !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-right">

                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fa fa-dot-circle-o"></i> Submit
                            </button>

                        </div>


                    </form>
                </div>
                <!-- END DATA TABLE -->
            </div>
        </div>
    </div>


@endsection

@section('extra-js')

    <link href="vendor/htmleditor/summernote.css" rel="stylesheet" media="all">

    <script src="vendor/htmleditor/summernote.js"></script>

    <script>
        var jq = jQuery.noConflict();
        jq(document).ready(function() {
            jq("#texteditor").summernote({
                placeholder: 'Content ...',
                height: 300,
                callbacks: {
                    onImageUpload : function(files, editor, welEditable) {
                        for(var i = files.length - 1; i >= 0; i--) {
                            sendFile(files[i], this);
                        }
                    }
                }
            });
            jq('#btnPreview').click(function () {
                jq('#preview').html(jq('#texteditor').val());
                jq('#titlePreview').html($('#title').val());
                jq('#descPreview').html(jq('#desc').val());
                jq('#imgthumb').attr('src',jq('#thumbnail').val());
            });
        });

        function sendFile(file, el) {
            var form_data = new FormData();
            form_data.append('img', file);
            var url = BASE_URL.replace('badmin/', '');
            jq.ajax({
                data: form_data,
                type: "POST",
                url: url+'api/imageUpload',
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    jq(el).summernote('editor.insertImage', url);
                    console.log(url);
                }
            });
        }

        function uploadThumb(input) {
            var imgThumb = input.files[0];
            var form_data = new FormData();
            form_data.append('img', imgThumb);
            var url = BASE_URL.replace('badmin/', '');
            jq.ajax({
                data: form_data,
                type: "POST",
                url: url+'api/imageUpload',
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    $('#thumbnail').val(url);
                }
            });
        }
    </script>

@endsection