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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open BAK Validation Requests</title>
    <%- include('../partials/_favicon') %>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/styles/main.css">
</head>

<body class="d-flex flex-column min-vh-100">

    <main class="flex-shrink-0">
        <%- include('../partials/_navbar') %>

        <div class="container mt-5">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h1>Getrokken Bakken</h1>
                <a href="/bak-getrokken/create" class="btn btn-primary">Getrokken Bak Aanvragen</a>
            </div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" id="validationRequestTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link <%= activeTab === 'active' ? 'active' : '' %>"
                        href="?activePage=<%= activePage %>&closedPage=<%= closedPage %>&tab=active">Actieve</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link <%= activeTab === 'closed' ? 'active' : '' %>"
                        href="?activePage=<%= activePage %>&closedPage=<%= closedPage %>&tab=closed">Gesloten</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content mt-3" id="validationRequestTabsContent">
                <div class="tab-pane fade <%= activeTab === 'active' ? 'show active' : '' %>" id="active-requests"
                    role="tabpanel" aria-labelledby="active-requests-tab">
                    <% activeRequests.forEach(request=> { %>
                    <div class="card-custom">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Aangevraagd door <a
                                        href="/profile/<%= request.Requester.id %>"><%= request.Requester.name %></a>
                                    voor
                                    <a href="/profile/<%= request.Target.id %>"><%= request.Target.name %></a>
                                </h5>
                                <p class="card-text">Bewijs: <a href="#" data-bs-toggle="modal"
                                        data-bs-target="#evidenceModal-<%= request.id %>">Bekijken</a></p>

                                <p class="card-text">Status: <%= request.status %></p>
                                <div class="card-text">
                                    <h6 class="fw-bold">Goedkeurders:</h6>
                                    <ul class="list-unstyled">
                                        <% if (request.FirstApprover) { %>
                                        <li><span>Eerste Goedkeurder: <a
                                                    href="/profile/<%= request.FirstApprover.id %>"><%= request.FirstApprover.name %></a></span>
                                        </li>
                                        <% } %>
                                        <% if (request.SecondApprover) { %>
                                        <li>
                                            <span>Tweede Goedkeurder: <a
                                                    href="/profile/<%= request.SecondApprover.id %>"><%= request.SecondApprover.name %></a></span>
                                        </li>
                                        <% } %>
                                        <% if (!request.FirstApprover && !request.SecondApprover) { %>
                                        <li>
                                            <span>Nog geen goedkeurders.</span>
                                        </li>
                                        <% } %>
                                    </ul>
                                </div>

                                <% if (user.id !== request.requesterId && user.id !== request.targetId) { %>
                                <% var hasAlreadyApproved = (request.FirstApprover && request.FirstApprover.id === user.id) || (request.SecondApprover && request.SecondApprover.id === user.id); %>
                                <% var isAdminApprovalRequired = !request.FirstApprover || (request.FirstApprover && !request.FirstApprover.isAdmin); %>
                                <% if (!hasAlreadyApproved) { %>
                                <% if (!request.FirstApprover) { %>
                                <!-- No first approver, anyone can approve if they are not the requester or the target -->
                                <% if (user.isAdmin) { %>
                                <button onclick="location.href='/bak-getrokken/validate/approve/<%= request.id %>'"
                                    class="btn btn-success">Goedkeuren</button>
                                <% } %>
                                <% } else if (!request.FirstApprover.isAdmin && user.isAdmin) { %>
                                <!-- If the first approver is not an admin, only an admin can approve as the second approver -->
                                <button onclick="location.href='/bak-getrokken/validate/approve/<%= request.id %>'"
                                    class="btn btn-success">Goedkeuren</button>
                                <% } else if (request.FirstApprover.isAdmin || user.isAdmin) { %>
                                <!-- If the first approver is an admin or the current user is an admin (and hasn't already approved) -->
                                <button onclick="location.href='/bak-getrokken/validate/approve/<%= request.id %>'"
                                    class="btn btn-success">Goedkeuren</button>
                                <% } %>
                                <% } %>
                                <% } %>



                                <% if (user.isAdmin) { %>
                                <!-- Afwijzen knop alleen zichtbaar voor admins -->
                                <button onclick="location.href='/bak-getrokken/validate/decline/<%= request.id %>'"
                                    class="btn btn-danger">Afwijzen</button>
                                <% } %>
                            </div>
                        </div>
                    </div>


                    <!-- Modal for viewing evidence -->
                    <div class="modal fade" id="evidenceModal-<%= request.id %>" tabindex="-1"
                        aria-labelledby="evidenceModalLabel-<%= request.id %>" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="evidenceModalLabel-<%= request.id %>">Bewijsstuk</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <% if (request.evidenceUrl.endsWith('.mp4') || request.evidenceUrl.endsWith('.mov') ) { %>
                                    <!-- For Video Content -->
                                    <video controls style="width: 100%; max-height: 500px;">
                                        <source
                                            src="https://bak-counter-images.ams3.digitaloceanspaces.com/<%= request.evidenceUrl %>"
                                            type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                    <% } else { %>
                                    <!-- For Image Content -->
                                    <img src="https://bak-counter-images.ams3.digitaloceanspaces.com/<%= request.evidenceUrl %>"
                                        style="width: 100%; max-height: 500px;" alt="Evidence Image">
                                    <% } %>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">Sluiten</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <% }) %>
                    <!-- Pagination for Active Requests -->
                    <nav aria-label="Active Requests Page navigation" class="mt-4">
                        <ul class="pagination">
                            <% if(activePage > 1) { %>
                            <li class="page-item">
                                <a class="page-link"
                                    href="/bak-getrokken?activePage=<%= activePage - 1 %>&closedPage=<%= closedPage %>&tab=active"
                                    aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <% } %>

                            <% let startPageActive = Math.max(activePage - 2, 1); %>
                            <% let endPageActive = Math.min(startPageActive + 4, totalPagesActive); %>
                            <% startPageActive = Math.max(Math.min(startPageActive, totalPagesActive - 4), 1); %>

                            <% for(let i = startPageActive; i <= endPageActive; i++) { %>
                            <li class="page-item <%= i === activePage ? 'active' : '' %>">
                                <a class="page-link"
                                    href="/bak-getrokken?activePage=<%= i %>&closedPage=<%= closedPage %>&tab=active">
                                    <%= i %>
                                </a>
                            </li>
                            <% } %>

                            <% if(activePage < totalPagesActive) { %>
                            <li class="page-item">
                                <a class="page-link"
                                    href="/bak-getrokken?activePage=<%= activePage + 1 %>&closedPage=<%= closedPage %>&tab=active"
                                    aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <% } %>
                        </ul>
                    </nav>


                </div>
                <div class="tab-pane fade <%= activeTab === 'closed' ? 'show active' : '' %>" id="closed-requests"
                    role="tabpanel" aria-labelledby="closed-requests-tab">

                    <% closedRequests.forEach(request=> { %>
                    <div class="card-custom ">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Aangevraagd door <a href="/profile/<%= request.Requester.id %>">
                                        <%= request.Requester.name %>
                                    </a> voor <a href="/profile/<%= request.Target.id %>">
                                        <%= request.Target.name %>
                                    </a></h5>
                                <p class="card-text">Status: <%= request.status %>
                                </p>
                                <% if (request.status==='declined' ) { %>
                                <p class="card-text">Afgewezen: <a href="/profile/<%= request.DeclinedBy.id %>">
                                        <%= request.DeclinedBy.name %>
                                    </a></p>
                                <% } else { %>
                                <div class="card-text">
                                    <h6 class="fw-bold">Goedkeurders:</h6>
                                    <ul class="list-unstyled">
                                        <% if (request.FirstApprover) { %>
                                        <li><span>Eerste Goedkeurder: <a
                                                    href="/profile/<%= request.FirstApprover.id %>"><%= request.FirstApprover.name %></a></span>
                                        </li>
                                        <% } %>
                                        <% if (request.SecondApprover) { %>
                                        <li>
                                            <span>Tweede Goedkeurder: <a
                                                    href="/profile/<%= request.SecondApprover.id %>"><%= request.SecondApprover.name %></a>
                                            </span>
                                        </li>
                                        <% } %>
                                        <% if (!request.FirstApprover && !request.SecondApprover) { %>
                                        <li>
                                            <span>Nog geen goedkeurders.</span>
                                        </li>
                                        <% } %>
                                    </ul>
                                </div>
                                <% } %>
                                <p class="card-text">Aangemaakt op:
                                    <%= new Date(request.createdAt).toLocaleString('nl-NL', { timeZone: 'Europe/Amsterdam' }); %>
                                </p>
                            </div>
                        </div>
                    </div>
                    <% }) %>

                    <!-- Pagination for Closed Requests -->
                    <nav aria-label="Closed Requests Page navigation" class="mt-4">
                        <ul class="pagination">
                            <% if(closedPage > 1) { %>
                            <li class="page-item">
                                <a class="page-link"
                                    href="/bak-getrokken?activePage=<%= activePage %>&closedPage=<%= closedPage - 1 %>&tab=closed"
                                    aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <% } %>

                            <% let startPageClosed = Math.max(closedPage - 2, 1); %>
                            <% let endPageClosed = Math.min(startPageClosed + 4, totalPagesClosed); %>
                            <% startPageClosed = Math.max(Math.min(startPageClosed, totalPagesClosed - 4), 1); %>

                            <% for(let i = startPageClosed; i <= endPageClosed; i++) { %>
                            <li class="page-item <%= i === closedPage ? 'active' : '' %>">
                                <a class="page-link"
                                    href="/bak-getrokken?activePage=<%= activePage %>&closedPage=<%= i %>&tab=closed">
                                    <%= i %>
                                </a>
                            </li>
                            <% } %>

                            <% if(closedPage < totalPagesClosed) { %>
                            <li class="page-item">
                                <a class="page-link"
                                    href="/bak-getrokken?activePage=<%= activePage %>&closedPage=<%= closedPage + 1 %>&tab=closed"
                                    aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <% } %>
                        </ul>
                    </nav>


                </div>
            </div>
        </div>

    </main>

    <%- include('../partials/_footer') %>


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

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let hash = window.location.hash;
            if (hash) {
                let tab = new bootstrap.Tab(document.querySelector('button[data-bs-target="' + hash + '"]'));
                tab.show();
            }
        });

        // Update hash in URL when tab changes
        document.querySelectorAll('.nav-link').forEach(tab => {
            tab.addEventListener('click', function () {
                window.location.hash = this.getAttribute('data-bs-target');
            });
        });
    </script>

</body>

</html>