<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - Completed Jobs</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body class="bg-dark text-white">

    <!-- Admin Panel Header -->
    <div class="container mt-5 text-center">
        <h2>Thor's Hammer Electrical - Completed Jobs</h2>
    </div>

    <!-- Table Container -->
    <div class="container mt-4">
        <table class="table table-striped table-bordered table-hover">
            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Job</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Zipcode</th>
                    <th>Phone</th>
                    <th>Completed At</th>
                </tr>
            </thead>
            <tbody>
                {% for job in completed_jobs %}
                <tr>
                    <td>{{ job[0] }}</td> <!-- ID -->
                    <td>{{ job[1] }}</td> <!-- Name -->
                    <td>{{ job[2] }}</td> <!-- Job -->
                    <td>{{ job[3] }}</td> <!-- Address -->
                    <td>{{ job[4] }}</td> <!-- City -->
                    <td>{{ job[5] }}</td> <!-- State -->
                    <td>{{ job[6] }}</td> <!-- Zipcode -->
                    <td>{{ job[7] }}</td> <!-- Phone -->
                    <td>{{ job[8] }}</td> <!-- Completed At -->
                </tr>
                {% endfor %}
            </tbody>
        </table>
        
        <div class="back-container">
            <a href="{{ url_for('admin') }}">
            <button class="btn btn-success btn-sm">
                Back to Admin Panel</button>
            </a>
        </div>
        
        </body>
        </html>
        
        
