data_entry.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <title>Sales Entry</title>

</head>
<body>
<nav class="navbar justify-content-center navbar-dark bg-dark">
    <a class="navbar-brand" href="home">Home</a>

    <a class="navbar-brand" href="sales_entry">Sales Entry</a>

    <a class="navbar-brand" href="product_info">Product Info</a>

    <a class="navbar-brand" href="check_stock">Check Stock</a>

    <a class="navbar-brand" href="sales_representative_status">Profile</a>

    <a class="navbar-brand" href="logout">Log Out</a>

</nav>
<div class="container">
    <div class="jumbotron">
        <h1 class="text-center">Sales Data Entry</h1>
        <form method="POST" action="">
            {% csrf_token %}

            <br>
            <div class="form-row">
                <div class="col">
                    <input type="text" class="form-control" placeholder="Name" name="name" required>
                </div>
                <div class="col">
                    <input type="number" class="form-control" placeholder="Phone No" name="phone_no" required>
                </div>
            </div>

            <br>
            <div class="form-row">
                <div class="col">
                    <input type="text" class="form-control" placeholder="Area" name="area" required>
                </div>
                <div class="col">
                    <input type="text" class="form-control" placeholder="District" name="district">
                </div>
            </div>

            <br>
            <div class="form-row">
                <div class="col">
                    <input type="text" class="form-control" placeholder="Postal Code" name="postal_code">
                </div>
                <div class="col">
                    <select class="form-control" id="exampleFormControlSelect1" name="imei">
                        <option disabled="True"> IMEI</option>
                        {% for data in available_imei %}
                            <option> {{ data.imei }}</option>
                        {% endfor %}
                    </select>
                </div>


            </div>

            <br>
            <div class="form-row">
                <div class="col">
                    <input type="date" class="form-control" placeholder="Date" name="date_of_sell">
                </div>
                <div class="col">
                    Employee ID: {{ employee_id }}
                </div>
            </div>
            <br>
            <div class="text-center">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>

        </form>
    </div>
</div>


{% if logged_flag == 1 %}
    {% if messages %}
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
            <div class="toast-header">
                <strong class="mr-auto">Welcome</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                {% for message in messages %}
                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                {% endfor %}
            </div>
        </div>
    {% endif %}
{% endif %}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    if (window.history.replaceState) {
        window.history.replaceState(null, null, window.location.href);
    }
</script>

<script>
    $(document).ready(function () {
        $('.toast').toast('show');
    });
</script>
</body>
</html>