<div class="section">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><strong>Manage Clients</strong></h2>
        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addClientModal">
            Add New Client
        </button>
    </div>

    <div class="table-responsive">
        <table class="table table-dark table-striped">
            <thead>
                <tr>
                    <th>Email</th>
                    <th>Client Name</th>
                    <th>Phone</th>
                    <th>Company</th>
                    <th>Address</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <% if (clients && clients.length> 0) { %>
                    <% clients.forEach(function(client) { %>
                        <tr>
                            <td>
                                <%= client.email %>
                            </td>
                            <td>
                                <%= client.client_name %>
                            </td>
                            <td>
                                <%= client.phone %>
                            </td>
                            <td>
                                <%= client.company %>
                            </td>
                            <td>
                                <%= client.address %>
                            </td>
                            <td>
                                <a href="/admin/edit-client/<%= client.id %>"
                                    class="btn btn-warning btn-sm me-2">Edit</a>
                                <form method="POST" action="/admin/delete-client/<%= client.id %>"
                                    style="display: inline;" onsubmit="return confirm('Are you sure?');">
                                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                </form>
                            </td>
                        </tr>
                        <% }); %>
                            <% } else { %>
                                <tr>
                                    <td colspan="6" class="text-center">No clients found</td>
                                </tr>
                                <% } %>
            </tbody>
        </table>
    </div>
</div>

<!-- Add/Edit Client Modal -->
<div class="modal fade" id="addClientModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <%= edit_client ? 'Edit Client' : 'Add New Client' %>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="/admin/manage-clients">
                <% if (edit_client) { %>
                    <input type="hidden" name="client_id" value="<%= edit_client.id %>">
                    <% } %>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Email *</label>
                                <input type="email" class="form-control" name="email"
                                    value="<%= edit_client ? edit_client.email : '' %>" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Client Name *</label>
                                <input type="text" class="form-control" name="client_name"
                                    value="<%= edit_client ? edit_client.client_name : '' %>" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Phone Number *</label>
                                <input type="text" class="form-control" name="phone"
                                    value="<%= edit_client ? edit_client.phone : '' %>" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Company *</label>
                                <input type="text" class="form-control" name="company"
                                    value="<%= edit_client ? edit_client.company : '' %>" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Address</label>
                                <textarea class="form-control" name="address"
                                    rows="3"><%= edit_client ? edit_client.address : '' %></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn <%= edit_client ? 'btn-warning' : 'btn-success' %>">
                                <%= edit_client ? 'Update Client' : 'Add Client' %>
                            </button>
                        </div>
            </form>
        </div>
    </div>
</div>

<% if (edit_client) { %>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new bootstrap.Modal(document.getElementById('addClientModal')).show();
        });
    </script>
    <% } %>