@section('title',$title)
@section('description',$description)
@extends('layout.app')

<style>
  /* SweetAlert popup positioning adjustment */
.my-swal-popup {
    top: 12% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Styling for fieldset */
fieldset {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    background: #f9f9f9;
}

/* Styling for the legend in the fieldset */
legend {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 0 10px;
    background: #fff;
    border-radius: 5px;
}

/* Styling for the upload container */
.upload-container {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background-color: #f9f9f9;
}

.upload-container:hover {
    background-color: #f1f1f1;
}

/* Styling for the preview container */
.preview-container {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Preview item (file or image) container */
.preview-item {
    display: flex;
    align-items: center;
    max-width: 200px; /* Limit width of the preview item */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis when the content overflows */
    position: relative;
}

/* Image preview styling */
.preview-item img {
    max-width: 60px; /* Set max size for image preview */
    max-height: 60px;
    margin-right: 10px;
    border-radius: 5px;
}

/* Styling for file name preview */
.preview-item p {
    font-size: 14px;
    color: #333;
    margin-right: 10px;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Truncate long file names with ellipsis */
    max-width: 120px; /* Set a max width for file name */
}

/* Remove button styling */
.remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

/* Make the upload container more noticeable */
.upload-container {
    border: 2px dashed #ddd;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background-color: #f9f9f9;
}

/* On hover, change background color */
.upload-container:hover {
    background-color: #f1f1f1;
}
</style>
@section('content')
<div class="dm-page-content">
    <div class="container-fluid">
        <div class="fileM-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumb-main">
                        <h4 class="text-capitalize breadcrumb-title">{{ trans('menu.filemanager-menu-title') }}</h4>
                        <div class="breadcrumb-action justify-content-center flex-wrap">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#"><i class="las la-home"></i>Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">{{ trans('menu.filemanager-menu-title') }}</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="fileM-contents">
                        <div class="row">
                            <div class="col-100 col-lg-12 col-sm-12">
                                <div class="fileM-grid-wrapper mb-30 ">
                                    <div class="tab-content" id="pills-tabContent">
                                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                                            <div class="fileM-wrapper">
                                                <div class="breadcrumb-main user-member justify-content-sm-between">
                                                    <div class="d-flex flex-wrap justify-content-center breadcrumb-main__wrapper"></div>
                                                    <div class="action-btn">
                                                        <a href="#" class="btn px-15 btn-primary" data-bs-toggle="modal" data-bs-target="#new-project-modal">
                                                            <i class="las la-plus fs-16"></i>Add Folder</a>

                                                            <!-- Modal -->
                                                            <div class="modal fade" id="new-project-modal" tabindex="-1" aria-labelledby="projectModalLabel" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered">
                                                                    <div class="modal-content radius-xl">
                                                                        <div class="modal-header">
                                                                            <h6 class="modal-title fw-500" id="projectModalLabel">Add new file</h6>
                                                                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                                                                <img src="{{ asset('assets/img/svg/x.svg') }}" alt="x" class="svg">
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <div class="project-modal">
                                                                                <form id="uploadFile" enctype="multipart/form-data">
                                                                                    @csrf

                                                                                    <!-- File Upload Field -->
                                                                                        
                                                                                        <fieldset id="new_file_section">
                                                                                            <legend>Upload New File</legend>
                                                                                            <label for="attachment_name">Attachment Folder Name:</label>
                                                                                            <input type="text" id="attachment_name" name="attachment_custom_name" class="form-control">
                                                                                            
                                                                                            <div class="upload-container mt-3" id="dropArea">
                                                                                                <p>Drop files here or <span style="color:blue; text-decoration:underline;">browse files</span></p>
                                                                                                <input type="file" name="images[]" id="fileInput" multiple hidden>
                                                                                            </div>
                                                                                            
                                                                                            <div class="preview-container" id="previewContainer"></div>
                                                                                        </fieldset>

                                                                                    <!-- Button Group -->
                                                                                    <div class="button-group d-flex pt-25">
                                                                                        <button type="submit" class="btn btn-primary btn-default btn-squared text-capitalize">Upload File</button>
                                                                                        <button type="button" class="btn btn-light btn-default btn-squared fw-400 text-capitalize b-light color-light" data-bs-dismiss="modal">Cancel</button>
                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- End Modal -->
                                                    </div>
                                                </div>
                                                <h6 class="fileM-wrapper__title">Quick Access</h6>
                                                @if(count($attachments) > 0)
                                                    <div class="row">
                                                        @foreach ($attachments as $attachment)
                                                            <div class="col-xl-3 col-lg-4 col-sm-6">
                                                                <div class="fileM-single mb-25">
                                                                    <div class="fileM-card ">
                                                                        <div class="card border-0">
                                                                            <div class="card-body pb-40 pt-45">
                                                                                <a href="{{route('filemanager_view',$attachment->id)}}">
                                                                                    <div class="fileM-img">
                                                                                        <img class="wh-50" src="{{ asset('assets/img/svg/folder.svg') }}" alt="">
                                                                                    </div>
                                                                                
                                                                                <p class="fileM-excerpt">{{$attachment->attachment_name??''}}</p></a>
                                                                                <div class="fileM-action">
                                                                                    <div class="fileM-action__right ">
                                                                                        <div class="dropdown dropleft position-absolute">
                                                                                            <button class="btn-link border-0 bg-transparent p-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                                <img src="{{ asset('assets/img/svg/more-vertical.svg') }}" alt="more-vertical" class="svg">
                                                                                            </button>
                                                                                            <div class="dropdown-menu">
                                                                                                 <a class="dropdown-item" href="{{route('filemanager_view',$attachment->id)}}">
                                                                                                    <i class="uil uil-eye" style="font-size: 20px;color: grey;margin-right:10px;"></i>
                                                                                                    View
                                                                                                </a>
                                                                                                <button class="dropdown-item" data-url="{{ route('download.folder', $attachment->id) }}" id="downloadFile">
                                                                                                    <img src="{{ asset('assets/img/svg/download.svg') }}" alt="download" class="svg">
                                                                                                    Download
                                                                                                </button>
                                                                                                <a class="dropdown-item" href="{{route('folder.delete',$attachment->id)}}"><img src="{{ asset('assets/img/svg/trash-2.svg') }}" alt="trash-2" class="svg">Delete</a>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <H4>No Attachments</H4>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 <script>
    document.addEventListener('click', function(event) {
        if (event.target && event.target.id === "downloadFile") {
            event.preventDefault();

            // Get the backend URL from the data-url attribute
            const downloadUrl = event.target.getAttribute("data-url");

            // Show loading popup
            Swal.fire({
                title: 'Downloading...',
                text: 'Please wait while we prepare the file for download.',
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // Make a request to check the file before triggering download
            fetch(downloadUrl, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                }
            })
            .then(response => {
                if (response.ok) {
                    // If the response is ok, trigger the download
                    window.location.href = downloadUrl;  // This will start the download

                    // Hide the loading popup (if triggered)
                    Swal.close();
                } else {
                    // If the response is not ok, show an error message
                    Swal.fire({
                        title: 'Error!',
                        text: "The file could not be downloaded, Because it's empty ",
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error!',
                    text: 'There was an issue with the download request. Please try again later.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        }
    });


//==============File Upload ==================
document.getElementById('uploadFile').addEventListener('submit', function(event) {
    event.preventDefault();

    //==================For sweetalert initialization========================
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        },
        customClass: {
            popup: 'my-swal-popup',
        }
    })

    //==================For Add new file========================
    let formData = new FormData();
    let attachment_name = document.getElementById('attachment_name');
    let images = document.getElementById('fileInput');

    if (images.files.length === 0) {
        Toast.fire({ icon: 'error',title: 'Please select a file to upload.'})
        return;
    }

    formData.append('attachment_name', attachment_name.value);
    
    // Append all files to FormData (support for multiple files)
    for (let i = 0; i < images.files.length; i++) {
        formData.append('images[]', images.files[i]);
    }

    fetch('/upload-folder-and-file', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
        if (data.status == 'success') {
            Toast.fire({ icon: 'success',title: 'File uploaded successfully'})
            window.location.reload();
        } else {
            Toast.fire({ icon: 'error',title: 'File upload failed.'})
        }
    })
    .catch(error => console.error('Error:', error));
});

// For image drag and drop
const dropArea = document.getElementById("dropArea");
const fileInput = document.getElementById("fileInput");
const previewContainer = document.getElementById("previewContainer");

dropArea.addEventListener("click", () => fileInput.click());

fileInput.addEventListener("change", handleFiles);
dropArea.addEventListener("dragover", (event) => {
    event.preventDefault();
    dropArea.style.backgroundColor = "#e3e3e3";
});

dropArea.addEventListener("dragleave", () => {
    dropArea.style.backgroundColor = "#f9f9f9";
});

dropArea.addEventListener("drop", (event) => {
    event.preventDefault();
    dropArea.style.backgroundColor = "#f9f9f9";
    handleFiles(event.dataTransfer);
});

function handleFiles(event) {
    const files = event.files || event.target.files;
    for (const file of files) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const previewItem = document.createElement("div");
            previewItem.classList.add("preview-item");

            // Check if the file is an image
            if (file.type.startsWith("image/")) {
                const img = document.createElement("img");
                img.src = e.target.result;
                previewItem.appendChild(img);
            } else {
                // For non-image files, show the file name
                const fileName = document.createElement("p");
                fileName.textContent = file.name;
                previewItem.appendChild(fileName);
            }

            const removeBtn = document.createElement("button");
            removeBtn.innerHTML = "&times;";
            removeBtn.classList.add("remove-btn");
            removeBtn.onclick = () => previewItem.remove();
            previewItem.appendChild(removeBtn);

            previewContainer.appendChild(previewItem);
        };
        
        // Read the file as data URL for image or text preview
        if (file.type.startsWith("image/")) {
            reader.readAsDataURL(file);
        } else {
            reader.readAsText(file); // For text files (e.g., PDFs will not preview, only show name)
        }
    }
}



 </script>

@endsection