{# Modal: Create New Folder #}
<div id="modal-new-folder" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50" style="display: none;">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-md bg-white">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-folder-plus mr-2 text-indigo-600"></i>
                    <span id="modal-title">Nouveau dossier</span>
                </h3>
                <p id="modal-context" class="text-xs text-gray-500 mt-1 hidden">
                    <i class="fas fa-info-circle mr-1"></i>
                    Sera créé dans: <span id="parent-folder-name" class="font-medium"></span>
                </p>
            </div>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeNewFolderModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        <form id="form-new-folder" method="POST" action="{{ path('admin_companies_categories', {id: company.id}) }}">
            <input type="hidden" name="document_category_form[_token]" value="{{ csrf_token('document_category_form') }}" />
            <input type="hidden" name="parent_id" id="input-parent-id" value="" />

            <div class="mb-4">
                <label for="input-parent-folder" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-folder-tree mr-1"></i>
                    Dossier parent
                </label>
                <select id="input-parent-folder"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
                    onchange="updateParentFolder(this.value)">
                    <option value="">📁 Racine (aucun parent)</option>
                </select>
                <p class="mt-1 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Le nouveau dossier sera créé à l'intérieur du dossier sélectionné
                </p>
            </div>

            <div class="mb-4">
                <label for="input-folder-name" class="block text-sm font-medium text-gray-700 mb-2">
                    Nom du dossier <span class="text-red-500">*</span>
                </label>
                <input type="text" id="input-folder-name" name="document_category_form[name]" required
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
                    placeholder="Ex: Documents juridiques" />
                <p class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-lightbulb mr-1 text-yellow-500"></i>
                    <strong>Astuce :</strong> Utilisez <code class="px-1 py-0.5 bg-gray-100 rounded">/</code> ou <code class="px-1 py-0.5 bg-gray-100 rounded">\</code> pour créer plusieurs niveaux à la fois
                    <br>
                    <span class="ml-5 text-gray-400">Exemple : <code class="px-1 py-0.5 bg-gray-100 rounded">Client/2024/Factures</code> crée 3 dossiers imbriqués</span>
                </p>
            </div>

            <div class="mb-4">
                <label for="input-folder-description" class="block text-sm font-medium text-gray-700 mb-2">
                    Description
                </label>
                <textarea id="input-folder-description" name="document_category_form[description]" rows="3"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
                    placeholder="Description optionnelle..."></textarea>
            </div>

            <div class="mb-4">
                <label for="input-folder-color" class="block text-sm font-medium text-gray-700 mb-2">
                    Couleur
                </label>
                <select id="input-folder-color" name="document_category_form[color]"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="blue">Bleu</option>
                    <option value="green">Vert</option>
                    <option value="red">Rouge</option>
                    <option value="yellow">Jaune</option>
                    <option value="purple">Violet</option>
                    <option value="pink">Rose</option>
                    <option value="indigo">Indigo</option>
                    <option value="orange">Orange</option>
                    <option value="teal">Turquoise</option>
                    <option value="gray">Gris</option>
                </select>
            </div>

            <div class="mb-4">
                <label for="input-folder-icon" class="block text-sm font-medium text-gray-700 mb-2">
                    Icône
                </label>
                <select id="input-folder-icon" name="document_category_form[icon]"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">Aucune icône</option>
                    <option value="fa-file">📄 Fichier</option>
                    <option value="fa-file-lines">📃 Document</option>
                    <option value="fa-file-contract">📜 Contrat</option>
                    <option value="fa-file-invoice">🧾 Facture</option>
                    <option value="fa-file-pdf">📕 PDF</option>
                    <option value="fa-file-image">🖼️ Image</option>
                    <option value="fa-file-zipper">📦 Archive</option>
                    <option value="fa-file-excel">📊 Tableau</option>
                    <option value="fa-file-powerpoint">📊 Présentation</option>
                    <option value="fa-certificate">🏆 Certificat</option>
                    <option value="fa-folder">📁 Dossier</option>
                    <option value="fa-cloud">☁️ Cloud</option>
                    <option value="fa-star">⭐ Étoile</option>
                </select>
            </div>

            <div class="flex gap-2 justify-end">
                <button type="button" onclick="closeNewFolderModal()"
                    class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    Annuler
                </button>
                <button type="submit"
                    class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-plus mr-2"></i>
                    Créer
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function showNewFolderModal(parentId = null, parentName = null) {
    const modal = document.getElementById('modal-new-folder');
    const form = document.getElementById('form-new-folder');
    const modalTitle = document.getElementById('modal-title');
    const parentSelect = document.getElementById('input-parent-folder');

    // Reset form
    form.reset();

    // Populate parent folder select with all categories
    populateParentFolderSelect(parentId);

    // Set form action to root creation by default
    form.action = '{{ path('admin_companies_categories', {id: company.id})|e('js') }}';

    // Show modal
    modal.style.display = 'block';
    setTimeout(() => document.getElementById('input-folder-name').focus(), 100);
}

function populateParentFolderSelect(selectedId = null) {
    const select = document.getElementById('input-parent-folder');

    // Clear existing options except the first one (root)
    select.innerHTML = '<option value="">📁 Racine (aucun parent)</option>';

    // Get tree data from folder explorer controller
    const treeData = window.folderExplorer?.treeDataValue || [];

    // Build options recursively
    function addOptions(categories, depth = 0) {
        categories.forEach(category => {
            // Indentation based on depth
            const indent = '\u00A0\u00A0'.repeat(depth); // Non-breaking spaces for indentation
            const icon = category.is_deleted ? '🗑️' : '📂';
            const suffix = category.is_deleted ? ' (supprimé)' : '';
            const docCount = category.media_count > 0 ? ` (${category.media_count})` : '';

            // Don't show deleted categories
            if (!category.is_deleted) {
                const option = document.createElement('option');
                option.value = category.id;
                option.textContent = `${indent}${icon} ${category.name}${docCount}${suffix}`;

                // Disable if max depth reached (depth 4 means children would be at depth 5 - max)
                if (depth >= 4) {
                    option.disabled = true;
                    option.textContent += ' (profondeur max)';
                }

                // Add depth info as data attribute
                option.setAttribute('data-depth', depth);

                select.appendChild(option);
            }

            // Add children recursively
            if (category.children && category.children.length > 0) {
                addOptions(category.children, depth + 1);
            }
        });
    }

    addOptions(treeData);

    // Select the specified parent if provided
    if (selectedId) {
        select.value = selectedId;
        updateParentFolder(selectedId);
    }
}

function updateParentFolder(parentId) {
    const parentIdInput = document.getElementById('input-parent-id');
    const form = document.getElementById('form-new-folder');

    parentIdInput.value = parentId || '';

    // Update form action based on parent selection
    if (parentId) {
        form.action = '{{ path('admin_companies_categories_create_sub', {id: company.id, categoryId: '__PARENT__'})|e('js') }}'.replace('__PARENT__', parentId);
    } else {
        form.action = '{{ path('admin_companies_categories', {id: company.id})|e('js') }}';
    }
}

function closeNewFolderModal() {
    const modal = document.getElementById('modal-new-folder');
    modal.style.display = 'none';
}

// Update button click handler
document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById('btn-new-folder')) {
        document.getElementById('btn-new-folder').addEventListener('click', () => {
            const currentFolderId = window.folderExplorer?.currentFolderIdValue;

            // Pre-select current folder as parent (if not root)
            if (currentFolderId && currentFolderId !== 'root' && currentFolderId !== null) {
                showNewFolderModal(currentFolderId, null);
            } else {
                showNewFolderModal(null, null);
            }
        });
    }
});
</script>