@extends('layouts.adminLayouts')

@section('head')
    <meta name="_token" content="{{csrf_token()}}">
<link href="{{url('/assets/css/fileupload.css')}}" rel="stylesheet" type="text/css">
<!-- 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">
<link href="/assets/color-select/bootstrap-colorselector.min.css" rel="stylesheet" />
<!-- Select2 -->
<link rel="stylesheet" href="{{url('/assets/admin/bower_components/select2/dist/css/select2.min.css')}}">
<style>
    .glyphicon-ok:before {
        content: "\e013";
    }

    .datepicker-plot-area {
        z-index: 1300;
    }
</style>
<!-- babakhani datepicker -->
<link rel="stylesheet" href="{{url('/assets/admin/dist/css/persian-datepicker-0.4.5.min.css')}}" />
@stop

@section('content-header')
<section class="content-header">
    <h1>
        ایجاد برگه جدید
    </h1>

    {{ Breadcrumbs::render('pages.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="pageForm" onsubmit="return false;" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-md-9">
            <div class="box">
                <div class="box-body">
                    <div class="form-group">
                        <label>عنوان صفحه</label>
                        <input type="text" class="form-control" id="title"  autocomplete="off" name="title" placeholder="عنوان صفحه را بنویسید...">
                    </div>

                    <div class="form-group">
                        <label>عنوان انگلیسی صفحه</label>
                        <input type="text" class="form-control" id="en_title" autocomplete="off" name="en_title" placeholder="عنوان صفحه را بنویسید...">
                    </div>

                    <div class="form-group">
                        <label>پیوند یکتا</label>
                        <div class="slug-box">
                            <span>/</span>
                            <input type="text" class="form-control slug-txt text-left" id="slug" name="slug" autocomplete="off" dir="ltr">
                            <span>{{url('/page')}}/</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label> توضیحات</label>
                        <textarea name="description" placeholder="شرح این صفحه را بنویسید..."></textarea>
                    </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="savePage()" class="btn btn-app">
                        <i class="fa fa-history"></i> ذخیره پیش نویس
                    </a>
                    <div class="form-group text-right">
                        <label>وضعیت</label>
                        <select class="form-control select2" name="status" style="width: 100%;">
                            <option value="draft"  selected="selected">پیش نویس</option>
                            <option value="active">فعال</option>
                            <option value="inactive">غیرفعال</option>
                        </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" 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>

    </div>
</form>
@stop

@section('footer')
<script>
    var route_prefix = "{{ url(config('lfm.url_prefix', config('lfm.prefix'))) }}";
</script>
<!-- Select2 -->
<script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $('.select2').select2();
        });
</script>
<script src="{{url('/assets/ckeditor/ckeditor.js')}}"></script>
<script src="{{url('/assets/ckeditor/jquery.js')}}"></script>
<script>
    $('textarea[name=description]').ckeditor({
        height: 400,
        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>
    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>
    $('#en_title').change(function(e) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });
        $.ajax({
            url : '{{ url('/admin/pages/check_slug') }}',
            type: 'POST',
            data : { 'en_title': $(this).val() },
            success :function (data) {
                console.log(data);
                $('#slug').val(data.slug);
            }
        });
    });
</script>

<script>
    savePage= 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/pages') }}',
            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/pages')}}');
                    }, 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('خطایی در سامانه رخ داد!');
                }
            }
        });
    };
</script>
@stop