You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
4.2 KiB
HTML
81 lines
4.2 KiB
HTML
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
|
|
<div class="w-full xxlg1:w-[75%]">
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<div class="w-full bg-gray-50 px-3 py-3 border border-gray-100 shadow-md rounded-md flex flex-col s:flex-row justify-between items-start s:items-center gap-3">
|
|
<div>
|
|
<h1 class="text-secondosiblue text-xl">Order {{order.order_id}}</h1>
|
|
<p class="text-gray-500">{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
|
|
</div>
|
|
|
|
<p class="uppercase text-green-700 font-semibold {% if order.status == 'Completed' %} text-green-700 {% elif order.status == 'Pending' %} text-yellow-500 {% elif order.status == 'Failed' %} text-red-500 {% endif %}">{{order.status}}</p>
|
|
</div>
|
|
|
|
{% if order_items %}
|
|
<div class="w-full mt-10">
|
|
<p class="text-secondosiblue text-xl">Order Items</p>
|
|
<div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 gap-5 mt-3">
|
|
|
|
{% for item in order_items %}
|
|
<div class="w-full shadow-md border border-gray-200 flex flex-col justify-between rounded-t-md">
|
|
<div class="w-full h-full p-9 flex flex-col justify-center items-center gap-5 rounded-t-md bg-white">
|
|
<p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">{{item.item.title}}
|
|
</p>
|
|
</div>
|
|
<div class="w-full flex flex-col justify-center items-center text-center mb-2">
|
|
<p class="text-secondosiblue font-poppinsLight text-[17px] font-semibold">${{item.item.amount}}</p>
|
|
</div>
|
|
<a href="{% url 'deleteorderitem' item.id %}"><div
|
|
class="w-full px-3 py-2 text-white flex justify-center items-center gap-2 bg-red-500 rounded-b-md cursor-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-white">>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
|
|
<p>Remove</p>
|
|
</div></a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{% if services %}
|
|
<div class="w-full mt-10">
|
|
<p class="text-secondosiblue text-xl">Add Services</p>
|
|
<div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 gap-5 mt-3">
|
|
|
|
{% for service in services %}
|
|
<div class="w-full shadow-md border border-gray-200 flex flex-col justify-between rounded-t-md">
|
|
<div class="w-full h-full p-9 flex flex-col justify-center items-center gap-5 rounded-t-md bg-white">
|
|
<p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">{{service.title}}
|
|
</p>
|
|
</div>
|
|
<div class="w-full flex flex-col justify-center items-center text-center mb-2">
|
|
<p class="text-secondosiblue font-poppinsLight text-[17px] font-semibold">${{service.amount}}</p>
|
|
</div>
|
|
<a href="{% url 'addserviceinorder' service.id order.id %}"><div
|
|
class="w-full px-3 py-2 text-white flex justify-center items-center gap-2 bg-osiblue rounded-b-md cursor-pointer">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-4 h-4 text-white">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
<p>Add</p>
|
|
</div></a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %} |