<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Page: Orders
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="table-responsive">
    <table class="table table-centered table-borderless table-hover table-nowrap mb-0">
        <thead class="table-light">
            <tr>
                <th class="text-center" style="width: 80px;">{{ langs.order.item_id }}</th>
                <th class="text-center" style="width: 180px;">{{ langs.order.woo_product }}</th>
                <th class="text-center">{{ langs.order.thumbnail }}</th>
                <th>{{ langs.order.options }}</th>
                <th class="text-center" style="width: 130px;">{{ langs.order.total }}</th>
                <th>{{ langs.order.note }}</th>
            </tr>
        </thead>
        <tbody v-if="pageDetail.data.items != 'undefined'">
            <tr v-for="(item, iid) in pageDetail.data.items" :key="iid">
                <td class="text-center"><strong>#{{ item.id }}</strong></td>
                <td class="text-center">
                    <div class="d-flex flex-column align-items-center row-gap-2">
                        <a :href="adminUrl +'post.php?post='+ item.product.id +'&action=edit'" class="text-info tooltip-right" :data-tooltip="langs.order.open_woo_product" target="_blank">
                            <strong>{{ item.product.name }}</strong>
                        </a>
                        <hr class="p-0 m-0 w-100">
                        <a href="javascript:void(0);" class="btn btn-sm btn-info" @click="openDownload(item)">
                            <i class="material-icons material-symbols-outlined">download</i> {{ langs.order.download_design }}
                        </a>
                        <template v-if="item.uploads.length">
                            <hr class="p-0 m-0 w-100">
                            {{ langs.order.file_upload }}
                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <a :href="uploadUrl +'/orders/'+ item.folder +'/upload/'+ upload" target="_blank" class="btn btn-light p-0" v-for="(upload, uid) in item.uploads">
                                    <img :src="uploadUrl +'/orders/'+ item.folder +'/upload/'+ upload" :alt="upload" class="img-fluid avatar-sm rounded w-auto">
                                </a>
                            </div>
                        </template>
                    </div>
                </td>
                <td class="text-center">
                    <div class="d-flex flex-wrap justify-content-center align-items-center gap-1">
                        <img v-for="(thumb, tid) in item.thumb" :key="tid" :src="showImg(item.folder+'/thumb/'+thumb)" alt="Order Thumb Item" class="border bg-light" height="80">
                    </div>
                </td>
                <td>
                    <div class="d-flex flex-column row-gap-1">
                        <span v-for="(option, key) in item.options" :key="key">{{ key }}: {{ option }}</span>
                        <span>
                            {{ langs.order.printing_type }}: <a :href="adminUrl +'admin.php?page='+ pdappPluginSlug +'-printings&edit='+ item.print.id" class="badge badge-sm bg-info" target="_blank"><strong>{{ item.print.title }}</strong></a>
                        </span>
                    </div>
                </td>
                <td class="text-center">
                    <div class="d-flex flex-column align-items-center row-gap-1">
                        <span>{{ item.qty }} x ${{ (item.price/item.qty).toFixed(2) }}</span>
                        <hr class="p-0 m-0 w-100">
                        <span>${{ item.price }}</span>
                    </div>
                </td>
                <td>{{ item.note }}</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="d-block w-100 text-end mt-2">
    <button type="button" class="btn w-sm btn-danger waves-effect" @click="showListOrders('')">{{ langs.back }}</button>
</div>