@extends('layouts.adminLayouts')

@section('head')
    <style>
        .file-upload {
            background-color: #ffffff;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        .file-upload-content {
            display: none;
            text-align: center;
        }

        .file-upload-input {
            position: absolute;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            outline: none;
            opacity: 0;
            cursor: pointer;
        }

        .image-upload-wrap {
            margin-top: 20px;
            border: 4px dashed #1FB264;
            position: relative;
        }

        .image-dropping,
        .image-upload-wrap:hover {
            background-color: #1FB264;
            border: 4px dashed #ffffff;
        }

        .image-title-wrap {
            padding: 0 15px 15px 15px;
            color: #222;
        }

        .drag-text {
            text-align: center;
        }

        .drag-text h3 {
            font-weight: 100;
            text-transform: uppercase;
            color: #15824B;
            padding: 60px 0;
        }

        .file-upload-image {
            max-height: 200px;
            max-width: 200px;
            margin: auto;
            padding: 20px;
        }

        .remove-image {
            width: 200px;
            margin: 0;
            color: #fff;
            background: #cd4535;
            border: none;
            padding: 10px;
            border-radius: 4px;
            border-bottom: 4px solid #b02818;
            transition: all .2s ease;
            outline: none;
            text-transform: uppercase;
            font-weight: 700;
        }

        .remove-image:hover {
            background: #c13b2a;
            color: #ffffff;
            transition: all .2s ease;
            cursor: pointer;
        }

        .remove-image:active {
            border: 0;
            transition: all .2s ease;
        }
    </style>
    <!-- Select2 -->
    <link rel="stylesheet" href="/assets/admin/bower_components/select2/dist/css/select2.min.css">
    <link href="/css/bootstrap-treeview.css" rel="stylesheet">
    <link href="/css/select2totree.css" rel="stylesheet">
    <!-- bootstrap slider -->
    <link href="/assets/color-select/bootstrap-colorselector.min.css" rel="stylesheet"/>
    <link href="/assets/css/plugins/palette.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{{url('assets/admin/plugins/bootstrap-slider/slider.css')}}">
    <link href="{{url('assets/css/bootstrap-editable.css')}}"
          rel="stylesheet"/>
    <meta name="_token" content="{{csrf_token()}}">
    <link rel="stylesheet" href="{{url('assets/admin/plugins/bootstrap-slider/slider.css')}}">
    <link rel="stylesheet" href="{{url('/assets/admin/dist/css/persian-datepicker-0.4.5.min.css')}}"/>

    <link href="{{url('/assets/taginput/tagsinput.css') }}" rel="stylesheet" type="text/css">
@stop

@section('content-header')
    <section class="content-header">
        <h1>
            ویرایش نوشته
        </h1>

        {{ Breadcrumbs::render('posts.edit',['title' => $post->code]) }}


    </section>
@stop


@section('content')

    <div class="alert alert-danger" style="display:none" id="alert_show"></div>
    <div class="alert alert-success" style="display:none" id="alert_show_success"></div>

    <form id="postForm" onsubmit="return false;" enctype="multipart/form-data">
        @csrf
        <input name="post_id" type="hidden" value="{{$post->id}}">
        <div class="row">

            <div class="col-md-9">

                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_0" data-toggle="tab">نوشته</a></li>
                        <li><a href="#tab_6" data-toggle="tab">سئو</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="active tab-pane" id="tab_0">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>عنوان نوشته</label>
                                    <input type="text" class="form-control" name="fa_name"
                                           placeholder="عنوان نوشته را بنویسید..." value="{{$post->fa_name}}">
                                </div>

                                <div class="form-group">
                                    <label>عنوان اینگلیسی نوشته</label>
                                    <input type="text" class="form-control" name="en_name"
                                           placeholder="Write the title..." value="{{$post->en_name}}">
                                </div>


                                <div class="form-group">
                                    <label> نقد و بررسی اجمالی</label>
                                    <textarea name="important"
                                              placeholder="شرح نوشته خود را بنویسید...">{{$post->important}}</textarea>
                                </div>

                                <div class="form-group">
                                    <label> شرح نوشته</label>
                                    <textarea name="description"
                                              placeholder="شرح نوشته خود را بنویسید...">{{$post->description}}</textarea>
                                </div>


                            </div>
                            <!-- /.box-body -->
                        </div>

                        <div class="tab-pane" id="tab_6">
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">توضیحات سئو صفحه نوشته </label>
                                    <div class="col-sm-8">
                                    <textarea class="form-control" name="seo" rows="3"
                                              placeholder="توضیحی درج نمایید...">{{$post->seo}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>
                </div>

            </div>

            <div class="col-md-3">

                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">مدیریت</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body text-center">
                        <a onclick="update_post('{{$post->id}}')" class="btn btn-app">
                            <i class="fa fa-send"></i> ذخیره نهایی
                        </a>
                    </div>

                </div>
                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">نوع نوشته</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body text-center">
                        <select name="type" class="form-control">
                            <option value="news" @if($post->type == 'news') selected @endif>خبری</option>
                            <option value="photo" @if($post->type == 'photo') selected @endif >تصویری</option>
                            <option value="video" @if($post->type == 'video') selected @endif >ویدیو</option>
                            <option value="music" @if($post->type == 'music') selected @endif >صوتی</option>
                            <option value="information" @if($post->type == 'information') selected @endif >اطلاعیه</option>
                        </select>
                    </div>

                </div>

                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">کد نوشته</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group text-center">
                            <a href="" class="update_code" data-name="code"
                               data-type="text"
                               data-pk="{{ $post->id }}"
                               data-title="شناسه نوشته را وارد نمایید.">{{$post->code}}</a>
                        </div>
                    </div>
                </div>

                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">وضعیت نوشته</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group">
                            <select name="status" class="form-control select2" style="width: 100%;">
                                <option value="">انتخاب کنید</option>
                                @foreach($statuses as $key=>$status)
                                    <option value="{{$key}}"
                                            @if($key == $post->status) selected @endif>{{$status}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">تصویر بند انگشتی</h3>
                    </div>
                    <!-- /.box-header -->

                    <div class="file-upload">
                        <div class="image-upload-wrap">
                            <input class="file-upload-input" name="image" type='file' onchange="readURL(this);"
                                   id="imgInp"
                                   accept="image/*"/>
                            <div class="drag-text">
                                <h5>عکس مورد نظر را انتخاب کنید</h5>
                            </div>
                        </div>
                        <div class="file-upload-content">
                            <img class="file-upload-image" src="#" alt="your image"/>
                            <div class="image-title-wrap">
                                <button type="button" onclick="removeUpload()" class="remove-image">حذف <span
                                        class="image-title"> اپلود عکس</span></button>
                            </div>
                        </div>
                    </div>

                </div>


                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">منتشر شود در:<span
                                data-toggle="tooltip"
                                title=""
                                class="badge bg-light-blue"
                                data-original-title="اگر می خواهید مطلبی در آینده نمایش داده شود، تاریخ آن زمان را انتخاب کنید. "><i
                                    class="fa fa-info"></i></span> </h3>
                    </div>
                    <!-- /.box-header -->

                    <div class="box-body">
                        <div class="form-group">
                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" id="date_created_at" class="form-control pull-right" autocomplete="off" value="{{\Illuminate\Support\Carbon::createFromTimestamp($post->published_at)->format('Y-m-d')}}">
                                <input type="hidden" id="published_at" name="published_at"
                                       class="form-control pull-right">
                            </div>
                        </div>
                    </div>

                </div>

                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title"> دسته اصلی نوشته</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group">
                            <select style="width: 100%;" id="category" name="category_id"
                                    multiple>
                            </select>

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

                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">دسته بندی ها</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="form-group">

                            <select name="categories[]" id="sel_3" style="width:100%" multiple>
                            </select>

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


                <div class="box box-info">
                    <div class="box-header with-border">
                        <h3 class="box-title">تگ های مرتبط </h3>
                    </div>
                    <!-- /.box-header -->

                    <div class="box-body">
                        <div class="form-group">
                            <input type="text" data-role="tagsinput" name="keywords[]" value="{{implode(',',$keywords->pluck('keyword')->toArray())}}" class="form-control" placeholder="تگ را بنویسید ...">
                        </div>
                    </div>

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

    <input type="hidden" readonly name="row_count" id="row_count" value="1">
@stop


@section('footer')



    <script src="{{url('/assets/taginput/tagsinput.js') }}"></script>
    <!-- babakhani datepicker -->
    <script src="{{url('/assets/admin/dist/js/persian-date-0.1.8.min.js')}}"></script>
    <script src="{{url('/assets/admin/dist/js/persian-datepicker-0.4.5.min.js')}}"></script>
    <script>
        $(document).ready(function () {
            $('#date_created_at').persianDatepicker({
                initialValue: true,
                altField: '#published_at',
                altFormat: 'X',
                format: 'D MMMM YYYY HH:mm a',
                observer: true,
                timePicker: {
                    enabled: true
                },
            });
        });
    </script>
    <script>
        var route_prefix = "{{ url(config('lfm.url_prefix', config('lfm.prefix'))) }}";
    </script>
    <script src="{{url('/assets/ckeditor/ckeditor.js')}}"></script>
    <script src="{{url('/assets/ckeditor/jquery.js')}}"></script>
    <script>
        $('textarea[name=description]').ckeditor({
            height: 200,
            filebrowserImageBrowseUrl: route_prefix + '?type=Images',
            filebrowserImageUploadUrl: route_prefix + '/upload?type=Images&_token={{csrf_token()}}',
            filebrowserBrowseUrl: route_prefix + '?type=Files',
            filebrowserUploadUrl: route_prefix + '/upload?type=Files&_token={{csrf_token()}}',

        });

    </script>

    <script>
        $('textarea[name=important]').ckeditor({
            height: 200,
            filebrowserImageBrowseUrl: route_prefix + '?type=Images',
            filebrowserImageUploadUrl: route_prefix + '/upload?type=Images&_token={{csrf_token()}}',
            filebrowserBrowseUrl: route_prefix + '?type=Files',
            filebrowserUploadUrl: route_prefix + '/upload?type=Files&_token={{csrf_token()}}',
        });
    </script>


    <script>
        $('textarea[name=overview]').ckeditor({
            height: 100,
            filebrowserImageBrowseUrl: route_prefix + '?type=Images',
            filebrowserImageUploadUrl: route_prefix + '/upload?type=Images&_token={{csrf_token()}}',
            filebrowserBrowseUrl: route_prefix + '?type=Files',
            filebrowserUploadUrl: route_prefix + '/upload?type=Files&_token={{csrf_token()}}',
        });
    </script>
    <!-- Select2 -->
    <!-- Select2 -->
    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>

    <script>

        $(function () {
            //Initialize Select2 Elements
            $('#brands').select2();
            $('#shipments').select2();
            $('#colorSelect').select2();
        })
    </script>


    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {

                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.image-upload-wrap').hide();

                    $('.file-upload-image').attr('src', e.target.result);
                    $('.file-upload-content').show();

                    $('.image-title').html(input.files[0].name);
                };
                reader.readAsDataURL(input.files[0]);

            } else {
                removeUpload();
            }
        }

        function removeUpload() {
            $('.file-upload-input').replaceWith($('.file-upload-input').clone());
            $('.file-upload-content').hide();
            $('.image-upload-wrap').show();
        }

        $('.image-upload-wrap').bind('dragover', function () {
            $('.image-upload-wrap').addClass('image-dropping');
        });
        $('.image-upload-wrap').bind('dragleave', function () {
            $('.image-upload-wrap').removeClass('image-dropping');
        });

    </script>

    <script>
        update_post = function (id) {
            $("#loading").show();
            for (var instanceName in CKEDITOR.instances) {
                CKEDITOR.instances[instanceName].updateElement();
            }

            var form = $('form')[1]; // You need to use standard javascript object here
            var data = new FormData(form);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '{{ url('/admin/postUpdate') }}',
                type: 'POST',
                data: data,
                contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                processData: false, // NEEDED, DON'T OMIT THIS
                success: function (response) {
                    $('#loading').hide();
                    toastr.success(response.message);
                    setTimeout(function () {
                        window.location.replace('{{url('/admin/posts')}}');
                    }, 2000);
                },
                error: function (xhr) {
                    $('#loading').hide();
                    if (xhr.status === 422) {
                        jQuery.each(xhr.responseJSON.errors, function (key, value) {
                            toastr.error(value);
                        });
                    }
                    if (xhr.status !== 422) {
                        toastr.warning(xhr.responseJSON.errors);
                    }
                }
            });
        };
    </script>



    <script src="/js/select2totree.js"></script>
    <script>
        $("#category_id").select2ToTree({
            matcher: function (params, data) {
                var original_matcher = $.fn.select2.defaults.defaults.matcher;
                var result = original_matcher(params, data);
                if (result && data.children && result.children && data.children.length != result.children.length) {
                    result.children = data.children;
                }
                return result;
            }
        });

        $("#category").select2ToTree({
            matcher: function (params, data) {
                var original_matcher = $.fn.select2.defaults.defaults.matcher;
                var result = original_matcher(params, data);
                if (result && data.children && result.children && data.children.length != result.children.length) {
                    result.children = data.children;
                }
                return result;
            }
        });
    </script>

    <script>
        var mydata = [
            {!! $categorySelect !!}
        ];

        var categoryOriginal = [
            {!! $originalCategory !!}
        ];

        var ind = mydata[1];
        $("#sel_3").select2ToTree({
            treeData: {dataArr: mydata}, maximumSelectionLength: 50,
            templateResult: formatState, templateSelection: formatState
        });

        $("#category").select2ToTree({
            treeData: {dataArr: categoryOriginal}, maximumSelectionLength: 1,
            templateResult: formatState, templateSelection: formatState
        });

        $("#category_rating").select2ToTree({
            treeData: {dataArr: categoryOriginal}, maximumSelectionLength: 1,
            templateResult: formatState, templateSelection: formatState
        });

        function formatState(state) {
            return state.text;
        };
    </script>


    <!-- Bootstrap slider -->
    <script src="{{url('assets/admin/plugins/bootstrap-slider/bootstrap-slider.js')}}"></script>
    <script>
        $(function () {
            /* BOOTSTRAP SLIDER */
            $('.slider').slider()
        })
    </script>


    <script
        src="{{url('/assets/js/bootstrap-editable.min.js')}}"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        $('.update_code').editable({
            url: '/admin/post-update-code'
        });

    </script>
@stop