@extends('admin.layout')

@section('content')
    @php $type_title = \App\Models\PostSale::$type_title_key @endphp
    <div class="container-fluid">
        <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>Đăng tin</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 @endif>
                                                    {{__($type_title[\App\Models\PostSale::TYPE_SALE])}}
                                                </option>
                                                <option @if(old('type') && old('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') : ''}}"
                                                   class="form-control">
                                            @if($errors->has('title'))
                                                <small class="help-block form-text red-color">{{$errors->first('title')}}</small>
                                            @endif
                                        </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') : ''}}"
                                                   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') : ''}}"
                                                           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>
                                                        </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') : ''}}
                                            </textarea>
                                            @if($errors->has('content'))
                                                <small class="help-block form-text red-color">{{$errors->first('content')}}</small>
                                            @endif
                                        </div>
                                    </div>

                                    <button type="button" id="btnPreview" class="btn btn-success btn-sm mt-4">
                                        <i class="fa fa-play-circle"></i> Preview
                                    </button>
                                </div>
                                <div class="col-4 mobile-preview">
                                    <div style="width: auto; height: 60px;">
                                        <div class="row">
                                            <div class="col-4">
                                                <img id="imgthumb" src="{{old('thumbnail') ? old('thumbnail') : ''}}" class="img-thumbnail" alt="">
                                            </div>
                                            <div class="col-8">
                                                <strong id="titlePreview">Title Test</strong>
                                                <p id="descPreview">Hello this is a test.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="preview" style="width: auto; height: 640px; overflow-y: scroll; margin-top: 25%;">
                                        <h4 class="text-center text-black-50">Preview</h4>
                                    </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(jq('#title').val());
                jq('#descPreview').html(jq('#desc').val());
                jq('#imgthumb').attr('src',jq('#thumbnail').val());
            });

            if(location.search) {
                var search = location.search.replace('?', '').split('&');
                
                for (var i=0; i<search.length; i++) {
                    if (search[i].includes('type=')) {
                        var type = search[i].replace('type=', '');
                        jq('select[name="type"]').val(type).change();
                    }
                } 
            }
        });

        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) {
                    jq('#thumbnail').val(url);
                }
            });
        }
    </script>

@endsection