<script setup>
import {createApp, ref} from 'vue'
import LoadingModal from "../../../Views/Components/LoadingModal.vue";
import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
import {toast} from "vue3-toastify";
import AddOrUpdateEstimate from "./AddOrUpdateEstimate.vue";

const props = defineProps({
  data: {
    type: [Array, Object],
    default: () => []
  },
})

const localData = ref(props.data)

const showAddEstimate = ref(false)
const estimateId = ref(null)
const description = ref(null)
const amount = ref(null)
const amountType = ref(null)

const { data, loading, error, request, download } = useAjax()

async function reload() {
    const url = "/api/v1/budget/" + props.data.costUnitId + "/list/" + props.data.estimateType
    try {
        const response = await fetch(url, { method: 'GET' })
        if (!response.ok) throw new Error('Fehler beim Laden')

        const result = await response.json()
        localData.value = result
    } catch (err) {
        console.error('Error fetching estimates:', err)
    }
}

async function openAddEstimate() {
    estimateId.value = 0
    amount.value = 0.00
    amountType.value = 'flat'
    description.value = ''
    showAddEstimate.value = true
}

async function openEditEstimate(localEstimateId, localDescription, localAmount, localAmountType, localEstimateType) {
    estimateId.value = localEstimateId
    description.value = localDescription
    amount.value = localAmount
    amountType.value = localAmountType
    console.log(localEstimateId, localDescription, localAmount, localAmountType, localEstimateType)
    console.log(estimateId.value, description.value, amount.value, amountType.value, localEstimateType)
    showAddEstimate.value = true
}

async function deleteEstimate(currentEstimateId) {
    const data = await request('/api/v1/budget/' + props.data.costUnitId + '/' + currentEstimateId + '/delete', {
        method: "GET",
    });

    if (data.status === 'success') {
        toast.success(data.message);
        reload()
    } else {
        toast.error(data.message);
    }
}

</script>

<template>
    <div v-if="localData.estimates && localData.estimates.length > 0">
        <h2>{{ props.data.title }}</h2>
        <h3>Gesamtkosten: {{ localData.totalAmountString }}</h3>
        <span v-for="estimate in localData.estimates">
            <table style="width: 100%;">
                  <tr><th style="width: 200px;">
                      {{ estimate.title }}
                  </th>
                  <td>{{ estimate.singleAmountString }}</td>
                </tr>
                <tr>
                    <td></td>
                    <td style="padding-bottom: 30px">
                        <label class="link" style="font-size: 10pt; margin-right: 20px;" @click="openEditEstimate(estimate.id, estimate.title, estimate.amountValue, estimate.amountType, props.data.estimateType)">Bearbeiten</label>
                        <label class="link" style="font-size: 10pt; margin-right: 20px; color: #ff0000;" @click="deleteEstimate(estimate.id)">Löschen</label>
                    </td>
                </tr>
            </table>
        </span>
    </div>


  <div v-else>
      <strong style="width: 100%; text-align: center; display: block; margin-top: 20px;">
        Noch keine geschätzten Ausgaben vorhanden
      </strong>
  </div>
    <label class="link" @click="openAddEstimate()">
        Hinzufügen
    </label>
    <LoadingModal :show="showLoading" />
    <AddOrUpdateEstimate
        :amount="amount"
        :amount_type="amountType"
        :description="description"
        :estimateId="estimateId"
        :costUnitId="props.data.costUnitId"
        :title="props.data.title"
        :type="props.data.estimateType"
        :showAddEstimate="showAddEstimate"

        v-if="showAddEstimate"
        @closeAddEstimate="showAddEstimate = false; reload()" />
</template>

<style scoped>
 .costunit-list {
   width: 96% !important;
 }
</style>
