<script setup>
const purchasedProducts = [
    {
        name: 'Vuexy Admin Template',
        description: 'HTML Admin Template',
        qty: 1,
        cost: 32,
    },
    {
        name: 'Frest Admin Template',
        description: 'Angular Admin Template',
        qty: 1,
        cost: 22,
    },
    {
        name: 'Apex Admin Template',
        description: 'HTML Admin Template',
        qty: 2,
        cost: 17,
    },
    {
        name: 'Robust Admin Template',
        description: 'React Admin Template',
        qty: 1,
        cost: 66,
    },
];
</script>
<template>
    <section>
        <VRow>
            <VCol cols="12" md="9">
                <VCard>
                    <!-- SECTION Header -->
                    <VCardText class="d-flex flex-wrap justify-space-between flex-column flex-sm-row print-row">
                        <!-- 👉 Left Content -->
                        <div class="ma-sm-4">
                            <div class="d-flex align-center mb-6">
                                <!-- 👉 Logo -->
                                <router-link to="/" class="mb-2 mt-2"
                                    style="width: 100%;position: relative;display: block;">
                                    <span class="text-center">
                                        <VImg src="/assets/logo/logo.png" width="50" height="50" class="logo-img" />
                                    </span>
                                </router-link>
                            </div>

                            <!-- 👉 Address -->
                        </div>

                        <!-- 👉 Right Content -->
                        <div class="mt-5 ma-sm-4">
                            <!-- 👉 Invoice ID -->
                            <h6 class="font-weight-medium text-h4">
                                Invoice #5036
                            </h6>

                            <!-- 👉 Issue Date -->
                            <p class="my-3">
                                <span>Date: </span>
                                <span class="font-weight-medium"> 2024-03-19</span>
                            </p>

                            <!-- 👉 Due Date -->
                        </div>
                    </VCardText>
                    <!-- !SECTION -->

                    <VDivider />

                    <!-- 👉 Payment Details -->
                    <VCardText class="d-flex justify-space-between flex-wrap flex-column flex-sm-row print-row">
                        <div class="mt-4 ma-sm-4">
                            <h6 class="text-h6 font-weight-medium mb-6">
                                Shipping Information :
                            </h6>
                            <table>
                                <tr>
                                    <td class="pe-6 pb-1">
                                        Name:
                                    </td>
                                    <td class="pb-1">
                                        <span class="font-weight-medium">
                                            Mr. John
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-6 pb-1">
                                        Address:
                                    </td>
                                    <td class="pb-1">
                                        Model Town,American Bank, NA United States 12345
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </VCardText>
                    <!-- <VCardText class="d-flex justify-space-between flex-wrap flex-column flex-sm-row print-row">
                        <div class="mt-4 ma-sm-4">
                            <h6 class="text-h6 font-weight-medium mb-6">
                                Shipping Information :
                            </h6>
                            <table>
                                <tr>
                                    <td class="pe-6 pb-1">
                                        Address:
                                    </td>
                                    <td class="pb-1">
                                        <span class="font-weight-medium">
                                            Model Town
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-6 pb-1">
                                        APT/Suite:
                                    </td>
                                    <td class="pb-1">
                                        American Bank
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-6 pb-1">
                                        City:
                                    </td>
                                    <td class="pb-1">
                                        United States
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-6 pb-1">
                                        State:
                                    </td>
                                    <td class="pb-1">
                                        ETD95476213874685
                                    </td>
                                </tr>
                                <tr>
                                    <td class="pe-6 pb-1">
                                        ZipCode:
                                    </td>
                                    <td class="pb-1">
                                        BR91905
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </VCardText> -->

                    <!-- 👉 Table -->
                    <VDivider />

                    <VTable class="invoice-preview-table">
                        <thead>
                            <tr>
                                <th scope="col">
                                    ITEM
                                </th>
                                <th scope="col" class="text-center">
                                    COST
                                </th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr v-for="item in purchasedProducts" :key="item.name">
                                <td class="text-no-wrap">
                                    {{ item.name }}
                                </td>
                                <td class="text-center">
                                    ${{ item.cost }}
                                </td>
                            </tr>
                        </tbody>
                    </VTable>

                    <VDivider class="mb-2" />

                    <!-- Total -->
                    <VCardText class="d-flex justify-space-between flex-column flex-sm-row print-row">
                        <div class="my-2 mx-sm-4 text-base">

                        </div>

                        <div class="my-2 mx-sm-4">
                            <table>
                                <tr>
                                    <td class="text-end">
                                        <div class="me-5">
                                            <p class="mb-2">
                                                Subtotal:
                                            </p>
                                            <p class="mb-2">
                                                Discount:
                                            </p>
                                            <p class="mb-2">
                                                Tax:
                                            </p>
                                            <p class="mb-2">
                                                Total:
                                            </p>
                                        </div>
                                    </td>

                                    <td class="font-weight-medium text-high-emphasis">
                                        <p class="mb-2">
                                            $154.25
                                        </p>
                                        <p class="mb-2">
                                            $00.00
                                        </p>
                                        <p class="mb-2">
                                            $50.00
                                        </p>
                                        <p class="mb-2">
                                            $204.25
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </VCardText>

                    <VDivider />
                </VCard>
            </VCol>
        </VRow>

        <!-- 👉 Add Payment Sidebar -->
        <!-- <InvoiceAddPaymentDrawer v-model:isDrawerOpen="isAddPaymentSidebarVisible" /> -->

        <!-- 👉 Send Invoice Sidebar -->
        <!-- <InvoiceSendInvoiceDrawer v-model:isDrawerOpen="isSendPaymentSidebarVisible" /> -->
    </section>
</template>
<style lang="scss">
.invoice-preview-table {
    --v-table-row-height: 44px !important;
}

.logo-img {
    display: block;
    position: relative;
    margin: 0 auto;
}

@media print {
    .v-application {
        background: none !important;
    }

    @page {
        margin: 0;
        size: auto;
    }

    .layout-page-content,
    .v-row,
    .v-col-md-9 {
        padding: 0;
        margin: 0;
    }

    .product-buy-now {
        display: none;
    }

    .v-navigation-drawer,
    .layout-vertical-nav,
    .app-customizer-toggler,
    .layout-footer,
    .layout-navbar,
    .layout-navbar-and-nav-container {
        display: none;
    }

    .v-card {
        box-shadow: none !important;

        .print-row {
            flex-direction: row !important;
        }
    }

    .layout-content-wrapper {
        padding-inline-start: 0 !important;
    }
}
</style>
