url = "/seller/order/:id"
layout = "seller-master"
title = "Seller order detail"
meta_title = "Seller Order"
==
<?php
function onStart() {
    $this["orderId"] = $this->param("id");
}
?>
==
<div class="intro-y flex flex-col sm:flex-row items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">
        {{'order.detail.title'|_}}
    </h2>
    <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
    </div>
</div>
<!-- BEGIN: Transaction Details -->
{% partial "seller/loader" loader_id="loader_seller_order" %}
<div class="intro-y grid grid-cols-11 gap-5 mt-5">
    <div class="col-span-12 lg:col-span-4 2xl:col-span-3" id="order_content">
        <div class="box p-5 rounded-md">
            <div class="flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5 mb-5">
                <div class="font-medium text-base truncate">{{'order.detail.title'|_}}</div>

            </div>
            <div class="flex items-center"> <i data-lucide="clipboard" class="w-4 h-4 text-slate-500 mr-2"></i>
                {{'order.no.title'|_}}: <a href=""
                    class="underline decoration-dotted ml-1" id="order_no"></a> </div>

            <div class="flex items-center mt-3"> <i data-lucide="user" class="w-4 h-4 text-slate-500 mr-2"></i>
                {{'order.customer.title'|_}}: <a href="" class="ml-1" id="order_customer"></a> </div>

<!--            <div class="flex items-center mt-3"> <i data-lucide="phone" class="w-4 h-4 text-slate-500 mr-2"></i>-->
<!--                {{'order.phone.title'|_}}: <a href="" class="ml-1" id="order_phone"></a> </div>-->

            <div class="flex items-center mt-3"> <i data-lucide="calendar" class="w-4 h-4 text-slate-500 mr-2"></i>
                {{'order.date'|_}}: <a href="" class="ml-1" id="order_date"></a> </div>

            <div class="flex items-center mt-3"> <i data-lucide="package" class="w-4 h-4 text-slate-500 mr-2"></i>
                {{'order.status.title'|_}} <span class="bg-success/20 text-success rounded px-2 ml-1" id="order_status"></span>
            </div>
<!--            <div class="flex items-center mt-3"> <i data-lucide="map-pin" class="w-4 h-4 text-slate-500 mr-2"></i>-->
<!--                {{'order.address'|_}} <a href="" class="ml-1" id="order_address"></a>-->
<!--            </div>-->
            <div class="flex items-center border-t border-slate-200/60 dark:border-darkmode-400 pt-5 mt-5 font-medium">
                <i data-lucide="credit-card" class="w-4 h-4 text-slate-500 mr-2"></i> {{'grand.total.title'|_}}
                <div class="ml-auto" id="order_total"></div>
            </div>
        </div>

    </div>
    <div class="col-span-12 lg:col-span-7 2xl:col-span-8">
        <div class="box p-5 rounded-md">
            <div class="flex items-center border-b border-slate-200/60 dark:border-darkmode-400 pb-5 mb-5">
                <div class="font-medium text-base truncate">{{'order.items.title'|_}}</div>

            </div>
            <div class="overflow-auto lg:overflow-visible -mt-3">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th class="whitespace-nowrap !py-5">{{'product.title'|_}}</th>
                            <th class="whitespace-nowrap text-center">{{'product.price.title'|_}}</th>
                            <th class="whitespace-nowrap text-center">{{'product.qty'|_}}</th>
                            <th class="whitespace-nowrap text-center">{{'product.total'|_}}</th>
                        </tr>
                    </thead>
                    <tbody id="order_items">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- END: Transaction Details -->

{% partial "sellerApi/getOrder" sellerOrderId=orderId %}
