<template>
    <ClientOnly>
        <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Evaluated Clothes - Detail Page" class="rounded-4 bg-white" >
                    <div class="grid nested-grid">
                        <div class="col-4">
                            <Galleria :value="images" :responsive-options="responsiveOptions" :num-visible="5" container-style="max-width: 480px">
                                <template #item="slotProps">
                                    <img :src="`${pfad}/${slotProps.item.pfad}`"  style="width: 100%;" />
                                </template>
                                <template #thumbnail="slotProps">
                                    <img :src="`${pfad}/thumb-${slotProps.item.pfad}`"  />
                                </template>
                            </Galleria>
                        </div>
                        <div class="col-8">
                            <div class="grid">
                            
                                <Card class="col-12">
                                    <template #header>
                                        <h1>{{ itemext.itemb.kurzbeschreibung }}</h1>
                                    </template>
                                    <template #content>
                                        <div class="grid nested-grid">
                                            <div class="col-4 mb-4">
                                                <Chip v-if="itemext.genehmigt"  class="checked mr-2" label=" Approved " icon="pi pi-check-square" />
                                                <Chip v-else  class="unchecked mr-2" label="Approved" icon="pi pi-stop" />
                                            </div>
                                            <div class="col-4 mb-4">
                                                <Chip v-if="itemext.zuhause" class="checked mr-2" label=" At home " icon="pi pi-check-square" />
                                                <Chip v-else class="unchecked mr-2"  label=" At home " icon="pi pi-stop" />
                                            </div>
                                            <div class="col-4 mb-4">   
                                                <Chip v-if="itemext.draussen" class="checked mr-2" label=" Outside " icon="pi pi-check-square" />
                                                <Chip v-else class="unchecked mr-2" label=" Outside " icon="pi pi-stop" />
                                            </div>
                                            <div class="col-12">
                                                <label class="p-float-label" for="bemerkung">Remark / Notice</label>
                                                <Textarea id="bemerkung" v-model="itemext.bemerkung" :disabled="true" autoResize/>
                                            </div>
                                            <div class="col-12">
                                                <label>{{ itemext.itemb.bezeichnung }}</label>
                                            </div>
                                            <div class="col-4 field gap-1">
                                                <small class="p-float-label" for="groesse">Size: </small>
                                                <InputText class="p-inputtext-sm" id="groesse" :disabled="true" :value="itemext.itemb.groesse" />
                                            </div>
                                            <div class="col-4 field gap-1">
                                                <small class="p-float-label" for="farbe">Color: </small>
                                                <InputText class="p-inputtext-sm" id="farbe" :disabled="true" :value="itemext.itemb.farbe" />
                                            </div>
                                            <div class="col-4 field gap-1">
                                                <small class="p-float-label" for="typ">Type: </small>
                                                <InputText class="p-inputtext-sm" id="typ" :disabled="true" :value="itemext.itemb.type.bezeichnung" />
                                            </div>
                                            <div class="col-12 field gap-1" >
                                                <small class="p-float-label" for="material">Material:</small>
                                                <InputText class="p-inputtext-sm" id="material" :disabled="true" :value="itemext.itemb.material" style="width:100%;"/>
                                            </div>
                                            
                                            <table class="col-12 p-table-sm align-items-left measuretable">
                                                <thead>
                                                    <th>Measure:</th>
                                                    <th>Value (in cm):</th>
                                                </thead>
                                                <tr>
                                                    <td>Breast</td>
                                                    <td>{{ itemext.itemb.abmessungen.brust }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Length Top</td>
                                                    <td>{{ itemext.itemb.abmessungen.laenget }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Shoulder Width</td>
                                                    <td>{{ itemext.itemb.abmessungen.schulterbreite }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Waist Girth Top</td>
                                                    <td>{{ itemext.itemb.abmessungen.taillenumfangt }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Hip Girth</td>
                                                    <td>{{ itemext.itemb.abmessungen.hueftumfang }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Inner Seam</td>
                                                    <td>{{ itemext.itemb.abmessungen.innennaht }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Length Bottom</td>
                                                    <td>{{ itemext.itemb.abmessungen.laengeb }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Waist Girth Bottom</td>
                                                    <td>{{ itemext.itemb.abmessungen.taillenumfangb }}</td>
                                                </tr>
                                            </table>
                                            
                                        </div>
                                    </template>
                                    <template #footer>
                                        <div class="col-12 gap-3 flex">
                                                <Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate" />
                                                <Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete" />  
                                                       
                                        </div>
                                    </template>
                                </Card>
                                
                            </div>
                        </div>
                        
                        <Dialog :visible="deleteItemBDialog" :style="{width: '450px'}" header="Delete Item?" :modal="true" class="p-fluid">
                            <div class="field">
                                <label>Do you really want to delete {{ itemext.itemb.kurzbeschreibung }}?</label>
                            </div>
                            <template #footer>
                                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
                                <Button label="Delete" icon="pi pi-check" text @click="doDelete()" />
                            </template>
                        </Dialog>
                    </div>
                </Panel>
            </template>
        </Card>
    </ClientOnly>
    



</template>

<script setup lang="ts">
import { useToast } from "primevue/usetoast";
import { ref } from "vue";
import { useDialog } from 'primevue/usedialog';
import AssMea from "./AssMea.vue";;
import UpdEval from "./UpdEval.vue";

const dialog = useDialog();

const responsiveOptions = ref();
const pfad = '/photos';
const route = useRoute();
const qid = route.query.id;
const toast = useToast();
const deleteItemBDialog = ref(false);



interface cItemB {
      id: number;
      bezeichnung: string;
      kurzbeschreibung: string;
      groesse: string;
      farbe: string;
      typid: number;
      material: string;
      abmessungenid: number;
      frontviewid: number;
}

//const itemsb = ref();
const {data: itemext } = await useFetch('http://ubodroid-2:8081/api/v1/ite/'+qid);
const {data: images } = await useFetch('http://ubodroid-2:8081/api/v1/pho/ite/'+qid);

const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});

const onDelete = () => {
    deleteItemBDialog.value = true;
};

const onUpdate = () => {
   dialog.open(UpdEval, { data: {id: qid, isupdate: true} });
};

const onAssign = () => {
    let mid: any;
    dialog.open(AssMea, {data: { mea }, onClose(options) {
        mid = options?.data;
        if (mid) {
            console.log('mid vor dem zweiten Dialog: ', mid)
            dialog.open(Upditemb, { data: {id:qid, mid: mid.id }});
        }
    }
    });

     
}

const hideDialog = () => {
    deleteItemBDialog.value = false;
   
};


async function doDelete() {
    let fd = new FormData();
    //fd.append('bezeichnung', bezeichnung.value);
      fd.append('id', qid.toString());
    await $fetch('http://ubodroid-2:8081/api/v1/ite/'+qid, { method: 'DELETE', body: fd } );
    
    toast.add({ severity: 'success', summary: 'Item deleted', detail: '', life: 3000 });
    deleteItemBDialog.value = false;
    await refreshNuxtData();
    await navigateTo('/evaluated');
}


</script>