@extends($layout)
@section('content')
    <style>
        #my-awesome-dropzone .form-group {
            margin-bottom: 0 !important;
            padding: 20px 20px 1rem 20px !important;
        }

        #my-awesome-dropzone {
            padding: 0 !important;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            align-items: center;
            display: none;
            justify-content: center;
            color: #fff;
            font-size: 1.5rem;
            z-index: 9999;
        }

        .dropzone .dz-preview .dz-progress .dz-upload {
            background: #32A336;
        }
    </style>
    <div class="container text-center mb-5 mt-5">
        <div class="row">

        </div>
    </div>

    <section class="bg-diffrent">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-12">
                    <div class="container">
                        <h2>Upload File</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('folders.show') }}">Home</a></li>
                                @if (isset($breadcrumbs))
                                    @foreach ($breadcrumbs as $breadcrumb)
                                        @if ($loop->last)
                                            <li class="breadcrumb-item active" aria-current="page">{{ $breadcrumb['name'] }}
                                            </li>
                                        @else
                                            <li class="breadcrumb-item"><a
                                                    href="{{ route('folders.show', $breadcrumb['id']) }}">{{ $breadcrumb['name'] }}</a>
                                            </li>
                                        @endif
                                    @endforeach
                                @endif
                            </ol>
                        </nav>
                        <div id="uploadContainer" data-can-upload-videos="{{ $canUploadVideos }}"
                            data-can-upload-documents="{{ $canUploadDocuments }}"
                            data-can-upload-images="{{ $canUploadImages }}">
                        </div>
                        <div id="success" class="alert alert-success alert-dismissible fade show" role="alert"
                            style="display:none">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <p style="color:black !important;">X</p>
                            </button>

                        </div>
                        <form action="/upload" class="dropzone" id="my-awesome-dropzone" style="position: relative;">
                            <div id="overlay" class="overlay"></div>
                            <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
                            <input name="folder_id" id="folder_id" type="hidden" value="{{ Request::segment(2) }}">
                            <div class="form-group row">
                                <label for="title" class="col-md-4 col-form-label text-md-right">Title<sup>*</sup>
                                    <p style="font-weight: normal"> (Minimum 3 characters)</p>

                                </label>

                                <div class="col-md-6">
                                    <input id="title" type="text"
                                        class="form-control @error('title') is-invalid @enderror" name="title"
                                        value="{{ old('title') }}" required autocomplete="title" autofocus>

                                    @error('title')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div id="titleError" class="text-danger" style="display: none;"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="description"
                                    class="col-md-4 col-form-label text-md-right">Description<sup>*</sup>
                                    <p style="font-weight: normal"> (Minimum 10 words)</p>
                                </label>
                                <div class="col-md-6">
                                    <textarea id="description" class="form-control @error('description') is-invalid @enderror" name="description" required
                                        autocomplete="description" autofocus>{{ old('description') }}</textarea>
                                    {{-- <div style="margin-top: 5px;">(Minimum 10 words)</div> --}}
                                    @error('description')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div id="descriptionError" class="text-danger" style="display: none;"></div>

                                </div>
                            </div>


                            <div class="form-group row">
                                <label for="capture_datetime" class="col-md-4 col-form-label text-md-right">Release/ capture
                                    Date<sup>*</sup></label>
                                <div class="col-md-6">
                                    <input id="capture_datetime" type="date"
                                        class="form-control @error('capture_datetime') is-invalid @enderror"
                                        name="capture_datetime" value="{{ old('capture_datetime') }}" required
                                        autocomplete="capture_datetime" autofocus>
                                    @error('capture_datetime')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div id="captureDatetimeError" class="text-danger" style="display: none;"></div>

                                </div>
                            </div>




                            <div class="form-group row">
                                <label for="tags" class="col-md-4 col-form-label text-md-right">

                                    Tags* <p style="font-weight: normal"> (Minimum 5 tags)</p>

                                </label>
                                <div class="col-md-6">


                                    <input type="text" class="form-control" id="tags"
                                        placeholder="Add tags separated by a comma">

                                    {{--  <div style="margin-top: 5px;">(Minimum 5 tags)</div> --}}

                                    <button type="button" class="btn btn-primary mt-2" id="addTag">Add</button>
                                    <div id="tagContainer" class="mt-1"></div>
                                    @error('tagList')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div id="tagsError" class="text-danger" style="display: none;"></div>


                                </div>
                                <input type="hidden" name="tagList" id="tagList" value="">
                            </div>
                            {{-- <div id="dropzoneDiv" class="dropzone dz-clickable"> --}}
                            <div class="dz-message">
                                Drag and drop files here or click to upload.
                                <p style="font-weight: normal">(Maximum 10 images or 1 video or 1 document)</p>
                            </div>
                            {{--  </div> --}}
                            <div class="form-group row">
                                <div class="col-md-12 text-center">
                                    <button type="button" id="uploadButton" class="btn btn-success mt-3">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        var userPermissions = @json(auth()->user()->permissions->pluck('name'));

        var allowedVideoTypes = 'video/mp4,';
        var allowedImageTypes = 'image/jpeg, image/png'
        var allowedDocumentTypes =
            'application/pdf, application/docx, application/vnd.openxmlformats-officedocument.wordprocessingml.document';

        var canUploadVideos = userPermissions.includes('upload videos');
        var canUploadDocuments = userPermissions.includes('upload documents');
        var canUploadImages = userPermissions.includes('upload images');

        var acceptedFiles = '';
        if (canUploadVideos) {
            acceptedFiles += allowedVideoTypes;
        }
        if (canUploadImages) {
            acceptedFiles += allowedImageTypes;
        }
        if (canUploadDocuments) {
            if (acceptedFiles.length > 0) acceptedFiles += ', ';
            acceptedFiles += allowedDocumentTypes;
        }

        $(document).ready(function() {
            var today = new Date().toISOString().split('T')[0];
            $('#capture_datetime').attr('max', today);
        });
        console.log(acceptedFiles)
        Dropzone.options.myAwesomeDropzone = {
            url: '/get-presigned-url',
            method: 'PUT',
            autoProcessQueue: false,
            maxFilesize: 50000,
            //maxFiles: 1,
            timeout: 0,
            //parallelUploads: 2,
            acceptedFiles: acceptedFiles,


            init: function() {
                var myDropzone = this;
                var fullFilePath;
                var isValid = true;
                var totalFilesToUpload = 0;
                var successfullyUploadedFiles = 0;



                $("#uploadButton").on('click', function(e) {

                    var title = $('#title').val();
                    var description = $('#description').val();
                    var capture_datetime = $('#capture_datetime').val();
                    var tags = $("#tagList").val().split(',');


                    if (title.trim() === "") {
                        $("#titleError").text("Title is required.").show();
                    } else {
                        $("#titleError").hide();
                    }

                    if (description.trim() === "") {
                        $("#descriptionError").text("Description is required.").show();
                    } else {
                        $("#descriptionError").hide();
                    }

                    if (capture_datetime.trim() === "") {
                        $("#captureDatetimeError").text("Capture Date/Time is required.").show();
                    } else {
                        $("#captureDatetimeError").hide();
                    }
                    if (title.length < 3) {
                        $("#titleError").text("Title must be at least 3 characters long.").show();
                        isValid = false;
                    } else {
                        $("#titleError").hide();
                    }

                    if (title.trim() === "" || description.trim() === "" || capture_datetime.trim() ===
                        "") {
                        return;
                    }


                    // Validate Description
                    /* var wordCount = description.split(/\s+/).length;
                    if (wordCount < 10) {
                        $("#descriptionError").text("Description must be at least 10 words.").show();
                        isValid = false;
                    } else {
                        $("#descriptionError").hide();
                    } */



                    tags = tags.filter(function(tag) {
                        return tag.trim().length > 0;
                    });
                    if (tags.length < 5) {
                        $("#tagsError").text("Enter atleast 5 tags.").show();
                        isValid = false;
                    } else {
                        isValid = true;
                        $("#tagsError").hide();
                    }
                    console.log(tags.length)
                    console.log(isValid)

                    /* if (isValid) {
                        myDropzone.processQueue();
                    } */

                    e.preventDefault();
                    if (myDropzone.files.length > 0) {
                        if (isValid) {
                            const overlay = document.getElementById('overlay');
                            overlay.style.display = 'flex';

                            totalFilesToUpload = myDropzone.files.length; 
                            successfullyUploadedFiles = 0;

                            myDropzone.files.forEach(function(file, index) {
                                if (file.type.startsWith('image/')) {
                                    uploadImageToFileServer(file, index, myDropzone);
                                } else if (allowedDocumentTypes.includes(file.type)) {
                                    uploadDocumentToFileServer(file, index, myDropzone);
                                } else {
                                    myDropzone.processQueue();
                                }
                            });
                        }
                    } else {
                        alert("Please add a file to upload.");
                    }
                });

                function uploadImageToFileServer(file, index, myDropzone) {
                    var csrfToken = document.getElementById('csrf_token').value;
                    var title = $('#title').val();
                    var description = $('#description').val();
                    var capture_datetime = $('#capture_datetime').val();
                    var tagList = $('#tagList').val();
                    var folder_id = $('#folder_id').val();

                    var formData = new FormData();
                    formData.append('file', file);
                    formData.append('filename', file.name);

                    formData.append('title', title);
                    formData.append('description', description);
                    formData.append('capture_datetime', capture_datetime);
                    formData.append('tagList', tagList);
                    formData.append('folder_id', folder_id);



                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', '/upload-image', true);
                    xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);

                    xhr.upload.onprogress = function(event) {
                        if (event.lengthComputable) {
                            var progress = (event.loaded / event.total) * 100;
                            myDropzone.emit('uploadprogress', file, progress, event.loaded);
                        }
                    };

                    xhr.onload = function() {
                        if (xhr.status === 200) {
                            myDropzone.emit('complete', file);
                            myDropzone.removeFile(file);
                            successfullyUploadedFiles++;
                            if (successfullyUploadedFiles === totalFilesToUpload) {
                            var currentUrl = window.location.href;
                            var match = currentUrl.match(/\/folders\/(\d+)/);
                            var successfulUploadMessage = 'Upload Successful.';
                            sessionStorage.setItem('successfulUploadMessage', successfulUploadMessage);
                            if (match && match[1]) {
                                var dynamicValue = match[1];
                                var redirectUrl = '/folders/' + dynamicValue;
                                window.location.href = redirectUrl;
                            }
                        }
                        } else {
                            console.error("Error:", xhr.statusText);
                            myDropzone.emit('error', file, xhr.responseText);
                        }
                    };

                    xhr.onerror = function() {
                        console.error("Upload failed.");
                        myDropzone.emit('error', file, "Upload failed.");
                    };

                    xhr.send(formData);
                }

                function uploadDocumentToFileServer(file, index, myDropzone) {
                    var csrfToken = document.getElementById('csrf_token').value;
                    var title = $('#title').val();
                    var description = $('#description').val();
                    var capture_datetime = $('#capture_datetime').val();
                    var tagList = $('#tagList').val();
                    var folder_id = $('#folder_id').val();

                    var formData = new FormData();
                    formData.append('file', file);
                    formData.append('filename', file.name);

                    formData.append('title', title);
                    formData.append('description', description);
                    formData.append('capture_datetime', capture_datetime);
                    formData.append('tagList', tagList);
                    formData.append('folder_id', folder_id);



                    $.ajax({
                        url: '/upload-document',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        success: function(data) {

                            myDropzone.removeFile(file);
                            var currentUrl = window.location.href;

                            var match = currentUrl.match(/\/folders\/(\d+)/);

                            var successfulUploadMessage = 'Upload Successful.';
                            sessionStorage.setItem('successfulUploadMessage', successfulUploadMessage);
                            if (match && match[1]) {
                                var dynamicValue = match[1];
                                var redirectUrl = '/folders/' + dynamicValue;
                                window.location.href = redirectUrl;
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("Error:", textStatus, errorThrown);
                        }
                    });
                }


                let hasMixedFileTypes = false;

                let fileTypes = new Set();
                let selectionCount = 0;
                this.on("addedfile", function(file) {



                    var removeButton = Dropzone.createElement(
                        "<button class='btn btn-danger btn-sm dz-remove'>Remove</button>");

                    file.previewElement.appendChild(removeButton);

                    removeButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();

                        myDropzone.removeFile(file);
                        fileTypes.clear();


                        //$('#uploadButton').prop('disabled', true);
                        if (selectionCount > 0) {
                            selectionCount--;
                        }


                    });

                    selectionCount++;




                    if (file.type.startsWith('image/')) {
                        this.options.maxFiles = 10;
                        fileTypes.add('image');
                        //console.log(fileTypes.size)
                        if (selectionCount > 10) {
                            alert('You can only upload a maximum of 10 images.');
                            this.removeFile(file);
                            selectionCount--;
                            return;
                        }

                    } else if (file.type === 'application/pdf' ||
                        file.type ===
                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                        file.type === 'application/msword') {
                        this.options.maxFiles = 1;
                        fileTypes.add('document');
                        if (selectionCount > 1) {
                            alert('Please select 10 images or 1 document or 1 video');
                            this.removeFile(file);
                            selectionCount--;
                            return;
                        }
                        //console.log(fileTypes.size)

                    } else if (file.type.startsWith('video/')) {
                        this.options.maxFiles = 1;
                        fileTypes.add('video');
                        if (selectionCount > 1) {
                            alert('Please select 10 images or 1 document or 1 video.');
                            this.removeFile(file);
                            selectionCount--; 
                            return;
                        }
                        //console.log(fileTypes.size)
                    }
                    if (fileTypes.size > 1) {
                        hasMixedFileTypes = true;
                        fileTypes.clear();
                        selectionCount--; 
                        console.log("mixed types")

                    }

                    console.log(this.files.length)
                    console.log(this.options.maxFiles)


                    if (this.files.length > this.options.maxFiles) {

                        let alertMessage = 'You can only upload a maximum of ' + this.options.maxFiles +
                            ' file(s) of this type.';

                        this.removeAllFiles();
                        selectionCount = 0;
                        alert(alertMessage);


                    }

                    if (hasMixedFileTypes) {
                        alertMessage = 'Please upload files of the same type.';
                        hasMixedFileTypes = false
                        this.removeFile(file);
                        //this.removeAllFiles();
                        fileTypes.clear();


                        alert(alertMessage);



                    }




                    if (file.type.startsWith('image/')) {
                        this.options.maxFilesize = 450;
                    } else if (file.type === 'application/pdf' ||
                        file.type ===
                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                        file.type === 'application/msword') {
                        this.options.maxFilesize = 450;
                    }

                    var uploadContainer = document.getElementById('uploadContainer');
                    var canUploadVideos = uploadContainer.getAttribute('data-can-upload-videos') === '1';
                    var canUploadDocuments = uploadContainer.getAttribute('data-can-upload-documents') ===
                        '1';
                    var canUploadImages = uploadContainer.getAttribute('data-can-upload-images') === '1';

                    if (file.type.startsWith('video/') && !canUploadVideos) {
                        this.removeFile(file);
                        alert('You cannot upload videos to this folder.');
                        return;
                    }
                    if (file.type.startsWith('image/') && !canUploadImages) {
                        this.removeFile(file);
                        alert('You cannot upload images to this folder.');
                        return;
                    }
                    if ((file.type.startsWith('application/') || file.type.startsWith('text/')) && !
                        canUploadDocuments) {
                        this.removeFile(file);
                        alert('You cannot upload documents to this folder.');
                        return;
                    }
                    var allowedDocumentTypes = [
                        'application/pdf',
                        'application/docx',
                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                    ];

                    var allowedVideoTypes = [
                        'video/mp4'
                    ];
                    var csrfToken = document.getElementById('csrf_token').value;
                    var urlToUse = /* file.type !== 'video/mp4' ? '/get-presigned-url-for-files' : */
                        '/get-presigned-url';


                    $.ajax({
                        url: urlToUse,
                        type: 'POST',
                        data: {
                            filename: file.name,
                            filesize: file.size,
                            contentType: file.type
                        },
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        success: function(data) {

                            myDropzone.options.url = data.url;
                            fullFilePath = data.fullFilePath;
                            myDropzone.options.headers = {
                                'Content-Type': file.type
                            };

                            // Process the queue
                            //myDropzone.processQueue();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("Error fetching pre-signed URL:", textStatus,
                                errorThrown);
                        }
                    })

                });



                this.on('sending', function(file, xhr, formData) {
                    /* var _send = xhr.send;

                    xhr.send = function() {
                        _send.call(xhr, file);
                    } */
                    if (file.type.startsWith('image/')) {
                        this.options.url = '/upload-image';
                    } else if (allowedDocumentTypes.includes(file.type)) {
                        uploadUrl = '/upload-document';
                    } else {
                        // For videos and documents, use a different endpoint
                        //this.options.url = '/upload';
                        var _send = xhr.send;

                        xhr.send = function() {
                            _send.call(xhr, file);
                        }
                    }
                });

                this.on('success', function(file, response) {
                    console.log("Successfully uploaded to S3:", response);


                    var title = $('#title').val();
                    var description = $('#description').val();
                    var capture_datetime = $('#capture_datetime').val();
                    var tagList = $('#tagList').val();
                    var folder_id = $('#folder_id').val();
                    var contentType = file.type;


                    var csrfToken = document.getElementById('csrf_token').value;
                    //var myDropzone = Dropzone.forElement("#my-awesome-dropzone");

                    //var uploadUrl = file.type !== 'video/mp4' ? '/get-presigned-url-for-files' : '/get-presigned-url';
                    var allowedDocumentTypes = [
                        'application/pdf',
                        'application/docx',
                        'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
                    ];

                    var allowedVideoTypes = [
                        'video/mp4'
                    ];

                    if (allowedVideoTypes.includes(file.type)) {

                        var uploadUrl = '/upload';
                        var submissionType = 'POST'
                    } else if (allowedDocumentTypes.includes(file.type)) {


                        var uploadUrl = '/upload-document';
                        var submissionType = 'PUT'
                    } else {


                        var uploadUrl = '/upload-image';
                        var submissionType = 'PUT'
                    }
                    $.ajax({
                        url: uploadUrl,
                        type: submissionType,
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        data: {
                            title: title,
                            description: description,
                            capture_datetime: capture_datetime,
                            tagList: tagList,
                            fullFilePath: fullFilePath,
                            folder_id: folder_id,
                            contentType: contentType,
                        },
                        success: function(data) {


                            if (data.success) {
                                var currentUrl = window.location.href;
                                var match = currentUrl.match(/\/folders\/(\d+)/);
                                var successfulUploadMessage = 'Upload Successful.';
                                sessionStorage.setItem('successfulUploadMessage',
                                    successfulUploadMessage);
                                if (match && match[1]) {
                                    var dynamicValue = match[1];
                                    var redirectUrl = '/folders/' + dynamicValue;
                                    window.location.href = redirectUrl;
                                }
                                //$("#success").text("File uploaded successfully!").show();
                            }
                            /* else {
                                                           alert(data.message || "Failed to upload image.");
                                                       } */
                            var currentUrl = window.location.href;
                            var match = currentUrl.match(/\/folders\/(\d+)/);
                            var successfulUploadMessage = 'Upload Successful.';
                            sessionStorage.setItem('successfulUploadMessage',
                                successfulUploadMessage);
                            if (match && match[1]) {
                                var dynamicValue = match[1];
                                var redirectUrl = '/folders/' + dynamicValue;
                                window.location.href = redirectUrl;
                            }
                            console.log("File info saved:", data);
                            //$("#success").text("File uploaded successfully!").show();
                            document.getElementById("my-awesome-dropzone").reset();
                            tagsArray = [];
                            document.getElementById("tagContainer").innerHTML = "";
                            document.getElementById("tagList").value = "";
                            myDropzone.removeAllFiles();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.error("Error saving video info:", textStatus,
                                errorThrown);
                        }
                    });


                });


                this.on('error', function(file, response) {
                    console.error("Error uploading:", response);
                });
            }
        };
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // start datetime validation
            var currentDate = new Date();
            var currentYear = currentDate.getFullYear();
            var currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0');
            var currentDay = String(currentDate.getDate()).padStart(2, '0');
            var currentHour = String(currentDate.getHours()).padStart(2, '0');
            var currentMinute = String(currentDate.getMinutes()).padStart(2, '0');

            var formattedDate = currentYear + '-' + currentMonth + '-' + currentDay + 'T' + currentHour + ':' +
                currentMinute;

            document.getElementById("capture_datetime").setAttribute("max", formattedDate);


            // end datetime validation


            var tagsArray = [];

            function addTag(tag) {
                tagsArray.push(tag);

                var tagElement = document.createElement("span");
                tagElement.className = "badge badge-custom me-2";
                tagElement.innerHTML = tag +
                    ' <button type="button" class="btn-close" style="background-color:black;" aria-label="Close"></button>';

                tagElement.querySelector(".btn-close").addEventListener("click", function() {
                    removeTag(tag);
                });

                document.getElementById("tagContainer").appendChild(tagElement);

                document.getElementById("tags").value = "";

                document.getElementById("tagList").value = tagsArray.join(',');
            }

            function removeTag(tag) {
                tagsArray = tagsArray.filter(function(t) {
                    return t !== tag;
                });

                var tagElements = document.querySelectorAll(".badge-custom");
                tagElements.forEach(function(element) {
                    if (element.textContent.trim() === tag) {
                        element.remove();
                    }
                });

                document.getElementById("tagList").value = tagsArray.join(',');
            }

            document.getElementById("addTag").addEventListener("click", function() {
                var inputTags = document.getElementById("tags").value.split(',');
                inputTags.forEach(function(tag) {
                    tag = tag.trim();
                    if (tag !== "") {
                        addTag(tag);
                    }
                });
            });
        });
    </script>
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.css" rel="stylesheet">

    <style>
        .badge-custom {
            color: black !important;
        }
    </style>
@endsection

{{-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script> --}}