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

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZJ4YKQNNG1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-ZJ4YKQNNG1');
</script>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Work Order Form</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    
    <!-- Cyborg Bootstrap Theme -->
    <link href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.0/dist/cyborg/bootstrap.min.css" rel="stylesheet">
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   
    <link rel="icon" href="{{ url_for('static', filename='Logo.png') }}">
   

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
</head>

<body> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="{{ url_for('static', filename='Logo.png') }}" width="60" height="60">		
    <a class="navbar-brand" href="https://thorshammerelectrical.com/index.html">Thor's Hammer Electrical</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item active">
                <a class="nav-link" href="https://thorshammerelectrical.com/About.html">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://thorshammerelectrical.com/Services.html">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://www.help.thorshammerelectrical.com">Submit Work-Order</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://thorshammerelectrical.com/Review.html">Reviews</a>
            </li>
        </ul>
    </div>
</nav>

        <!-- Form Container -->
        <div class="col-lg-8 mx-auto">
            <h1 class="text-white">Thor's Hammer Electrical Work-Order Form</h1>
            <p class="text-white">Got a job for us? Submit it here and Leonard will get back to you as soon as possible!</p>
            
            <form action="/submit" method="POST">
                <!-- Form Fields -->
                <div class="mb-4">
                    <label for="name" class="form-label">Name:</label>
                    <input type="text" id="name" name="name" class="form-control" required>
                </div>

                <div class="mb-4">
                    <label for="job" class="form-label">Job Details:</label>
                    <textarea id="job" name="job" class="form-control" required></textarea>
                </div>

                <div class="mb-4">
                    <label for="address" class="form-label">Address:</label>
                    <textarea id="address" name="address" class="form-control" required></textarea>
                </div>

                <div class="mb-4">
                    <label for="city" class="form-label">City:</label>
                    <input type="text" id="city" name="city" class="form-control" required>
                </div>

                <div class="mb-4">
                    <label for="state" class="form-label">State:</label>
                    <input type="text" id="state" name="state" class="form-control" required>
                </div>

                <div class="mb-4">
                    <label for="zipcode" class="form-label">Zip Code:</label>
                    <input type="text" id="zipcode" name="zipcode" class="form-control" required>
                </div>

                <div class="mb-4">
                    <label for="phone" class="form-label">Phone Number:</label>
                    <input type="text" id="phone" name="phone" class="form-control" required>
                </div>

                <!-- Submit Button -->
                <div class="d-grid gap-2">
                    <input type="submit" value="Submit" class="btn btn-danger btn-lg">
                </div>
            </form>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <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>

