<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crime Calculator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .calculator-card {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .calculator-header {
            background: #0d6efd;
            color: white;
            padding: 15px 20px;
            border-radius: 10px 10px 0 0;
        }
        .calculator-body {
            padding: 20px;
        }
        .crime-item {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
        .selected-crime {
            border-left: 4px solid #0d6efd;
        }
        .felony {
            border-left: 4px solid #dc3545;
        }
        .totals {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="calculator-card">
        <div class="calculator-header d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0"><i class="bi bi-calculator me-2"></i>Crime Calculator</h5>
            </div>
            <div>
                <% if (user && user.is_admin) { %>
                    <a href="/admin" class="btn btn-sm btn-outline-light me-2">
                        <i class="bi bi-shield-lock me-1"></i> Admin
                    </a>
                <% } %>
                <a href="/auth/logout" class="btn btn-sm btn-outline-light">
                    <i class="bi bi-box-arrow-right me-1"></i> Logout
                </a>
            </div>
        </div>
        <div class="calculator-body">
            <form method="GET" action="/dashboard" class="mb-4">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input type="text" name="search" class="form-control" value="<%= searchTerm || '' %>" placeholder="Search crimes...">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-search me-1"></i> Search
                        </button>
                    </div>
                </div>
            </form>

            <div class="row">
                <div class="col-md-6">
                    <h3>Available Crimes</h3>
                    <div class="list-group mb-3">
                        <% if (crimes && crimes.length > 0) { %>
                            <% crimes.forEach(crime => { %>
                                <form method="POST" action="/dashboard/add-crime" class="mb-2">
                                    <input type="hidden" name="crimeId" value="<%= crime.id %>">
                                    <button type="submit" class="btn btn-outline-primary w-100 text-start">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <h6 class="mb-1"><%= crime.name %></h6>
                                                <p class="text-muted small mb-0"><%= crime.description || 'No description' %></p>
                                            </div>
                                            <div class="text-end">
                                                <div class="fw-bold">$<%= crime.fine.toFixed(2) %></div>
                                                <div class="small text-muted">
                                                    <% if (crime.jail_minutes < 60) { %>
                                                        <%= crime.jail_minutes %> minutes
                                                    <% } else { %>
                                                        <%= Math.floor(crime.jail_minutes / 60) %>h <%= crime.jail_minutes % 60 %>m
                                                    <% } %>
                                                </div>
                                            </div>
                                        </div>
                                    </button>
                                </form>
                            <% }); %>
                        <% } else { %>
                            <div class="alert alert-info mb-0">
                                No crimes found. Try a different search term.
                            </div>
                        <% } %>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3>Selected Crimes</h3>
                        <% if (selectedCrimes && selectedCrimes.length > 0) { %>
                            <form method="POST" action="/dashboard/clear-crimes" class="mb-0">
                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash me-1"></i> Clear All
                                </button>
                            </form>
                        <% } %>
                    </div>
                    
                    <div class="list-group mb-3">
                        <% if (selectedCrimes && selectedCrimes.length > 0) { %>
                            <% selectedCrimes.forEach((crime, index) => { %>
                                <div class="crime-item selected-crime mb-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-1"><%= crime.name %></h6>
                                            <div class="small text-muted">$<%= crime.fine.toFixed(2) %> each</div>
                                        </div>
                                        <div class="text-end">
                                            <div class="fw-bold">$<%= (crime.fine * crime.quantity).toFixed(2) %></div>
                                            <div class="small">
                                                <% if (crime.jail_minutes < 60) { %>
                                                    <%= crime.jail_minutes * crime.quantity %> minutes
                                                <% } else { %>
                                                    <%= Math.floor((crime.jail_minutes * crime.quantity) / 60) %>h <%= (crime.jail_minutes * crime.quantity) % 60 %>m
                                                <% } %>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2 d-flex justify-content-end">
                                        <form method="POST" action="/dashboard/update-quantity" class="d-inline me-2">
                                            <input type="hidden" name="crimeIndex" value="<%= index %>">
                                            <input type="hidden" name="newQuantity" value="<%= crime.quantity - 1 %>">
                                            <button type="submit" class="btn btn-sm btn-outline-secondary" <%= crime.quantity <= 1 ? 'disabled' : '' %>>
                                                <i class="bi bi-dash"></i>
                                            </button>
                                        </form>
                                        <span class="mx-2 align-self-center"><%= crime.quantity %>x</span>
                                        <form method="POST" action="/dashboard/update-quantity" class="d-inline me-2">
                                            <input type="hidden" name="crimeIndex" value="<%= index %>">
                                            <input type="hidden" name="newQuantity" value="<%= crime.quantity + 1 %>">
                                            <button type="submit" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-plus"></i>
                                            </button>
                                        </form>
                                        <form method="POST" action="/dashboard/remove-crime" class="d-inline">
                                            <input type="hidden" name="crimeIndex" value="<%= index %>">
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            <% }); %>
                        <% } else { %>
                            <div class="alert alert-info mb-0">
                                No crimes selected. Select crimes from the left panel.
                            </div>
                        <% } %>
                    </div>
                    
                    <div class="totals">
                        <h5>Totals</h5>
                        <p>Total Fine: $<%= (selectedCrimes || []).reduce((sum, crime) => sum + (crime.fine * crime.quantity), 0).toFixed(2) %></p>
                        <p>Total Time: 
                            <% 
                                const totalMinutes = (selectedCrimes || []).reduce((sum, crime) => sum + (crime.jail_minutes * crime.quantity), 0);
                                if (totalMinutes < 60) {
                            %>
                                <%= totalMinutes %> minutes
                            <% } else { %>
                                <%= Math.floor(totalMinutes / 60) %> hours <%= totalMinutes % 60 %> minutes
                            <% } %>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

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