@extends('layouts.admin')
@section('title', 'Slide Show')
@section('style')
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />

<style type="text/css">
    img{
        width: 100%;
    }

    #imgPreview{
        border: 1px solid black;
        padding: 10px;
    }

    #imgPreview img{
        width: 200px;
        padding: 5px;
    }
    .item-img {
        position: relative;
        display: inline-block;
    }

    .btn-delete-img {
        display: none;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .item-img:hover .btn-delete-img {
        display: block;
    }
</style>
@endsection
@section('content')
<section>
    <h4>Slideshow Website</h4>
    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        {{ $message }}
    </div>
    @endif
    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            Slideshow
            <div class="card-tools">
                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                    <i class="fas fa-plus"></i>
                </button>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="load_foto()"><i class="fas fa-sync"></i></button>
            </div>
        </div>
        <div class="card-body">
            <div id="sortable" class=""></div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">Upload Foto</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formData" method="POST" action="javascript:void(0)" enctype="multipart/form-data" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div id="imageUpload" class="mb-2 dropzone"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection
@section("javascript")
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<script>
    $(document).ready( function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });
        load_foto();
    });

    function load_foto(){
        $.ajax({
            type: "POST",
            url: "{{route('slideshow_list_foto')}}",
            dataType: "html",
            success: function(msg){
                $("#sortable").html(msg);
            }
        });
    }
    $("#sortable").sortable({
        update: function(event, ui) {
            sort_image();
        }
    });
    function sort_image() {
        var item_order = new Array();
        $('#sortable .item-sort').each(function() {
            item_order.push($(this).attr("id"));
        });
        var order_string = item_order;
        $.ajax({
            type: "POST",
            url: "{{ route('reorder_item_slideshow') }}",
            data: {order: order_string, galeri_id: getParameterByName('id')},
            cache: false,
            success: function(data) {}
        });
    }

    function deleteItemImg(id){
        $.confirm({
            title: "",
            content: "Hapus foto?",
            type: "red",
            backgroundDismiss: !1,
            backgroundDismissAnimation: "glow",
            buttons: {
                btnBatal: { text: "batal", btnClass: "btn-primary", keys: ["esc"], action: function () {} },
                btnHapus: {
                    text: "ya, hapus !",
                    btnClass: "btn-danger",
                    keys: ["enter"],
                    action: function () {
                        document.getElementById(id).remove();
                        $.ajax({
                            url: "{{ route('delete_item_slideshow') }}",
                            type: "POST",
                            data: { id: id },
                            dataType: "json",
                            success: function (t) {
                                if(t.status) {
                                    sort_image();
                                    alertSukses("Notifikasi", "" + t.message, "bg-success");
                                }else{
                                    alertSukses("Notifikasi", "" + t.message, "bg-danger");
                                }
                            },
                            error: function (t, e, n) {
                                $.alert({ title: "Warning!", content: "Error deleting data!" });
                            },
                        });
                    },
                },
            },
        });
    }

    function getParameterByName(name) {
        var urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    Dropzone.autoDiscover = false;
    var isUpload = false;
    myDropzone = new Dropzone('div#imageUpload', {
        addRemoveLinks: true,
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 5,
        maxFilesize: 10,
        maxfilesexceeded: function(file) {
            this.removeAllFiles();
        },
        paramName: 'file',
        clickable: true,
        url: "{{ route('slideshow_store') }}",
        init: function () {
            this.on("addedfile", function(file) { changed = true; isUpload = true; });
            this.on('sending', function (file, xhr, formData) {
                var data = $("#formData").serializeArray();
                $.each(data, function (key, el) {
                    formData.append(el.name, el.value);
                });
            });
        },
        error: function (file, response){
            /*console.log(file, response);*/
            this.removeAllFiles();
            $('.img-uploader-box').removeClass('d-none');
            $('.img-reset-button').addClass('d-none');
            alertSukses('Notifikasi', response.message,'bg-danger');
        },
        successmultiple: function (file, response) {
            if(response.status){
                alertSukses('Notifikasi',''+response.message,'bg-success');
                load_foto();
                myDropzone.removeAllFiles();
                $("#staticBackdrop").modal('hide');
            }else{
                var dropzoneFilesCopy = file.slice(0);
                myDropzone.removeAllFiles();
                $.each(dropzoneFilesCopy, function(_, file) {
                    if (file.status === Dropzone.ERROR) {
                        file.status = undefined;
                        file.accepted = undefined;
                    }
                    myDropzone.addFile(file);
                });
                alertSukses('Notifikasi',''+response.message,'bg-danger');
            }
        },
        completemultiple: function (file, response) {
        /*console.log(file, response, "completemultiple");*/
            var dropzoneFilesCopy = file.slice(0);
            myDropzone.removeAllFiles();
            $.each(dropzoneFilesCopy, function(_, file) {
                if (file.status === Dropzone.ERROR) {
                    file.status = undefined;
                    file.accepted = undefined;
                }
                myDropzone.addFile(file);
            });
        },
        removedfile: function(file) {
            file.previewElement.remove();
            isUpload = false;
            /*console.log("removedfile");*/
        }
    });
    $(".dropzone").sortable({
        items:'.dz-preview',
        cursor: 'grab',
        opacity: 0.5,
        containment: '.dropzone',
        distance: 20,
        tolerance: 'pointer',
        stop: function () {
            var queue = myDropzone.getAcceptedFiles();
            newQueue = [];
            $('#imageUpload .dz-preview .dz-filename [data-dz-name]').each(function (count, el) {
                var name = el.innerHTML;
                queue.forEach(function(file) {
                    if (file.name === name) {
                        newQueue.push(file);
                    }
                });
            });
            myDropzone.files = newQueue;
        }
    });

    $("#formData").on("submit", function(e){
        e.preventDefault();
        e.stopPropagation();
        console.clear();
        changed = false;
        $('.btnSave').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
        $('.btnSave').attr('disabled', true);
        $(document).find("span.text-danger").remove();
        const elements = document.querySelectorAll('*');
        elements.forEach((element) => {
            element.classList.remove('is-invalid');
        });
        if (isUpload) {
            myDropzone.processQueue();
        }
    });

    function showPreview(idInput, idPreview) {
        var input = document.getElementById(idInput);
        var preview = document.getElementById(idPreview);
        if (input.files && input.files[0]) {
            var filePhoto = input.files[0];
            preview.setAttribute("src", "");
            if(filePhoto){
                var reader = new FileReader();
                reader.onload = function(){
                    preview.style.display = '';
                    preview.setAttribute("src", reader.result);
                }
                reader.readAsDataURL(filePhoto);
            }
        } else {
            preview.setAttribute("src", "");
        }
    }

</script>
@endsection