@extends('layouts.adminLayouts')

@section('head')
    <link rel="stylesheet" type="text/css" href="{{url('/assets/js/datatables.min.css')}}"/>
    <link rel="stylesheet" href="{{url('/css/dropzone.css')}}"/>
    <style>
        .form-group .error {
            color: #f44336 !important;
        }

        #stepImageForm {
            margin-top: 20px;
        }

        #stepImageForm .item .thumbnail {
            width: 60px;
            margin: 15px 0;
        }

        #stepImageForm .item .thumbnail img {
            max-width: 100%
        }

        #stepImageForm a {
            color: #fff !important;
        }
    </style>
    <meta name="_token" content="{{csrf_token()}}">
@stop

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

        {{ Breadcrumbs::render('galleries.edit',['title' => $gallery->name]) }}


    </section>
@stop

@section('content')
    <div class="col-md-12">
        <div class="box box-warning">
            <div class="box-header with-border">
                <h3 class="box-title">{{$gallery->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="alert alert-light">
                        <div class="alert-body">

                            <p> توجه داشته باشید که حداقل بایستی دو عکس برای محصول ثبت نمایید.</p>
                            <p> حداقل ابعاد تصویر باید <strong>500x500</strong> و حداکثر <strong>2500x2500</strong>
                                باشد.</p>
                            <p> نسبت تناسب عکس ها باید <strong>1:1</strong> باشد.</p>
                            <p> حداکثر سایز عکس آپلود شده باید کمتر از <strong>5 مگابایت</strong> باشد.</p>
                        </div>
                    </div>
                    <div class="col-lg-12 col-sm-12 col-11 main-section">
                        <div class="form-group">
                            <div id="div-dropzone" class="dropzone">
                                <div class="dz-message" data-dz-message>
                                    <span>فایل ها را انتخاب و یا اینجا رها کنید...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12 col-sm-12" @if(!count($gallery->images)) style="display: none"
                         @endif id="divImageTable">
                        <form id="stepImageForm">
                            <table class="table table-bordered" id="sortImageTable">
                                <tr>
                                    <th style="width: 10px">#</th>
                                    <th>عکس</th>
                                    <th> ویرایش</th>
                                </tr>
                                @foreach($images = $gallery->images as $image)
                                    <tr class="item" data-id="{{ $image->id }}">
                                        <td>
                                            <div class="sort-handler">
                                                <i class="fa fa-arrows-v"></i>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="thumbnail">
                                                <img src="{{url('assets/img/gallery/'.$image->name)}}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="buttons">
                                                <a class="btn btn-danger btn-xs delete-image"
                                                   data-id="{{$image->id}}"><i class="fa fa-trash"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </table>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
@stop

@section('footer')
    <script src="{{url('/js/dropzone.js')}}"></script>
    <script type="text/javascript">
        Dropzone.autoDiscover = false;
        $("div#div-dropzone").dropzone({
            url: "{{url('admin/galleries/images/upload/'.$gallery->id)}}",
            addRemoveLinks: false,
            maxFilesize: 10,
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            timeout: 50000,
            success: function (file, response) {
                $('#divImageTable').show();
                $("#sortImageTable").find('tbody')
                    .append($('<tr class="item">')
                        .attr('data-id', response.id)
                        .append($('<td>')
                            .append($('<div class="sort-handler"><i class="fa fa-arrows-v"></i></div>'))
                            .append($('<input>')
                                .attr('name', 'images[]')
                                .attr('value', response.id)
                                .attr('type', 'hidden')
                            )
                        )
                        .append($('<td>')
                            .append($('<div class="thumbnail">')
                                .append($('<img>')
                                    .attr('src', response.path)
                                    .text(response.name)
                                )
                            )
                        )
                        .append($('<td>')
                            .append($('<div>')
                                .addClass('buttons')
                                .append($('<a>')
                                    .addClass('btn btn-danger btn-xs delete-image')
                                    .attr('data-id', response.id)
                                    .append($('<i>')
                                        .addClass('fa fa-trash')
                                    )
                                )
                            )
                        )
                    )
                ;
            },
            error: function (file, xhr) {
                jQuery.each(xhr, function (key, value) {
                    toastr.error(value);
                });
                return false;
            }
        });
    </script>

    <script>
        $(document).on("click", ".delete-image", function () {
            var id = $(this).data('id');
            var el = this;
            var flagImageId = $('#flagImageId').val();
            Swal.fire({
                title: 'از حذف مطمئن هستید؟',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#00a018',
                cancelButtonColor: '#d33',
                confirmButtonText: 'بله',
                cancelButtonText: 'خیر'
            }).then((result) => {
                if (result.value) {
                    var token = $("meta[name='_token']").attr("content");
                    $.ajax({
                        url: '{{ url("admin/galleries/images/remove") }}/' + id,
                        type: 'DELETE',
                        data: {
                            "id": id,
                            "_token": token,
                        },
                        success: function (response) {
                            if (id == flagImageId) {
                                $('#flagImageId').val('');
                                $('#finalStep').addClass('disabled');
                            }
                            toastr.success(response.message);
                            $(el).closest("tr").remove();
                        },
                        error: function (xhr) {
                            if (xhr.status === 422) {
                                jQuery.each(xhr.responseJSON.errors, function (key, value) {
                                    toastr.error(value);
                                });
                            }
                            if (xhr.status === 422) {
                                toastr.warning(xhr.responseJSON.message);
                            }
                        }
                    });
                }
            });
        });
    </script>
    <script type="text/javascript" src="{{url('js/jquery-ui.js')}}"></script>
    <script type="text/javascript">
        $(function () {

            $("#sortImageTable").sortable({
                items: "tr",
                cursor: 'move',
                opacity: 0.6,
                update: function () {
                    sendOrderToServer();
                }
            });

            function sendOrderToServer() {

                var order = [];
                $('tr.item').each(function (index, element) {
                    order.push({
                        id: $(this).attr('data-id'),
                        position: index + 1
                    });
                });

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "{{url('admin/galleries/images/sort')}}",
                    data: {
                        order: order,
                        _token: '{{csrf_token()}}'
                    },
                    success: function (response) {
                        console.log(response);
                    },
                    error: function (xhr) {

                    }
                });

            }
        });

    </script>

@stop