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


    </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">
                    <input type="hidden" value="{{$slider->id}}" name="slider_id">
                    @csrf
                    <div class="form-group">
                        <label>وضعیت:</label>
                        <select name="status" class="form-control">
                            <option value="1" @if($slider->status == 1) selected @endif>فعال</option>
                            <option value="0" @if($slider->status == 0) selected @endif>غیر فعال</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>لینک اسلاید:</label>
                        <input type="text" name="url" class="form-control dir-ltr text-left" value="{{$slider->url}}" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>توضیحات اسلایدر (حداکثر 191 کاراکتر):</label>
                        <input type="text" name="description" class="form-control dir-ltr text-left" value="{{$slider->description}}" 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: show;">
                            <p class="help-block">تصویر فعلی اسلاید:</p>
                            <div class="text-center">
                                <img id="img-upload-ads" src="{{url('assets/img/slider/'.$slider->original_slider)}}" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-3">
            <div class="box box-info">
                <div class="box-body text-center">
                    <a onclick="updateSlider()" 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>
        updateSlider= 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/update') }}',
                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