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


</section>
@stop

@section('content')

<div class="row">
    <div class="col-md-9">
        <div class="box">
            <form onsubmit="return false;" class="pr-3 pl-3" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label>لینک اسلاید:</label>
                    <input type="text" name="url" class="form-control dir-ltr text-left" autocomplete="off">
                </div>
                <div class="form-group">
                    <label>توضیحات اسلایدر (حداکثر 191 کاراکتر):</label>
                    <input type="text" name="description" class="form-control dir-ltr text-left" autocomplete="off">
                </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="original_slider" onchange="readURL(this);" accept="image/*" />
                            <div class="drag-text">
                                <h5>عکس مورد نظر را انتخاب کنید</h5>
                            </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>
            </form>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box box-info">
                <div class="box-body text-center">
                    <a onclick="saveSlider()" 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>


@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 readURLRes(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();
        }
    }
</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]);
        }
    }

    function readURLRes(input) {

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

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

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


<script>
    saveSlider= function () {
        $("#loading").show();
        var form = $('form')[1]; // You need to use standard javascript object here
        var data = new FormData(form);
        $.ajax({
            url: '{{ url('/admin/main-slider') }}',
            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/main-slider')}}');
                }, 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