<?php ob_start(); ?>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-center">
            <h3 class="text-lg font-semibold text-gray-800 mb-2">Basic</h3>
            <p class="text-3xl font-bold text-gray-900">Gratuit</p>
            <p class="text-sm text-gray-500 mb-4">Pour démarrer</p>
            <ul class="text-sm text-gray-600 space-y-2 text-left">
                <li><i class="fas fa-check text-green-500 mr-2"></i>5 agents max</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>Web chat uniquement</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>1 langue</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>Statistiques de base</li>
            </ul>
        </div>
    </div>
    
    <div class="bg-indigo-600 rounded-xl shadow-lg p-6 text-white relative">
        <div class="absolute -top-3 right-4 px-3 py-1 bg-yellow-400 text-yellow-900 text-xs font-bold rounded-full">
            POPULAIRE
        </div>
        <div class="text-center">
            <h3 class="text-lg font-semibold mb-2">Pro</h3>
            <p class="text-3xl font-bold">Sur devis</p>
            <p class="text-sm text-indigo-200 mb-4">Pour les entreprises</p>
            <ul class="text-sm space-y-2 text-left">
                <li><i class="fas fa-check text-yellow-300 mr-2"></i>20 agents max</li>
                <li><i class="fas fa-check text-yellow-300 mr-2"></i>WhatsApp + Web</li>
                <li><i class="fas fa-check text-yellow-300 mr-2"></i>Toutes les langues</li>
                <li><i class="fas fa-check text-yellow-300 mr-2"></i>CX Index</li>
                <li><i class="fas fa-check text-yellow-300 mr-2"></i>Alertes intelligentes</li>
            </ul>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="text-center">
            <h3 class="text-lg font-semibold text-gray-800 mb-2">Enterprise</h3>
            <p class="text-3xl font-bold text-gray-900">Sur mesure</p>
            <p class="text-sm text-gray-500 mb-4">Pour les institutions</p>
            <ul class="text-sm text-gray-600 space-y-2 text-left">
                <li><i class="fas fa-check text-green-500 mr-2"></i>Agents illimités</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>Tous les canaux</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>Support vocal IA</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>API personnalisée</li>
                <li><i class="fas fa-check text-green-500 mr-2"></i>Hébergement dédié</li>
            </ul>
        </div>
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <div class="p-6 border-b border-gray-100">
        <h3 class="text-lg font-semibold text-gray-800">
            <i class="fas fa-history mr-2 text-indigo-600"></i>Historique des abonnements
        </h3>
    </div>
    <div class="p-6">
        <?php if (empty($abonnements)): ?>
            <p class="text-gray-500 text-center py-8">Aucun abonnement enregistré</p>
        <?php else: ?>
            <table class="w-full">
                <thead>
                    <tr class="text-left text-sm text-gray-500 border-b">
                        <th class="pb-3">Entreprise</th>
                        <th class="pb-3">Type</th>
                        <th class="pb-3">Début</th>
                        <th class="pb-3">Fin</th>
                        <th class="pb-3">Statut</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($abonnements as $abo): ?>
                    <tr class="border-b border-gray-100">
                        <td class="py-3 font-medium text-gray-800"><?= htmlspecialchars($abo['entreprise_nom'] ?? '-') ?></td>
                        <td class="py-3">
                            <span class="px-2 py-1 text-xs rounded-full 
                                <?= $abo['type'] === 'enterprise' ? 'bg-purple-100 text-purple-700' : 
                                   ($abo['type'] === 'pro' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700') ?>">
                                <?= ucfirst($abo['type']) ?>
                            </span>
                        </td>
                        <td class="py-3 text-gray-600"><?= date('d/m/Y', strtotime($abo['date_debut'])) ?></td>
                        <td class="py-3 text-gray-600"><?= $abo['date_fin'] ? date('d/m/Y', strtotime($abo['date_fin'])) : '-' ?></td>
                        <td class="py-3">
                            <?php if ($abo['statut'] === 'active'): ?>
                                <span class="text-green-600"><i class="fas fa-circle text-xs mr-1"></i>Actif</span>
                            <?php elseif ($abo['statut'] === 'expired'): ?>
                                <span class="text-gray-500"><i class="fas fa-circle text-xs mr-1"></i>Expiré</span>
                            <?php else: ?>
                                <span class="text-red-500"><i class="fas fa-circle text-xs mr-1"></i>Annulé</span>
                            <?php endif; ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>
</div>

<?php 
$content = ob_get_clean();
$title = 'Abonnements - ' . APP_NAME;
$pageTitle = 'Gestion des Abonnements';
include VIEWS_PATH . '/layouts/main.php';
?>
