<?php
/**
 * admin/register.php
 * The Digital Register – main dashboard for the community.
 * This file now only displays the UI and fetches initial data.
 * All actions are handled by separate backend files.
 */

require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/../includes/db.php';

// Protect the page: require login
if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true) {
    header('Location: login.php');
    exit;
}

// Get statistics
$total   = $pdo->query("SELECT COUNT(*) FROM members")->fetchColumn();
$male    = $pdo->query("SELECT COUNT(*) FROM members WHERE gender = 'Male'")->fetchColumn();
$female  = $pdo->query("SELECT COUNT(*) FROM members WHERE gender = 'Female'")->fetchColumn();

// Fetch all members for table display
$members = $pdo->query("SELECT id, membership_id, full_name, gender, phone, kindred, date_joined FROM members ORDER BY created_at DESC")->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Register · Emehama Village</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/dashboard.css">
    <link rel="shortcut icon" type="image/x-icon" href="../images/ChatGPT Image Jul 13, 2026, 07_24_33 PM.png">
</head>
<body>

<div class="dashboard-wrapper">
    <!-- Top Bar -->
    <header class="dashboard-header">
        <div class="header-left">
            <div class="brand">
                <img style="width: 40px; height: 40px; border-radius: 50%; " src="../images/ChatGPT%20Image%20Jul%2013,%202026,%2007_24_33%20PM.png" alt="Emehama Village Community Logo">
                <span class="brand-name">Emehama <span class="brand-highlight">Register</span></span>
            </div>
        </div>
        <div class="header-right">
            <a href="logout.php" class="btn-logout">
                <i class="fas fa-sign-out-alt"></i> Logout
            </a>
        </div>
    </header>

    <!-- Main Content -->
    <main class="dashboard-main">

        <!-- Statistics Cards -->
        <section class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon"><i class="fas fa-users"></i></div>
                <div class="stat-info">
                    <span class="stat-number" id="totalMembers"><?= $total ?></span>
                    <span class="stat-label">Total Members</span>
                </div>
            </div>
            <div class="stat-card stat-male">
                <div class="stat-icon"><i class="fas fa-mars"></i></div>
                <div class="stat-info">
                    <span class="stat-number" id="maleMembers"><?= $male ?></span>
                    <span class="stat-label">Male</span>
                </div>
            </div>
            <div class="stat-card stat-female">
                <div class="stat-icon"><i class="fas fa-venus"></i></div>
                <div class="stat-info">
                    <span class="stat-number" id="femaleMembers"><?= $female ?></span>
                    <span class="stat-label">Female</span>
                </div>
            </div>
        </section>

        <!-- Action Bar -->
        <section class="action-bar">
            <div class="action-left">
                <button class="btn btn-primary" id="addMemberBtn">
                    <i class="fas fa-plus"></i> Add New Member
                </button>
            </div>
            <div class="action-right">
                <div class="dropdown">
                    <button class="btn btn-ghost dropdown-toggle" id="downloadBtn">
                        <i class="fas fa-download"></i> Download Register <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="dropdown-menu" id="downloadMenu">
                        <a href="download-pdf.php" class="dropdown-item"><i class="fas fa-file-pdf"></i> PDF</a>
                        <a href="download-csv.php" class="dropdown-item"><i class="fas fa-file-csv"></i> CSV</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Search Bar -->
        <section class="search-section">
            <div class="search-wrapper">
                <i class="fas fa-search search-icon"></i>
                <input type="text" id="searchInput" placeholder="Search by Serial No., Full Name, or Phone..." class="search-input">
            </div>
        </section>

        <!-- Register Table -->
        <section class="table-section">
            <div class="table-container">
                <table class="register-table" id="membersTable">
                    <thead>
                        <tr>
                            <th>Serial No.</th>
                            <th>Full Name</th>
                            <th>Gender</th>
                            <th>Phone</th>
                            <th>Kindred</th>
                            <th>Date Registered</th>
                            <th class="actions-col">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <?php foreach ($members as $member): ?>
                        <tr data-id="<?= $member['id'] ?>">
                            <td><?= htmlspecialchars($member['membership_id']) ?></td>
                            <td><?= htmlspecialchars($member['full_name']) ?></td>
                            <td><?= htmlspecialchars($member['gender']) ?></td>
                            <td><?= htmlspecialchars($member['phone']) ?></td>
                            <td><?= htmlspecialchars($member['kindred'] ?: '—') ?></td>
                            <td><?= date('Y-m-d', strtotime($member['date_joined'])) ?></td>
                            <td class="actions-cell">
                                <button class="action-btn view-btn" data-id="<?= $member['id'] ?>" title="View"><i class="fas fa-eye"></i></button>
                                <button class="action-btn edit-btn" data-id="<?= $member['id'] ?>" title="Edit"><i class="fas fa-pen"></i></button>
                                <button class="action-btn delete-btn" data-id="<?= $member['id'] ?>" title="Delete"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                        <?php if (empty($members)): ?>
                        <tr><td colspan="7" class="empty-row">No members registered yet.</td></tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </section>

    </main>
</div>

<!-- ============================================================
MODALS
============================================================ -->

<!-- Add/Edit Modal -->
<div class="modal-overlay" id="memberModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Add New Member</h3>
            <button class="modal-close" id="modalClose">&times;</button>
        </div>
        <form id="memberForm">
            <input type="hidden" name="id" id="editId" value="0">
            <div class="form-group">
                <label for="serialNumber">Serial Number <span class="required">*</span></label>
                <input type="text" id="serialNumber" name="membership_id" placeholder="e.g., 001" required>
            </div>
            <div class="form-group">
                <label for="fullName">Full Name <span class="required">*</span></label>
                <input type="text" id="fullName" name="full_name" placeholder="e.g., John Doe" required>
            </div>
            <div class="form-group">
                <label for="gender">Gender <span class="required">*</span></label>
                <select id="gender" name="gender" required>
                    <option value="">Select Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </div>
            <div class="form-group">
                <label for="phoneNumber">Phone Number <span class="required">*</span></label>
                <input type="tel" id="phoneNumber" name="phone" placeholder="e.g., 08012345678" required>
            </div>
            <div class="form-group">
                <label for="kindred">Kindred <span class="optional">(Optional)</span></label>
                <input type="text" id="kindred" name="kindred" placeholder="e.g., Family name">
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-ghost" id="modalCancel">Cancel</button>
                <button type="submit" class="btn btn-primary" id="modalSave">
                    <span id="saveText">Save</span>
                    <i class="fas fa-spinner fa-spin" id="saveSpinner" style="display:none;"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- View Modal -->
<div class="modal-overlay" id="viewModal">
    <div class="modal-content view-modal">
        <div class="modal-header">
            <h3>Member Details</h3>
            <button class="modal-close" id="viewClose">&times;</button>
        </div>
        <div class="view-details" id="viewDetails">
            <!-- Populated by JS -->
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal-overlay" id="deleteModal">
    <div class="modal-content delete-modal">
        <div class="modal-header">
            <h3>Confirm Delete</h3>
            <button class="modal-close" id="deleteClose">&times;</button>
        </div>
        <div class="delete-message">
            <p>Are you sure you want to permanently delete this member?</p>
            <p class="delete-warning">This action cannot be undone.</p>
        </div>
        <div class="form-actions">
            <button class="btn btn-ghost" id="deleteCancel">Cancel</button>
            <button class="btn btn-danger" id="deleteConfirm">
                <span>Delete</span>
                <i class="fas fa-spinner fa-spin" id="deleteSpinner" style="display:none;"></i>
            </button>
        </div>
        <input type="hidden" id="deleteId" value="0">
    </div>
</div>

<!-- Toast Notification -->
<div id="toast" class="toast">
    <span id="toastMessage">Success</span>
    <button id="toastClose">&times;</button>
</div>

<!-- ============================================================
SCRIPTS
============================================================ -->
<script src="../asset/js/dashboard.js"></script>
</body>
</html>