<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>IS_Engine</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
   <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
   <style>
       body { font-family: 'Urbanist', sans-serif; }
   </style>
</head>
<body class="bg-gray-50 text-black">
   <header class="bg-white border-b border-gray-200 px-6 py-4 sticky top-0 z-30">
       <div class="flex justify-between items-center max-w-7xl mx-auto">
           <div class="flex items-center space-x-4">
               <h1 class="text-xl font-medium">IS_Engine</h1>
           </div>
           <div class="flex items-center space-x-3">
               <span class="text-sm text-gray-600">Welcome, <?php echo e(session('username')); ?></span>
           </div>
       </div>
   </header>

   <div class="max-w-4xl mx-auto px-6 py-8">
       <div class="bg-white rounded-lg shadow-sm border hover:shadow-md transition-shadow p-6 mb-8">
           <div class="flex items-center mb-4">
               <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                   <i class="fas fa-pen-nib text-blue-600 text-xl"></i>
               </div>
               <h3 class="ml-4 text-lg font-semibold text-gray-900">Document Editor</h3>
           </div>
           <p class="text-gray-600 mb-4">Design documents with no mistakes, correct information, to present without humiliation</p>
           <a href="/editor" class="block w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center">
               Nouveau document
           </a>
       </div>

       <div class="bg-white rounded-lg shadow-sm border p-6">
           <div class="flex justify-between items-center mb-6">
               <h3 class="text-xl font-semibold text-gray-900">Mes documents</h3>
               <a href="/editor" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                   <i class="fas fa-plus mr-2"></i>Nouveau document
               </a>
           </div>
           <div id="documents-list" class="space-y-3">
               <div class="text-center text-gray-500 py-8">
                   <i class="fas fa-file-alt text-4xl mb-4"></i>
                   <p>Chargement des documents...</p>
               </div>
           </div>
       </div>
   </div>

   <div class="fixed inset-0 flex flex-col items-center justify-center bg-white text-center px-6 md:hidden">
       <p class="text-lg text-gray-700">This site is not available on mobile. Please try again from a computer.</p>
   </div>

<script>
async function loadDocuments() {
    try {
        const response = await fetch('/api/documents');
        const documents = await response.json();
        
        const container = document.getElementById('documents-list');
        
        if (documents.length === 0) {
            container.innerHTML = `
                <div class="text-center text-gray-500 py-8">
                    <i class="fas fa-file-alt text-4xl mb-4"></i>
                    <p>Aucun document créé</p>
                    <a href="/editor" class="inline-block mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                        Créer votre premier document
                    </a>
                </div>
            `;
            return;
        }
        
        let html = '';
        documents.forEach(doc => {
            const date = new Date(doc.updated_at).toLocaleDateString('fr-FR');
            html += `
                <div class="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file-alt text-blue-600"></i>
                        <div>
                            <h4 class="font-medium text-gray-900">${doc.title}</h4>
                            <p class="text-sm text-gray-500">Modifié le ${date}</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <a href="/editor/${doc.id}" class="text-blue-600 hover:text-blue-800">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button onclick="deleteDocument(${doc.id})" class="text-red-600 hover:text-red-800">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            `;
        });
        
        container.innerHTML = html;
    } catch (error) {
        console.error('Erreur chargement documents:', error);
    }
}

async function deleteDocument(id) {
    if (confirm('Êtes-vous sûr de vouloir supprimer ce document ?')) {
        try {
            const response = await fetch(`/api/documents/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            
            if (response.ok) {
                loadDocuments();
            }
        } catch (error) {
            console.error('Erreur suppression:', error);
        }
    }
}

document.addEventListener('DOMContentLoaded', loadDocuments);
</script>
</body>
</html><?php /**PATH /home/gqdcvggs/ise.imators.systems/resources/views/workspace.blade.php ENDPATH**/ ?>