<!-- Widgets -->
<div class="content-animation animated">
    <div class="row clearfix fBTitrBold ">
        <!-- File Upload | Drag & Drop OR With Click & Choose -->
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <h2 class="text-center">
                            آپلود فایل ها
                        </h2>
                    </div>
                    <div class="body">
                        <form action="https://bot.digihelp.net/kashancard/site/upload.php?mode=multi" id="frmFileUpload"
                              class="dropzone" method="post"
                              enctype="multipart/form-data">
                            <div class="dz-message">
                                <div class="drag-icon-cph">
                                    <i class="material-icons">touch_app</i>
                                </div>
                                <h3>Drop files here or click to upload.</h3>
                                <em>(This is just a demo dropzone. Selected files are <strong>not</strong> actually
                                    uploaded.)</em>
                            </div>
                            <div class="fallback">
                                <input name="file" type="file" multiple/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- #END# File Upload | Drag & Drop OR With Click & Choose -->

        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header">
                        <h2 class="text-center">
                            تصاویر
                        </h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive text-center no-overflow-y">
                            <table class="table table-hover js-exportable-5 text-center full_width" dir="rtl">
                                <thead>
                                <tr>
                                    <td class="table-bordered ">شماره</td>
                                    <td class="table-bordered ">تصویر</td>
                                    <td class="table-bordered ">آیدی تصویر</td>
                                    <td class="table-bordered ">آدرس مورد نیاز تصویر</td>
                                    <td class="table-bordered ">آدرس محلی تصویر</td>
                                    <td class="table-bordered ">عملیات</td>
                                </tr>
                                </thead>
                                <tbody class="bordered"></tbody>
                                <tfoot>
                                <tr>
                                    <td class="table-bordered ">شماره</td>
                                    <td class="table-bordered ">تصویر</td>
                                    <td class="table-bordered ">آیدی تصویر</td>
                                    <td class="table-bordered ">آدرس مورد نیاز تصویر</td>
                                    <td class="table-bordered ">آدرس محلی تصویر</td>
                                    <td class="table-bordered ">عملیات</td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- #END# File Upload | Drag & Drop OR With Click & Choose -->
    </div>
</div>

<script type="text/javascript">
    (function ($) {
        let GetReport, OnEventListener;
        let table5 = null;

        GetReport = function () {
            loader(true, '.demo-preloader-table-5');
            LoadData({
                    request: 'proxy',
                    action: 'UploadCenter',
                    'data-header': 'load-image'
                }, null, true, function (data) {

                    if (data.length > 0) {
                        loader(false, '.demo-preloader-table-5');
                        if (table5 !== null)
                            table5.destroy();
                        table5 = $('.js-exportable-5').DataTable({
                            "data": data,
                            "columns": [
                                {"data": "index"},
                                {"data": "img"},
                                {"data": "ID"},
                                {"data": "address"},
                                {"data": "local"},
                                {"data": "function"}
                            ],
                            "fnInfoCallback": function (oSettings, iStart, iEnd, iMax, iTotal, sPre) {
                                OnEventListener();
                            },
                            "language": {
                                "lengthMenu": "Display _MENU_ records per page",
                                "zeroRecords": " چیزی یافت نشد",
                                "info": "نمایش از _START_ تا _END_ در _TOTAL_ رکورد",
                                "infoEmpty": "<center>رکوردی پیدا نشد</center>",
                                "infoFiltered": "(filtered from _MAX_ total records)",
                                "paginate": {
                                    "next": "بعدی",
                                    "previous": "قبلی"
                                }
                            }
                        });
                    } else {
                        swal("خطا", "این درخواست انجام نشد", "error");
                    }
                    loader(false, '.demo-preloader-table-5');
                }
            );
        };

        GetReport();
        let frmFileUpload = new Dropzone("#frmFileUpload", {
            init: function () {
                this.on("processing", function (file) {
                    console.log("processing");
                });

                this.on("success", function (file, response) {
                    GetReport();
                });

                this.on("error", function (file, error, xhr) {
                    console.log(error);
                });
            },
            // paramName: "file",
            // autoProcessQueue: true,
            // uploadMultiple: true, // uplaod files in a single request
            // parallelUploads: 100, // use it with uploadMultiple
            // maxFilesize: 0.6, // MB
            // maxFiles: 5,
            // acceptedFiles: ".jpg, .jpeg, .png, .gif",
            // addRemoveLinks: true,
            // Language Strings
            // dictFileTooBig: "File is to big ({{filesize}}mb). Max allowed file size is {{maxFilesize}}mb",
            // dictInvalidFileType: "Invalid File Type",
            // dictCancelUpload: "Cancel",
            // dictRemoveFile: "Remove",
            // dictMaxFilesExceeded: "Only {{maxFiles}} files are allowed",
            // dictDefaultMessage: "Drop files here to upload"
        });

        function loader(state = false, div) {
            let loader = $(div);
            if (state)
                loader.removeClass("hidden");
            else
                loader.addClass("hidden");
        }

        OnEventListener = function () {
            new ClipboardJS('.btn');
            $('.js-exportable-5').find('button').unbind().bind('tap', function () {
                let btn = $(this);
                if (btn.hasClass("copy")) {
                    //
                }

                if (btn.hasClass("button-delete")) {
                    OnDeleteButton(btn.attr('value'), btn.parents('tr'));
                }
            });
        };

        function OnDeleteButton(id, tr) {
            swal({
                title: "آیا این مورد حذف شود؟",
                text: "شما قادر به بازگردانی این مورد نخواهید بود",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "بله حذف شود",
                cancelButtonText: "نه حذف نشود",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {

                    LoadData({
                        request: 'proxy',
                        action: 'UploadCenter',
                        object: {
                            id: id
                        },
                        'data-header': 'delete-image'
                    }, null, false, function (data) {
                        if (data === '1') {
                            tr.fadeOut(function (e) {
                                table5.row(tr)
                                    .remove()
                                    .draw();
                            });
                            swal("حذف شد", "این مورد حذف شد", "success");
                        } else {
                            swal("خطا", "این درخواست انجام نشد", "error");
                        }
                    });
                } else {
                    swal("لغو شد", "این درخواست لغو شد", "error");
                }
            });
        }

    }(jQuery));

</script>