<script setup>
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  modeShow: {
    type: Boolean,
    required: true,
  }
})

const emit = defineEmits(["accept", "deny", "fix", "reopen"])
</script>

<template>
<span id="invoice_details_header">
    <table>
      <tr>
        <td>Name:</td>
        <td v-if="modeShow">{{props.data.contactName}}</td>
        <td v-else style="width: 300px;">{{props.data.contactName}}</td>

        <td v-if="modeShow" style="width: 250px;">Kostenstelle</td>
        <td v-else style="width: 300px;">Kostensatelle (ursprünglich)</td>

        <td>{{props.data.costUnitName}}</td>
        <td rowspan="4" style="width: 250px; padding-right: 25px; text-align: right; vertical-align: top;">
          <input type="button"
              v-if="props.data.status === 'new' && modeShow"
              @click="emit('accept')"
              class="accept-button"
                 style="width: 100%; margin-bottom: 10px;"
             value="Abrechnung annehmen"
         />

          <input type="button" v-if="props.data.status === 'denied' && modeShow"
             @click="emit('reopen')"
             class="accept-button"
                 style="width: 100%; margin-bottom: 10px;"
             value="Abrechnung zur Wiedervorlage öffnen"
         />

          <br />

          <input type="button"
            v-if="props.data.status === 'new' && modeShow"
            @click="emit('fix')"
            class="fix-button"
                 style="width: 100%; margin-bottom: 10px;"
            value="Abrechnung ablehnen und korrigieren"
         />
          <br />

          <input type="button"
              v-if="props.data.status === 'new' && modeShow"
              @click="emit('deny')"
              class="deny-button"
                 style="width: 100%"
                 value="Abrechnung ablehnen"
         />
        </td>
      </tr>

      <!-- Rest der Tabelle bleibt unverändert -->
      <tr>
        <td>E-Mail:</td>
        <td>{{props.data.contactEmail}}</td>
        <td>
          Abrechnungsnummer
          <label v-if="!modeShow"> (ursprünglich)</label>:
        </td>

        <td>{{props.data.invoiceNumber}}</td>
      </tr>

        <tr>
        <td>Telefon:</td>
        <td>{{props.data.contactPhone}}</td>
            <td>
          Abrechnungstyp
          <label v-if="!modeShow"> (Ursprünglich)</label>:
        </td>
        <td>{{props.data.invoiceType}}</td>
      </tr>

      <tr>
        <td>Kontoinhaber*in:</td>
        <td>{{props.data.accountOwner}}</td>
        <td>Gesamtbetrag
          <label v-if="!modeShow"> (Ursprünglich)</label>:
        </td>
        <td><strong>{{props.data.amount}}</strong></td>
      </tr>
      <tr>
        <td>IBAN:</td>
        <td>{{props.data.accountIban}}</td>
        <td>Buchungsinformationen:</td>
          <td v-if="props.data.donation">Als Spende gebucht</td>
          <td v-else-if="props.data.externalPayment">Rechnungszahlung</td>
          <td v-else>Klassische Auszahlung</td>
      </tr>
      <tr>
        <td>Status:</td>
        <td>{{props.data.readableStatus}}</td>
        <td>Anmerkungen:</td>
        <td>
          <span v-if="props.data.status === 'denied'">
            {{props.data.deniedReason}}
          </span>
          <span v-else>{{props.data.comment}}</span>
        </td>
      </tr>
    </table>
  </span>
</template>

<style scoped>

</style>
