@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.edit',['title' => $page->title]) }}


    </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" value="{{$page->title}}" placeholder="عنوان صفحه را بنویسید...">
                        </div>

                        <div class="form-group">
                            <label>عنوان انگلیسی صفحه</label>
                            <input type="text" class="form-control" id="en_title" autocomplete="off" name="en_title" value="{{$page->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" value="{{$page->slug}}" autocomplete="off" dir="ltr">
                                <span>{{url('/page')}}/</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label> توضیحات</label>
                            <textarea name="description" placeholder="شرح این صفحه را بنویسید...">{!! $page->description !!}</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('{{$page->id}}')" 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" @if($page->status == 'draft')  selected="selected" @endif>پیش نویس</option>
                                <option value="active" @if($page->status == 'active')  selected="selected" @endif>فعال</option>
                                <option value="inactive" @if($page->status == 'inactive')  selected="selected" @endif>غیرفعال</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 (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);

            $.ajax({
                url: '{{ url('/admin/pagesUpdate') }}/' + id,
                type: 'POST',
                data: data,
                cache:false,
                contentType: false,
                processData: false,
                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