<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Admin List - Elfit Arabia</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/style.css">
    <style>
        body {
            background-color: #1a2b1f;
            padding: 130px;
            color: white;
        }

        .section {
            background-color: #2a3b2f;
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand text-white" href="/admin">Elfit Arabia Admin</a>
        </div>
        <ul class="navbar-nav ms-auto d-flex flex-row">
            <li class="nav-item"><a class="nav-link" href="/admin/manage-clients">Manage Clients</a></li>
            <li class="nav-item"><a class="nav-link" href="/admin/client-orders">Client Orders</a></li>
            <li class="nav-item"><a class="nav-link" href="/admin/manage-products">Manage Products</a></li>
            <li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
        </ul>
    </nav>

    <div class="content container-fluid">
        <div class="section">
            <h2 style="padding-bottom: 20px"><strong>Admin Management</strong></h2>

            <% const messages=getFlashedMessages(); %>
                <% if (messages && messages.length> 0) { %>
                    <% messages.forEach(function(message) { %>
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                            <%= message %>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        <% }); %>
                            <% } %>

                                <!-- Add Admin Form -->
                                <div class="card mb-4" style="background-color: #3a5e46; border: 1px solid #4a7c59;">
                                    <div class="card-body">
                                        <h5 class="card-title text-white">Add New Admin</h5>
                                        <form method="POST" action="/admin/add-admin" class="row g-3">
                                            <div class="col-md-8">
                                                <input type="email" class="form-control" name="admin_email"
                                                    placeholder="Enter admin email" required>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="submit" class="btn btn-success w-100">Add Admin</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <!-- Admins Table -->
                                <div class="table-responsive">
                                    <table class="table table-dark table-striped">
                                        <thead>
                                            <tr>
                                                <th>Email</th>
                                                <th>Added On</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% if (admins && admins.length> 0) { %>
                                                <% admins.forEach(function(admin) { %>
                                                    <tr>
                                                        <td>
                                                            <%= admin.email %>
                                                                <% if
                                                                    (admin.email.toLowerCase()===main_admin_email.toLowerCase())
                                                                    { %>
                                                                    <span class="badge bg-warning text-dark ms-2">Main
                                                                        Admin</span>
                                                                    <% } %>
                                                        </td>
                                                        <td>
                                                            <%= admin.created_at %>
                                                        </td>
                                                        <td>
                                                            <% if (admin.email.toLowerCase()
                                                                !==main_admin_email.toLowerCase()) { %>
                                                                <form method="POST"
                                                                    action="/admin/remove-admin/<%= admin.id %>"
                                                                    style="display: inline;"
                                                                    onsubmit="return confirm('Are you sure you want to remove this admin?');">
                                                                    <button type="submit"
                                                                        class="btn btn-danger btn-sm">Remove</button>
                                                                </form>
                                                                <% } else { %>
                                                                    <span class="text-muted">Cannot remove</span>
                                                                    <% } %>
                                                        </td>
                                                    </tr>
                                                    <% }); %>
                                                        <% } else { %>
                                                            <tr>
                                                                <td colspan="3" class="text-center">No admins found</td>
                                                            </tr>
                                                            <% } %>
                                        </tbody>
                                    </table>
                                </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>