<?php

/**
 * Super Admin — Couple Accounts View
 */

/** @var array $couples */

?>

<div class="space-y-6">

    <!-- Header Section -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-black text-slate-900 tracking-tight">Couple Owner Accounts</h2>
            <p class="text-xs text-slate-500 mt-1">Manage client couple login accounts and their workspace bindings.</p>
        </div>
    </div>

    <!-- Couples Table Card -->
    <div class="bg-white border border-slate-150 rounded-2xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xxs">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-150 text-slate-400 font-bold uppercase tracking-wider text-[10px]">
                        <th class="py-3 px-4">Display Name</th>
                        <th class="py-3 px-4">Username</th>
                        <th class="py-3 px-4">Email</th>
                        <th class="py-3 px-4">Owned Workspace</th>
                        <th class="py-3 px-4">Status</th>
                        <th class="py-3 px-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-slate-650">
                    <?php if (empty($couples)): ?>
                        <tr>
                            <td colspan="6" class="py-8 text-center text-slate-400 italic">
                                <i class="fa-solid fa-user-slash text-slate-300 text-2xl block mb-2"></i>
                                No Couple accounts found in system.
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($couples as $cp): 
                            $workspaceTitle = "{$cp['groom_name']} & {$cp['bride_name']}";
                        ?>
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="py-3.5 px-4 font-bold text-slate-800"><?= escape_html($cp['display_name']) ?></td>
                                <td class="py-3.5 px-4 font-mono"><?= escape_html($cp['username']) ?></td>
                                <td class="py-3.5 px-4 font-mono"><?= escape_html($cp['email']) ?></td>
                                <td class="py-3.5 px-4">
                                    <span class="font-bold text-slate-700"><?= escape_html($workspaceTitle) ?></span>
                                    <span class="block font-mono text-[9px] text-slate-400">/i/<?= escape_html($cp['slug']) ?></span>
                                </td>
                                <td class="py-3.5 px-4">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-bold uppercase <?= $cp['is_active'] ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' ?>">
                                        <?= $cp['is_active'] ? 'Active' : 'Deactivated' ?>
                                    </span>
                                </td>
                                <td class="py-3.5 px-4 text-right">
                                    <form action="<?= url("/app/admin/couples/{$cp['id']}/toggle-status") ?>" method="POST" style="display:inline-block;" onsubmit="return confirm('Are you sure you want to change this account\'s status?');">
                                        <?= csrf_field() ?>
                                        <button type="submit" class="btn text-[10px] px-2.5 py-1 text-slate-650 font-bold border-slate-200 hover:bg-slate-50">
                                            <i class="fa-solid fa-power-off mr-1 <?= $cp['is_active'] ? 'text-rose-500' : 'text-emerald-500' ?>"></i>
                                            <?= $cp['is_active'] ? 'Deactivate' : 'Activate' ?>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

</div>
