@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 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.create') }}


    </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="productForm" onsubmit="return false;" enctype="multipart/form-data">
        @csrf
        <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="عنوان نوشته را بنویسید...">
                                </div>

                                <div class="form-group">
                                    <label>توضیحات مهم نوشته</label>
                                    <textarea class="form-control" name="important" rows="3"
                                              placeholder="توضیحی درج نمایید..."></textarea>
                                </div>

                                <div class="form-group">
                                    <label> شرح نوشته</label>
                                    <textarea name="description" placeholder="شرح نوشته خود را بنویسید..."></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="توضیحی درج نمایید..."></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="save_post()" class="btn btn-app">
                            <i class="fa fa-history"></i> ذخیره پیش نویس
                        </a>
                    </div>
                    <div class="overlay" style="display:none" id="loading">
                        <i class="fa fa-refresh fa-spin"></i>
                    </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="">انتخاب کنید</option>
                            <option value="news">خبری</option>
                            <option value="photo">تصویری</option>
                            <option value="video">ویدیو</option>
                            <option value="music">صوتی</option>
                            <option value="information">اطلاعیه</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="file-upload">
                        <div class="image-upload-wrap">
                            <input class="file-upload-input" type='file' name="image" onchange="readURL(this);"
                                   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">Uploaded Image</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">
                                <input type="hidden" id="published_at" name="published_at" value=""
                                       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 id="sel_3" name="categories[]" style="width:16em" 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[]" class="form-control"
                                   placeholder="تگ را بنویسید ...">
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </form>
@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 src="{{url('/assets/js/plugins/palette.js') }}"></script>
    <!-- bootstrap color picker -->
    <script src="/assets/admin/bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

    <!-- Page script -->
    <script>
        $(function () {

            //Colorpicker
            $('.my-colorpicker1').colorpicker();
        });
    </script>


    <script>
        $(document).ready(function()
        {
            $('#examplePalette').palette({
                length: 4,
                onSelect: function() {
                    console.log( $(this).find('.coloring').attr('title') );
                }
            });
        });
    </script>


    <script>
        save_post = function () {
            $("#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);
            $.ajax({
                url: '{{ url('/admin/posts') }}',
                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>
        $(document).ready(function () {
            $('#date_created_at').persianDatepicker({
                initialValue: false,
                altField: '#published_at',
                altFormat: 'X',
                format: 'D MMMM YYYY HH:mm a',
                observer: true,
                timePicker: {
                    enabled: true
                },
            });
        });
    </script>
    <script type="text/javascript" src="/js/number_to_letter.js"></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()}}',
        });

        CKEDITOR.on('instanceReady', function (evt) {
            evt.editor.dataProcessor.htmlFilter.addRules({
                elements: {
                    img: function (el) {
                        el.addClass('lazyload');
                    }
                }
            });
        });
    </script>

    <!-- Select2 -->
    <!-- Select2 -->
    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></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>
        function toggle(className, obj) {
            var $input = $(obj);
            if ($input.prop('checked')) $(className).show();
            else $(className).hide();
        }
    </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 ind = mydata[1];
        $("#sel_3").select2ToTree({
            treeData: {dataArr: mydata}, maximumSelectionLength: 50,
            templateResult: formatState, templateSelection: formatState
        });

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

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