@extends('AdminMaster.authMaster')

@section('content')

    <!-- <div class="page-header">
                            <h3 class="page-title"> Chunk Files </h3>
                        </div> -->
    <div class="row">
        <div class="col-12 grid-margin stretch-card">
            <div class="card file-up-form">
                <div class="card-body">
                    <h4 class="card-title">File Uploads</h4>

                    <form id="uploadForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div id="validation-errors" class="alert alert-danger d-none">
                            <ul id="error-list" class="mb-0"></ul>
                        </div>
                        <div class="admin-form">
                            <div class="row justify-content-center">
                                <div class="col-12">
                                    <div class="form-group mb-3">
                                        <label for="title" class="form-label">Title</label>
                                        <div class="input-addon">
                                            <input type="text" class="form-control" id="title" name="title"
                                                placeholder="Add Titile" >
                                            <button class="input-addon-item">
                                                <span class="fa-solid fa-t"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mb-3">
                                        <label for="title" class="form-label">Purpose</label>
                                        <input type="text" class="form-control" id="purpose" name="purpose"
                                            placeholder="Enter Purpose">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mb-3">
                                        <label for="tags" class="form-label">Tags</label>
                                        <div class="input-addon">
                                            <input type="text" class="form-control" id="tags" name="tags"
                                                placeholder="Add tags">
                                            <button class="input-addon-item">
                                                <span class="fa-solid fa-tag"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group mb-3">
                                        <label for="description" class="form-label">Description</label>
                                        <div class="input-addon">
                                            <textarea class="form-control" id="description" name="description" rows="8"
                                                placeholder="Write Description here"></textarea>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-12">
                                    <div class="form-group mb-3">
                                        <div class="upload-form" id="drop-area">
                                            <div class="upload-icon">
                                                <img src="{{ asset('assets/images/Upload-icon.png')}}" />
                                            </div>
                                            <div class="upload-icon-text">
                                                <p>Drag and drop your file</p>
                                            </div>
                                            <div class="file-select">
                                                <label>Select File
                                                    <input id="browseFile" type="file" name="video[]" multiple>
                                                </label>
                                            </div>
                                            <div id="fileList"></div>
                                            <div class="progress" id="progressBarContainer" style="display: none;">
                                                <div class="progress-bar" id="progressBar">0%</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--                            <div class="col-6">
                                                    <div class="upload-image">
                                                        <div id="multi-file-upload" data-maxsize="2">
                                                        </div>

                                                    </div>
                                                </div>-->
                                <div class="col-12">
                                    <div class=" mt-3 mb-3">
                                        <label>Thumbnail Image</label>
                                        {{-- <input type="file" name="thumb_image" class="form-control"> --}}
                                        <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 class="file_up_btn text-center">
                                    <button type="submit" id="submitBtn" class="btn form-sub-btn mt-3">Submit</button>
                                </div>
                            </div>
                        </div>
                        <!--                    <button type="submit" id="submitBtn" class="btn form-sub-btn mt-3">Submit</button>-->
                    </form>




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





    <!-- 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>


        $(document).ready(function () {
            $('#uploadForm').on('submit', function (e) {
                e.preventDefault();
                let formData = new FormData(this);

                resumable.files.forEach((file, index) => {
                    formData.append('filePath[]', '/storage/uploads/' + file.fileName);
                });
                //console.log(formData);
                //console.log('{{ route('media.save') }}');
                //return false;
                $.ajax({
                    url: "{{ route('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>`);
                        }
                    }

                });
            });
        });

    </script>
    <script>

        let resumable = new Resumable({
            target: "{{ route('media.submit') }}",
            query: {
                _token: '{{ csrf_token() }}'
            },
            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>`); // Append each file name
            });
            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'],
        //        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>

    <script>
        class Upload {
            constructor(selector) {
                this.root = document.querySelector(selector);

                this.obj = document.createElement('div');
                this.obj.setAttribute('id', 'upload');
                this.root.appendChild(this.obj);

                this.input = document.createElement('input');
                this.input.setAttribute('type', 'file');
                this.input.setAttribute('id', 'file-upload');
                this.input.setAttribute('name', 'thumb_image');
                this.obj.appendChild(this.input);

                this.error = document.createElement('div');
                this.error.setAttribute('id', 'error');
                this.obj.appendChild(this.error);

                this.warning = document.createElement('div');
                this.warning.setAttribute('id', 'warning');
                this.obj.appendChild(this.warning);

                this.thumbs = document.createElement('div');
                this.thumbs.setAttribute('id', 'files');
                this.obj.appendChild(this.thumbs);

                this.icon = document.createElement('div');
                this.icon.setAttribute('class', 'upload-icon');
                const img = document.createElement('img');
                img.src = "/assets/images/Upload-icon.png";
                this.icon.appendChild(img);
                this.obj.appendChild(this.icon);

                this.message = document.createElement('div');
                this.message.setAttribute('id', 'message');
                this.message.innerText = 'Select an image for Thumbnail';
                this.obj.appendChild(this.message);

                this.btn = document.createElement('div');
                this.btn.setAttribute('id', 'btn');
                this.btn.innerText = 'Select a file';
                this.obj.appendChild(this.btn);

                this.input.addEventListener('change', this.__fileSelectHandler__, false);
                this.obj.addEventListener('click', () => {
                    this.input.click()
                }, false);
                this.obj.addEventListener('dragover', this.__fileDragHover__, false);
                this.obj.addEventListener('dragleave', this.__fileDragHover__, false);
                this.obj.addEventListener('drop', this.__fileSelectHandler__, false);

                this.files = [];
                this.sizeLimit = this.root.dataset.maxsize ? parseFloat(this.root.dataset.maxsize) : 5;
                this.aboveLimit = [];
            }

            __fileDragHover__ = (e) => {
                e.stopPropagation();
                e.preventDefault();
                this.obj.className = (e.type === 'dragover' ? 'hover' : '');
            }

            __fileSelectHandler__ = (e) => {
                e.stopPropagation();
                e.preventDefault();

                const files = e.target.files || e.dataTransfer.files;

                this.__fileDragHover__(e);
                this.error.style.display = 'none';
                this.message.style.display = 'none';

                // Clear previous data
                this.files = [];
                this.aboveLimit = [];
                this.thumbs.innerHTML = '';

                for (let i = 0; i < files.length; i++) {
                    const name = this.__parseFile__(files[i]);
                    if (name !== undefined) {
                        this.aboveLimit.push(name);
                    }
                    break; // Only one file preview allowed at a time
                }

                this.__warning__();
                this.input.value = "";
            }

            __warning__ = () => {
                if (this.aboveLimit.length) {
                    var i = document.createElement('i');
                    i.setAttribute('class', 'fa fa-exclamation-triangle');
                    this.warning.textContent = "";
                    this.warning.appendChild(i);
                    this.warning.appendChild(document.createTextNode(' Some files (' + this.aboveLimit.join(', ') + ') exceed the size limit of ' + this.sizeLimit + 'MB'));
                    this.warning.style.display = 'block';
                } else {
                    this.warning.style.display = 'none';
                }
            }

            __parseFile__ = (file) => {
                var isGood = file.type.indexOf('image') !== -1;

                const isEmpty = () => {
                    if (!this.thumbs.childElementCount) {
                        this.icon.style.display = "block";
                        this.message.style.display = "block";
                        this.btn.innerText = 'Select a file';
                    }
                }

                if (isGood) {
                    this.icon.style.display = "none";
                    this.message.style.display = "none";

                    var div = document.createElement('div');
                    div.setAttribute('class', 'file-thumb');
                    this.thumbs.appendChild(div);

                    var img = document.createElement('img');
                    img.src = URL.createObjectURL(file);
                    div.appendChild(img);

                    var i = document.createElement('i');
                    i.setAttribute('class', 'fa fa-times');
                    div.appendChild(i);

                    var obj = { file: file, node: div };

                    i.addEventListener('click', (event) => {
                        event.stopPropagation();
                        event.preventDefault();
                        this.thumbs.removeChild(div);
                        var index = this.files.indexOf(obj);
                        if (index >= 0) {
                            this.files.splice(index, 1);
                        }
                        isEmpty();
                    }, false);

                    if (file.size <= this.sizeLimit * 1024 * 1024) {
                        this.files.push(obj);
                    } else {
                        var box = document.createElement('div');
                        box.setAttribute('class', 'status');
                        var icon = document.createElement('i');
                        icon.setAttribute('class', 'fa fa-exclamation-triangle');
                        icon.style.color = 'orange';
                        box.appendChild(icon);
                        div.appendChild(box);

                        i.addEventListener('click', (event) => {
                            event.stopPropagation();
                            event.preventDefault();
                            this.aboveLimit.splice(this.aboveLimit.indexOf(file.name), 1);
                            this.__warning__();
                            this.thumbs.removeChild(div);
                            isEmpty();
                        }, false);

                        return file.name;
                    }
                } else {
                    var i = document.createElement('i');
                    i.setAttribute('class', 'fa fa-exclamation-circle');
                    this.error.textContent = "";
                    this.error.appendChild(i);
                    this.error.appendChild(document.createTextNode(' Invalid file type'));
                    this.error.style.display = "block";
                    isEmpty();
                }
            }
        }

        resumable.on('fileError', function (file, response) {
            try {
                let error = JSON.parse(response);
                if (error.errors) {
                    console.log("Validation Errors:", error.errors);
                    // Show errors on UI
                    if (error.errors.title) {
                        alert("Title Error: " + error.errors.title[0]);
                    }
                }
            } catch (e) {
                console.error("Invalid JSON in response", response);
            }
        });


    </script>
@endsection