<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - Work Orders</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 - Admin Panel</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>Submitted At</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for order in work_orders %}
                <tr>
                    <td>{{ order[0] }}</td>  <!-- ID -->
                    <td>{{ order[1] }}</td>  <!-- Name -->
                    <td>{{ order[2] }}</td>  <!-- Job -->
                    <td>{{ order[3] }}</td>  <!-- Address -->
                    <td>{{ order[4] }}</td>  <!-- City -->
                    <td>{{ order[5] }}</td>  <!-- State -->
                    <td>{{ order[6] }}</td>  <!-- Zipcode -->
                    <td>{{ order[7] }}</td>  <!-- Phone -->
                    <td>{{ order[8] }}</td>  <!-- Submitted At -->
                    <td>
                        <!-- Delete Button -->
                        <form action="{{ url_for('delete_order', order_id=order[0]) }}" method="POST" style="display:inline;">
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>

                        <!-- Mark as Complete Button -->
                        <form action="{{ url_for('mark_complete', order_id=order[0]) }}" method="POST" style="display:inline;">
                            <button type="submit" class="btn btn-success btn-sm">Mark as Complete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Logout Container -->
    <div class="container text-center mt-4">
        <a href="{{ url_for('completed_jobs') }}" class="btn btn-info btn-lg mb-3">View Completed Jobs</a>
        
        <!-- Logout Button -->
        <form action="{{ url_for('logout') }}" method="POST" class="d-inline-block">
            <button type="submit" class="btn btn-warning btn-lg mb-3">Logout</button>
        </form>
    </div>

<h2 class="text-center text-white">Website Analytics</h2>
<div class="row">
    <div class="col-md-4">
        <div class="card text-center bg-primary text-white">
            <div class="card-body">
                <h4>Total Visitors</h4>
                <h2 id="total-visitors">Loading...</h2>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card text-center bg-success text-white">
            <div class="card-body">
                <h4>Page Views</h4>
                <h2 id="page-views">Loading...</h2>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card text-center bg-warning text-white">
            <div class="card-body">
                <h4>Most Visited Page</h4>
                <h2 id="top-page">Loading...</h2>
            </div>
        </div>
    </div>
</div>

<script>
    async function fetchAnalytics() {
        try {
            let response = await fetch('/analytics');
            let data = await response.json();
            if (data.error) {
                document.getElementById('total-visitors').textContent = "Error";
                document.getElementById('page-views').textContent = "Error";
                document.getElementById('top-page').textContent = "Error";
            } else {
                document.getElementById('total-visitors').textContent = data.total_users;
                document.getElementById('page-views').textContent = data.total_pageviews;
                document.getElementById('top-page').textContent = data.top_page;
            }
        } catch (error) {
            console.error("Error fetching analytics:", error);
        }
    }

    fetchAnalytics();
</script>


    <!-- Bootstrap JS and Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

