<style>
    .deleteImage{
        color: #dc3545;
        background-color: #fff;
        border: 3px solid #252525;
    }
</style>

<div class="card-body">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <label for="exampleInputEmail1">Commenter Name : {{$name->name??''}}</label>
            </div>
            <div class="form-group">
                <div class="row" id="multi" style="justify-content: center; ">
                    @if(!empty($images))
                        @foreach($images as $image)
                            <div class="col-md-4" style=" position: relative;">
                                <button class="btn btn-danger deleteImage" value="{{ $image->id }}"
                                        style=" position: absolute;  top: 6px; left: 12px;"><i class="fa fa-trash" aria-hidden="true"></i>
                                </button>
                                <img src="{{url('/')}}/{{$image->image}}"
                                     alt="No Picture Found" style="width: 100%;height: 200px;object-fit: cover;margin-bottom: 16px;">
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>

        $(document).on("click",".deleteImage", function(){

        var id = $(this).val();

        var token = $("meta[name='csrf-token']").attr("content");
        $.ajax(
            {
                url: "{{url('/')}}/v1/cpanel/admin/image-del",
                type: 'POST',
                data: {
                    "id": id,
                    "_token": token,
                },
                success: function (res) {
                    $('#multi').html(res.html);
                }
            });
    });

</script>

