@extends('admin.layouts.app')
@section('title') Admin Dashboard @endsection
@section('section')
    <div class="container">

<div class="row">
   <div class="col-md-12 mt-4">
       <h2 class="float-left">Edit Slider image</h2>
       <a href="{{route('sliders.list')}}">
        <button type="button" class="btn btn-primary btn-sm float-right">
            Back
        </button>
    </a>
   </div>
</div>
        <div class="col-md-12">

            <form method="post" action="{{route('sliders.update',['id'=>$find_sliders->id])}}" enctype="multipart/form-data">
                @csrf
                <div class="form-group pt-4">
                    <div class="card border-dark">
                        <h5 class="card-header bg-dark text-white">Image Gallery
                            <button type="button" class="btn btn-sm btn-outline-light float-right addImage">
                                <i class="la la-fw la-plus"></i>Add More Image
                            </button>
                        </h5>

                        <div class="card-body">
                            @php
                                $get_decode = json_decode($find_sliders->images);
                            @endphp
                            @if(empty($get_decode))
                                <div class="row addedField ml-5">
                                </div>
                            @endif
                            @if($get_decode)
                                <div class="row addedField ml-5">
                                    @foreach($get_decode as $index => $all_images)
                                        <div class="image-data" data-index="{{ $index }}">
                                            <div class="card shadow"
                                                 style="width:300px;margin-right:20px;margin-bottom:15px;">
                                                <div class="image-upload">
                                                    <div class="avatar-preview">
                                                        <img src="{{ asset('upload/sliders/'.$all_images) }}"
                                                             class="card-img-top profilePicPreview"
                                                             id="profile-pic-show-{{ $index }}"
                                                             style="height:200px;">
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="avatar-edit my-2">
                                                            <label for="id-{{ $index }}"
                                                                   class="btn btn-success btn-lg w-100 ">@lang('Change Image')</label>
                                                            <button class="btn btn-danger btn-lg removeBtn w-100"
                                                                    type="button" data-index="{{ $index }}" data-images="{{ $all_images }}">
                                                                @lang("Remove Image")
                                                            </button>
                                                        </div>
                                                        <input type="file" id="id-{{ $index }}" class="changeImageBtn"
                                                               name="change_images[]" accept=".png, .jpg, .jpeg"
                                                               data-old-images="{{$all_images}}" style="display: none;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="text-center mt-5">

                    <input type="submit" value="Submit" id="submit_btn" class="btn btn-primary w-50 mb-5">
                </div>
            </form>
        </div>
    </div>
@endsection
@section('script')
<script>

    function handleImagePreview(fileInput, previewId) {
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $(previewId).attr('src', e.target.result);
            };

            reader.readAsDataURL(fileInput.files[0]);
        }
    }

    $(document).on('click', '.addImage', function () {

        var randomId = Math.floor(Math.random() * 10000);

        var html = `
        <div class="image-data" data-id="${randomId}">
            <div class="card shadow" style="width:300px;margin-right:20px;margin-bottom:15px;">
                <div class="image-upload">
                    <div class="avatar-preview">
                        <img src="{{asset('admin/dist/img/placeholder.png')}}" class="card-img-top profilePicPreview" id="profile-pic-show-${randomId}" style="height:200px;">
                    </div>
                    <div class="card-body">
                        <div class="avatar-edit my-2">
                            <label for="add-new-file-${randomId}" class="btn btn-success btn-lg w-100">@lang('Add-new-file')</label>
                            <button class="btn btn-danger btn-lg removeBtn w-100" type="button">
                                @lang("Remove Image")
        </button>
    </div>
    <input type="file" class="profilePicUpload" name="add_new_images[]" id="add-new-file-${randomId}" data-id="${randomId}" accept=".png, .jpg, .jpeg" style="display:none;">
                    </div>
                </div>
            </div>
        </div>`;

        $('.addedField').append(html);

        // NEW FILE UPLOAD WORK
        $(`#add-new-file-${randomId}`).on('change', function () {
            handleImagePreview(this, `#profile-pic-show-${randomId}`);
        });
    });

    $(document).on('change', 'input[name="change_images[]"]', function () {
        var index = this.id.split('-')[1]; // Extract index from the ID
        handleImagePreview(this, `#profile-pic-show-${index}`);
    });

    $(document).on('click', '.removeBtn', function () {
        var elementToRemove = $(this).closest('.image-data');
        elementToRemove.remove();
    });




    $('.removeBtn').on('click', function () {
        var images = $(this).data('images');

        // Create a new remove_images element
        var get_remove_images = $('<input>').attr({
            type: 'hidden',
            name: 'remove_images[]',
            value: images
        });

        // Append the remove_images to the form
        $('.addedField').append(get_remove_images);
    });

    $('.changeImageBtn').on('click', function () {
        var old_images = $(this).data('old-images');

        console.log(old_images)
        // Create a new old_images element
        var get_old_images = $('<input>').attr({
            type: 'hidden',
            name: 'old_images[]',
            value: old_images
        });

        $('.addedField').append(get_old_images);
    });

</script>
@endsection