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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weddenschappen Bekijken</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>Weddenschappen</h1>
                <a href="/bets/create" class="btn btn-primary">Weddenschap Aanmaken</a>
            </div>

            <!-- Navigatietabs -->
            <ul class="nav nav-tabs mb-3" id="betTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="active-bets-tab" data-bs-toggle="tab"
                        data-bs-target="#active-bets" type="button" role="tab" aria-controls="active-bets"
                        aria-selected="true">Actieve</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="closed-bets-tab" data-bs-toggle="tab" data-bs-target="#closed-bets"
                        type="button" role="tab" aria-controls="closed-bets" aria-selected="false">Gesloten</button>
                </li>
            </ul>

            <!-- Tabinhoud -->
            <div class="tab-content">
                <div class="tab-pane fade show active" id="active-bets" role="tabpanel"
                    aria-labelledby="active-bets-tab">
                    <div class="card-custom ">
                        <% bets.filter(bet=> bet.status === 'pending').forEach(bet => { %>
                        <div class="card mb-3">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <%= bet.Initiator.name %> vs. <%= bet.Opponent.name %>
                                </h5>
                                <h6 class="card-subtitle mb-2 text-muted">Scheidsrechter: <%= bet.Judge.name %></h6>
                                <p class="card-text"><strong>Beschrijving:</strong> <%= bet.betDescription %></p>
                                <p class="card-text"><strong>Inzet:</strong> <%= bet.stake %>
                                    <% if(bet.stake === 0 || bet.stake > 1) { %>
                                    Bakken
                                    <% } else if(bet.stake === 1) { %>
                                    BAK
                                    <% } %>
                                </p>
                                <p class="card-text">
                                    <strong>Status:</strong>
                                    <% if (bet.opponentApproval) { %>
                                    Goedgekeurd
                                    <% } else { %>
                                    Wacht op goedkeuring van tegenstander
                                    <% } %>
                                </p>
                                <p class="card-text">Aangemaakt op:
                                    <%= new Date(bet.createdAt).toLocaleString('nl-NL', { timeZone: 'Europe/Amsterdam' }); %>
                                </p>
                                <% if (user.id === bet.judgeUserId && bet.status === 'pending' && bet.opponentApproval === true) { %>
                                <form action="/bets/judge/<%= bet.betId %>" method="POST" class="d-inline">
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <input type="hidden" name="winnerUserId" value="<%= bet.Initiator.id %>">
                                    <button type="submit" class="btn btn-success">Verklaar <%= bet.Initiator.name %> als
                                        Winnaar</button>
                                </form>
                                <form action="/bets/judge/<%= bet.betId %>" method="POST" class="d-inline">
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <input type="hidden" name="winnerUserId" value="<%= bet.Opponent.id %>">
                                    <button type="submit" class="btn btn-warning">Verklaar <%= bet.Opponent.name %> als
                                        Winnaar</button>
                                </form>
                                <% } %>
                                <% if (user.id === bet.opponentUserId && bet.status === 'pending' && bet.opponentApproval === false) { %>
                                <form action="/bets/approve/<%= bet.betId %>" method="POST" style="display: inline;">
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <button type="submit" class="btn btn-primary">Keur Weddenschap Goed</button>
                                </form>
                                <form action="/bets/decline/<%= bet.betId %>" method="POST" style="display: inline;">
                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                    <button type="submit" class="btn btn-danger">Weiger Weddenschap</button>
                                </form>
                                <% } %>
                            </div>
                        </div>
                        <% }); %>
                    </div>
                </div>
                <div class="tab-pane fade" id="closed-bets" role="tabpanel" aria-labelledby="closed-bets-tab">
                    <div class="card-custom ">
                        <% bets.filter(bet=> bet.status !== 'pending').forEach(bet => { %>
                        <div class="card mb-3">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <%= bet.Initiator.name %> vs. <%= bet.Opponent.name %>
                                </h5>
                                <h6 class="card-subtitle mb-2 text-muted">Scheidsrechter: <%= bet.Judge.name %></h6>
                                <p class="card-text"><strong>Beschrijving:</strong> <%= bet.betDescription %></p>
                                <p class="card-text"><strong>Inzet:</strong> <%= bet.stake %>
                                    <% if(bet.stake === 0 || bet.stake > 1) { %>
                                    Bakken
                                    <% } else if(bet.stake === 1) { %>
                                    BAK
                                    <% } %>
                                </p>
                                <% if (bet.status === 'declined') { %>
                                <p class="card-text"><strong>Status:</strong> Afgewezen - Geen winnaar</p>
                                <% } %>
                                <% if (bet.status === 'completed') { %>
                                <p class="card-text"><strong>Winnaar:</strong>
                                    <%= bet.winnerUserId===bet.Initiator.id ? bet.Initiator.name : bet.Opponent.name %>
                                </p>
                                <% } %>
                                <p class="card-text">Aangemaakt op:
                                    <%= new Date(bet.createdAt).toLocaleString('nl-NL', { timeZone: 'Europe/Amsterdam' }); %>
                                </p>
                            </div>
                        </div>
                        <% }); %>
                    </div>
                </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>
</body>

</html>