@extends('layouts.adminLayouts')

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

@section('content-header')
    <section class="content-header">
        <h1>
            ایجاد آیکون و نماد
        </h1>

        {{ Breadcrumbs::render('icons.index') }}


    </section>
@stop

@section('content')

    <div class="row">
        <form action="" enctype="multipart/form-data">
            <div class="col-md-9">
                <div class="box pr-3 pl-3">
                    <div class="form-group">
                        <label>عنوان:</label>
                        <input type="text" name="name" class="form-control" autocomplete="off">
                    </div>

                    <div class="form-group">
                        <label>کلاس(مثلا fa fa-instagram):</label>
                        <input type="text" name="class" class="form-control" autocomplete="off">
                    </div>

                    <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>نوع:</label>
                        <select name="type" class="form-control">
                            <option value="app">اپلیکیشن</option>
                            <option value="social">شبکه اجتماعی</option>
                            <option value="icon">آیکون</option>
                            <option value="banner">بنر</option>
                        </select>
                    </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="status" class="form-control">
                            <option value="1">فعال</option>
                            <option value="0">غیرفعال</option>
                        </select>
                    </div>
                    <div class="form-group pr-3 pl-3">
                        <label>دمو:</label>
                        <select name="demo" class="form-control">
                            <option value="1">فعال</option>
                            <option value="0">غیرفعال</option>
                        </select>
                    </div>
                    <div class="box-body text-center">
                        <a onclick="save_icon()" 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>
        </form>
    </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 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>
        save_icon = function () {
            $("#loading").show();
            var form = $('form')[1]; // You need to use standard javascript object here
            var data = new FormData(form);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: '{{ url('/admin/icons') }}',
                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/icons')}}');
                    }, 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