{% extends "../layout.html" %}
{% load static %}
{% block menubutton %}<li><a class="getstarted scrollto" href="{% url 'logout' %}">Logout</a></li>{% endblock %}

{% block content %}

<main id="main" class="main">
  <div class="pagetitle">
    <h1>New Order</h1>
  </div>
<section class="section ordersection">
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Provide Order Details</h5>

    <!-- Floating Labels Form -->
    <form class="form row g-3" method="POST" action="{% url 'create' %}">
      {% if insert %}
      <div class="alert alert-success">
        <a class="close" href="#" data-dismiss="alert">*</a>
        New order created...
      </div>
      {% endif %}
      <div class="col-md-4">
        <div class="form-floating mb-3">
          <select class="form-select ordertype" id="floatingSelect" aria-label="Ordertype" name="type">
            <option value="1">Incoming Order</option>
            <option value="2">Outgoing Order</option>
          </select>
          <label for="floatingSelect">Order Type</label>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-floating mb-3">
          <select class="form-select product" id="floatingSelect" aria-label="product" name="product">
            {% for p in product %}
            <option value="{{ p.PRODUCT_ID }}">{{ p.PRODUCT_NAME }}</option>
            {% endfor %}
          </select>
          <label for="floatingSelect">Product</label>
        </div>
      </div>

      <div class="col-md-2">
        <div class="form-floating">
          <input type="text" class="form-control quantity" id="quantity" placeholder="Quantity" name="quantity">
          <label for="floatingPrice">Quantity</label>
        </div>
      </div>

      <div class="col-md-2">
        <div class="form-floating">
          <input type="text" class="form-control price" id="price" placeholder="Price" name="price">
          <label for="floatingPrice">Price $</label>
          
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-floating mb-3">
          <select class="form-select supplier" id="supplier" aria-label="Supplier" name="supplier">
            {% for s in supplier %}
            <option value="{{ s.SUP_ID }}">{{ s.SUP_NAME }}</option>
            {% endfor %}
          </select>
          <label for="floatingSelect">Supplier</label>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-floating mb-3">
          <select class="form-select distributor" id="distributor" aria-label="Distributor" name="distributor">
            {% for d in distributor %}
            <option value="{{ d.DIST_ID }}">{{ d.DIST_NAME }}</option>
            {% endfor %}
          </select>
          <label for="floatingSelect">Distributor</label>
        </div>
      </div>

      {% for u in user %}
      <div class="col-md-6">  
        <div class="form-floating">
          <input type="text" class="form-control" id="Name" placeholder="Your Name" value="{{ u.FIRSTNAME }}" name="name">
          <label for="floatingName">Name</label>
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-floating">
          <input type="text" class="form-control" id="Mobile" placeholder="Mobile" value="{{ u.CONTACT }}" name="contact">
          <label for="floatingEmail">Mobile</label>
        </div>
      </div>

      <div class="col-12">
        <div class="form-floating">
          <textarea class="form-control" placeholder="Address" id="floatingTextarea" style="height: 100px;" name="address">{{ u.ADDRESS }}</textarea>
          <label for="floatingTextarea">Address</label>
        </div>
      </div>

      <div class="col-md-4">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingCity" placeholder="City" value="{{ u.CITY }}" name="city">
          <label for="floatingCity">City</label>
        </div>
      </div>

      <div class="form-floating col-md-4">
        <select class="form-select state" id="state" aria-label="State" name="state">
          <option selected>{{ u.SSTATE }}</option>
          <option value="AL">Alabama</option>
          <option value="KY">Kentucky</option>
          <option value="OH">Ohio</option>
          <option value="AK">Alaska</option>
          <option value="LA">Louisiana</option>
          <option value="OK">Oklahoma</option>
          <option value="AZ">Arizona</option>
          <option value="ME">Maine</option>
          <option value="OR">Oregon</option>
          <option value="AR">Arkansas</option>
          <option value="MD">Maryland</option>
          <option value="PA">Pennsylvania</option>
          <option value="AS">American Samoa</option>
          <option value="MA">Massachusetts</option>
          <option value="PR">Puerto Rico</option>
          <option value="CA">California</option>
          <option value="MI">Michigan</option>
          <option value="RI">Rhode Island</option>
          <option value="CO">Colorado</option>
          <option value="MN">Minnesota</option>
          <option value="SC">South Carolina</option>
          <option value="CT">Connecticut</option>
          <option value="MS">Mississippi</option>
          <option value="SD">South Dakota</option>
          <option value="DE">Delaware</option>
          <option value="MO">Missouri</option>
          <option value="TN">Tennessee</option>
          <option value="DC">District of Columbia</option>
          <option value="MT">Montana</option>
          <option value="TX">Texas</option>
          <option value="FL">Florida</option>
          <option value="NE">Nebraska</option>
          <option value="TT">Trust Territories</option>
          <option value="GA">Georgia</option>
          <option value="NV">Nevada</option>
          <option value="UT">Utah</option>
          <option value="GU">Guam</option>
          <option value="NH">New Hampshire</option>
          <option value="VT">Vermont</option>
          <option value="HI">Hawaii</option>
          <option value="NJ">New Jersey</option>
          <option value="VA">Virginia</option>
          <option value="ID">Idaho</option>
          <option value="NM">New Mexico</option>
          <option value="VI">Virgin Islands</option>
          <option value="IL">Illinois</option>
          <option value="NY">New York</option>
          <option value="WA">Washington</option>
          <option value="IN">Indiana</option>
          <option value="NC">North Carolina</option>
          <option value="WV">West Virginia</option>
          <option value="IA">Iowa</option>
          <option value="ND">North Dakota</option>
          <option value="WI">Wisconsin</option>
          <option value="KS">Kansas</option>
          <option value="MP">Northern Mariana Island</option>
          <option value="WY">Wyoming</option>

        </select>
        <label for="floatingSelect">State</label>
      </div>

      <div class="col-md-2">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingZip" placeholder="Zip" value="{{ u.ZIPCODE }}" name="zip">
          <label for="floatingZip">Zip</label>
        </div>
      </div>

      {% endfor %} 
      <div class="text-center">
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-secondary">Reset</button>
      </div>
    </form><!-- End floating Labels Form -->

  </div>
</div>
</section>
</main>
<script src="{% static 'assets/js/neworder.js' %}"></script>
{% endblock %}