<template>
    <div class="flex items-center justify-between">
        <h1 class="text-3xl font-bold uppercase"> Fournisseurs </h1>
        <NuxtLink to="/admin/supplier"
                  class="flex items-center justify-center text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
        >
            Ajouter
        </NuxtLink>
    </div>
    <div class="mt-6 border border-slate-200 mb-16">
        <div class="max-h-96 overflow-y-auto">
            <div
                class="sticky top-0 z-10 grid grid-cols-6 gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide"
            >
                <div>Nom</div>
                <div>Mail</div>
                <div>Rue</div>
                <div>Complément</div>
                <div>Code Postal</div>
                <div>Ville</div>
            </div>

            <div v-for="supplier in supplierList" :key="supplier.id">
                <template v-if="supplier.addresses?.length">
                    <div
                        v-for="addr in supplier.addresses"
                        :key="addr.id"
                        class="grid grid-cols-6 hover:bg-slate-50 border-t gap-4 px-4 py-2"
                        @click="goToSupplier(supplier.id)"
                    >
                        <div class="truncate">
                            {{ supplier.name }}
                        </div>
                        <div class="truncate">
                            {{ supplier.email }}
                        </div>
                        <div class="truncate">
                            {{ addr.street }}
                        </div>
                        <div class="truncate">
                            {{ addr.street2 }}
                        </div>
                        <div>{{ addr.postalCode }}</div>
                        <div class="uppercase truncate">
                            {{ addr.city }}
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type {SupplierData} from "~/services/dto/supplier-data"
import {getSupplierList} from "~/services/supplier"

definePageMeta({layout: "admin"})

const supplierList = ref<SupplierData[]>([])
const router = useRouter()


const goToSupplier = (id: number) => {
    router.push(`/admin/supplier/${id}`)
}

onMounted(async () => {
    supplierList.value = (await getSupplierList(false)) ?? []
})

</script>


