@extends('admin.layouts.master')
@section('title', 'Product')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"></script>
    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row">
                    <div class="col">
                        <h3 class="page-title">Images For {{$product->productName}}</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item active">  Images For {{$product->productName}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">

                <div class="col-md-12">
                    @include('admin.includes.msg')

                    <div class="card">
                        <div class="card-body">

                            <form id="dropzoneForm" class="dropzone" action="{{ route('uploadimage') }}" enctype='multipart/form-data'>
                                @csrf
                                    <input type="hidden" name="id" value="{{$id}}">
                            </form>
                            <div align="center">
                                <button type="button" class="btn btn-info" id="submit-all" style="margin-top: 10px;">Upload</button>

                            </div>

                            <br/>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Uploaded Image <button type="button" onclick="deleteall()" class="btn btn-danger btn-sm" style="float:right;margin-top: -6px">Delete All</button></h3>

                                </div>
                                <div class="panel-body" id="uploaded_image">



                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
    </div>
    <!-- /Main Wrapper -->

    </div>
    <script type="text/javascript">

        Dropzone.options.dropzoneForm = {
            autoProcessQueue: false,
            parallelUploads: 10,
            acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",

            init: function () {
                var submitButton = document.querySelector("#submit-all");
                myDropzone = this;

                submitButton.addEventListener('click', function () {
                    myDropzone.processQueue();
                });

                this.on("complete", function () {
                    if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) {
                        var _this = this;
                        _this.removeAllFiles();
                    }
                    load_images();
                });
            }
        };

        load_images();

        function load_images() {
            $.ajax({
                url: "{{ route('galleryfatch',[$id]) }}",
                success: function (data) {
                    $('#uploaded_image').html(data);
                }
            })
        }

        $(document).on('click', '.remove_image', function () {
            var result = confirm("Want to delete?");
            if (result) {
                var id = $(this).attr('id');
                $.get("/galdelete/" + id, function (res) {
                    load_images();
                })
            }
        });

        function deleteall(){

            $(".remove_image").each(function() {
                var id = $(this).attr('id');
                $.get("/galdelete/"+id,function(res){
                    load_images();
                })
            });

        }
    </script>



@endsection