<% layout('layouts/base')%>

<main class="backdrop">
    <div class="container">
        <h1 class="text-secondary">Admin</h1>
        <div class="large-card shadow mb-4">
            <div class="row">
                <div class="col scroll">
                    <h2>Meetings
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-meeting-modal">Add Meeting</button>
                    </h2>
                    <% for(let meeting of meetings) { %>
                        <div class="meeting-compact py-3">
                            <p><strong><%= meeting.title %></strong></p>
                            <p><strong>Description</strong>: <%= meeting.description %></p>
                            <p><strong>Date</strong>: <span class="datetime"><%= meeting.date %>,<%= meeting.duration %></span></p>
                            <p><strong>Location</strong>: <%= meeting.location %></p>
                            <p><strong>Type</strong>: <%= meeting.type %></p>
                            <% if(meeting.rsvps > 0) { %>
                                <p><strong>RSVPs</strong>: <%= meeting.rsvps %></p>
                            <% } %>
                            <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-meeting-<%= meeting.id %>-modal">Edit Meeting</button>
                            <form class="d-inline-block" method="POST" action="/meetings/remove">
                                <input type="hidden" name="meeting_id" value="<%= meeting.id %>">
                                <button class="btn d-inline-block btn-outline-danger">Delete</button>
                            </form>
                            <% if(meeting.attendance.length > 0) { %>
                                <button class="btn btn-primary attendance-csv" data-attendance="<%= JSON.stringify([meeting.attendance, meeting.date]) %>">Export attendance to CSV</button>
                            <% } %>
                        </div>
                    <% } %>
                </div>
            </div>
        </div>

        <div class="large-card shadow mb-4">
            <h2>Feedback</h2>
            <% for(let feedback of feedbackData) { %>
                <div class="meeting">
                    <p><strong>User</strong>: <%= feedback.user_name %> (<%= feedback.user_id + "@mines.edu" %>)</p>
                    <p><strong>Feedback</strong>: <%= feedback.body %></p>
                    <form class="d-inline-block" method="POST" action="/feedback/remove">
                        <input type="hidden" name="meeting_id" value="<%= feedback.meeting_id %>">
                        <input type="hidden" name="user_id" value="<%= feedback.user_id %>">
                        <button class="btn d-inline-block btn-outline-danger">Delete</button>
                    </form>
                </div>
            <% } %>
        </div>

        <div class="large-card shadow mb-4">
            <h2>Officers</h2>
            <% for(let officer of officers) { %>
                <p class="mt-2"><b><%= officer.name %></b>, <%= officer.title %></p>
                <p class="mb-2"><%= officer.id + "@mines.edu" %></p>

                <button class="btn d-inline-block btn-outline-primary" data-bs-toggle="modal" data-bs-target="#edit-officer-<%= officer.id %>-modal">Edit</button>
                <button class="btn d-inline-block btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delete-officer-<%= officer.id %>-modal">Delete</button>
            <% } %>
            <br><br>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-officer-modal">Add Officer</button>
        </div>

        <div class="large-card shadow mb-4">
            <h2>Images</h2>
            <p class="mb-3">Upload new image to be displayed randomly on the front page of the site.</p>
            <form method="POST" action="/admin" enctype="multipart/form-data">
                <div class="mb-3">
                    <input class="form-control" type="file" name="image" accept="image/png,image/jpg,image/jpeg" required />
                    <p class="form-text">Images must be under 5 MB and of JPG/JPEG/PNG type.</p>
                </div>
                <div class="mb-3">
                    <input class="form-control" type="text" name="caption" placeholder="Caption.." required />
                </div>
                <button class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>    
</main>

<div class="modal fade" id="add-meeting-modal" tabindex="-1" aria-labelledby="add-meeting-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add-meeting-modal-label">Add Meeting</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="/meetings">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label" for="add-meeting-title">Title</label>
                        <input id="add-meeting-title" class="form-control" type="text" name="title" placeholder="Title..." required />
                    </div>
    
                    <div class="mb-3">
                        <label class="form-label" for="add-meeting-description">Description</label>
                        <input id="add-meeting-description" class="form-control" type="text" name="description" placeholder="Description.." required />
                    </div>
    
                    <div class="mb-3">
                        <label class="form-label" for="add-meeting-date">Date</label>
                        <input id="add-meeting-date" class="form-control" type="datetime-local" name="date" required />
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="add-meeting-duration">Duration</label>
                        <input id="add-meeting-duration" class="form-control" min="0" max="10" type="number" name="duration" placeholder="Duration (hours)" required />
                    </div>
    
                    <div class="mb-3">
                        <label class="form-label" for="add-meeting-location">Location</label>
                        <input id="add-meeting-location" class="form-control" type="text" name="location" placeholder="Location.." required />
                    </div>
    
                    <div class="mb-3">
                        <label class="form-label" for="add-meeting-type">Type</label>
                        <input id="add-meeting-type" class="form-control" type="text" name="type" placeholder="Meeting type.." required />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
                    <button class="btn btn-success">Add</button>
                </div>
            </form>
        </div>
    </div>
</div>

<% for (let meeting of meetings) { %>
    <div class="modal fade" id="edit-meeting-<%= meeting.id %>-modal" tabindex="-1" aria-labelledby="edit-meeting-<%= meeting.id %>-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="edit-meeting-<%= meeting.id %>-modal-label">Edit <%= meeting.title %></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="/meetings/edit">
                    <input type="hidden" name="meeting_id" value="<%= meeting.id %>">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label" for="edit-meeting-<%= meeting.id %>-title">Title</label>
                            <input id="edit-meeting-<%= meeting.id %>-title" class="form-control" type="text" name="title" placeholder="Title..." value="<%= meeting.title %>" required />
                        </div>
        
                        <div class="mb-3">
                            <label class="form-label" for="edit-meeting-<%= meeting.id %>-description">Description</label>
                            <input id="edit-meeting-<%= meeting.id %>-description" class="form-control" type="text" name="description" placeholder="Description.." value="<%= meeting.description %>" required />
                        </div>
        
                        <div class="mb-3">
                            <label class="form-label" for="edit-meeting-<%= meeting.id %>-date">Date</label>
                            <input id="edit-meeting-<%= meeting.id %>-date" class="form-control date-input" type="datetime-local" name="date" data-date="<%= meeting.date %>" value="" required />
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="edit-meeting-<%= meeting.id %>-duration">Duration</label>
                            <input id="edit-meeting-<%= meeting.id %>-duration" class="form-control" min="0" max="10" type="number" name="duration" placeholder="Duration (hours)" value="<%= meeting.duration / (60 * 60 * 1000) %>" required />
                        </div>
        
                        <div class="mb-3">
                            <label class="form-label" for="edit-meeting-<%= meeting.id %>-location">Location</label>
                            <input id="edit-meeting-<%= meeting.id %>-location" class="form-control" type="text" name="location" placeholder="Location.." value="<%= meeting.location %>" required />
                        </div>
        
                        <div class="mb-3">
                            <label class="form-label" for="edit-meeting-<%= meeting.id %>-type">Type</label>
                            <input id="edit-meeting-<%= meeting.id %>-type" class="form-control" type="text" name="type" placeholder="Meeting type.." value="<%= meeting.type %>" required />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
                        <button class="btn btn-success">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
<% } %>

<div class="modal fade" id="add-officer-modal" tabindex="-1" aria-labelledby="add-officer-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add-officer-modal-label">Add Officer</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="/officers">
                <div class="modal-body">                
                    <label class="form-label" for="add-officer-user-id">Email</label>
                    <div class="input-group mb-3">
                        <input id="add-officer-user-id" name="user_id" type="text" class="form-control" placeholder="Mines username" aria-label="Mines username" aria-describedby="email-addon" required />
                        <span class="input-group-text" id="email-addon">@mines.edu</span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="add-officer-title">Title</label>
                        <input id="add-officer-title" class="form-control" name="title" type="text" required placeholder="Director of X.." />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
                    <button type="submit" class="btn btn-success">Add</button>
                </div>
            </form>
        </div>
    </div>
</div>

<% for (let officer of officers) { %>
    <div class="modal fade" id="edit-officer-<%= officer.id %>-modal" tabindex="-1" aria-labelledby="edit-officer-<%= officer.id %>-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="edit-officer-<%= officer.id %>-modal-label">Edit Title of <%= officer.name %></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="/officers">
                    <div class="modal-body">                
                        <input name="user_id" type="hidden" required value="<%= officer.id %>"/>

                        <div>
                            <label class="form-label" for="edit-officer-<%= officer.id %>-title">Title</label>
                            <input id="edit-officer-<%= officer.id %>-title" class="form-control" name="title" type="text" required value="<%= officer.title %>"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Discard</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-officer-<%= officer.id %>-modal" tabindex="-1" aria-labelledby="delete-officer-<%= officer.id %>-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="delete-officer-<%= officer.id %>-modal-label">Delete Presentation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="/officers/remove">
                    <div class="modal-body">
                        <input type="hidden" name="user_id" value="<%= officer.id %>">
                        <p>Are you sure you want to remove the title of <strong><%= officer.name %></strong>?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
<% } %>

<script src="/scripts/csv.js"></script>
<script src="/scripts/date.js"></script>
