{#
    Modal: Edit Document (Quick Edit)
    Quick edit modal for document metadata

    Required variables:
    - company: Company entity
    - categories: DocumentCategory collection
#}
<div id="modal-edit-document" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-md bg-white">
        {# Header #}
        <div class="flex items-center justify-between mb-4 pb-3 border-b border-gray-200">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-edit mr-2 text-indigo-600"></i>
                    Éditer le document
                </h3>
                <p class="text-xs text-gray-500 mt-1">
                    Modifiez les informations du document
                </p>
            </div>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeEditModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        {# Loading State #}
        <div id="edit-loading" class="flex justify-center items-center py-12">
            <i class="fas fa-spinner fa-spin text-4xl text-indigo-600"></i>
            <span class="ml-3 text-gray-600">Chargement...</span>
        </div>

        {# Form #}
        <form id="edit-document-form" class="hidden" onsubmit="submitEditForm(event)">
            <input type="hidden" id="edit-document-id" name="documentId">

            {# Original Filename (display only) #}
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Nom du fichier
                </label>
                <div class="px-3 py-2 bg-gray-50 border border-gray-300 rounded-md text-sm text-gray-900">
                    <i class="fas fa-file mr-2 text-gray-400"></i>
                    <span id="edit-filename">-</span>
                </div>
            </div>

            {# Description #}
            <div class="mb-4">
                <label for="edit-description" class="block text-sm font-medium text-gray-700 mb-2">
                    Description
                </label>
                <textarea id="edit-description" name="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 du document..."></textarea>
            </div>

            {# Category #}
            <div class="mb-4">
                <label for="edit-category" class="block text-sm font-medium text-gray-700 mb-2">
                    Catégorie
                </label>
                <select id="edit-category" name="categoryId"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="">-- Aucune catégorie --</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>

            {# Visibility #}
            <div class="mb-4">
                <label for="edit-visibility" class="block text-sm font-medium text-gray-700 mb-2">
                    Visibilité
                </label>
                <select id="edit-visibility" name="visibility"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                    <option value="protected">Protégé (accès limité)</option>
                    <option value="private">Privé (accès restreint)</option>
                </select>
            </div>

            {# Expiration Date #}
            <div class="mb-6">
                <label for="edit-expires-at" class="block text-sm font-medium text-gray-700 mb-2">
                    Date d'expiration
                </label>
                <input type="date" id="edit-expires-at" name="expiresAt"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                <p class="mt-1 text-xs text-gray-500">Date à laquelle ce document expirera (optionnel)</p>
            </div>

            {# Footer #}
            <div class="flex gap-2 justify-end pt-3 border-t border-gray-200">
                <button type="button" onclick="closeEditModal()"
                    class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-times mr-2"></i>
                    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-save mr-2"></i>
                    Enregistrer
                </button>
            </div>
        </form>
    </div>
</div>

<script>
let currentEditMediaId = null;

function openEditModal(mediaId) {
    const modal = document.getElementById('modal-edit-document');
    const loading = document.getElementById('edit-loading');
    const form = document.getElementById('edit-document-form');

    // Show modal with loading state
    modal.classList.remove('hidden');
    loading.classList.remove('hidden');
    form.classList.add('hidden');

    // Store media ID
    currentEditMediaId = mediaId;

    // Fetch document data via AJAX
    const companyId = {{ company.id }};
    fetch(`/companies/${companyId}/documents/${mediaId}/edit-data`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Populate form
                document.getElementById('edit-document-id').value = data.data.id;
                document.getElementById('edit-filename').textContent = data.data.originalFileName;
                document.getElementById('edit-description').value = data.data.description || '';
                document.getElementById('edit-category').value = data.data.categoryId || '';
                document.getElementById('edit-visibility').value = data.data.visibility;
                document.getElementById('edit-expires-at').value = data.data.expiresAt || '';

                // Hide loading, show form
                loading.classList.add('hidden');
                form.classList.remove('hidden');
            } else {
                alert('Erreur: ' + data.message);
                closeEditModal();
            }
        })
        .catch(error => {
            console.error('Error fetching document data:', error);
            alert('Erreur lors du chargement des données');
            closeEditModal();
        });
}

function closeEditModal() {
    const modal = document.getElementById('modal-edit-document');
    modal.classList.add('hidden');
    currentEditMediaId = null;
}

function submitEditForm(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const data = {
        description: formData.get('description'),
        categoryId: formData.get('categoryId') || null,
        visibility: formData.get('visibility'),
        expiresAt: formData.get('expiresAt') || null
    };

    // Send update request
    const mediaId = document.getElementById('edit-document-id').value;
    const companyId = {{ company.id }};

    // Use existing edit route (admin_companies_documents_update)
    fetch(`/companies/${companyId}/documents/${mediaId}/edit`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Document mis à jour avec succès');
            closeEditModal();
            // Reload page to show changes
            window.location.reload();
        } else {
            alert('Erreur: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error updating document:', error);
        alert('Erreur lors de la mise à jour');
    });
}

// Close modal when clicking outside
document.getElementById('modal-edit-document')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeEditModal();
    }
});
</script>