@extends('layouts.admin.master')

@section('title')
    {{ __('master.add_article') }}
@endsection

@push('css')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
@endpush

@section('content')
    @component('components.breadcrumb')
        @slot('breadcrumb_title')
            <h3>{{ __('Upload Image') }}</h3>
        @endslot
        <li class="breadcrumb-item"><a href="{{ route('media.image.create') }}">{{ __('Image') }}</a></li>
        <li class="breadcrumb-item active">{{ __('Add Image') }}</li>
    @endcomponent

    <div class="container pt-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header text-center">
                        <h5>{{ __('Upload Image') }}</h5>
                    </div>

                    <div class="card-body">
                        <div id="upload-container" class="text-center">
                            <button id="browseFile" class="btn btn-primary">{{ __('Browse File') }}</button>
                        </div>
                        <div style="display: none" class="progress mt-3" style="height: 25px">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%; height: 100%">
                                75%</div>
                        </div>
                    </div>

                    <div class="card-footer p-4" style="display: none">
                        <div id="imagePreview"></div>
                        <div id="videoPreview"></div>

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


    @push('scripts')
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script type="text/javascript">
            let browseFile = $('#browseFile');
            let resumable = new Resumable({
                target: '{{ route('media.image.upload') }}',
                query: {
                    _token: '{{ csrf_token() }}'
                },
                fileType: ['png', 'jpg', 'jpeg', 'webp', 'svg'],
                chunkSize: 2 * 1024 * 1024, // default is 1*1024*1024, this should be less than your maximum limit in php.ini
                headers: {
                    'Accept': 'application/json'
                },
                testChunks: false,
                throttleProgressCallbacks: 1,
            });

            resumable.assignBrowse(browseFile[0]);

            resumable.on('fileAdded', function(file) { // trigger when file picked
                showProgress();
                resumable.upload() // to actually start uploading.
            });

            resumable.on('fileProgress', function(file) { // trigger when file progress update
                updateProgress(Math.floor(file.progress() * 100));
            });

            resumable.on('fileSuccess', function(file, response) { // trigger when file upload complete
                response = JSON.parse(response)

                var baseUrl = "{{ env('APP_URL') }}";

                if (response.mime_type.includes("image")) {
                    var imagePath = baseUrl + 'storage/' + response.path + '/' + response.name;
                    $('#imagePreview').prepend(
                        ` <img src="${imagePath}" style="width: 100%; height: auto;padding: 20px 0;" alt="img" />`)
                }

                if (response.mime_type.includes("video")) {
                    var videoPath = baseUrl + 'storage/' + response.path + '/' + response.name;
                    $('#videoPreview').prepend(
                        `<video src="${videoPath}" controls style="width: 100%; height: auto; padding: 20px 0;"></video>`
                    )
                }
                progress.find('.progress-bar').removeClass('bg-danger');
                $('.card-footer').show();
                // hideProgress();
            });

            resumable.on('fileError', function(file, response) { // trigger when there is any error
                response = JSON.parse(response)
                progress.find('.progress-bar').addClass('bg-danger');
                Swal.fire({
                    position: 'center',
                    icon: 'error',
                    title: response.error,
                    // showConfirmButton: false,
                    // timer: 2000,
                    // confirmButtonText: "OK",
                }).then(() => {
                    window.location.reload();
                });
            });

            let progress = $('.progress');

            function showProgress() {
                progress.find('.progress-bar').css('width', '0%');
                progress.find('.progress-bar').html('0%');
                progress.find('.progress-bar').removeClass('bg-success');
                progress.show();
            }

            function updateProgress(value) {
                progress.find('.progress-bar').css('width', `${value}%`)
                progress.find('.progress-bar').html(`${value}%`)

                if (value === 100) {
                    progress.find('.progress-bar').addClass('bg-success');
                }
            }

            function hideProgress() {
                progress.hide();
            }
        </script>
    @endpush
@endsection