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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create BAK Validation Request</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">
            <h2>Create a New BAK Validation Request</h2>

            <% if (errorMessage) { %>
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <%= errorMessage %>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <% } %>

            <form id="CreateBakTakenRequestForm" action="/bak-getrokken/create" method="POST"
                enctype="multipart/form-data">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">

                <div class="mb-3">
                    <label for="targetUserId" class="form-label">Persoon die Bak heeft getrokken:</label>
                    <select id="targetUserId" name="targetUserId" class="form-select">
                        <% users.forEach(user=> { %>
                        <option value="<%= user.id %>">
                            <%= user.name %>
                        </option>
                        <% }) %>
                    </select>
                </div>

                <div class="mb-3">
                    <label for="evidence" class="form-label">Evidence (Image or Video):</label>
                    <input type="file" id="evidence" name="evidence" class="form-control" accept="image/*,video/*"
                        required>
                </div>


                <button type="submit" class="btn btn-primary">Submit Request</button>
            </form>
        </div>
    </main>

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

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>

        $(document).ready(function () {
            $('#CreateBakTakenRequestForm').submit(function (e) {
                e.preventDefault(); // Prevent default form submission

                var formData = new FormData(this); // Create a FormData object from the form

                $.ajax({
                    url: $(this).attr('action'), // Get form action URL
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader('X-CSRF-Token', $('input[name="_csrf"]').val());
                    },
                    success: function (response) {
                        // Display success alert (you might need to adjust based on your page's HTML structure)
                        window.location.href = `/bak-getrokken`;
                    },
                    error: function (xhr) {
                        // Parse the JSON response
                        var response = JSON.parse(xhr.responseText);
                        window.location.href = `/bak-getrokken/create?errorMessage=${encodeURIComponent(response.message || 'Unknown error')}`;
                    }
                });
            });
        });





    </script>

</body>

</html>