@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-3">
                        @include('Frontend.Layouts.leftbar')
                    </div>

                    <!-- Form Section -->
                    <div class="col-lg-9">
                        <div class="upload-form-div">
                            <div class="upload-form-head ">
                                <h3>Upload Documents</h3>
                                <p>Upload your new documents here</p>
                            </div>
                        </div>
                        <div class="upload-form-div upload-form-main">
                            <form id="formUpload" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div id="validation-errors" class="alert alert-danger d-none">
                                    <ul id="error-list"></ul>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">

                                    <input type="hidden" name="upload_token" value="{{ session()->getId() }}">



                                        <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 files</p>
                                            </div>

                                            <div class="file-select" id="video_upload">
                                                <!-- <label> Select Files
                                                            <input type="file" multiple id="allFiles">
                                                        </label> -->
                                                <label> Select Files
                                                    <input id="browseFile" type="file" name="video[]" multiple>
                                                    <div id="fileList"></div>
                                                </label>
                                            </div>
                                        </div>

                                        <div class="file-list row" id="fileList" style="display:none"></div>
                                    </div>
                                    <div class="col-lg-12">
                                        <!-- Progress Bar -->
                                        <div class="progress" style="display: none; margin-top: 15px;">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0"
                                                aria-valuemax="100">
                                                0%
                                            </div>
                                        </div>
                                    </div>

                                    <!-- <div class=" mt-3 mb-3">
                                                        <div class="form-1">
                                                            <label class="form-label">Thumbnail<span class="i-icon"><i
                                                                        class="fas fa-info"></i></span></label>
                                                            <input type="file" name="thumb_image" class="form-control">
                                                        </div>
                                                    </div> -->
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mt-2 mb-2">
                                                <div class="form-1">
                                                    <label class="form-label">Thumbnail
                                                        <span class="i-icon"><i class="fas fa-info"></i></span>
                                                    </label>
                                                    <input type="file" name="thumb_image" class="form-control"
                                                        id="thumbInput" accept="image/*">
                                                    <img id="thumbPreview" src="" alt="Thumbnail Preview"
                                                        style="display: none; margin-top: 10px; max-width: 200px; height: auto; border: 1px solid #ddd; padding: 5px; border-radius: 5px;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mt-2 mb-2">
                                                <div class="form-1">
                                                    <label class="form-label">Title <span class="star">*</span><span
                                                            class="i-icon"><i class="fas fa-info"></i></span></label>
                                                </div>

                                                <input type="text" class="form-control" name="title"
                                                    placeholder="Add a title that describe your data">
                                            </div>
                                            @error('title')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-lg-6">

                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="mt-2 mb-2">
                                            <div class="form-1">
                                                <label class="form-label">Description <span class="star">*</span><span
                                                        class="i-icon"><i class="fas fa-info"></i></span></label>
                                            </div>
                                            <textarea class="form-control" name="description" cols="5" rows="5"
                                                placeholder="Describe something about your data..."></textarea>
                                        </div>
                                        @error('description')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mt-2 mb-2">
                                            <div class="form-1">
                                                <label class="form-label">Purpose<span class="i-icon"><i
                                                            class="fas fa-info"></i></span></label>
                                            </div>
                                            <input type="text" class="form-control" name="purpose" placeholder="Purpose">
                                        </div>
                                    </div>
                                    @error('purpose')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div class="col-lg-6">
                                        <div class="mt-2 mb-2">
                                            <div class="form-1">
                                                <label class="form-label">Tags<span class="i-icon"><i
                                                            class="fas fa-info"></i></span></label>
                                            </div>
                                            <input type="text" class="form-control" name="tags" id="tags"
                                                placeholder="Add tag">
                                            <p>Enter a comma after each tag</p>
                                        </div>
                                    </div>
                                    @error('tags')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                    <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>
        // Form submission handling
        $(document).ready(function () {
            $('#formUpload').on('submit', function (e) {
                e.preventDefault();
                let formData = new FormData(this);



                resumable.files.forEach((file, index) => {
                    formData.append('filePath[]', '/storage/uploads/' + file.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) {
                        $('#validation-errors').removeClass('d-none');
                        $('#error-list').empty();

                        if (response.responseJSON && response.responseJSON.errors) {
                            let errors = response.responseJSON.errors;

                            $.each(errors, function (key, value) {
                                $('#error-list').append(`<li>${value[0]}</li>`);
                            });
                        } else {
                            $('#error-list').append(`<li>Something went wrong, please try again.</li>`);
                        }
                    }
                });
            });

        });

        let resumable = new Resumable({
            target: "{{ route('user.edit.media') }}",
            query: {
                _token: '{{ csrf_token() }}',
                 upload_token: '{{ session()->getId() }}'
                
            },
            chunkSize: 1 * 1024 * 1024, // 1MB chunks
            testChunks: false,
            throttleProgressCallbacks: 1,
        });
        let fileListContainer = $('#fileList');
        let loader = $('#uploadLoader');
        let progress = $('.progress');

        resumable.assignBrowse(document.getElementById('browseFile'));
        resumable.on('filesAdded', function (files) {
            fileListContainer.empty();
            files.forEach(file => {
                fileListContainer.append(`<div>${file.fileName}</div>`);
            });
            showLoader();
            showProgress();
            resumable.upload();
        });
        resumable.on('fileSuccess', function (file, response) {
            updateProgress(100);
            hideLoader(); // Hide loader on success
            progress.find('.progress-bar').addClass('bg-success').html('Files added , Please submit the form details. ');
        });
        resumable.on('fileProgress', function (file) {
            updateProgress(Math.floor(file.progress() * 100));
        });
        resumable.on('fileError', function (file, response) {
            hideLoader(); // Hide loader on error
            hideProgress();
            alert('File uploading error.');
        });

        function showLoader() {
            loader.show();
        }

        function hideLoader() {
            loader.hide();
        }

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

        document.getElementById('thumbInput').addEventListener('change', function (event) {
            let file = event.target.files[0];

            if (file) {
                let reader = new FileReader();

                reader.onload = function (e) {
                    let preview = document.getElementById('thumbPreview');
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                }

                reader.readAsDataURL(file);
            }
        });
    </script>
   <script>
    document.addEventListener('DOMContentLoaded', function () {
        const tagInput = document.querySelector("#tags");

        if (tagInput) {
            new Tagify(tagInput, {
                whitelist: @json($allTags),
                maxTags: 10,
                dropdown: {
                    maxItems: 20,
                    enabled: 0, 
                    closeOnSelect: false
                }
            });
        }
    });
</script>



@endsection