@extends('layouts.dashboard')

@section('title', 'To do')
@section('page-title', '')

@push('styles')
<style>
    .page-header {
        margin-bottom: 2rem;
    }
    
    .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
    }
    
    .todo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
    }
    
    .btn-primary {
        background: #6fb87d;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        color: white;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .btn-primary:hover {
        background: #5ea66d;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.3);
    }
    
    .todo-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .todo-container.compact-termine {
        grid-template-columns: 1fr 1fr 200px;
    }
    
    .todo-column {
        background: #f8fafc;
        border-radius: 8px;
        padding: 1rem;
        min-height: 400px;
        border: 1px solid #e5e7eb;
    }
    
    .todo-column.compact {
        padding: 0.75rem;
    }
    
    .todo-column.compact .todo-column-header {
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .todo-column.compact .todo-column-title {
        font-size: 0.875rem;
    }
    
    .todo-column.compact .todo-column-count {
        padding: 0.2rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .todo-column.compact .todo-item {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .todo-column.compact .todo-item-title {
        font-size: 0.875rem;
    }
    
    .todo-column-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .todo-column-title {
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .todo-column-count {
        background: #6fb87d;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    .todo-column.termine {
        display: block;
    }
    
    .todo-column.termine.hidden {
        display: none;
    }
    
    /* Styles pour les documents */
    .document-upload-zone {
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        background: #f8fafc;
        transition: all 0.3s ease;
        cursor: pointer;
        margin-bottom: 1.5rem;
    }
    
    .document-upload-zone:hover {
        border-color: #6fb87d;
        background: #f0fdf4;
    }
    
    .document-upload-zone.drag-over {
        border-color: #6fb87d;
        background: #e8f5ea;
    }
    
    .document-list-container {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 1rem;
    }
    
    .document-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.2s ease;
    }
    
    .document-item:hover {
        background: #f8fafc;
    }
    
    .document-item:last-child {
        border-bottom: none;
    }
    
    .document-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e8f5ea;
        border-radius: 8px;
        flex-shrink: 0;
    }
    
    .document-info {
        flex: 1;
        min-width: 0;
    }
    
    .document-name {
        font-size: 0.9375rem;
        font-weight: 500;
        color: #1f2937;
        margin-bottom: 0.25rem;
        word-break: break-word;
    }
    
    .document-meta {
        font-size: 0.8125rem;
        color: #6b7280;
    }
    
    .document-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .document-action-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        background: transparent;
    }
    
    .document-action-btn.view-btn {
        color: #6fb87d;
    }
    
    .document-action-btn.view-btn:hover {
        background: #e8f5ea;
    }
    
    .document-action-btn.delete-btn {
        color: #ef4444;
    }
    
    .document-action-btn.delete-btn:hover {
        background: #fee2e2;
    }
    
    .upload-progress {
        display: none;
        margin-top: 1rem;
    }
    
    .upload-progress.active {
        display: block;
    }
    
    .progress-bar-container {
        width: 100%;
        background: #e5e7eb;
        border-radius: 8px;
        height: 8px;
        margin-top: 0.5rem;
    }
    
    .progress-bar {
        width: 0%;
        background: #6fb87d;
        height: 8px;
        border-radius: 8px;
        transition: width 0.3s ease;
    }
    
    .todo-item {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        cursor: move;
        transition: all 0.2s ease;
        position: relative;
    }
    
    .todo-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
    
    .todo-item.dragging {
        opacity: 0.5;
    }
    
    .todo-item.overdue {
        border-left: 4px solid #ef4444;
    }
    
    .todo-item-title {
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .todo-item-deadline {
        font-size: 0.8125rem;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .todo-item-deadline.overdue {
        color: #ef4444;
        font-weight: 600;
    }
    
    .todo-item-description {
        font-size: 0.8125rem;
        color: #6b7280;
        margin-top: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .todo-item-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #f1f5f9;
    }
    
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .btn-view {
        background: #6fb87d;
        color: white;
    }
    
    .btn-view:hover {
        background: #5ea66d;
    }
    
    .btn-delete {
        background: #ef4444;
        color: white;
    }
    
    .btn-delete:hover {
        background: #dc2626;
    }
    
    .toggle-completed {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        cursor: pointer;
    }
    
    .toggle-completed input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    
    .todo-dropzone {
        min-height: 100px;
    }
    
    .todo-dropzone.drag-over {
        background: #e8f5ea;
        border: 2px dashed #6fb87d;
    }
    
    @media (max-width: 768px) {
        .todo-container {
            grid-template-columns: 1fr;
        }
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">To do</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Gérez vos tâches</p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <div class="todo-header">
                    <h2 class="section-title">Mes tâches</h2>
                    <button class="btn btn-primary" id="addTodoBtn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem; vertical-align: middle;">
                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                        </svg>
                        Ajouter une tâche
                    </button>
                </div>
                
                <div class="toggle-completed">
                    <input type="checkbox" id="toggleCompleted" checked>
                    <label for="toggleCompleted" style="cursor: pointer; font-size: 0.9375rem; color: #6b7280;">Afficher les tâches terminées</label>
                </div>
                
                <div class="todo-container">
                    <div class="todo-column" data-status="a_faire">
                        <div class="todo-column-header">
                            <span class="todo-column-title">À FAIRE</span>
                            <span class="todo-column-count" id="count-a_faire">0</span>
                        </div>
                        <div class="todo-dropzone" id="dropzone-a_faire">
                            <!-- Les tâches seront ajoutées ici -->
                        </div>
                    </div>
                    
                    <div class="todo-column" data-status="en_cours">
                        <div class="todo-column-header">
                            <span class="todo-column-title">EN COURS</span>
                            <span class="todo-column-count" id="count-en_cours">0</span>
                        </div>
                        <div class="todo-dropzone" id="dropzone-en_cours">
                            <!-- Les tâches seront ajoutées ici -->
                        </div>
                    </div>
                    
                    <div class="todo-column termine" data-status="termine">
                        <div class="todo-column-header">
                            <span class="todo-column-title">TERMINÉ</span>
                            <span class="todo-column-count" id="count-termine">0</span>
                        </div>
                        <div class="todo-dropzone" id="dropzone-termine">
                            <!-- Les tâches seront ajoutées ici -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour ajouter/éditer une tâche -->
<div class="modal fade" id="todoModal" tabindex="-1" aria-labelledby="todoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="todoModalLabel">Nouvelle tâche</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="todoForm">
                    @csrf
                    <input type="hidden" id="todoId" name="id">
                    
                    <div class="mb-3">
                        <label for="todoTitle" class="form-label">Titre <span style="color: #ef4444;">*</span></label>
                        <input type="text" class="form-control" id="todoTitle" name="title" required placeholder="Ex: Appeler le client X">
                    </div>
                    
                    <div class="mb-3">
                        <label for="todoDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="todoDescription" name="description" rows="4" placeholder="Détails de la tâche..."></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="todoDeadline" class="form-label">Date limite</label>
                        <input type="date" class="form-control" id="todoDeadline" name="deadline">
                    </div>
                    
                    <div class="mb-3">
                        <label for="todoStatus" class="form-label">Statut</label>
                        <select class="form-control" id="todoStatus" name="status">
                            <option value="a_faire">À faire</option>
                            <option value="en_cours">En cours</option>
                            <option value="termine">Terminé</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Documents</label>
                        
                        <!-- Zone de drag & drop -->
                        <div class="document-upload-zone" id="todoUploadZone">
                            <form id="todoDocumentUploadForm" style="display: none;">
                                <input type="file" id="todoDocumentInput" multiple accept="*/*">
                            </form>
                            <div id="todoUploadZoneContent">
                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d; margin: 0 auto 0.75rem;">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="17 8 12 3 7 8"></polyline>
                                    <line x1="12" y1="3" x2="12" y2="15"></line>
                                </svg>
                                <p style="font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin: 0.5rem 0;">Glissez-déposez vos fichiers ici</p>
                                <p style="font-size: 0.8125rem; color: #6b7280; margin: 0.5rem 0;">ou</p>
                                <button type="button" onclick="document.getElementById('todoDocumentInput').click()" class="btn btn-primary" style="margin-top: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem;">Parcourir les fichiers</button>
                                <p style="font-size: 0.75rem; color: #9ca3af; margin-top: 0.75rem;">Formats acceptés : Tous (max 10MB chacun)</p>
                            </div>
                            <div class="upload-progress" id="todoUploadProgress">
                                <div class="progress-bar-container">
                                    <div class="progress-bar" id="todoProgressBar"></div>
                                </div>
                                <p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem;">Upload en cours...</p>
                            </div>
                        </div>
                        
                        <!-- Liste des documents -->
                        <div class="document-list-container">
                            <h6 style="font-size: 0.9375rem; font-weight: 600; color: #1f2937; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color: #6fb87d;">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                </svg>
                                Documents uploadés
                            </h6>
                            <div id="todoDocumentsList" style="min-height: 100px;">
                                <p style="color: #9ca3af; font-style: italic; text-align: center; padding: 1rem;">Aucun document uploadé pour le moment</p>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="saveTodoBtn">Enregistrer</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
let todos = @json($todos);
let draggedTodo = null;

// Initialiser les colonnes avec drag and drop
const statuses = ['a_faire', 'en_cours', 'termine'];
let sortableInstances = {};

statuses.forEach(status => {
    const dropzone = document.getElementById(`dropzone-${status}`);
    if (dropzone) {
        sortableInstances[status] = new Sortable(dropzone, {
            group: 'todos',
            animation: 150,
            draggable: '.todo-item',
            onEnd: function(evt) {
                const todoId = evt.item.dataset.todoId;
                const newStatus = evt.to.closest('.todo-column').dataset.status || status;
                if (todoId) {
                    updateTodoStatus(todoId, newStatus);
                }
            }
        });
    }
});

// Fonction pour formater la date
function formatDate(dateString) {
    if (!dateString) return '';
    const date = new Date(dateString);
    const today = new Date();
    const diffTime = date - today;
    const diffDays = Math.ceil(diffTime / (1000 *60 * 60 * 24));
    
    if (diffDays < 0) {
        return `En retard (${date.toLocaleDateString('fr-FR')})`;
    } else if (diffDays === 0) {
        return "Aujourd'hui";
    } else if (diffDays === 1) {
        return 'Demain';
    } else if (diffDays <= 7) {
        return `Dans ${diffDays} jours`;
    } else {
        return date.toLocaleDateString('fr-FR');
    }
}

// Fonction pour vérifier si une date est en retard
function isOverdue(deadline) {
    if (!deadline) return false;
    const date = new Date(deadline);
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    date.setHours(0, 0, 0, 0);
    return date < today;
}

// Fonction pour rendre une tâche
function renderTodo(todo) {
    const overdue = isOverdue(todo.deadline);
    const deadlineClass = overdue ? 'overdue' : '';
    const deadlineText = formatDate(todo.deadline);
    
    return `
        <div class="todo-item ${overdue ? 'overdue' : ''}" data-todo-id="${todo.id}" draggable="true">
            <div class="todo-item-title">${escapeHtml(todo.title)}</div>
            ${todo.deadline ? `<div class="todo-item-deadline ${deadlineClass}">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
                </svg>
                ${deadlineText}
            </div>` : ''}
            ${todo.description ? `<div class="todo-item-description">${escapeHtml(todo.description)}</div>` : ''}
            <div class="todo-item-actions">
                <button class="btn-sm btn-view" onclick="viewTodo(${todo.id})">Voir</button>
                <button class="btn-sm btn-delete" onclick="deleteTodo(${todo.id})">Supprimer</button>
            </div>
        </div>
    `;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Fonction pour trier les tâches par deadline
function sortTodosByDeadline(todos) {
    return todos.sort((a, b) => {
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        
        // Tâches sans deadline en dernier
        if (!a.deadline && !b.deadline) return 0;
        if (!a.deadline) return 1;
        if (!b.deadline) return -1;
        
        const dateA = new Date(a.deadline);
        const dateB = new Date(b.deadline);
        dateA.setHours(0, 0, 0, 0);
        dateB.setHours(0, 0, 0, 0);
        
        const aOverdue = dateA < today;
        const bOverdue = dateB < today;
        
        // Tâches en retard en premier
        if (aOverdue && !bOverdue) return -1;
        if (!aOverdue && bOverdue) return 1;
        
        // Si les deux sont en retard ou pas, trier par date (plus proche en premier)
        return dateA - dateB;
    });
}

// Fonction pour afficher les tâches
function renderTodos() {
    statuses.forEach(status => {
        const dropzone = document.getElementById(`dropzone-${status}`);
        const columnTodos = todos.filter(t => t.status === status);
        const sortedTodos = sortTodosByDeadline([...columnTodos]);
        
        dropzone.innerHTML = sortedTodos.map(todo => renderTodo(todo)).join('');
        
        // Mettre à jour le compteur
        document.getElementById(`count-${status}`).textContent = columnTodos.length;
    });
}

// Fonction pour mettre à jour le statut d'une tâche
function updateTodoStatus(todoId, newStatus) {
    fetch(`/api/todos/${todoId}`, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ status: newStatus })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const todo = todos.find(t => t.id == todoId);
            if (todo) {
                todo.status = newStatus;
                renderTodos();
            }
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        location.reload(); // Recharger en cas d'erreur
    });
}

// Fonction pour ouvrir le modal d'ajout
document.getElementById('addTodoBtn')?.addEventListener('click', function() {
    document.getElementById('todoForm').reset();
    document.getElementById('todoId').value = '';
    document.getElementById('todoModalLabel').textContent = 'Nouvelle tâche';
    document.getElementById('todoDocumentsList').innerHTML = '<p style="color: #9ca3af; font-style: italic; text-align: center; padding: 1rem;">Aucun document uploadé pour le moment</p>';
    
    // Réinitialiser l'upload zone
    document.getElementById('todoUploadZoneContent').style.display = 'block';
    document.getElementById('todoUploadProgress').classList.remove('active');
    document.getElementById('todoProgressBar').style.width = '0%';
    document.getElementById('todoDocumentInput').value = '';
    
    const modal = new bootstrap.Modal(document.getElementById('todoModal'));
    modal.show();
});

// Fonction pour voir/éditer une tâche
function viewTodo(todoId) {
    const todo = todos.find(t => t.id == todoId);
    if (!todo) return;
    
    document.getElementById('todoId').value = todo.id;
    document.getElementById('todoTitle').value = todo.title;
    document.getElementById('todoDescription').value = todo.description || '';
    document.getElementById('todoDeadline').value = todo.deadline || '';
    document.getElementById('todoStatus').value = todo.status;
    document.getElementById('todoModalLabel').textContent = 'Modifier la tâche';
    
    // Réinitialiser l'upload zone
    document.getElementById('todoUploadZoneContent').style.display = 'block';
    document.getElementById('todoUploadProgress').classList.remove('active');
    document.getElementById('todoProgressBar').style.width = '0%';
    document.getElementById('todoDocumentInput').value = '';
    
    // Charger et afficher les documents existants
    loadTodoDocuments(todoId);
    
    const modal = new bootstrap.Modal(document.getElementById('todoModal'));
    modal.show();
}

// Fonction pour obtenir le type de fichier
function getFileIcon(fileName) {
    const ext = fileName.split('.').pop().toLowerCase();
    let fileType = 'DOC';
    
    if (['pdf'].includes(ext)) {
        fileType = 'PDF';
    } else if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
        fileType = 'IMG';
    } else if (['doc', 'docx'].includes(ext)) {
        fileType = 'DOC';
    } else if (['xls', 'xlsx'].includes(ext)) {
        fileType = 'XLS';
    } else if (['txt'].includes(ext)) {
        fileType = 'TXT';
    }
    
    return `<span style="font-size: 0.75rem; font-weight: 700; color: #6fb87d; letter-spacing: 0.05em;">${fileType}</span>`;
}

// Fonction pour formater la taille du fichier
function formatFileSize(bytes) {
    if (!bytes) return 'N/A';
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

// Fonction pour afficher les documents
function renderDocuments(documents) {
    const container = document.getElementById('todoDocumentsList');
    if (!documents || documents.length === 0) {
        container.innerHTML = '<p style="color: #9ca3af; font-style: italic; text-align: center; padding: 1rem;">Aucun document uploadé pour le moment</p>';
        return;
    }
    
    container.innerHTML = documents.map(doc => `
        <div class="document-item">
            <div class="document-icon">
                ${getFileIcon(doc.file_name || 'file')}
            </div>
            <div class="document-info">
                <div class="document-name">${escapeHtml(doc.file_name || 'Document')}</div>
                <div class="document-meta">${formatFileSize(doc.file_size || 0)}</div>
            </div>
            <div class="document-actions">
                <a href="/storage/${doc.file_path}" target="_blank" class="document-action-btn view-btn" title="Consulter">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                </a>
                <button onclick="deleteDocument(${doc.id})" class="document-action-btn delete-btn" title="Supprimer">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="3 6 5 6 21 6"></polyline>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    </svg>
                </button>
            </div>
        </div>
    `).join('');
}

// Fonction pour sauvegarder une tâche
document.getElementById('saveTodoBtn')?.addEventListener('click', function() {
    const form = document.getElementById('todoForm');
    const formData = new FormData(form);
    const todoId = document.getElementById('todoId').value;
    
    const data = {
        title: formData.get('title'),
        description: formData.get('description'),
        deadline: formData.get('deadline') || null,
        status: formData.get('status')
    };
    
    const url = todoId ? `/api/todos/${todoId}` : '/api/todos';
    const method = todoId ? 'PUT' : 'POST';
    
    fetch(url, {
        method: method,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const todoIdToUse = todoId || data.todo.id;
            // Charger les documents après sauvegarde
            loadTodoDocuments(todoIdToUse);
            
            // Si nouvelle tâche, recharger la page pour afficher la nouvelle tâche
            if (!todoId) {
                location.reload();
            } else {
                // Mettre à jour la tâche dans la liste
                const todo = todos.find(t => t.id == todoIdToUse);
                if (todo) {
                    todo.title = data.todo.title;
                    todo.description = data.todo.description;
                    todo.deadline = data.todo.deadline;
                    todo.status = data.todo.status;
                    renderTodos();
                }
            }
        } else {
            alert('Erreur: ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la sauvegarde');
    });
});

// Fonction pour charger les documents d'une tâche
function loadTodoDocuments(todoId) {
    const todo = todos.find(t => t.id == todoId);
    if (todo && todo.documents) {
        renderDocuments(todo.documents);
    } else {
        // Charger depuis l'API si pas encore chargé
        fetch(`/api/todos/${todoId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.todo.documents) {
                    renderDocuments(data.todo.documents);
                }
            })
            .catch(error => console.error('Erreur:', error));
    }
}

// Gestion du drag & drop pour les documents
const todoUploadZone = document.getElementById('todoUploadZone');
const todoDocumentInput = document.getElementById('todoDocumentInput');

if (todoUploadZone && todoDocumentInput) {
    // Clic sur la zone pour ouvrir le gestionnaire de fichiers
    todoUploadZone.addEventListener('click', function(e) {
        if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'INPUT') {
            todoDocumentInput.click();
        }
    });
    
    // Gestion du drag & drop
    todoUploadZone.addEventListener('dragover', function(e) {
        e.preventDefault();
        todoUploadZone.classList.add('drag-over');
    });
    
    todoUploadZone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        todoUploadZone.classList.remove('drag-over');
    });
    
    todoUploadZone.addEventListener('drop', function(e) {
        e.preventDefault();
        todoUploadZone.classList.remove('drag-over');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleTodoDocumentUpload(files);
        }
    });
    
    // Gestion du changement de fichier
    todoDocumentInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            handleTodoDocumentUpload(this.files);
        }
    });
}

// Fonction pour gérer l'upload de documents
function handleTodoDocumentUpload(files) {
    const todoId = document.getElementById('todoId').value;
    if (!todoId) {
        alert('Veuillez d\'abord enregistrer la tâche avant d\'ajouter des documents.');
        return;
    }
    
    const uploadProgress = document.getElementById('todoUploadProgress');
    const uploadZoneContent = document.getElementById('todoUploadZoneContent');
    const progressBar = document.getElementById('todoProgressBar');
    
    // Afficher la progression
    uploadZoneContent.style.display = 'none';
    uploadProgress.classList.add('active');
    progressBar.style.width = '0%';
    
    // Upload chaque fichier
    const uploadPromises = Array.from(files).map((file, index) => {
        const formData = new FormData();
        formData.append('document', file);
        
        return fetch(`/api/todos/${todoId}/documents`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            progressBar.style.width = `${((index + 1) / files.length) * 100}%`;
            return data;
        });
    });
    
    Promise.all(uploadPromises)
        .then(results => {
            progressBar.style.width = '100%';
            setTimeout(() => {
                uploadProgress.classList.remove('active');
                uploadZoneContent.style.display = 'block';
                progressBar.style.width = '0%';
                todoDocumentInput.value = '';
                
                // Recharger les documents
                loadTodoDocuments(todoId);
            }, 500);
        })
        .catch(error => {
            console.error('Erreur:', error);
            uploadProgress.classList.remove('active');
            uploadZoneContent.style.display = 'block';
            progressBar.style.width = '0%';
            alert('Une erreur est survenue lors de l\'upload');
        });
}

// Fonction pour supprimer une tâche
function deleteTodo(todoId) {
    if (!confirm('Êtes-vous sûr de vouloir supprimer cette tâche ?')) return;
    
    fetch(`/api/todos/${todoId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            todos = todos.filter(t => t.id != todoId);
            renderTodos();
        } else {
            alert('Erreur: ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la suppression');
    });
}

// Fonction pour supprimer un document
function deleteDocument(docId) {
    if (!confirm('Êtes-vous sûr de vouloir supprimer ce document ?')) return;
    
    fetch(`/api/todos/documents/${docId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur: ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        alert('Erreur lors de la suppression');
    });
}

// Toggle pour masquer/afficher les tâches terminées
document.getElementById('toggleCompleted')?.addEventListener('change', function() {
    const container = document.querySelector('.todo-container');
    const termineColumn = document.querySelector('.todo-column.termine');
    
    if (this.checked) {
        container.classList.remove('compact-termine');
        termineColumn.classList.remove('compact');
    } else {
        container.classList.add('compact-termine');
        termineColumn.classList.add('compact');
    }
});

// Initialiser l'affichage
renderTodos();
</script>
@endpush