{% extends 'site/base.html' %}
{% load static %}

{% block title %}

{% endblock title %}


{% block css %}
<link rel="stylesheet" href="{% static 'css/checkout.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">

<style>
  .loading-message {
    font-size: 1.2rem;
    font-weight: bold;
  }
</style>

{% endblock css %}


{% block content %}


<section class="inner-section sm-banner single-banner"
  style="background: url('/static/images/single-banner.jpg') no-repeat center;">
  <div class="container">
    <h2>Invoice</h2>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="shop-4column.html">shop</a></li>
      <li class="breadcrumb-item active" aria-current="page">Invoice</li>
    </ol>
  </div>
</section>
<!--=====================================
                    INVOICE PART START
        =======================================-->
<section class="inner-section invoice-part">
  <div class="container">
    <div class="row">


      <div class="col-lg-12">
        <div class="alert-info">
          <p>Thank you! We have recieved your order.</p>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="account-card">
          <div class="account-title">
            <h4>order recieved</h4>
          </div>
          <div class="account-content">

            <div class="invoice-recieved">
              <h6>Order number: <span>{{ order.id }}</span></h6>
              <h6>Order date: <span>{{ order.created_at|date:"F d, Y H:i:s" }}</span></h6>
              <h6>Total amount: <span>৳ {{ order.total_payment }}</span></h6>
              <h6>Total Points: <span>{{ order.total_points }}</span></h6>
              <h6>Payment method: <span>{{ order.delivery_option }}</span></h6>
            </div>

          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="account-card">
          <div class="account-title">
            <h4>Order Details</h4>
          </div>
          <div class="account-content">

            <ul class="invoice-details">
              <li>
                <h6>Total Item</h6>
                <p>{{ order.items_total }} Items</p>
              </li>

              <li>
                <h6>Delivery Location</h6>
                <p>{{ order.delivery_address }}</p>
              </li>
              <li>
                <h6>Delivery Status:</h6>
                <p>{{ order.delivery_status }}</p>
              </li>
              <li>
                <h6>Payment Status:</h6>
                <p>{{ order.payment_status }}</p>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="account-card">
          <div class="account-title">
            <h4>Amount Details</h4>
          </div>
          <div class="account-content">

            <ul class="invoice-details">
              <li>
                <h6>Sub Total</h6>
                <p>৳ {{ order.subtotal }}</p>
              </li>
              <li>
                <h6>Discount</h6>
                <p>৳ {{ order.discount }}</p>
              </li>
              <li>
                <h6>Payment Method</h6>
                <p>{{ order.delivery_option }}</p>
              </li>
              <li>
                <h6>Total<small>(Incl. VAT)</small></h6>
                <p>৳ {{ order.total_payment }}</p>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="table-scroll">
          <table class="table-list">
            <thead>
              <tr>
                <th scope="col">Product id</th>
                <th scope="col">Product</th>
                <th scope="col">Name</th>
                <th scope="col">Price</th>
                <th scope="col">quantity</th>
              </tr>
            </thead>
            <tbody>
              {% for item in order.orderitem_set.all %}
              <tr>
                <td class="table-serial">
                  <h6>{{ forloop.counter }}</h6>
                </td>
                <td class="table-image"><img src="{{ item.product.image.url }}" alt="{{ item.product.title }}"></td>
                <td class="table-name">
                  <h6>{{ item.product.title }}</h6>
                </td>
                <td class="table-price">
                  <h6>৳ {{ item.price }}</h6>
                </td>
                <td class="table-quantity">
                  <h6>{{ item.quantity }}</h6>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12 text-center mt-5">

        <div class="back-home">
          <a href="/">Back to Home</a>
        </div>
      </div>
    </div>
  </div>
</section>
<!--=====================================
                  INVOICE PART END
      =======================================-->



<section class="intro-part">
  <div class="container">
    <div class="row intro-content">
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-truck"></i></div>
          <div class="intro-content">
            <h5>free home delivery</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-sync-alt"></i></div>
          <div class="intro-content">
            <h5>instant return policy</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-headset"></i></div>
          <div class="intro-content">
            <h5>quick support system</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-lock"></i></div>
          <div class="intro-content">
            <h5>secure payment way</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


{% include 'site/includes/newsletter.html' %}


{% endblock content %}



{% block js %}
{% include 'site/page/order/js_files/invoice_js.html' %}


{% endblock js %}