@extends('admin::layout.main')

@section('title', trans('admin-sidebar.Products'))

@section('content-wrapper')

    @include('admin::pages.components.breadcrumb', ['current_route_title' => trans('admin-sidebar.Products')])

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div class="row">
                        <div class="col-6">
                            <label class="file-upload-archive">
                                <input type="file" accept=".zip"
                                       data-action="{{ route('admin.api.product-import.upload-archive') }}"/>
                                <i class="fa fa-cloud-upload"></i>
                                Select zip archive to upload
                            </label>
                            <a class="btn btn-sm btn-primary upload-files mr-1 mb-1" id="file-upload-archive"
                               data-button-class=".file-upload-archive" data-format=".zip">
                                <div class="d-flex">
                                    <i class="fas fa-spinner fa-spin d-none mr-1"></i>
                                    Upload a ZIP archive
                                </div>
                            </a>

                            <label class="file-upload-xls">
                                <input type="file" accept=".xlsx, .xls, .csv"
                                       data-action="{{ route('admin.api.product-import.upload') }}"/>
                                <i class="fa fa-cloud-upload"></i>
                                Select excel file
                            </label>
                            <a class="btn btn-sm btn-success upload-files mr-1 mb-1" id="file-upload-xls"
                               data-button-class=".file-upload-xls" data-format=".xlsx">
                                <div class="d-flex">
                                    <i class="fas fa-spinner fa-spin d-none mr-1"></i>
                                    Import XLS
                                </div>
                            </a>

                            <label class="file-upload-xls-bulk">
                                <input type="file" accept=".xlsx, .xls, .csv"
                                       data-action="{{ route('admin.api.product-import.import-bulk-products') }}"/>
                                <i class="fa fa-cloud-upload"></i>
                                Select excel file
                            </label>
                            <a class="btn btn-sm btn-success upload-files-bulk mr-1 mb-1" id="file-upload-xls-bulk"
                               data-button-class=".file-upload-xls-bulk" data-format=".xlsx">
                                <div class="d-flex">
                                    <i class="fas fa-spinner fa-spin d-none mr-1"></i>
                                    Update bulk XLS
                                </div>
                            </a>
                            <div class="row mt-2">
                                <div class="col-12">
                                    <a class="d-md-block"
                                       href="{{ asset('admin/docs/image_import_docs_v1.pdf') }}"
                                       title="Complete Guide: Importing Images"
                                       target="_blank"
                                    >
                                        Complete Guide: Importing Images
                                    </a>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-12">
                                    <a class="d-md-block"
                                       href="{{ asset('admin/docs/bulk_template.xlsx') }}"
                                       title="Complete Guide: Importing Images"
                                       target="_blank"
                                    >
                                        Bulk XLS Template
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 text-right">
                            <form action="{{ route('admin.products.set-parent-images-for-variations') }}" method="post">
                                @csrf
                                @method('POST')
                                <button type="submit" class="btn btn-sm btn-warning upload-files-bulk mr-1">
                                    Update variation images
                                </button>
                                <div class="font-13 text-muted mt-2 mr-1">
                                    This procedure updates the images for variations <br>that do not have an image but
                                    have an image for the parent product.
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            @include('admin::pages.products.data-table.table')
        </div>
    </div>

@endsection

@push('script')

    <script>

        $(function () {

            $('.upload-files-bulk').click(function () {
                let result = confirm('Do you want to update bulk products via ' + $(this).data('format') + ' file?');
                if (result === true) {
                    $($(this).data('button-class')).trigger('click');
                }
            });

            $('.upload-files').click(function () {
                let result = confirm('Do you want to import photo via ' + $(this).data('format') + ' file?');
                if (result === true) {
                    $($(this).data('button-class')).trigger('click');
                }
            });

            $('.file-upload-archive').change(function (e) {
                uploadFile(e);
            });

            $('.file-upload-xls').change(function (e) {
                uploadFile(e);
            });

            $('.file-upload-xls-bulk').change(function (e) {
                uploadFile(e);
            });

            function uploadFile(e) {

                let file = e.target.files[0];
                let formData = new FormData();
                formData.append('file', file);

                $('.upload-files').attr('disabled', true);
                $('.upload-files-bulk').attr('disabled', true);
                $('.fa-spinner').removeClass('d-none');

                axios({
                    method:  "post",
                    url:     e.target.getAttribute('data-action'),
                    data:    formData,
                    headers: {"Content-Type": "multipart/form-data"},
                }).then((response) => {
                    alert(response.data.message);
                    window.location.reload();
                }).catch((error) => {
                    alert(error.response.data.message);
                    window.location.reload();
                });
            }
        });
    </script>
@endpush