<template>
    <div>
        <h2 class="mb-3 text-lg font-medium text-gray-300">
            {{ $t("Register.all_payments") }}
        </h2>

        <div
            class="overflow-x-auto table-fixed relative rounded-lg border border-[#E8ECEF]"
        >
            <table
                class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
            >
                <thead class="text-sm font-normal text-[#3F4254] bg-[#E8ECEF]">
                    <tr class="text-center whitespace-nowrap">
                        <th scope="col" class="tableHeading">
                            {{ $t("Register.payment_id") }}
                        </th>
                        <th scope="col" class="tableHeading">
                            {{ $t("Register.date") }}
                        </th>
                        <th scope="col" class="tableHeading">
                            {{ wallet.owner_type==='App\\Models\\User' ? $t("Register.to") : $t("Register.from")}}
                        </th>
                        <th scope="col" class="tableHeading">
                            {{ $t("Register.amount") }}
                        </th>
                        <th scope="col" class="tableHeading">
                            {{ $t("Register.actions") }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template v-if="payments.length > 0">
                        <tr
                            v-for="(payment, index) in payments"
                            :key="payment.id"
                            :class="[
                                'bg-white  border-[#E8ECEF] whitespace-nowrap  text-center',

                                index == payments.length - 1 ? '' : 'border-b',
                            ]"
                        >
                            <td class="tableItem">#{{ payment.id }}</td>
                            <td class="tableItem">
                                {{
                                    moment(String(payment.created_at)).format(
                                        "MMM DD, YYYY"
                                    )
                                }}
                            </td>
                            <td class="blurTableItem">
                                <div class="flex gap-x-1">
                                    <img
                                        :src="
                                           wallet.owner_type==='App\\Models\\User' ? payment.to_wallet.owner
                                                .profile_photo_url : payment.from_wallet.owner
                                                .profile_photo_url
                                        "
                                        alt="avatar"
                                        class="w-6 h-6 my-auto rounded-full"
                                    />
                                    <h4 class="whitespace-nowrap">
                                        {{
                                            payment.to_wallet.owner.id == 1
                                                ? "Muhandisin's Escrow"
                                                : wallet.owner_type==='App\\Models\\User' ? payment.to_wallet.owner
                                                    .name : payment.from_wallet.owner
                                                    .name
                                        }}
                                    </h4>
                                </div>
                            </td>
                            <td class="blurTableItem">
                                {{ currency(wallet.owner_type==='App\\Models\\User'? payment.amount : payment.amount_received, "USD") }}
                            </td>
                            <td class="px-6 py-7">
                                <Button
                                    :href="
                                        route(
                                            'user.wallet.payment.show',
                                            payment.id
                                        )
                                    "
                                    size="sm"
                                    buttonStyle="outline"
                                >
                                    {{ $t("Register.view_details") }}
                                </Button>
                            </td>
                        </tr>
                    </template>
                    <template v-else>
                        <tr>
                            <td
                                colspan="5"
                                class="py-10 text-center text-gray-500"
                            >
                                <div
                                    class="mx-auto max-w-max min-h-[300px] flex items-center justify-center flex-col"
                                >
                                    <svg
                                        class="scale-x-[-1]"
                                        width="166"
                                        height="150"
                                        viewBox="0 0 166 150"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            opacity="0.2"
                                            d="M4.23242 11.0342C4.23242 5.51134 8.70958 1.03418 14.2324 1.03418H130.709C136.232 1.03418 140.709 5.51133 140.709 11.0342V121.15C140.709 126.673 136.232 131.15 130.709 131.15H14.2324C8.70958 131.15 4.23242 126.673 4.23242 121.15V11.0342Z"
                                            fill="#50CD89"
                                        />
                                        <path
                                            d="M123.657 25V50.0403C123.657 51.7006 124.317 53.2929 125.491 54.4669C126.665 55.6408 128.257 56.3004 129.917 56.3004H154.958"
                                            stroke="#50CD89"
                                            stroke-width="10.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                        <path
                                            d="M67.3164 87.6008V37.5202C67.3164 34.1996 68.6355 31.0151 70.9834 28.6671C73.3314 26.3191 76.516 25 79.8365 25H123.657L154.957 56.3004V125.161C154.957 128.482 153.638 131.666 151.29 134.014C148.942 136.362 145.758 137.681 142.437 137.681H108.007M48.5361 125.161H92.3567M92.3567 125.161L73.5764 106.381M92.3567 125.161L73.5764 143.941"
                                            stroke="#50CD89"
                                            stroke-width="10.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>

                                    <h4
                                        class="mt-2 text-sm font-medium leading-4 text-center text-gray-200"
                                    >
                                        {{
                                            $t("Register.wallet_no_activities")
                                        }}
                                    </h4>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import Button from "@/Jetstream/Button";
export default {
    props: {
        payments: [],
        wallet:Object,
    },
    components: {
        Button,
    },
};
</script>

<style>
.tableHeading {
    padding: 20px;
    font-weight: 500;
    font-size: 14;
    align-items: center;
}
.tableItem {
    padding: 30px 20px;
    font-size: 12px;
    font-weight: 500;
    align-items: center;
    color: #5e6278;
}
.blurTableItem {
    padding: 30px 20px;
    font-size: 12px;
    font-weight: 500;
    align-items: center;
    color: #b5b5c3;
}
</style>
