@extends('layouts.adminLayouts')

@section('head')
    <link href="{{url('/assets/imagedrag/fileinput.css')}}" media="all"
          rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .fileinput-remove,
        .fileinput-upload {
            display: none;
        }
    </style>

    <style type="text/css">
        .gallery {
            display: inline-block;
            margin-top: 20px;
        }

        .close-icon {
            border-radius: 50%;
            position: absolute;
            right: 5px;
            top: -10px;
            padding: 5px 8px;
        }

        .form-image-upload {
            background: #e8e8e8 none repeat scroll 0 0;
            padding: 15px;
        }
    </style>
@stop

@section('content-header')
    <section class="content-header">
        <h1>
            تصاویر محصول
        </h1>

        {{ Breadcrumbs::render('posts.images',['title' => $post->code]) }}


    </section>
@stop

@section('content')
    <div class="col-md-12">
        <div class="box box-warning">
            <div class="box-header with-border">
                <h3 class="box-title">{{$post->fa_name}}</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                </div>
                <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-lg-12 col-sm-12 col-11 main-section">
                        <h1 class="text-center text-danger">عکس های مورد نظر را انتخاب کنید</h1><br>

                        {!! csrf_field() !!}
                        <div class="form-group">
                            <div class="file-loading">
                                <input id="file-1" type="file" name="file" multiple class="file"
                                       data-overwrite-initial="false"
                                       data-min-file-count="2">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->


    <div class="row" id="showImage">
        <div class='list-group gallery'>
            @if($images->count())
                @foreach($images as $image)
                    <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
                        <a class="thumbnail fancybox" rel="ligthbox">
                            <img class="img-responsive" alt="" src="/assets/post/images/{{ $image->name }}" />
                            <div class='text-center'>
                                <small class='text-muted'>{{ $image->title }}</small>
                            </div> <!-- text-center / end -->
                        </a>
                        <form action="{{ url('/admin/posts/imageDelete',$image->id) }}" method="POST">
                            <input type="hidden" name="_method" value="delete">
                            {!! csrf_field() !!}
                            <button type="submit" class="close-icon btn btn-danger"><i class="fa fa-close"></i>
                            </button>
                        </form>
                    </div> <!-- col-6 / end -->
                @endforeach
            @endif


        </div>
    </div>
@stop

@section('footer')
    <script src="{{url('assets/imagedrag/fileinput.js')}}" type="text/javascript"></script>
    <script src="{{url('assets/imagedrag/theme.js')}}" type="text/javascript"></script>
    <script src="{{url('assets/imagedrag/popper.min.js')}}" type="text/javascript"></script>

    <script type="text/javascript">
        $("#file-1").fileinput({
            theme: 'fa',
            uploadUrl: "{{url('admin/posts/imageStore')}}",
            uploadExtraData: function () {
                showImage();
                return {
                    _token: $("input[name='_token']").val(),
                    post_id: "{{$post->id}}"
                };
            },
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            overwriteInitial: false,
            maxFileSize: 2000,
            maxFilesNum: 10,
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        });

        function showImage() {
            $.ajax({
                url: '{{ url('/admin/posts/showImagePost') }}',
                type: 'POST',
                data: {"_token": "{{ csrf_token() }}","post_id":"{{$post->id}}"},
                success: function (data) {
                    $('#showImage').html('');
                    $('#showImage').html(data);
                },
            });
        }
    </script>

@stop