@extends('layouts.adminLayouts')

@section('head')
    <link href="{{url('/assets/css/fileupload.css')}}" rel="stylesheet" type="text/css">

@stop

@section('content-header')
    <section class="content-header">
        <h1>
            ایجاد گزارش تصویری
        </h1>

        {{ Breadcrumbs::render('galleries.create') }}


    </section>
@stop

@section('content')
    <form onsubmit="return false" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-9">
                <div class="box px-1">
                    <div class="form-group">
                        <label>نام گزارش:</label>
                        <input type="text" class="form-control" name="name">
                    </div>
                    <div class="form-group">
                        <label>شرح گزارش:</label>
                        <textarea name="description" placeholder="شرح گزارش خود را بنویسید..."></textarea>
                    </div>
                    <div class="form-group">
                        <label>تصویر اصلی:</label>
                        <div class="file-upload pt-0">
                            <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 class="img-upload-ads-wrapper mt-3" style="display: none;">
                            <p class="help-block">تصویر فعلی گزارش:</p>
                            <div class="text-center">
                                <img id="img-upload-ads"
                                     src="#"/>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="box box-info">
                    <div class="form-group pr-3 pl-3">
                        <label>وضعیت:</label>
                        <select name="active" class="form-control">
                            <option value="1">فعال</option>
                            <option value="0">غیرفعال</option>
                        </select>
                    </div>
                    <div class="box-body text-center">
                        <a onclick="saveForm()" class="btn btn-app">
                            <i class="fa fa-send"></i> ایجاد کردن
                        </a>
                    </div>
                    <div class="overlay" style="display:none" id="loading">
                        <i class="fa fa-refresh fa-spin"></i>
                    </div>
                </div>
            </div>
        </div>
    </form>

@stop

@section('footer')

    <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 readURL(input) {

            if (input.files && input.files[0]) {
                $(".img-upload-ads-wrapper").fadeIn(0);
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#img-upload-ads')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

    <script>
        saveForm = 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/galleries') }}',
                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/galleries/images')}}/' + response.id);
                    }, 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>

    <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>
@stop