@extends($activeTemplate.'layouts.master')
@section('content')
    <div class="col-xl-9 col-lg-12 p-4" >

        <div class="row">

            @foreach($products as $product)

                <div class="my-3 col-md-6 col-xl-4 products" >
                    <div class="card text-black">
                        <img
                            src="{{ getImage(getFilePath('unavailableProduct').'/'.@$product->image)}}"
                            alt="Image" class="card-img-top" style="width:100%;">

                        <div class="card-body">
                            <div class="text-center">
                                <h5 class="card-title">{{$product->name}}</h5>
                             </div>


                            <div class="d-flex justify-content-between total font-weight-bold mt-4 w-100">
                                <form class="form w-100">
                                    @csrf
                                    <input type="hidden" name="id" value="{{$product->id}}">
                                    <div class="row">
                                <button type="submit" class="btn btn--primary btn--base  w-100 py-2 ">@lang('Request')</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>

            @endforeach
                @if ($products->hasPages())
                    <div class="card-footer py-4">
                        @php echo paginateLinks($products) @endphp
                    </div>
                @endif

        </div>
    </div>

@endsection


@push('style')
    <style>

        #loadingSpinnerWrapper {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            width: 100%;
            height: 100vh;
        }


        #loadingSpinner {
            position: relative;
            width: 60px;
            height: 60px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 2s linear infinite;
            z-index: 999999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        #spinnerPercentage {
            position: absolute;
            top: 52%;
            left: 51%;
            font-size: 14px;
            color: white;
        }
    </style>
@endpush
@push('script')
    <script>
        $('form').submit(function (e) {

            e.preventDefault();

            var formData = new FormData(this);

            let card=$(this).closest(".products");

            var loadingSpinnerWrapper = $('#loadingSpinnerWrapper');
            var loadingSpinner = $('#loadingSpinner');
            var spinnerPercentage = $('#spinnerPercentage');

            loadingSpinnerWrapper.fadeIn();
            loadingSpinner.css('opacity', '1');

            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener("progress", function (event) {
                if (event.lengthComputable) {
                    var progress = Math.round((event.loaded / event.total) * 100);
                    spinnerPercentage.text(progress + '%');
                }
            });

            xhr.open("POST", "{{route('user.unavailable-product.accept')}}");

            // Success
            xhr.onload = function () {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.hasOwnProperty('message')) {
                        Toast.fire({
                            icon: 'success',
                            title: response.message
                        });
                    }

                    loadingSpinnerWrapper.fadeOut();
                    $(card).remove();

                } else if (xhr.status === 422) {

                    loadingSpinnerWrapper.fadeOut();
                    spinnerPercentage.text('0%').fadeOut();

                    var response = JSON.parse(xhr.responseText);
                    if (response.hasOwnProperty('errors')) {
                        var errors = response.errors;
                        var errorMessage = '';

                        Object.keys(errors).forEach(function (key) {
                            errorMessage = errors[key][0];
                        });

                        Toast.fire({
                            icon: 'error',
                            title: errorMessage
                        });
                    }
                } else if (xhr.status === 403) {

                    loadingSpinnerWrapper.fadeOut();
                    spinnerPercentage.text('0%').fadeOut();

                    var response = JSON.parse(xhr.responseText);
                    if (response.hasOwnProperty('errors')) {
                        var errors = response.errors;
                        var errorMessage = '';


                        Toast.fire({
                            icon: 'error',
                            title: errors
                        });
                    }
                } else {

                    if (xhr.status === 500) {
                        loadingSpinnerWrapper.fadeOut();
                        spinnerPercentage.text('0%').fadeOut();
                        errorMessage = 'Can not Accept Request. Please try again later.';

                        Toast.fire({
                            icon: 'error',
                            title: errorMessage
                        });
                    } else {
                        loadingSpinnerWrapper.fadeOut();
                        spinnerPercentage.text('0%').fadeOut();
                        var errorMessage = 'Can not Accept Request. Please try again later.';
                        Toast.fire({
                            icon: 'error',
                            title: errorMessage
                        });
                    }
                }
            };

            // Error
            xhr.onerror = function () {

                loadingSpinnerWrapper.fadeOut();
                spinnerPercentage.text('0%').fadeOut();

                var errorMessage = 'An error occurred during the request. Please try again later.';
                Toast.fire({
                    icon: 'error',
                    title: errorMessage
                });
            };

            xhr.send(formData);
        });
    </script>
@endpush