{% extends "layouts/base.html" %}

{% block title %}Company Files{% endblock %}
{% block extra_css %}
<style>
    .files-section {
        padding: 20px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .files-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .file-card,
    .folder-card {
        background: white;
        border-radius: 8px;
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .folder-card {
        background: #f8f9fa;
    }

    .file-icon,
    .folder-icon {
        font-size: 2em;
    }

    .file-icon {
        color: #dc3545;
    }

    .folder-icon {
        color: #0d6efd;
    }

    .file-info,
    .folder-info {
        flex-grow: 1;
        width: 130px;
    }

    .file-info h4,
    .folder-info h4 {
        margin: 0;
        font-size: 1em;
        color: #333;
    }

    .file-info p {
        margin: 5px 0 0;
        font-size: 0.8em;
        color: #666;
    }

    .file-actions,
    .folder-actions {
        display: flex;
        gap: 10px;
    }

    .no-files {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px;
        background: white;
        border-radius: 8px;
        color: #666;
    }

    .no-files i {
        font-size: 3em;
        margin-bottom: 10px;
    }

    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        padding: 10px;
        background: white;
        border-radius: 8px;
    }

    .breadcrumb-item {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #666;
        text-decoration: none;
    }

    .breadcrumb-item:hover {
        color: #0d6efd;
    }

    .breadcrumb-separator {
        color: #666;
    }

    .modal {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 100%;
        height: max-content;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    }

    .modal-content {
        background: white;
        width: 500px;
        margin: 10px auto;
        padding: 20px;
        border-radius: 8px;
    }

    .modal-content input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin: 10px 0;
    }

    .modal::-webkit-scrollbar {
        display: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="files-section">
    <div class="section-header">
        <h2>Company Files</h2>
        <div class="header-actions">
            <button type="button" class="action-button primary" onclick="showCreateFolderModal()">
                <i class="fa-light fa-folder-plus"></i>
                <span>New Folder</span>
            </button>
            <button type="button" class="action-button primary"
                onclick="document.getElementById('upload-file').click()">
                <i class="fa-light fa-upload"></i>
                <span>Upload New File</span>
            </button>
            <input type="file" id="upload-file" style="display: none" accept=".pdf,.docx" multiple>
        </div>
    </div>

    <div class="breadcrumb">
        <a href="/company/files" class="breadcrumb-item">
            <i class="fa-light fa-home"></i>
            Root
        </a>
        {% for folder in breadcrumb %}
        <span class="breadcrumb-separator">/</span>
        <a href="/company/files?folder={{ folder.id }}" class="breadcrumb-item">
            <i class="fa-light fa-folder"></i>
            {{ folder.name }}
        </a>
        {% endfor %}
    </div>

    <div class="files-grid">
        {% for folder in folders %}
        <div class="folder-card" onclick="navigateToFolder('{{ folder.id }}')">
            <div class="folder-icon">
                <i class="fa-light fa-folder"></i>
            </div>
            <div class="folder-info">
                <h4>{{ folder.name }}</h4>
            </div>
            <div class="folder-actions">
                <button class="action-button danger" onclick="deleteFolder('{{ folder.id }}', event)">
                    <i class="fa-light fa-trash"></i>
                </button>
            </div>
        </div>
        {% endfor %}

        {% for doc in documents %}
        <div class="file-card">
            <div class="file-icon">
                {% if doc.file_name.endswith('.pdf') %}
                <i class="fa-light fa-file-pdf"></i>
                {% elif doc.file_name.endswith('.docx') or doc.file_name.endswith('.doc') %}
                <i class="fa-light fa-file-word"></i>
                {% else %}
                <i class="fa-light fa-file"></i>
                {% endif %}
            </div>
            <div class="file-info">
                <h4>{{ doc.file_name }}</h4>
                <p>Uploaded: {{ doc.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
            </div>
            <div class="file-actions">
                <button class="action-button danger" onclick="deleteFile('{{ doc.id }}')">
                    <i class="fa-light fa-trash"></i>
                </button>
            </div>
        </div>
        {% endfor %}

        {% if not folders and not documents %}
        <div class="no-files">
            <i class="fa-light fa-folder-open"></i>
            <p>No files or folders in this location</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- Create Folder Modal -->
<div id="createFolderModal" class="modal" style="display: none;">
    <div class="modal-backdrop"></div>
    <div class="modal-content">
        <h3>Create New Folder</h3>
        <input type="text" id="folderName" placeholder="Enter folder name">
        <div class="modal-actions">
            <button onclick="createFolder()" class="action-button primary">Create</button>
            <button onclick="closeCreateFolderModal()" class="action-button">Cancel</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let currentFolderId = '{{ current_folder_id if current_folder_id else "null" }}';

    // Handle file upload
    document.getElementById('upload-file').addEventListener('change', async (e) => {
        const files = e.target.files;
        if (!files.length) return;

        const formData = new FormData();
        for (let file of files) {
            formData.append('documents[]', file);
        }
        formData.append('folder_id', currentFolderId);

        try {
            const response = await fetch('/company/upload-document', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            if (data.success) {
                showNotification('File Uploaded successfully', 'success');
                location.reload();
            } else {
                alert('Error uploading files: ' + data.error);
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error uploading files');
        }
    });

    // Handle file deletion
    async function deleteFile(fileId) {
        if (!confirm('Are you sure you want to delete this file?')) return;

        try {
            const response = await fetch(`/company/delete-document/${fileId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                showNotification('File Deleted successfully', 'success');
                location.reload();
            } else {
                showNotification('Error deleting file', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('Error deleting file', 'error');
        }
    }

    // Folder functions
    function showCreateFolderModal() {
        console.log(currentFolderId);

        document.getElementById('createFolderModal').style.display = 'block';
    }

    function closeCreateFolderModal() {
        document.getElementById('createFolderModal').style.display = 'none';
    }

    async function createFolder() {
        const folderName = document.getElementById('folderName').value.trim();
        if (!folderName) {
            showNotification('Please enter a folder name', 'error');
            return;
        }

        try {
            const response = await fetch('/company/create-folder', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: folderName,
                    parent_id: currentFolderId || null
                })
            });

            const data = await response.json();
            if (data.success) {
                showNotification('Folder created successfully', 'success');
                location.reload();
            } else {
                showNotification('Error creating folder: ' + data.error, 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('Error creating folder', 'error');
        }
    }

    async function deleteFolder(folderId, event) {
        event.stopPropagation();
        if (!confirm('Are you sure you want to delete this folder and all its contents?')) return;

        try {
            const response = await fetch(`/company/delete-folder/${folderId}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                showNotification('Folder deleted successfully', 'success');
                location.reload();
            } else {
                showNotification('Error deleting folder', 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showNotification('Error deleting folder', 'error');
        }
    }

    function navigateToFolder(folderId) {
        window.location.href = `/company/files?folder=${folderId}`;
    }
</script>
{% endblock %}