{% extends 'base.html' %} {% block content %}
{% load crispy_forms_tags %}

<!-- Navbar -->
<!-- Navbar -->

<!--Main layout-->
<main>
  <div class="container wow fadeIn">
    <!-- Heading -->
    <h2 class="my-5 h2 text-center">Checkout form</h2>

    <!--Grid row-->
    <div class="row">
      <!--Grid column-->
      <div class="col-md-8 mb-4">
        <!--Card-->
        <div class="card">
          <!--Card content-->
   {% comment %}        <form action="">
            {% csrf_token %}
            {{form|crispy}}
            <button class="btn btn-primary btn-lg btn-block" type="submit">
              Continue to checkout
            </button>
          </form> {% endcomment %}
          <form method="POST" class="card-body">
            {% csrf_token %}
            <!--Grid row-->
            {% if not request.user.is_authenticated %}
            <div class="row">
              <!--Grid column-->
              <div class="col-md-6 mb-2">
                <!--firstName-->
                <div class="md-form">
                  {% comment %} <input type="text" id="firstName" class="form-control" /> {% endcomment %}
                  {{form.FirstName}}
                  <label for="firstName" class="">First name</label>
                </div>
              </div>
              <!--Grid column-->

              <!--Grid column-->
              <div class="col-md-6 mb-2">
                <!--lastName-->
                <div class="md-form">
                  {% comment %} <input type="text" id="lastName" class="form-control" /> {% endcomment %}
                  {{form.LastName}}
                  <label for="lastName" class="">Last name</label>
                </div>
              </div>
              <!--Grid column-->
            </div>
            <!--Grid row-->

            <!--Username-->
            <div class="md-form input-group pl-0 mb-5">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">@</span>
              </div>
          {% comment %}     <input
                type="text"
                class="form-control py-0"
                placeholder="Username"
                aria-describedby="basic-addon1"
              /> {% endcomment %}
              {{form.UserName}}
            </div>

            <!--email-->
            <div class="md-form mb-4">
{% comment %}               <input
                type="text"
                id="email"
                class="form-control"
                placeholder="youremail@example.com"
              /> {% endcomment %}
              {{form.Email}}
              <label for="email" class="">Email (optional)</label>
            </div>
            {% endif %}
            <!--address-->
            <div class="md-form mb-5">
             {% comment %}  <input type="text" id="address" class="form-control" placeholder="1234 Main St"/> {% endcomment %}
             {{form.street_address}}
              <label for="address" class="" >Address</label>             
            </div>

            <!--address-2-->
            <div class="md-form mb-5">
           {% comment %}    <input
                type="text"
                id="address-2"
                class="form-control"
                placeholder="Apartment or suite"
              /> {% endcomment %}
              {{form.apartment_address}}
              <label for="address-2" class="">Address 2 (optional)</label>
            </div>

            <!--Grid row-->
            <div class="row">
              <!--Grid column-->
              <div class="col-lg-4 col-md-12 mb-4">
                <label for="country">Country</label>
          {% comment %}       <select
                  class="custom-select d-block w-100"
                  id="country"
                  required
                >
                  <option value="">Choose...</option>
                  <option>Nairobi</option>
                </select> {% endcomment %}
                {{form.country}}
                <div class="invalid-feedback">
                  Please select a valid country.
                </div>
              </div>
              <!--Grid column-->

              <!--Grid column-->
              <div class="col-lg-4 col-md-6 mb-4">
                <label for="state">State/County</label>
                <select class="custom-select d-block w-100" id="state" required>
                  <option value="">Choose...</option>
                  <option>CBD</option>
                </select>
                <div class="invalid-feedback">
                  Please provide a valid state.
                </div>
              </div>
              <!--Grid column-->

              <!--Grid column-->
              <div class="col-lg-4 col-md-6 mb-4">
                <label for="zip">Zip</label>
               {% comment %}  <input
                  type="text"
                  class="form-control"
                  id="zip"
                  placeholder=""
                  required
                /> {% endcomment %}
                {{form.zip}}
                <div class="invalid-feedback">Zip code required.</div>
              </div>
              <!--Grid column-->
            </div>
            <!--Grid row-->

            <hr/>

            <div class="custom-control custom-checkbox">
               <input
               {% if form.same_shipping_address.value %}checked{% endif %}
                type="checkbox"
                class="custom-control-input"
                id="same-address"
                name="same_shipping_address"
              /> 
              {{form.same_shipping_address}}
              <label class="custom-control-label" for="same-address"
                >Shipping address is the same as my billing address</label
              >
            </div>
            <div class="custom-control custom-checkbox">
              <input
              {% if form.save_info.value %}checked{% endif %}
                type="checkbox"
                class="custom-control-input"
                id="save-info"
                name="save_info"
              /> 
              {{form.save_info}}
              <label class="custom-control-label" for="save-info"
                >Save this information for next time</label
              >
            </div>

            <hr />

            <div class="d-block my-3">
              {% for name, value in  form.fields.payment_option.choices %}
              <div class="custom-control custom-radio">
               <input
                  id="{{name}}"
                  name="payment_option"
                  type="radio"
                  value="{{name}}"
                  class="custom-control-input"
                  required
                /> 
                <label class="custom-control-label" for="{{name}}"
                  >{{value}}</label
                >
              </div>
              {% endfor %}
            </div>
            <hr class="mb-4" />
            <button class="btn btn-primary btn-lg btn-block" type="submit">
              Continue to checkout
            </button>
          </form>
        </div>
        <!--/.Card-->
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-4 mb-4">
        <!-- Heading -->
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-muted">Your cart</span>
          <span class="badge badge-secondary badge-pill">3</span>
        </h4>

        <!-- Cart -->
        <ul class="list-group mb-3 z-depth-1">
          <li
            class="list-group-item d-flex justify-content-between lh-condensed"
          >
            <div>
              <h6 class="my-0">Product name</h6>
              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$12</span>
          </li>
          <li
            class="list-group-item d-flex justify-content-between lh-condensed"
          >
            <div>
              <h6 class="my-0">Second product</h6>
              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$8</span>
          </li>
          <li
            class="list-group-item d-flex justify-content-between lh-condensed"
          >
            <div>
              <h6 class="my-0">Third item</h6>
              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$5</span>
          </li>
          <li class="list-group-item d-flex justify-content-between bg-light">
            <div class="text-success">
              <h6 class="my-0">Promo code</h6>
              <small>EXAMPLECODE</small>
            </div>
            <span class="text-success">-$5</span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Total (USD)</span>
            <strong>$20</strong>
          </li>
        </ul>
        <!-- Cart -->

        <!-- Promo code -->
        <form class="card p-2">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              placeholder="Promo code"
              aria-label="Recipient's username"
              aria-describedby="basic-addon2"
            />
            <div class="input-group-append">
              <button
                class="btn btn-secondary btn-md waves-effect m-0"
                type="button"
              >
                Redeem
              </button>
            </div>
          </div>
        </form>
        <!-- Promo code -->
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
</main>
<!--Main layout-->

<!--Footer-->
<!--/.Footer-->

<!-- SCRIPTS -->
<!-- JQuery -->
{% endblock content %}