@extends($activeTemplate.'layouts.master')
@section('content')

    <!-- ==================== Card Start Here ==================== -->
    <div class="col-xl-9 col-lg-12">
        <div class="dashboard-body account-form">
            <div class="dashboard-body__bar">
                <span class="dashboard-body__bar-icon"><i class="las la-bars"></i></span>
            </div>
            <div class="row gy-4 justify-content-center">
                <h4>{{__($pageTitle)}}</h4>
                <div class="card-wrap pb-30">
                    <form action="{{route('user.product-request.store')}}" method="POST" class="submit-form" id="form"
                          enctype="multipart/form-data">

                        @csrf
                        <div class="form-group my-4">
                            <label for="name" class="font-weight-bold">@lang('Product Name')</label>
                            <input type="text" class="form-control my-2" name="name" value="{{old("name")}}" placeholder="Enter Product Name"/>
                        </div>
                        <div class="form-group my-4">
                            <label for="name" class="font-weight-bold">@lang('Description')</label>
                            <textarea class="form-control trumEdit " name="description" id="descripton"
                                      rows="3">{{old("description")}}</textarea>
                        </div>
                        <div class="form-group my-4">
                            <button type="submit" class="btn btn--base w-100">@lang('Submit')</button>
                        </div>
                    </form>

                </div>
            </div>

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

    <script src="{{ asset('assets/common/js/ckeditor.js') }}"></script>
    {{-- LOAD EDITOR --}}
    <script>
        "use strict";
        if ($(".trumEdit")[0]) {
            ClassicEditor
                .create(document.querySelector('.trumEdit'))
                .then(editor => {
                    window.editor = editor;
                });
        }
    </script>

    <!-- ==================== Card End Here ==================== -->
@endsection


@push('script')
    <script src="{{ asset('assets/common/js/ckeditor.js') }}"></script>

    <script>
        (function ($) {
            "use strict";

            if ($(".trumEdit")[0]) {
                ClassicEditor
                    .create(document.querySelector('.trumEdit'))
                    .then(editor => {
                        window.editor = editor;
                    });
            }


            var fileAdded = 0;
            $('.addProductImage').on('click', function () {
                if (fileAdded >= 2) {
                    notify('error', 'You\'ve added maximum number of file');
                    return false;
                }
                fileAdded++;
                $("#productImage").append(`
                    <div class="row">
                        <div class="col-9 mb-3">
                            <div class="file-upload-wrapper" data-text="@lang('Select your image!')"><input type="file" name="images[]" id="inputAttachments" class="file-upload-field"/></div>
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn--danger removeProductImage"><i class="la la-times ms-0"></i></button>
                        </div>
                    </div>
                `)
            });

            $(document).on('click', '.removeProductImage', function () {
                fileAdded--;
                $(this).closest('.row').remove();
            });



            // prodduct create
            $('#form').submit(function(e) {
                e.preventDefault();

                var formData = new FormData(this);

                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.product-request.store')}}");

                // 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
                            });
                        }
                        $('#productCreateForm')[0].reset();
                        $(".file-upload-field").val('').parent(".file-upload-wrapper").attr("data-text", "Select your file!");
                        // Reset CKEditor field
                        if (window.editor) {
                            window.editor.setData('');
                        }

                        loadingSpinnerWrapper.fadeOut();
                        window.location.href = '{{route("user.product-request.index")}}';

                    }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 === 500) {

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

                            errorMessage = 'Product could not be created. Please try again later.';
                            Toast.fire({
                                icon: 'error',
                                title: errorMessage
                            });
                            spinnerPercentage.fadeOut();

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

                        }
                    }
                };

                // 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);
            });

        })(jQuery);

    </script>
@endpush