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

{% block css %}

{% endblock css %}

{% block content %}
<!-- Start::app-content -->
<div class="main-content app-content">
  <div class="container-fluid">

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
      <h1 class="page-title fw-semibold fs-18 mb-0">Data Tables</h1>
      <div class="ms-md-1 ms-0">
        <nav>
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="#">Tables</a></li>
            <li class="breadcrumb-item active" aria-current="page">Data Tables</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- Page Header Close -->




    <!-- Start:: row-4 -->
    <div class="row">
      <div class="col-xl-12">
        <div class="card custom-card">
          <div class="card-header">
          </div>

          <div class="card-body">
            <h2>Order Details - {{ order.full_name }}</h2>

            <p><strong>Order ID:</strong> {{ order.id }}</p>
            <p><strong>Full Name:</strong> {{ order.full_name }}</p>
            <p><strong>Mobile Number:</strong> {{ order.mobile_number }}</p>
            <p><strong>City/Municipality:</strong> {{ order.city }}</p>
            <p><strong>Area:</strong> {{ order.area }}</p>
            <p><strong>Delivery Address:</strong> {{ order.delivery_address }}</p>
            <p><strong>Delivery Option:</strong> {{ order.get_delivery_option_display }}</p>

            <p><strong>Delivery Status:</strong> {{ order.get_delivery_status_display }}</p>
            <p><strong>Payment Status:</strong> {{ order.get_payment_status_display }}</p>
            <br>
            <hr>
            <div>
              <p><strong>Subtotal:</strong> ${{ order.subtotal }}</p>
              <p><strong>Items Total:</strong> {{ order.items_total }}</p>
              <p><strong>Discount:</strong> ${{ order.discount }}</p>
              <p><strong>Total Payment:</strong> ${{ order.total_payment }}</p>
              <p><strong>Total Points:</strong> {{ order.total_points }}</p>
            </div>

          </div>
          <div class="card-footer">
            <h2>Order Items</h2>
            <table id="" class="table table-bordered text-nowrap" style="width:100%">
              <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 }}" style="width: 50px;"></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 class="card-footer">
            <a href="{% url 'order_edit' order_id=order.id %}" class="btn btn-warning">Edit</a>
            <form action="{% url 'order_destroy' order_id=order.id %}" method="post" class="d-inline">
              {% csrf_token %}
              <button type="submit" class="btn btn-danger">Delete</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- End:: row-4 -->



  </div>
</div>
<!-- End::app-content -->


{% endblock content %}


{% block js %}

{% endblock js %}