Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/rutzotech.com/public_html/ems/employee/manager

Free Space:

10.17 TB

🔧 Quick Actions

✏️ Editing: documents.php

<?php
include 'db.php';
session_start(); // ✅ Must be the first thing in the script

// Safely get session value
$user_id = $_SESSION['user_id'] ?? null;

if (!$user_id) {
    // Optional: redirect unauthorized access
    header("Location: /ems/index.php");
    exit();
}

// Handle file upload
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['document'])) {
    $uploadDir = 'Uploads/';
    if (!file_exists($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }
    
    $description = isset($_POST['description']) ? trim($_POST['description']) : null;
    $uploadedBy = 1; // Default to admin user for demo
    $fileType = $_FILES['document']['type'];
    $fileName = basename($_FILES['document']['name']);
    $filePath = $uploadDir . uniqid() . '_' . $fileName;
    
    if (move_uploaded_file($_FILES['document']['tmp_name'], $filePath)) {
        $stmt = $conn->prepare("INSERT INTO documents (description, uploaded_by, file_path, file_type, uploaded_at) VALUES (?, ?, ?, ?, NOW())");
        $stmt->bind_param("siss", $description, $uploadedBy, $filePath, $fileType);
        $stmt->execute();
        $stmt->close();
        $uploadSuccess = "File uploaded successfully!";
    } else {
        $uploadError = "Error uploading file.";
    }
}
// Fetch current user
$user_id = $_SESSION['user_id'];
$query = "SELECT * FROM users WHERE id = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
$user = $result->fetch_assoc();

// Handle file download
if (isset($_GET['download'])) {
    $fileId = intval($_GET['download']);
    $stmt = $conn->prepare("SELECT * FROM documents WHERE id = ?");
    $stmt->bind_param("i", $fileId);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        $file = $result->fetch_assoc();
        $filePath = $file['file_path'];
        
        if (file_exists($filePath)) {
            header('Content-Description: File Transfer');
            header('Content-Type: application/octet-stream');
            header('Content-Disposition: attachment; filename="'.basename($filePath).'"');
            header('Expires: 0');
            header('Cache-Control: must-revalidate');
            header('Pragma: public');
            header('Content-Length: ' . filesize($filePath));
            readfile($filePath);
            exit;
        }
    }
    $stmt->close();
}

// Handle file deletion
if (isset($_GET['delete'])) {
    $fileId = intval($_GET['delete']);
    $stmt = $conn->prepare("SELECT * FROM documents WHERE id = ?");
    $stmt->bind_param("i", $fileId);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        $file = $result->fetch_assoc();
        $filePath = $file['file_path'];
        
        if (file_exists($filePath)) {
            unlink($filePath);
        }
        
        $stmt = $conn->prepare("DELETE FROM documents WHERE id = ?");
        $stmt->bind_param("i", $fileId);
        $stmt->execute();
        $deleteSuccess = "File deleted successfully!";
    }
    $stmt->close();
}

// Get all documents
$documents = [];
$result = $conn->query("SELECT d.*, u.name as uploaded_by_name
                        FROM documents d
                        LEFT JOIN users u ON d.uploaded_by = u.id
                        ORDER BY d.uploaded_at DESC");
if ($result->num_rows > 0) {
    $documents = $result->fetch_all(MYSQLI_ASSOC);
}

// Function to get file icon based on extension
function getFileIcon($ext) {
    $icons = [
        'pdf' => 'uil uil-file-alt',
        'doc' => 'uil uil-file-word',
        'docx' => 'uil uil-file-word',
        'xls' => 'uil uil-file-excel',
        'xlsx' => 'uil uil-file-excel',
        'png' => 'uil uil-image',
        'jpg' => 'uil uil-image',
        'jpeg' => 'uil uil-image',
        'txt' => 'uil uil-file',
        'csv' => 'uil uil-file-csv'
    ];
    return isset($icons[strtolower($ext)]) ? $icons[strtolower($ext)] : 'uil uil-file';
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CRM | rutzo Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Document Management System for Decconz" name="description">
    <meta content="Decconz" name="author">

<?php include 'libraries.php'; ?>

<style>
        :root {
            --primary-color: #5b73e8;
            --secondary-color: #f5f7fb;
            --accent-color: #ff5e5e;
            --text-dark: #2a3547;
            --text-light: #8a92a6;
        }
        
        .card {
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .file-card {
            position: relative;
            overflow: hidden;
            border-left: 4px solid var(--primary-color);
        }
        
        .file-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        .file-preview {
            max-height: 300px;
            max-width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .action-buttons .btn {
            padding: 0.35rem 0.65rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .action-buttons .btn:hover {
            transform: scale(1.05);
        }
        
        .dropdown-toggle::after {
            display: none;
        }
        
        .autocomplete-suggestions {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            max-height: 200px;
            overflow-y: auto;
            background: white;
            position: absolute;
            z-index: 1000;
            width: 100%;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .autocomplete-suggestion {
            padding: 10px 15px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .autocomplete-suggestion:hover {
            background: var(--secondary-color);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-box .form-control {
            padding-left: 40px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
        }
        
        .search-box .search-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
        }
        
        .badge-file-type {
            background-color: var(--secondary-color);
            color: var(--primary-color);
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 20px;
        }
        
        .upload-area {
            border: 2px dashed #d1d7e0;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: rgba(245, 247, 251, 0.5);
        }
        
        .upload-area:hover {
            border-color: var(--primary-color);
            background-color: rgba(91, 115, 232, 0.05);
        }
        
        .file-upload-input {
            display: none;
        }
        
        .file-info {
            font-size: 0.85rem;
            color: var(--text-light);
        }
        
        .progress {
            height: 8px;
            border-radius: 4px;
        }
        
        .progress-bar {
            background-color: var(--primary-color);
        }
        
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1100;
        }
        
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .table-responsive {
            border-radius: 12px;
            overflow: hidden;
        }
        
        .table thead th {
            background-color: var(--secondary-color);
            border-bottom: none;
            font-weight: 600;
            color: var(--text-dark);
        }
        
        .table tbody tr {
            transition: background 0.2s ease;
        }
        
        .table tbody tr:hover {
            background-color: rgba(245, 247, 251, 0.7);
        }
        
        .empty-state {
            padding: 3rem;
            text-align: center;
        }
        
        .empty-state-icon {
            font-size: 4rem;
            color: #d1d7e0;
            margin-bottom: 1.5rem;
        }
    </style>
</head>

<div class="wrapper">
        <div class="content-page">
            <div class="content">
                <div class="container-fluid">
                    
                    <div class="toast-container">
                        <?php if (isset($uploadSuccess)): ?>
                            <div class="toast show animate-fade-in" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="toast-header bg-success text-white">
                                    <strong class="me-auto">Success</strong>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
                                </div>
                                <div class="toast-body">
                                    <?php echo $uploadSuccess; ?>
                                </div>
                            </div>
                        <?php elseif (isset($uploadError)): ?>
                            <div class="toast show animate-fade-in" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="toast-header bg-danger text-white">
                                    <strong class="me-auto">Error</strong>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
                                </div>
                                <div class="toast-body">
                                    <?php echo $uploadError; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (isset($deleteSuccess)): ?>
                            <div class="toast show animate-fade-in" role="alert" aria-live="assertive" aria-atomic="true">
                                <div class="toast-header bg-success text-white">
                                    <strong class="me-auto">Success</strong>
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
                                </div>
                                <div class="toast-body">
                                    <?php echo $deleteSuccess; ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>

<div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right">
                                    <ol class="breadcrumb m-0">
                                        <li class="breadcrumb-item"><a href="javascript: void(0);">Decconz</a></li>
                                        <li class="breadcrumb-item active">Document Management</li>
                                    </ol>
                                </div>
                                <h4 class="page-title">
                                    <i class="uil uil-folder-grid me-1"></i> Document Management
                                </h4>
                            </div>
                        </div>
                    </div>

<div class="row mb-3">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="header-title d-flex align-items-center">
                                        <i class="uil uil-cloud-upload me-2"></i> Upload New Document
                                    </h4>
                                    <form action="" method="POST" enctype="multipart/form-data" id="uploadForm">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="upload-area" id="dropArea">
                                                    <div class="mb-3">
                                                        <i class="uil uil-cloud-upload display-4 text-primary mb-2"></i>
                                                        <h5>Drag & Drop your file here</h5>
                                                        <p class="file-info">or click to browse files</p>
                                                    </div>
                                                    <input type="file" class="file-upload-input" id="document" name="document" required>
                                                </div>
                                                <div class="progress mt-2 d-none" id="uploadProgress">
                                                    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3 position-relative">
                                                    <label for="description" class="form-label">Description</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text"><i class="uil uil-comment-alt-lines"></i></span>
                                                        <input type="text" class="form-control" id="description" name="description" 
                                                               placeholder="Type description" autocomplete="off">
                                                    </div>
                                                    <div id="description-suggestions" class="autocomplete-suggestions"></div>
                                                </div>
                                                <div class="mb-3">
                                                    <div id="filePreview" class="d-none">
                                                        <div class="d-flex align-items-center">
                                                            <i class="uil uil-file-alt me-2 fs-4"></i>
                                                            <div>
                                                                <span id="fileNamePreview" class="d-block fw-medium"></span>
                                                                <small id="fileSizePreview" class="text-muted"></small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2 d-flex align-items-end">
                                                <button type="submit" class="btn btn-primary w-100">
                                                    <i class="uil uil-upload me-1"></i> Upload
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row mb-2">
                                        <div class="col-sm-4">
                                            <h4 class="header-title d-flex align-items-center">
                                                <i class="uil uil-files-landscapes me-2"></i> Document Library
                                            </h4>
                                        </div>
                                        <div class="col-sm-8">
                                            <div class="text-sm-end">
                                                <div class="search-box">
                                                    <i class="uil uil-search search-icon"></i>
                                                    <input type="text" class="form-control" placeholder="Search documents..." id="search-input">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

<div class="table-responsive">
                                        <table class="table table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>File Name</th>
                                                    <th>Type</th>
                                                    <th>Description</th>
                                                    <th>Uploaded By</th>
                                                    <th>Date</th>
                                                    <th>Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php foreach ($documents as $document): 
                                                    $filePath = $document['file_path'];
                                                    $fileName = basename($filePath);
                                                    $fileExt = pathinfo($fileName, PATHINFO_EXTENSION);
                                                    $fileIcon = getFileIcon($fileExt);
                                                    $fileSize = file_exists($filePath) ? filesize($filePath) : 0;
                                                    $fileSizeFormatted = $fileSize > 0 ? round($fileSize / (1024 * 1024), 2) . ' MB' : 'N/A';
                                                ?>
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <i class="<?php echo $fileIcon; ?> me-2 fs-4 text-primary"></i>
                                                            <div>
                                                                <span class="d-block fw-medium"><?php echo htmlspecialchars($fileName); ?></span>
                                                                <small class="text-muted"><?php echo $fileSizeFormatted; ?></small>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td><span class="badge badge-file-type"><?php echo strtoupper($fileExt); ?></span></td>
                                                    <td><?php echo $document['description'] ? htmlspecialchars($document['description']) : '<span class="text-muted">N/A</span>'; ?></td>
                                                    <td><?php echo htmlspecialchars($document['uploaded_by_name']); ?></td>
                                                    <td><?php echo date('M d, Y', strtotime($document['uploaded_at'])); ?></td>
                                                    <td>
                                                        <div class="d-flex action-buttons">
                                                            <a href="?download=<?php echo $document['id']; ?>" class="btn btn-success btn-sm me-1" data-bs-toggle="tooltip" title="Download">
                                                                <i class="uil uil-download-alt"></i>
                                                            </a>
                                                            <a href="?delete=<?php echo $document['id']; ?>" class="btn btn-danger btn-sm me-1" 
                                                               onclick="return confirm('Are you sure you want to delete this file?')" data-bs-toggle="tooltip" title="Delete">
                                                                <i class="uil uil-trash-alt"></i>
                                                            </a>
                                                            <div class="dropdown">
                                                                <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-toggle="tooltip" title="More options">
                                                                    <i class="uil uil-ellipsis-h"></i>
                                                                </button>
                                                                <ul class="dropdown-menu dropdown-menu-end">
                                                                    <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#previewModal" 
                                                                           data-file="<?php echo $filePath; ?>" data-type="<?php echo $document['file_type']; ?>">
                                                                           <i class="uil uil-eye me-1"></i> Preview</a></li>
                                                                    <li><a class="dropdown-item" href="#" onclick="generateShareLink(<?php echo $document['id']; ?>)">
                                                                        <i class="uil uil-share-alt me-1"></i> Share</a></li>
                                                                    <li><hr class="dropdown-divider"></li>
                                                                    <li><a class="dropdown-item text-danger" href="?delete=<?php echo $document['id']; ?>" 
                                                                           onclick="return confirm('Are you sure you want to delete this file?')">
                                                                           <i class="uil uil-trash-alt me-1"></i> Delete</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <?php endforeach; ?>
                                                <?php if (empty($documents)): ?>
                                                <tr>
                                                    <td colspan="6">
                                                        <div class="empty-state">
                                                            <div class="empty-state-icon">
                                                                <i class="uil uil-folder-open"></i>
                                                            </div>
                                                            <h4>No documents found</h4>
                                                            <p class="text-muted">Upload your first document by clicking the upload button above</p>
                                                            <button class="btn btn-primary" onclick="document.getElementById('document').click()">
                                                                <i class="uil uil-upload me-1"></i> Upload Document
                                                            </button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <?php endif; ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="previewModalLabel">
                                <i class="uil uil-file-alt me-1"></i> Document Preview
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body text-center">
                            <div id="preview-content" class="p-3"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="uil uil-times me-1"></i> Close
                            </button>
                            <button type="button" class="btn btn-primary" id="download-from-preview">
                                <i class="uil uil-download-alt me-1"></i> Download
                            </button>
                        </div>
                    </div>
                </div>
            </div>

<div class="modal fade" id="shareModal" tabindex="-1" aria-labelledby="shareModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="shareModalLabel">
                                <i class="uil uil-share-alt me-1"></i> Share Document
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="share-link" class="form-label">Shareable Link</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="share-link" readonly>
                                    <button class="btn btn-outline-primary" type="button" id="copy-link">
                                        <i class="uil uil-copy"></i> Copy
                                    </button>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="expiry-date" class="form-label">Link Expiry (Optional)</label>
                                <input type="datetime-local" class="form-control" id="expiry-date">
                            </div>
                            <div class="mb-3">
                                <label for="share-email" class="form-label">Send to Email (Optional)</label>
                                <input type="email" class="form-control" id="share-email" placeholder="recipient@example.com">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="uil uil-times me-1"></i> Close
                            </button>
                            <button type="button" class="btn btn-primary" id="send-email">
                                <i class="uil uil-envelope me-1"></i> Send Email
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
        // Initialize tooltips
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            });
            
            // Auto-hide toasts after 5 seconds
            var toastElList = [].slice.call(document.querySelectorAll('.toast'))
            var toastList = toastElList.map(function (toastEl) {
                var toast = new bootstrap.Toast(toastEl, { delay: 5000 })
                toast.show()
                return toast
            });
        });

// File upload handling
        const dropArea = document.getElementById('dropArea');
        const fileInput = document.getElementById('document');
        const filePreview = document.getElementById('filePreview');
        const fileNamePreview = document.getElementById('fileNamePreview');
        const fileSizePreview = document.getElementById('fileSizePreview');
        const uploadProgress = document.getElementById('uploadProgress');
        const progressBar = uploadProgress.querySelector('.progress-bar');

// Prevent default drag behaviors
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
            document.body.addEventListener(eventName, preventDefaults, false);
        });

// Highlight drop area when item is dragged over it
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });

['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

// Handle dropped files
        dropArea.addEventListener('drop', handleDrop, false);
        dropArea.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', handleFiles);

function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

function highlight() {
            dropArea.classList.add('border-primary');
            dropArea.style.backgroundColor = 'rgba(91, 115, 232, 0.1)';
        }

function unhighlight() {
            dropArea.classList.remove('border-primary');
            dropArea.style.backgroundColor = '';
        }

function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            fileInput.files = files;
            handleFiles({ target: fileInput });
        }

function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

// Autocomplete functionality for descriptions
        const descriptionInput = document.getElementById('description');
        const suggestionsContainer = document.getElementById('description-suggestions');
        const descriptions = <?php
            $result = $conn->query("SELECT DISTINCT description FROM documents WHERE description IS NOT NULL");
            $descArray = [];
            while ($row = $result->fetch_assoc()) {
                $descArray[] = $row['description'];
            }
            echo json_encode($descArray);
        ?>;
        
        descriptionInput.addEventListener('input', function() {
            const value = this.value.toLowerCase();
            suggestionsContainer.innerHTML = '';
            
            if (value.length > 0) {
                const filteredDescriptions = descriptions.filter(desc => 
                    desc.toLowerCase().includes(value)
                );
                
                filteredDescriptions.forEach(desc => {
                    const div = document.createElement('div');
                    div.className = 'autocomplete-suggestion';
                    div.innerHTML = `<i class="uil uil-comment-alt-lines me-1"></i> ${desc}`;
                    div.addEventListener('click', () => {
                        descriptionInput.value = desc;
                        suggestionsContainer.innerHTML = '';
                    });
                    suggestionsContainer.appendChild(div);
                });
            }
        });

// Hide suggestions when clicking outside
        document.addEventListener('click', function(e) {
            if (!descriptionInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
                suggestionsContainer.innerHTML = '';
            }
        });

// Preview modal handler
        const previewModal = document.getElementById('previewModal');
        previewModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const filePath = button.getAttribute('data-file');
            const fileType = button.getAttribute('data-type');
            const previewContent = document.getElementById('preview-content');
            const downloadBtn = document.getElementById('download-from-preview');
            
            // Set download button href
            const fileId = button.getAttribute('data-id') || new URLSearchParams(window.location.search).get('download');
            if (fileId) {
                downloadBtn.onclick = function() {
                    window.location.href = `?download=${fileId}`;
                };
                downloadBtn.style.display = 'block';
            } else {
                downloadBtn.style.display = 'none';
            }
            
            // Display preview based on file type
            previewContent.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
            
            if (fileType.includes('image')) {
                previewContent.innerHTML = `<img src="${filePath}" class="img-fluid file-preview" alt="Preview">`;
            } else if (fileType.includes('pdf')) {
                previewContent.innerHTML = `<iframe src="${filePath}" width="100%" height="500px" style="border: none;"></iframe>`;
            } else if (fileType.includes('text') || fileType.includes('csv')) {
                fetch(filePath)
                    .then(response => response.text())
                    .then(text => {
                        previewContent.innerHTML = `<div class="text-start p-3"><pre class="bg-light p-3 rounded">${text}</pre></div>`;
                    })
                    .catch(() => {
                        previewContent.innerHTML = `<div class="alert alert-info">Preview not available for this file type. Please download to view.</div>`;
                    });
            } else {
                previewContent.innerHTML = `<div class="alert alert-info">Preview not available for this file type. Please download to view.</div>`;
            }
        });

// Share link functionality
        function generateShareLink(fileId) {
            const baseUrl = window.location.href.split('?')[0];
            const shareLink = `${baseUrl}?download=${fileId}`;
            
            document.getElementById('share-link').value = shareLink;
            const shareModal = new bootstrap.Modal(document.getElementById('shareModal'));
            shareModal.show();
        }

// Copy link to clipboard
        document.getElementById('copy-link').addEventListener('click', function() {
            const shareLink = document.getElementById('share-link');
            shareLink.select();
            document.execCommand('copy');
            
            // Show tooltip feedback
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="uil uil-check-circle me-1"></i> Copied!';
            setTimeout(() => {
                this.innerHTML = originalText;
            }, 2000);
        });

// Search functionality
        document.getElementById('search-input').addEventListener('keyup', function() {
            const searchText = this.value.toLowerCase();
            const rows = document.querySelectorAll('tbody tr');
            
            rows.forEach(row => {
                const text = row.textContent.toLowerCase();
                row.style.display = text.includes(searchText) ? '' : 'none';
            });
        });

// Send email functionality
        document.getElementById('send-email').addEventListener('click', function() {
            const email = document.getElementById('share-email').value;
            const shareLink = document.getElementById('share-link').value;
            const expiryDate = document.getElementById('expiry-date').value;
            
            if (email && !validateEmail(email)) {
                alert('Please enter a valid email address');
                return;
            }
            
            // In a real application, you would send this to your server to handle the email
            alert(`Email would be sent to ${email} with the link: ${shareLink}`);
        });

function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
    </script>
</body>
</html>
<?php $conn->close(); ?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: documents.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation