<?php /** * Membership Plans Index View * Displays all membership plans with filtering and management options */ $plans = $data['plans'] ?? []; $filters = $data['filters'] ?? []; $totalPlans = $data['total'] ?? 0; $currentPage = $data['page'] ?? 1; $totalPages = $data['totalPages'] ?? 1; ?> <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Planos de Assinatura - BarberPro SaaS</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> </head> <body class="bg-gray-50"> <div class="min-h-screen flex"> <!-- Sidebar --> <nav class="bg-blue-800 text-white w-64 min-h-screen p-4"> <div class="mb-8"> <h1 class="text-2xl font-bold">BarberPro SaaS</h1> </div> <ul class="space-y-2"> <li><a href="/admin/dashboard" class="block py-2 px-4 rounded hover:bg-blue-700"><i class="fas fa-tachometer-alt mr-2"></i>Dashboard</a></li> <li><a href="/admin/companies" class="block py-2 px-4 rounded hover:bg-blue-700"><i class="fas fa-building mr-2"></i>Empresas</a></li> <li><a href="/admin/users" class="block py-2 px-4 rounded hover:bg-blue-700"><i class="fas fa-users mr-2"></i>Usuários</a></li> <li><a href="/memberships" class="block py-2 px-4 rounded hover:bg-blue-700"><i class="fas fa-crown mr-2"></i>Assinaturas</a></li> <li><a href="/membership-plans" class="block py-2 px-4 rounded bg-blue-900"><i class="fas fa-list mr-2"></i>Planos</a></li> <li><a href="/admin/services" class="block py-2 px-4 rounded hover:bg-blue-700"><i class="fas fa-cut mr-2"></i>Serviços</a></li> <li><a href="/admin/appointments" class="block py-2 px-4 rounded hover:bg-blue-700"><i class="fas fa-calendar mr-2"></i>Agendamentos</a></li> </ul> </nav> <!-- Main Content --> <div class="flex-1 p-8"> <!-- Header --> <div class="flex justify-between items-center mb-8"> <div> <h2 class="text-3xl font-bold text-gray-800">Planos de Assinatura</h2> <p class="text-gray-600"><?php echo $totalPlans; ?> plano(s) encontrado(s)</p> </div> <a href="/membership-plans/create" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"> <i class="fas fa-plus mr-2"></i>Novo Plano </a> </div> <!-- Filters --> <div class="bg-white rounded-lg shadow p-6 mb-6"> <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div> <label class="block text-gray-700 text-sm font-bold mb-2">Buscar</label> <input type="text" name="search" value="<?php echo htmlspecialchars($filters['search'] ?? ''); ?>" placeholder="Nome do plano..." class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> </div> <div> <label class="block text-gray-700 text-sm font-bold mb-2">Ciclo</label> <select name="billing_cycle" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> <option value="">Todos</option> <option value="monthly" <?php echo ($filters['billing_cycle'] ?? '') == 'monthly' ? 'selected' : ''; ?>>Mensal</option> <option value="quarterly" <?php echo ($filters['billing_cycle'] ?? '') == 'quarterly' ? 'selected' : ''; ?>>Trimestral</option> <option value="semiannual" <?php echo ($filters['billing_cycle'] ?? '') == 'semiannual' ? 'selected' : ''; ?>>Semestral</option> <option value="annual" <?php echo ($filters['billing_cycle'] ?? '') == 'annual' ? 'selected' : ''; ?>>Anual</option> </select> </div> <div> <label class="block text-gray-700 text-sm font-bold mb-2">Status</label> <select name="is_active" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> <option value="">Todos</option> <option value="1" <?php echo ($filters['is_active'] ?? '') === '1' ? 'selected' : ''; ?>>Ativo</option> <option value="0" <?php echo ($filters['is_active'] ?? '') === '0' ? 'selected' : ''; ?>>Inativo</option> </select> </div> <div class="flex items-end"> <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-2"> <i class="fas fa-search mr-2"></i>Filtrar </button> <a href="/membership-plans" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"> <i class="fas fa-times mr-2"></i>Limpar </a> </div> </form> </div> <!-- Plans Grid --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <?php if (!empty($plans)): ?> <?php foreach ($plans as $plan): ?> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> <!-- Plan Header --> <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white"> <div class="flex justify-between items-start"> <div> <h3 class="text-xl font-bold"><?php echo htmlspecialchars($plan['name']); ?></h3> <p class="text-blue-100"><?php echo htmlspecialchars($plan['description'] ?? ''); ?></p> </div> <span class="px-2 py-1 bg-white bg-opacity-20 rounded text-sm"> <?php echo ucfirst($plan['billing_cycle']); ?> </span> </div> </div> <!-- Plan Body --> <div class="p-4"> <!-- Price --> <div class="text-center mb-4"> <div class="text-3xl font-bold text-gray-800"> R$ <?php echo number_format($plan['price'], 2, ',', '.'); ?> </div> <div class="text-sm text-gray-600">por <?php echo ucfirst($plan['billing_cycle']); ?></div> </div> <!-- Features --> <div class="mb-4"> <h4 class="font-semibold text-gray-800 mb-2">Recursos</h4> <ul class="text-sm text-gray-600 space-y-1"> <?php if ($plan['max_members']): ?> <li><i class="fas fa-users mr-2 text-blue-500"></i>Até <?php echo $plan['max_members']; ?> membros</li> <?php else: ?> <li><i class="fas fa-users mr-2 text-blue-500"></i>Membros ilimitados</li> <?php endif; ?> <li><i class="fas fa-calendar mr-2 text-blue-500"></i>Agendamentos</li> <li><i class="fas fa-chart-bar mr-2 text-blue-500"></i>Relatórios</li> <li><i class="fas fa-headset mr-2 text-blue-500"></i>Suporte</li> </ul> </div> <!-- Status --> <div class="mb-4"> <span class="px-2 py-1 text-xs font-semibold rounded-full <?php echo $plan['is_active'] ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?>"> <?php echo $plan['is_active'] ? 'Ativo' : 'Inativo'; ?> </span> </div> <!-- Actions --> <div class="flex justify-between items-center pt-4 border-t"> <div class="text-sm text-gray-600"> <?php echo $plan['membership_count'] ?? 0; ?> assinatura(s) </div> <div class="flex space-x-2"> <a href="/membership-plans/<?php echo $plan['id']; ?>" class="text-blue-500 hover:text-blue-700"> <i class="fas fa-eye"></i> </a> <a href="/membership-plans/<?php echo $plan['id']; ?>/edit" class="text-yellow-500 hover:text-yellow-700"> <i class="fas fa-edit"></i> </a> <?php if (($plan['membership_count'] ?? 0) == 0): ?> <button onclick="deletePlan(<?php echo $plan['id']; ?>, '<?php echo htmlspecialchars($plan['name']); ?>')" class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> <?php endif; ?> </div> </div> </div> </div> <?php endforeach; ?> <?php else: ?> <div class="col-span-full text-center py-12"> <i class="fas fa-list text-gray-400 text-4xl mb-4"></i> <h3 class="text-lg font-medium text-gray-900 mb-2">Nenhum plano encontrado</h3> <p class="text-gray-600">Crie seu primeiro plano de assinatura para começar.</p> <a href="/membership-plans/create" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"> <i class="fas fa-plus mr-2"></i>Criar Primeiro Plano </a> </div> <?php endif; ?> </div> <!-- Pagination --> <?php if ($totalPages > 1): ?> <div class="mt-8 flex justify-center"> <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"> <?php if ($currentPage > 1): ?> <a href="?page=<?php echo $currentPage - 1; ?>&<?php echo http_build_query(array_diff_key($filters, ['page' => ''])); ?>" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <i class="fas fa-chevron-left"></i> </a> <?php endif; ?> <?php for ($i = max(1, $currentPage - 2); $i <= min($totalPages, $currentPage + 2); $i++): ?> <a href="?page=<?php echo $i; ?>&<?php echo http_build_query(array_diff_key($filters, ['page' => ''])); ?>" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium <?php echo $i == $currentPage ? 'text-blue-600 bg-blue-50' : 'text-gray-700 hover:bg-gray-50'; ?>"> <?php echo $i; ?> </a> <?php endfor; ?> <?php if ($currentPage < $totalPages): ?> <a href="?page=<?php echo $currentPage + 1; ?>&<?php echo http_build_query(array_diff_key($filters, ['page' => ''])); ?>" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> <i class="fas fa-chevron-right"></i> </a> <?php endif; ?> </nav> </div> <?php endif; ?> </div> </div> <!-- Delete Confirmation Modal --> <div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden"> <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white"> <div class="mt-3"> <h3 class="text-lg font-medium text-gray-900 mb-4">Confirmar Exclusão</h3> <p class="text-gray-600 mb-4">Tem certeza que deseja excluir o plano "<span id="planName"></span>"? Esta ação não pode ser desfeita.</p> <div class="flex justify-end space-x-4"> <button onclick="closeDeleteModal()" class="px-4 py-2 text-gray-500 border border-gray-300 rounded hover:bg-gray-50">Cancelar</button> <form id="deleteForm" method="POST" style="display: inline;"> <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token'] ?? ''; ?>"> <button type="submit" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Excluir</button> </form> </div> </div> </div> </div> <script> function deletePlan(planId, planName) { document.getElementById('planName').textContent = planName; document.getElementById('deleteForm').action = `/membership-plans/${planId}/delete`; document.getElementById('deleteModal').classList.remove('hidden'); } function closeDeleteModal() { document.getElementById('deleteModal').classList.add('hidden'); } // Close modal when clicking outside window.onclick = function(event) { const modal = document.getElementById('deleteModal'); if (event.target == modal) { modal.classList.add('hidden'); } } </script> </body> </html>