<script lang="ts" setup></script>

<template>
    <div class="fixed w-[200%] h-[200%] bg-[url('/logo/logo-pattern.png')] bg-repeat inset-0 -left-1/2 -top-1/2 opacity-5 rotate-12" :style="{backgroundSize: '150px'}">

    </div>
    <div class="flex justify-center w-full h-300 pt-20">
        <div class="w-[1300px] h-fit flex flex-col gap-4 relative">
            <div class="w-35 aspect-square border-2 border-indigo-500 bg-white absolute left-12 bottom-0 translate-y-1/2 rounded-2xl overflow-hidden p-1">
                <img
                    src="/logo/qr-code.png"
                    class="w-full"
                />
            </div>

            <div class="w-full flex items-center justify-center font-bold text-2xl gap-4 text-indigo-500">
                <div class="w-full text-end">صورت حساب الکترونیکی</div>
                <div class="shrink-0">
                    <img
                        src="/logo/logo2.png"
                        class="w-24"
                    />
                </div>
                <div class="w-full text-start">فروشگاه هیملز</div>
            </div>
            <div class="w-full flex flex-col gap-2">
                <div class="grid gap-2 grid-cols-12 w-full">
                    <div
                        class="flex items-center justify-center p-2 border-2 border-indigo-500 text-indigo-500 bg-indigo-100 rounded-2xl col-span-1"
                    >
                        <div class="-rotate-90 leading-[100%]">
                            فروشگاه
                            <br />
                            هی ملز
                        </div>
                    </div>
                    <div class="flex flex-wrap gap-6 p-4 border-2 border-indigo-500 bg-white rounded-2xl col-span-8">
                        <div class="flex gap-1">
                            <span>فرستنده :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>شناسه ملی :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>َشماره ثبت :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>َشماره مجوز :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>نشانی شرکت :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>کد پستی :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>تلفن و فکس :</span>
                            <span>مقدار</span>
                        </div>
                    </div>
                    <div class="flex flex-col gap-1 p-4 border-2 border-indigo-500 bg-white rounded-3xl col-span-3">
                        <div class="flex gap-1">
                            <span>شماره فاکتور :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>تاریخ :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>شماره پیگیری :</span>
                            <span>مقدار</span>
                        </div>
                    </div>
                </div>
                <div class="grid gap-2 grid-cols-12 w-ful">
                    <div
                        class="flex items-center justify-center p-2 border-2 border-indigo-500 text-indigo-500 bg-indigo-100 rounded-2xl col-span-1"
                    >
                        <div class="-rotate-90 leading-[100%]">خریدار</div>
                    </div>
                    <div class="grid grid-cols-4 gap-6 p-4 border-2 border-indigo-500 bg-white rounded-2xl col-span-11">
                        <div class="flex gap-1">
                            <span>خریدار :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>شماره ملی :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>َشماره تماس :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>کد پستی :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>نشانی :</span>
                            <span>مقدار</span>
                        </div>
                    </div>
                </div>
                <div class="border-2 border-indigo-500 bg-white rounded-2xl overflow-hidden">
                    <table class="text-sm">
                        <thead>
                            <tr class="divide-x-2 divide-white">
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">ردیف</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">شناسه کلمات یا خدمات</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4 w-50">شرح کالا یا خدمات</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">تعداد</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">مبلغ واحد(تومان)</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">مبلغ کل (تومان)</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">تخفیف (تومان)</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">مبلغ کل پس از تخفیف (تومان)</th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">
                                    جمع مالیات و عوارض ارزش افزوده (تومان)
                                </th>
                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">
                                    جمع کل پس از تخفیف و مالیات و عوارض (تومان)
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="divide-x-2 divide-indigo-100">
                                <td class="px-3 py-4 text-center">ردیف</td>
                                <td class="px-3 py-4 text-center">شناسه کلمات یا خدمات</td>
                                <td class="px-3 py-4 text-center">شرح کالا یا خدمات</td>
                                <td class="px-3 py-4 text-center">تعداد</td>
                                <td class="px-3 py-4 text-center">مبلغ واحد(تومان)</td>
                                <td class="px-3 py-4 text-center">مبلغ کل (تومان)</td>
                                <td class="px-3 py-4 text-center">تخفیف (تومان)</td>
                                <td class="px-3 py-4 text-center">مبلغ کل پس از تخفیف (تومان)</td>
                                <td class="px-3 py-4 text-center">جمع مالیات و عوارض ارزش افزوده (تومان)</td>
                                <td class="px-3 py-4 text-center">جمع کل پس از تخفیف و مالیات و عوارض (تومان)</td>
                            </tr>
                            <tr class="divide-x-2 divide-indigo-100 border-t-2 border-indigo-100">
                                <td
                                    class="px-3 py-4 text-center"
                                    colspan="3"
                                >
                                    قیمت کل
                                </td>
                                <td class="px-3 py-4 text-center">تعداد</td>
                                <td class="px-3 py-4 text-center">مبلغ واحد(تومان)</td>
                                <td class="px-3 py-4 text-center">مبلغ کل (تومان)</td>
                                <td class="px-3 py-4 text-center">تخفیف (تومان)</td>
                                <td class="px-3 py-4 text-center">مبلغ کل پس از تخفیف (تومان)</td>
                                <td class="px-3 py-4 text-center">جمع مالیات و عوارض ارزش افزوده (تومان)</td>
                                <td class="px-3 py-4 text-center">جمع کل پس از تخفیف و مالیات و عوارض (تومان)</td>
                            </tr>
                            <tr class="divide-x-2 divide-white">
                                <td
                                    class="bg-indigo-100"
                                    colspan="5"
                                ></td>
                                <td
                                    colspan="4"
                                    class="px-3 py-4 text-center bg-indigo-100 border-e-indigo-100"
                                >
                                    جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (تومان)
                                </td>
                                <td class="px-3 py-4 text-center border-t-2 border-t-indigo-100">مبلغ</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="grid grid-cols-5 gap-6 p-4 min-h-50">
                        <div class="flex gap-1">
                            <span>مهر و امضای فروشگاه :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>تاریخ تحویل :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>ساعت تحویل :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>روش های پرداخت :</span>
                            <span>مقدار</span>
                        </div>
                        <div class="flex gap-1">
                            <span>مهر و امضای خریدار :</span>
                            <span>مقدار</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
