<?php $title = 'Member Directory - Ghana Anaesthesiologists Society'; ?>
<?php $isAdmin = isset($_SESSION['user_role']) && $_SESSION['user_role'] === 'admin'; ?>

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-white font-weight-bold"><i class="fas fa-users mr-2"></i>Member Directory</h1>
    <span style="color: rgba(255,255,255,0.5); font-size: 0.9rem;"><strong style="color: #fff;"><?= $pagination->total ?></strong> member(s)</span>
</div>

<div class="glass-card mb-4">
    <form method="GET" class="form-inline">
        <div class="input-group w-100">
            <input type="text" name="search" class="form-control glass-input" placeholder="Search by name, email, or phone..." value="<?= htmlspecialchars($search) ?>">
            <div class="input-group-append">
                <button class="glass-btn glass-btn-primary" type="submit"><i class="fas fa-search"></i> Search</button>
            </div>
        </div>
    </form>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <a href="?<?= http_build_query(array_merge($_GET, ['view' => 'grid', 'page' => $pagination->page])) ?>" class="glass-btn btn-sm <?= $viewMode === 'grid' ? 'glass-btn-primary' : '' ?>" title="Grid View"><i class="fas fa-th-large"></i></a>
        <a href="?<?= http_build_query(array_merge($_GET, ['view' => 'list', 'page' => $pagination->page])) ?>" class="glass-btn btn-sm <?= $viewMode === 'list' ? 'glass-btn-primary' : '' ?>" title="List View"><i class="fas fa-list"></i></a>
    </div>
</div>

<?php if ($viewMode === 'grid'): ?>
<div class="row">
    <?php if (!empty($members)): ?>
        <?php foreach ($members as $member): ?>
        <div class="col-lg-4 col-md-6 mb-4">
            <div class="glass-card text-center h-100">
                <?php $avatar = $member->avatar ? ($baseUrl . '/' . ltrim($member->avatar, '/')) : ($baseUrl . '/img/undraw_profile.svg'); ?>
                <a href="<?= $baseUrl ?>/members/<?= $member->id ?>"><img src="<?= $avatar ?>" class="rounded-circle mb-3" style="width: 80px; height: 80px; object-fit: cover; background: rgba(255,255,255,0.1); padding: 5px;"></a>
                <h5 class="font-weight-bold"><a href="<?= $baseUrl ?>/members/<?= $member->id ?>" class="text-white text-decoration-none"><?= htmlspecialchars($member->first_name ? trim($member->first_name . ' ' . $member->last_name) : $member->name) ?></a></h5>
                <?php if ($member->institution_hospital): ?><p style="color: rgba(255,255,255,0.7); font-size: 0.9rem;"><i class="fas fa-hospital mr-1"></i><?= htmlspecialchars($member->institution_hospital) ?></p><?php endif; ?>
                <?php if (!empty($member->mobile_phone)): ?><p style="color: rgba(255,255,255,0.5); font-size: 0.85rem;"><i class="fas fa-phone mr-1"></i><?= htmlspecialchars($member->mobile_phone) ?></p><?php endif; ?>
                <?php if ($member->membership_category): ?><span class="glass-badge"><?= htmlspecialchars($member->membership_category) ?></span><?php endif; ?>
                <?php if ($isAdmin): ?>
                <div class="mt-2"><a href="<?= $baseUrl ?>/members/<?= $member->id ?>" class="btn btn-sm btn-primary"><i class="fas fa-cog mr-1"></i>Manage</a></div>
                <?php endif; ?>
            </div>
        </div>
        <?php endforeach; ?>
    <?php else: ?>
        <div class="col-12">
            <div class="empty-state"><i class="fas fa-users"></i><p>No members found</p></div>
        </div>
    <?php endif; ?>
</div>
<?php else: ?>
<div class="glass-table">
    <table class="table">
        <thead><tr><th>Name</th><th>Email</th><th>Phone</th><th>Institution</th><th>Category</th><?php if ($isAdmin): ?><th>Actions</th><?php endif; ?></tr></thead>
        <tbody>
            <?php if (!empty($members)): ?>
                <?php foreach ($members as $member): ?>
                <tr>
                    <?php $rowAvatar = $member->avatar ? ($baseUrl . '/' . ltrim($member->avatar, '/')) : ($baseUrl . '/img/undraw_profile.svg'); ?>
                    <td><a href="<?= $baseUrl ?>/members/<?= $member->id ?>"><img src="<?= $rowAvatar ?>" style="width: 32px; height: 32px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: rgba(255,255,255,0.1); padding: 2px;"></a><a href="<?= $baseUrl ?>/members/<?= $member->id ?>" class="text-white text-decoration-none"><?= htmlspecialchars($member->first_name ? trim($member->first_name . ' ' . $member->last_name) : $member->name) ?></a></td>
                    <td><?= htmlspecialchars($member->email) ?></td>
                    <td><?= htmlspecialchars($member->mobile_phone ?? '-') ?></td>
                    <td><?= htmlspecialchars($member->institution_hospital ?? '-') ?></td>
                    <td><?= $member->membership_category ? '<span class="glass-badge">' . htmlspecialchars($member->membership_category) . '</span>' : '-' ?></td>
                    <?php if ($isAdmin): ?>
                    <td><a href="<?= $baseUrl ?>/members/<?= $member->id ?>" class="btn btn-sm btn-primary"><i class="fas fa-cog"></i></a></td>
                    <?php endif; ?>
                </tr>
                <?php endforeach; ?>
            <?php else: ?>
                <tr><td colspan="<?= $isAdmin ? 6 : 5 ?>" class="text-center" style="color: rgba(255,255,255,0.5);">No members found</td></tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>
<?php endif; ?>

<?php if ($pagination && $pagination->lastPage > 1): ?>
<div class="d-flex justify-content-center mt-4">
    <nav><ul class="pagination" style="gap: 4px;">
        <?php if ($pagination->page > 1): ?>
        <li class="page-item">
            <a class="glass-btn btn-sm" href="?<?= http_build_query(array_merge($_GET, ['page' => 1])) ?>"><i class="fas fa-angle-double-left"></i></a>
        </li>
        <li class="page-item">
            <a class="glass-btn btn-sm" href="?<?= http_build_query(array_merge($_GET, ['page' => $pagination->page - 1])) ?>"><i class="fas fa-angle-left"></i></a>
        </li>
        <?php endif; ?>
        <?php
        $start = max(1, $pagination->page - 2);
        $end = min($pagination->lastPage, $pagination->page + 2);
        for ($i = $start; $i <= $end; $i++):
        ?>
        <li class="page-item <?= $i == $pagination->page ? 'active' : '' ?>">
            <a class="glass-btn btn-sm" href="?<?= http_build_query(array_merge($_GET, ['page' => $i])) ?>"><?= $i ?></a>
        </li>
        <?php endfor; ?>
        <?php if ($pagination->page < $pagination->lastPage): ?>
        <li class="page-item">
            <a class="glass-btn btn-sm" href="?<?= http_build_query(array_merge($_GET, ['page' => $pagination->page + 1])) ?>"><i class="fas fa-angle-right"></i></a>
        </li>
        <li class="page-item">
            <a class="glass-btn btn-sm" href="?<?= http_build_query(array_merge($_GET, ['page' => $pagination->lastPage])) ?>"><i class="fas fa-angle-double-right"></i></a>
        </li>
        <?php endif; ?>
    </ul></nav>
</div>
<?php endif; ?>
