<%- include('include/header') %>

<div class="dashboard-body">
    <div class="main-button-admin">
        <button data-bs-target="#exampleModalToggle" data-bs-toggle="modal">New Account</button>
        <div class="row">
            <% teams.forEach((item) => { %>
                <div class="col-lg-3 col-12">
                  <div class="main-bob">
                    <form action="/sites/pioneer-reality/api/team/delete" method="post">
                        <input type="hidden" name="id" value="<%- item._id %>">
                        <button type="submit">Delete</button>
                    </form>
                    <button class="motioe" data-bs-target="#editModal<%- item._id %>" data-bs-toggle="modal">Edit</button>
                    <!-- Edit Button -->
                    <img src="/sites/pioneer-reality<%- item.picture %>" alt="">
                 
                    <h1><%- item.name %></h1>
                    <label>Description</label>
                    <p><%- item.disc %></p>
                    <label>Number</label>
                    <p><%- item.num %></p>
                    <label>Email</label>
                    <p><%- item.email %></p>
                  </div>
                </div>

                <!-- Edit Modal for Each Team Member -->
                <div class="modal fade" id="editModal<%- item._id %>" aria-hidden="true" aria-labelledby="editModalLabel<%- item._id %>" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <form action="/sites/pioneer-reality/api/team/edit" method="post" enctype="multipart/form-data">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="editModalLabel<%- item._id %>">Edit Team Member</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="main-input-member">
                                        <input type="hidden" name="id" value="<%- item._id %>">
                                        <input type="file" name="image">
                                        <input name="name" type="text" placeholder="Member Name" value="<%- item.name %>" required>
                                        <input name="email" type="email" placeholder="Member Email" value="<%- item.email %>" required>
                                        <input name="num" type="number" placeholder="Member Number" value="<%- item.num %>" required>
                                        <textarea name="disc" placeholder="Enter Member Description" required><%- item.disc %></textarea>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-primary" type="submit">Update</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            <% }) %>
        </div>
    </div>
</div>

<div class="dashboard-footer">
    <div class="flex-between flex-wrap gap-16">
        <p class="text-gray-300 text-13 fw-normal"> &copy; Copyright Edmate 2024, All Right Reserverd</p>
        <div class="flex-align flex-wrap gap-16">
            <a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">License</a>
            <a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">More Themes</a>
            <a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">Documentation</a>
            <a href="#" class="text-gray-300 text-13 fw-normal hover-text-main-600 hover-text-decoration-underline">Support</a>
        </div>
    </div>
</div>

<!-- New Account Modal -->
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form action="/sites/pioneer-reality/api/team/new" enctype="multipart/form-data" method="post">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Member Registration</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="main-input-member">
                        <input type="file" name="image" required>
                        <input name="name" type="text" placeholder="Member Name" required>
                        <input name="email" type="email" placeholder="Member Email" required>
                        <input name="num" type="number" placeholder="Member Number" required>
                        <textarea name="disc" required placeholder="Enter Member Description"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

<style>
    .main-input-member {
        display: flex;
        flex-direction: column;
        gap: 12px; /* Adds space between input fields */
    }

    .main-input-member input,
    .main-input-member textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 16px;
        transition: border-color 0.3s ease;
    }

    .main-input-member input:focus,
    .main-input-member textarea:focus {
        border-color: #007bff;
        outline: none;
    }

    .main-input-member textarea {
        height: 100px; /* Adjust the height of the textarea */
        resize: vertical; /* Allow vertical resizing */
    }

    .main-input-member input[type="file"] {
        border: none;
        padding: 5px;
    }

    .modal-body {
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
    }

    @media (max-width: 600px) {
        .main-input-member input,
        .main-input-member textarea {
            font-size: 14px;
        }
    }
</style>

<!-- Scripts -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/boostrap.bundle.min.js"></script>
<script src="assets/js/phosphor-icon.js"></script>
<script src="assets/js/file-upload.js"></script>
<script src="assets/js/plyr.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
<script src="assets/js/full-calendar.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/editor-quill.js"></script>
<script src="assets/js/apexcharts.min.js"></script>
<script src="assets/js/calendar.js"></script>
<script src="assets/js/jquery-jvectormap-2.0.5.min.js"></script>
<script src="assets/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="assets/js/main.js"></script>