[ Avaa Bypassed ]

@extends('admin.layout.app')
@section('title', 'Add App Images')
@push('custom_css')
    <link rel="stylesheet" href="{{ asset('assets/js/loader/waitMe.css') }}">
    <link href="{{asset('assets/css/image_upload/filepond.css')}}" rel="stylesheet"/>
    <link href="{{asset('assets/css/image_upload/filepond-plugin-image-preview.css')}}" rel="stylesheet"/>
@endpush
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Upload Images</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Upload Images</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header align-items-center d-flex">
            <h4 class="card-title mb-0 flex-grow-1">Images</h4>
        </div><!-- end card header -->

        <div class="card-body">
            <form method="post" data-post-uri="{{route('admin.images.store_img')}}" id="images_form">
                <div class="row gy-4 mb-3">
                    <div class="col-md-12">
                        <div>
                            <label for="placeholderInput" class="form-label">Upload Image(s)</label>
                            <input type="file" class="form-control" multiple>
                        </div>
                    </div>
                    <!--end col-->
                </div>
                <div>
                </div>

                <div class="mt-3">
                    <button type="submit" class="btn btn-primary image_btn" id="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('custom_scripts')
    <script src="{{ asset('assets/js/loader/waitMe.js') }}"></script>
    <script src="{{asset('assets/js/pages/form-editor.init.js')}}"></script>

    <script src="{{asset('assets/js/image_upload/filepond-plugin-image-preview.js')}}"></script>
    <script src="{{asset('assets/js/image_upload/filepond.js')}}"></script>
    <script>
        // Register the plugin
        FilePond.registerPlugin(FilePondPluginImagePreview);
        // Get a reference to the file input element
        const inputElement = document.querySelector('input[type="file"]');
        let images = []

        // Create the FilePond instance
        const pond = FilePond.create(inputElement, {
            credits: false,
            allowReorder: true,
            multiple: true,
            labelIdle: 'Drag & Drop images or browse',
            acceptedFileTypes: [
                'image/jpeg',
                'image/png'
            ],
            name: 'images'
        });

        pond.on('addfile', (error, file) => {
            getBase64(file.file).then(
                data => images.push(data)
            )
        })

        pond.on('removeFile', (error, file) => {
            let image;
            getBase64(file.file).then(
                data => image = data
            )
            let index = images.indexOf(image)
            if (index > -1) {
                images.splice(index, 1);
            }
        })

        $('#submit').on('click', function (e) {
            e.preventDefault()

            $('body').waitMe({
                effect: 'bounce',
                text: 'Submitting. Please wait...',
                color: "#fff",
                bg: 'rgba(0,0,0,0.5)'
            });

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: $('#images_form').attr("data-post-uri"),
                dataType: 'json',
                type: 'POST',
                data: {images: images},
                success: function (json) {
                    $('body').waitMe("hide");
                    if (json.status) {
                        toastr.success('Image(s) added Successfully');
                        // location.href = window.location
                    } else {
                        // console.log(json?.data)
                        if (json?.data?.length > 0) {
                            json.data.forEach((error, index) => {
                                toastr.error(error.error, {
                                    CloseButton: true,
                                    ProgressBar: true
                                });
                            })
                        }

                        Snackbar.show({
                            text: json.message,
                            pos: 'bottom-center',
                            backgroundColor: '#a3220f',
                            timeout: 3000
                        });

                    }
                },
                error: function (json) {
                    Snackbar.show({
                        text: 'Something went wrong. Please try again later!',
                        pos: 'bottom-center',
                        backgroundColor: '#a3220f'
                    });
                    $('body').waitMe("hide");
                }
            });
        })

    </script>


@endpush