@extends('template.master')

@section('title', 'Add/Edit Article')

@push('styles')
    <!-- Select2 -->

    <style>
        .img_pre{
            width: 200px;
            height: 200px;
            padding: 10px;
        }
        .note-editable{
            min-height: 300px !important;
        }
        .modal-content>.modal-body >p > img {
            object-fit: contain;
            width: 100% !important;
            height: 100% !important;
        }
    </style>
@endpush

@section('content')
    <div class="mt-4">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card card-secondary">
                    <div class="card-header" style="background: #000000;color: #f0ac63 !important;">
                        <h4 class="card-title text-dark" style="color: #f0ac63 !important;"><strong>Add/Edit Article</strong></h4>
                        <a href="{{ route('articles.list') }}" class="btn float-right" style="background: #f0ac63;color: #000000 !important;">Back</a>
                    </div>
                    <div class="card-body">
                        <form class="form" action="{{ route('articles.update') }}" id="taxo-form" method="POST" enctype="multipart/form-data">
                        {{-- <form class="form" id="taxo-form" action="{{route('articles.add')}}" method="POST"> --}}
                            @csrf
                            <input type="hidden" name="article_id" value="{{ $data_artical['article_id'] }}">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="exampleInputName1" class="mt-2">Article Title <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="article_name" name="article_name"
                                            placeholder="Article Title" value="{{ $data_artical['article_name'] }}">
                                            @if($errors->has('article_name'))
                                                <div class="error">{{ $errors->first('article_name') }}</div>
                                            @endif
                                        </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="exampleInputName1" class="mt-2">Search Text <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="search_text" name="search_text"
                                            placeholder="Search Text" value="{{ $data_artical['search_text'] }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputName1" class="mt-2"><b>Media Selection</b> <span class="text-danger">*</span></label>
                                        {{-- <input type="text" class="form-control" id="name" name="name"
                                            placeholder="Name"> --}}
                                        <select class="select2" id="media" data-placeholder="Select a Media"
                                            style="width: 100%;" name="media_selection">
                                            <option value="">Select Media</option>
                                            <option value="Article" @php if($data_artical['media_selection']=="Article"){ echo "selected"; } @endphp >Article</option>
                                            <option value="Resource"  @php if($data_artical['media_selection']=="Resource"){ echo "selected"; } @endphp>Resource</option>
                                            {{-- <option value="Image" if($data_artical['media_selection']=='Image'){ dd('selected'); }>Image</option> --}}
                                            <option value="Audio" @php if($data_artical['media_selection']=="Audio"){ echo "selected"; }@endphp>Audio</option>
                                            <option value="Video" @php if($data_artical['media_selection']=="Video"){ echo "selected"; } @endphp>Video</option>
                                            <option value="Image" @php if($data_artical['media_selection']=="Image"){ echo "selected"; } @endphp>Image</option>
                                            {{-- @foreach ($media as $mediaKey => $mediaValue)
                                                <option value="{{ $mediaKey }}">{{ $mediaValue->media_name }}</option>
                                            @endforeach --}}
                                        </select>

                                    </div>
                                </div>
                                <div class="col-md-6 media_resource">
                                    <div class="form-group">
                                        <label for="exampleInputName1" id="media_resource" class="mt-2" style="width:100%;"><b>Resource</b>
                                        @if($data_artical['media_selection']=="Resource")
                                            <a href="{{url('resource/'. $data_artical['resource'])}}" style="float:right;" download>{{$data_artical['resource']}}</a>
                                            @endif
                                        </label>
                                        <input type="file" class="form-control" id="resource" name="resource"
                                            placeholder="Resource">
                                    </div>
                                </div>
                                {{-- <div class="col-md-6 media_image">
                                    <div class="form-group">
                                        <label for="exampleInputName1" id="media_image" class="mt-2"><b>Image</b></label>
                                        <input type="file" class="form-control" id="image" name="image[]"
                                            placeholder="Image" multiple >
                                    </div>
                                </div> --}}
                                <div class="col-md-6 media_youtube">
                                    <div class="form-group">
                                        <label for="exampleInputName1" class="mt-2"><b>Video</b></label>
                                        <input type="text" class="form-control" id="media_youtube" name="youtube_url"
                                            placeholder="https://" value="{{ $data_artical['youtube_url'] }}">
                                    </div>
                                </div>


                                <div class="col-md-6 media_audio">
                                    <div class="form-group">
                                        <label for="exampleInputName1" class="mt-2"><b>Audio</b></label>
                                        {{-- <input type="file" class="form-control" id="media_audio" name="audio"
                                            placeholder="audio" accept="audio/mp3,audio/*;capture=microphone" /> --}}
                                        <input type="text" class="form-control" id="media_audio" name="audio"
                                            placeholder="https://" value="{{ $data_artical['audio'] }}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputEmail3" class="mt-2"><b>Article Date</b> <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="publish_date" name="publish_date"
                                        value="{{ $data_artical['publish_date'] }}" placeholder="Publish Date" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputEmail3" class="mt-2"><b>Publisher</b> <span class="text-danger">*</span></label>

                                        <select class="select2" data-placeholder="Select a Publisher"
                                            style="width: 100%;" name="publisher" required>
                                        <option value="">Select Publisher</option>
                                            @foreach ($publisher as $publisherKey => $publisherValue)
                                                <option value="{{ $publisherValue->publisher_name }}"  @if($data_artical['publisher']=="$publisherValue->publisher_name"){ selected } @endif>{{ $publisherValue->publisher_name }}</option>
                                            @endforeach
                                        </select>
                                        <!--<input list="select"  class="form-control"  id="publisher" name="publisher"-->
                                        <!--    placeholder="publisher" value="{{ $data_artical['publisher'] }}">-->
                                        <!--<datalist id="select">-->
                                        <!--    @foreach ($publisher as $publisherKey => $publisherValue)-->
                                        <!--        <option value="{{ $publisherValue->publisher_name }}"></option>-->
                                        <!--    @endforeach-->
                                        <!--</datalist>-->
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 level6_cat">
                                    <div class="form-group">
                                        <label for="exampleInputName1"><b>Category</b> <span class="text-danger">*</span></label>
                                        @php
                                            $categorys=json_decode($data_artical['category_id']);
                                        @endphp
                                        <select class="select2" id="level6_cat" multiple="multiple" data-placeholder="Select a Category"
                                            style="width: 100%;" name="category_id[]">
                                            @foreach ($category as $catKey => $catValue)
                                                <option value="{{ $catValue->category_id }}" {{in_array($catValue->category_id,$categorys)?'selected':'';}}>{{ $catValue->category_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="exampleInputName1"><b>Interest</b> <span class="text-danger">*</span></label>
                                    @php
                                        $interests=json_decode($data_artical['interest_id']);
                                    @endphp
                                    <select class="select2" multiple="multiple" data-placeholder="Select a Interest"
                                        style="width: 100%;" name="interest_id[]">
                                    @foreach ($interest as $interestKey => $interestValue)
                                        <option value=""></option>
                                        <option value="{{ $interestValue->interest_id }}" {{in_array($interestValue->interest_id,$interests)?'selected':'';}}>{{ $interestValue->interest_name }}</option>
                                    @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputName1"><b>Subscription level</b> <span class="text-danger">*</span></label>
                                        @php
                                            $sub_level=[];
                                            $level=json_decode($data_artical['subscription_level']);
                                        @endphp
                                        <select class="select2"  id="sub_level" multiple="multiple" data-placeholder="Select a Subscription" style="width: 100%;" name="subscription_level[]">
                                        @foreach ($subscription as $subscriptionKey => $subscriptionValue)
                                            <option value="{{ $subscriptionValue->subscription_id }}" {{in_array($subscriptionValue->subscription_id,$level)?'selected':'';}}>level {{ $subscriptionValue->subscription_level }} - {{ $subscriptionValue->subscription_name }}</option>
                                        @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 cat_level2">
                                    <div class="form-group">
                                        <label for="exampleInputName1" class="mt-2"><b>Visible After Days</b> <small> (applicable for level 2 only)</small> </label>
                                        <input type="number" class="form-control" id="cat_level2" name="visiable_after_days"
                                            placeholder="visible after days" value="{{ $data_artical['visiable_after_days'] }}">
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6 cat_level level6_com">
                                    <div class="form-group">
                                        <label for="exampleInputName1"><b>Company</b>  <span class="text-danger">*</span>  <small> (applicable for level 6 only)</small> </label>
                                        @php
                                            $companys=json_decode($data_artical['company_id']);
                                        @endphp

                                        <select class="select2" multiple="multiple" id="level6_com" data-placeholder="Select a Company"
                                            style="width: 100%;" name="company_id[]">
                                            @foreach ($company as $companyKey => $companyValue)

                                                <option value="{{ $companyValue->company_id }}" {{in_array($companyValue->company_id,$companys)?'selected':'';}} >{{ $companyValue->company_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 cat_level level6_indu">
                                    <div class="form-group">
                                        <label for="exampleInputName1"><b>Industry</b>  <span class="text-danger">*</span>  <small> (applicable for level 6 only)</small> </label>
                                        @php
                                            $industrys=json_decode($data_artical['industry_id']);
                                        @endphp
                                        <select class="select2" multiple="multiple" id="level6_indu" data-placeholder="Select a Industry"
                                            style="width: 100%;" name="industry_id[]">
                                            @foreach ($industry as $industryKey => $industryValue)
                                                <option value="{{ $industryValue->industry_id }}" {{in_array($industryValue->industry_id,$industrys)?'selected':'';}} >{{ $industryValue->industry_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                            </div>




                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputName1" id="" class="mt-2"><b>Image</b></label>
                                        <input type="file" class="form-control" id="image" name="image"
                                            placeholder="Image" multiple accept="image/png, image/gif, image/jpeg" >
                                    </div>
                            <div class="row old_image" id="preview-container" >
                            @php
                                $img_data=json_decode($data_artical['image']);
                            @endphp
                            {{-- @if($data_artical['media_selection']=='Image') --}}

                                @if($img_data!=null)
                                @foreach ($img_data as $img)
                                @if($img != '')
                                <div class="col-sm-2" style="text-align:center;">
                                        <a href="javascript:;" class="removeuplode" data-image="{{ $img }}">Remove</a>
                                    <img src="{{ asset('image/'.$img) }}" style="width:200px;height:200px;padding:10px;">
                                </div>
                                @endif
                                @endforeach
                                @endif
                            {{-- @endif --}}
                            </div>
                        <input id="remove_image" name="remove_image" value="" type="hidden"/>
                            <input id="dbimage" name="dbimage" value="{{$data_artical['image']}}" type="hidden"/>
                                </div>
                                <div class="col-md-6 media_image">
                                    <div class="form-group">
                                        <label for="thumbnail_image" class="mt-2"><b>Thumbnail Image</b></label>
                                        <input type="file" class="form-control" id="thumbnail_image" name="thumbnail_image" placeholder="Image" accept="image/png, image/gif, image/jpeg">
                                    </div>
                                    <div class="row" id="thumbnail-image">
                                        @php
                                            $img_data = $data_artical['thumbnail_image'];
                                        @endphp
                                        @if($img_data!=null)
                                        <div class="col-sm-2" style="text-align:center;">
                                            <a href="javascript:;" class="remove_thumbnail-image" data-image="{{ $img_data }}">Remove</a>
                                            <img src="{{ asset('thumbnail_image/'. $img_data) }}" style="width:200px;height:200px;padding:10px;">
                                        </div>
                                        @endif
                                    </div>
                                    <input id="remove_thumbnail_image" name="remove_thumbnail_image" value="" type="hidden"/>
                                    <input id="db_thumbnail_image" name="db_thumbnail_image" value="{{ $img_data }}" type="hidden"/>
                </div>
            </div>


        {{-- <label for="exampleInputName1" class="mt-2"><b>Article</b></label><br /> --}}
        <div class="row">

            <div class="col-md-12">
                <div class="form-group">
                    <label for="exampleInputName1" class="mt-2">Short Description <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="" name="artical_short_desc" rows="3" placeholder="Short Description" name="artical_short_desc">{{ $data_artical['artical_short_desc'] }}</textarea>
                </div>
            </div>
            {{-- <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="exampleInputName1" class="mt-2">Long Description</label>
                                        <textarea class="form-control" id="" name="artical_long_desc" rows="3" placeholder="Long Description" name="artical_long_desc">{{ $data_artical['artical_long_desc'] }}</textarea>
        </div>
    </div> --}}

    <div class="col-md-12">
        <label for="exampleInputName1" class="mt-2">Long Description <span class="text-danger">*</span></label>
        <div class="card card-outline card-info">
            <div class="card-body">
                <textarea id="summernote" name="artical_long_desc">{{ $data_artical['artical_long_desc'] }}</textarea>
            </div>
        </div>
    </div>

</div>



<button type="button" class="btn mr-2 mt-5 btn-light" data-toggle="modal" data-target="#modal-default">
    Preview
</button>
                            <button type="submit" class="btn mr-2 mt-5" id="submitTaxo"
                            style="background: #000000;color: #f0ac63 !important;">Update</button>
{{-- <button class="btn btn-light mt-5">Cancel</button> --}}
<a href="{{ route('articles.list') }}" class="btn  btn-light mt-5" style="">Cancel</a>

</form>
</div>
</div>
</div>
</div>
</div>
{{-- <div class="col-12 grid-margin stretch-card">
        @if (session('status'))
            <div class="alert alert-success" role="alert">
                {{ session('status') }}
</div>
@endif

</div> --}}
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Default Modal</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {!! $data_artical['artical_long_desc'] !!}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endsection
@push('child-scripts')
<script>


    $(function() {
        $('#modal-default').on('show.bs.modal', function(event) {
            $d = $("#summernote").val();
            var button = $(event.relatedTarget)
            var recipient = button.data('whatever')
            var modal = $(this)

            modal.find('.modal-body').html($d)
        })
        // Summernote
        $('#summernote').summernote()

        // CodeMirror
        CodeMirror.fromTextArea(document.getElementById("codeMirrorDemo"), {
            mode: "htmlmixed",
            theme: "monokai"
        });
    })


</script>
<script>
      $(document).on('click', '.remove', function() {
            $(this).parent().remove();
            $('#image').val('');
        });
        $(document).on('click', '.remove_thumbnail_image', function() {
            $(this).parent().remove();
            $('#thumbnail_image').val('');
        });
    // JavaScript code
    document.getElementById('image').addEventListener('change', function(event) {
        var previewContainer = document.getElementById('preview-container');
        previewContainer.innerHTML = ''; // Clear any existing previews

        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();

            var el = document.createElement('div');
            el.classList.add('col-sm-2');
            el.setAttribute('style', 'text-align:center');
            el.innerHTML = '<a href="javascript:;"  class="remove">Remove</a>'
            reader.onload = function(e) {
                var imageElement = document.createElement('img');
                imageElement.src = e.target.result;
                imageElement.classList.add('preview-image');
                imageElement.classList.add('img_pre');
                el.appendChild(imageElement);
                previewContainer.appendChild(el);
            }

            reader.readAsDataURL(file);
        }
        // $('.old_image').hide();
    });
    document.getElementById('thumbnail_image').addEventListener('change', function(event) {
        var previewContainer = document.getElementById('thumbnail-image');
        previewContainer.innerHTML = ''; // Clear any existing previews

        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();

            var el = document.createElement('div');
            el.classList.add('col-sm-2');
            el.setAttribute('style', 'text-align:center');
            el.innerHTML = '<a href="javascript:;"  class="remove_thumbnail_image">Remove</a>'
            reader.onload = function(e) {
                var imageElement = document.createElement('img');
                imageElement.src = e.target.result;
                imageElement.classList.add('preview-image');
                imageElement.classList.add('img_pre');
                el.appendChild(imageElement);
                previewContainer.appendChild(el);
            }

            reader.readAsDataURL(file);
        }
        // $('.old_image').hide();
    });
</script>
<script>
    $(document).ready(function() {
        // alert('hello');
        $('.select2').select2();
        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4',
        })

        $('.media_resource').hide();
        $('.media_youtube').hide();
        $('.media_audio').hide();
        $('.cat_level2').hide();

        var media = $('#media').val();
            if(media=='Resource')
            {
            $('.media_resource').show();
            }if(media=='Video')
            {
            $('.media_youtube').show();
            }if(media=='Audio')
            {
            $('.media_audio').show();
        }

        var selectedValues2 = []; // Initialize an empty array to store the values

        $('#sub_level option:selected').each(function() {
            selectedValues2.push($(this).val());
        });
        if ($.inArray('6', selectedValues2) !== -1) {

        } else {
            $('.level6_com').hide();
            $('.level6_indu').hide();
            $('#cat_level').hide();
        }
        if ($.inArray('2', selectedValues2) !== -1) {
            $('.cat_level2').show();
        } else {
            $('.cat_level2').hide();
            // $('#cat_level2').val("").trigger('change');

        }


        //alert('hello');






        var Media_select = jQuery('#media');
        var select = this.value;

        Media_select.change(function() {
            if ($(this).val() == 'Resource') {
                $('.media_resource').show();
                $('.media_youtube').hide();
                $('.media_audio').hide();
                $('#media_youtube').val(null);
                $('#media_audio').val(null);
            } else if ($(this).val() == 'Audio') {
                $('.media_audio').show();
                $('.media_resource').hide();
                $('.media_youtube').hide();
                $('#media_youtube').val(null);
                $('#media_resource').val(null);
            } else if ($(this).val() == 'Video') {
                $('.media_youtube').show();
                $('.media_resource').hide();
                $('.media_audio').hide();
                $('#media_resource').val(null);
                $('#media_audio').val(null);
            } else if ($(this).val() == 'Article') {
                $('.media_youtube').hide();
                $('.media_resource').hide();
                $('.media_audio').hide();
                $('#media_youtube').val(null);
                $('#media_resource').val(null);
                $('#media_audio').val(null);

            } else {
                $('.media_youtube').hide();
                $('.media_resource').hide();
                $('.media_audio').hide();
                $('#media_youtube').val(null);
                $('#media_resource').val(null);
                $('#media_audio').val(null);
            }

        });

        $('#sub_level').change(function() {
            var selectedValues = []; // Initialize an empty array to store the values

            $('#sub_level option:selected').each(function() {
                selectedValues.push($(this).val());
            });
            //alert(selectedValues);
            if ($.inArray('6', selectedValues) !== -1) {
                $('.level6_com').show();
                $('.level6_indu').show();
            } else {
                $('.level6_com').hide();
                $('#level6_com').val("").trigger('change');
                $('#level6_indu').val("").trigger('change');

                $('.level6_indu').hide();
            }
            if ($.inArray('2', selectedValues) !== -1) {
                $('.cat_level2').show();
            } else {
                $('.cat_level2').hide();
                $('#cat_level2').val("").trigger('change');

            }

        });
        $("#publish_date").datepicker({
            minDate: 0,
            dateFormat: 'yy-mm-dd'
        });
        $("#taxo-form").validate({
            errorElement: "span",
            errorClass: "error",
            ignore: '.note-editor *',
            rules: {
                article_name: {
                    required: true,
                    maxlength: 255
                },
                search_text: {
                    required: true,
                    maxlength: 255
                },
                media_selection: {
                    required: true,
                },
                publish_date: {
                    required: true,
                },
                publisher: {
                    required: true,
                },
                "category_id[]": {
                    required: true,
                },
                "interest_id[]": {
                    required: true,
                },
                "subscription_level[]": {
                    required: true,
                },
                "company_id[]": {
                    required: {
                        depends: function(element) {
                            var levels = $('#sub_level').val()
                            if ($.inArray('6', levels) != -1) {
                                return true;
                            }
                        }
                    },
                },
                "industry_id[]": {
                    required: {
                        depends: function(element) {
                            var levels = $('#sub_level').val()
                            if ($.inArray('6', levels) != -1) {
                                return true;
                            }
                        }
                    },
                },
                artical_short_desc: {
                    required: true,
                },
                artical_long_desc: {
                    required: true,
                },
                visiable_after_days: {
                    required: {
                        depends: function(element) {
                            var levels = $('#sub_level').val()
                            if ($.inArray('2', levels) != -1) {
                                return true;
                            }
                        }
                    },
                },
            },
            messages: {
                article_name: {
                    required: 'Article Title required.',
                },
                search_text: {
                    required: 'Search Text required.',
                },
                media_selection: {
                    required: 'Media required.',
                },
                publisher: {
                    required: 'Publisher required.',
                },
                'category_id[]': {
                    required: 'Category required.',
                },
                'interest_id[]': {
                    required: 'Interest required.',
                },
                'subscription_level[]': {
                    required: 'Subscription Level required.',
                },
                'company_id[]': {
                    required: 'Company required.',
                },
                'industry_id[]': {
                    required: 'Industry required.',
                },
                artical_short_desc: {
                    required: 'Article short description required.',
                },
                artical_long_desc: {
                    required: 'Article long description required.',
                },
                visiable_after_days: {
                    required: 'Visible After Days required.',
                },
            },
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            errorPlacement: function(error, element) {
                console.log(element.attr("name"));
                if (element.attr("name") == 'media_selection' || element.attr("name") == 'publisher' || element.attr("name") == 'category_id[]' || element.attr("name") == 'interest_id[]' || element.attr("name") == 'subscription_level[]' || element.attr("name") == 'company_id[]' || element.attr("name") == 'industry_id[]') {
                    error.insertAfter(element.parent().find('.select2-container'));
                } else if (element.attr("name") == 'artical_long_desc') {
                    error.insertAfter(element.parent().find('.note-editor'));
                } else {
                    element.after(error); // default error placement
                }
            }
        });
    });
    $(document).on('click', '.removeuplode', function(){
        var remove_image = $('#remove_image').val();
        var img = $(this).data('image');
        if(remove_image != ''){
            remove_image = remove_image + ',' + img;
        } else {
            remove_image = img;
        }
        $('#remove_image').val(remove_image);
        $(this).parent().remove();

    });
    $(document).on('click', '.remove_thumbnail-image', function(){
        var remove_image = $('#remove_thumbnail_image').val();
        var img = $(this).data('image');
        if(remove_image != ''){
            remove_image = remove_image + ',' + img;
        } else {
            remove_image = img;
        }
        $('#remove_thumbnail_image').val(remove_image);
        $(this).parent().remove();

    });
</script>



@endpush