@extends('Frontend.Master.authMaster')
@section('content')

<section class="upload-form-sec">
    <div class="upload-form-sec-wrap">
        <div class="container">
            <div class="row">
                <!-- Sidebar Section -->
                <div class="col-lg-2">
                @include('Frontend.Layouts.leftbar')
                </div>

                <!-- Form Section -->
                <div class="col-lg-10 mt-4">
                    <div class="upload-form-div">
                        <div class="upload-form-head ">
                            <h3>Upload Documents</h3>
                            <p>Upload your new documents here</p>
                        </div>
                        <form id="formUpload" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="upload-form">
                                        <div class="upload-icon" id="video_upload_image">
                                            <img src="{{ asset('assets/images/Upload-icon.png')}}" alt="">
                                        </div>
                                        <div class="upload-icon-text" id="video_upload_text">
                                            <p>Drag and drop your file</p>
                                        </div>
                                        <div class="file-select" id="video_upload">
                                            <label> Select File
                                                <input type="file" id="browseFile" name="video">
                                            </label>
                                        </div>
                                        <div class="d-none text-center" id="final_success">
                                            <input type="text" class="form-control w-50 mx-auto text-center" placeholder="no" readonly>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="mt-3 mb-3">
                                        <label class="form-label">Title <span class="star">*</span><span class="i-icon"><i class="fas fa-info"></i></span></label>
                                        <input type="text" class="form-control" name="title" placeholder="Add a title that describe your data">
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="mt-3 mb-3">
                                        <label class="form-label">Description <span class="star">*</span><span class="i-icon"><i class="fas fa-info"></i></span></label>
                                        <textarea class="form-control" name="description" cols="5" rows="5" placeholder="Describe something about your data..."></textarea>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="mt-3 mb-3">
                                        <label class="form-label">Purpose<span class="i-icon"><i class="fas fa-info"></i></span></label>
                                        <input type="text" class="form-control" name="purpose" placeholder="Purpose">
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <div class="mt-3 mb-3">
                                        <label class="form-label">Tags<span class="i-icon"><i class="fas fa-info"></i></span></label>
                                        <input type="text" class="form-control" name="tags" id="tags" placeholder="Add tag">
                                        <p>Enter a comma after each tag</p>
                                    </div>
                                </div>

                                <div class="up-form-btn-div up-form-btn-div-2" style="text-align:center;">
                                    <button type="submit" class="btn">Upload</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

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

<!-- Resumable js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.0.3/resumable.min.js"
    integrity="sha512-OmtdY/NUD+0FF4ebU+B5sszC7gAomj26TfyUUq6191kbbtBZx0RJNqcpGg5mouTvUh7NI0cbU9PStfRl8uE/rw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Bootstrap js -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<!-- Include Tagify CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>

<!-- Botostrap  -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<!-- Jquery  -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<script>
    let resumable = new Resumable({
        target: "{{ route('user.edit.media') }}",
        query: {
            _token: '{{ csrf_token() }}'
        },
        chunkSize: 1 * 1024 * 1024, // 5MB chunks
        testChunks: false,
        throttleProgressCallbacks: 1,
    });

    resumable.assignBrowse(document.getElementById('browseFile'));
    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
        let fileName = file.fileName;
        $('#video_upload').addClass('d-none');
        $('#video_upload_image').addClass('d-none');
        $('#video_upload_text').addClass('d-none');

        $('#final_success').removeClass('d-none');
        $('#final_success input').val(fileName);
        $('#final_success').show();
        hideProgress();
    });

    resumable.on('fileError', function(file, response) { // trigger when there is any error
        hideProgress();
        alert('file uploading error.')
    });

    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}%`)
    }

    function hideProgress() {
        progress.hide();
    }


    var input = document.querySelector("#tags");
    new Tagify(input, {
        whitelist: ['php', 'image', 'laravel','moreimpt','lessimpt','mostimpt'],
        maxTags: 10,
        dropdown: {
            maxItems: 20,
            enabled: 0,
        }
    });

    $('#formUpload').on('submit', function(e) {
        e.preventDefault();
        let formData = new FormData(this);
        // formData.append('filePath', '{{ storage_path("app/public/uploads/") }}' + resumable.files[0].fileName);
        formData.append('filePath', '/storage/uploads/' + resumable.files[0].fileName);

        $.ajax({
            url: "{{ route('user.media.save') }}",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
    Swal.fire({
        icon: 'success',
        title: 'Success!',
        text: 'File submitted successfully!',
        confirmButtonColor: '#3085d6',
        confirmButtonText: 'OK'
    }).then(() => {
        location.reload();
    });
},
error: function(response) {
    Swal.fire({
        icon: 'error',
        title: 'Oops...',
        text: 'Error submitting data!',
        confirmButtonColor: '#d33',
        confirmButtonText: 'Try Again'
    });
}

        });
    });
</script>
@endsection