mareike/app/Domains/Event/Views/Partials/ParticipationSummary.vue

<script setup>
 const props = defineProps({
     event: Object
 })


 console.log(props.event)

</script>

<template>
    <h2>Übersicht</h2>
    <div class="participant-flexbox">
        <div class="participant-flexbox-row top">
            <div class="left">
                <h3>Teilnehmende</h3>
                <table class="participant-income-table" style="margin-bottom: 40px; font-size: 11pt;">
                    <tr>
                        <th>Teili</th>
                        <td><strong>{{props.event.participants.participant.count}} Personen:</strong></td>
                        <td>
                            {{props.event.participants.participant.amount.paid.readable}} /
                        </td>
                        <td>
                            {{props.event.participants.participant.amount.expected.readable}}
                        </td>
                    </tr>

                    <tr>
                        <th>Team</th>
                        <td><strong>{{props.event.participants.team.count}} Personen:</strong></td>
                        <td>
                            {{props.event.participants.team.amount.paid.readable}} /
                        </td>
                        <td>
                            {{props.event.participants.team.amount.expected.readable}}
                        </td>
                    </tr>

                    <tr>
                        <th>Unterstützende</th>
                        <td><strong>{{props.event.participants.volunteer.count}} Personen:</strong></td>
                        <td>
                            {{props.event.participants.volunteer.amount.paid.readable}} /
                        </td>
                        <td>
                            {{props.event.participants.volunteer.amount.expected.readable}}
                        </td>
                    </tr>

                    <tr>
                        <th>Sonstige</th>
                        <td><strong>{{props.event.participants.other.count}} Personen:</strong></td>
                        <td>
                            {{props.event.participants.other.amount.paid.readable}} /
                        </td>
                        <td>
                            {{props.event.participants.other.amount.expected.readable}}
                        </td>
                    </tr>

                    <tr>
                        <th colspan="2">Sonstige Einnahmen</th>
                        <td colspan="2">{{ props.event.flatSupport }}</td>
                    </tr>

                    <tr>
                        <th style="padding-bottom: 20px" colspan="2">Förderung</th>
                        <td style="padding-bottom: 20px" colspan="2">
                            {{ props.event.supportPerson.readable }}<br />
                            <label style="font-size: 9pt;">({{ props.event.supportPersonIndex }} / Tag p.P.)</label>
                        </td>
                    </tr>



                    <tr>
                        <th colspan="2" style="border-width: 1px; border-bottom-style: solid">Gesamt</th>
                        <td style="font-weight: bold; border-width: 1px; border-bottom-style: solid">
                            {{ props.event.income.real.readable }} /
                        </td>

                        <td style="font-weight: bold; border-width: 1px; border-bottom-style: solid">
                            {{ props.event.income.expected.readable }}
                        </td>
                    </tr>

                    <tr>
                        <th style="padding-top: 20px; font-size: 12pt !important;" colspan="2">Bilanz</th>
                        <td v-if="props.event.totalBalance.real.value >= 0" style="color: #4caf50;font-weight: bold; padding-top: 20px; font-size: 12pt !important;">
                            {{ props.event.totalBalance.real.readable }} /
                        </td>
                        <td v-else style="color: #f44336; font-weight: bold; padding-top: 20px; font-size: 12pt !important;">
                            {{props.event.totalBalance.real.readable}}
                        </td>

                        <td v-if="props.event.totalBalance.expected.value >= 0" style="color: #4caf50; font-weight: bold; padding-top: 20px; font-size: 12pt !important;">
                            {{ props.event.totalBalance.expected.readable }}
                        </td>
                        <td v-else style="color: #f44336; font-weight: bold; padding-top: 20px; font-size: 12pt !important;">
                            {{props.event.totalBalance.expected.readable}}
                        </td>
                    </tr>

                </table>
            </div>

            <div class="right">
                <h3>Ausgaben</h3>
                <table class="event-payment-table" style="font-size: 10pt;">
                    <tr v-for="amount in props.event.costUnit.amounts">
                        <th>{{amount.name}}</th>
                        <td>{{amount.string}}</td>
                    </tr>
                    <tr>
                        <th style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 58px">Gesamt</th>
                        <td style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 58px; font-weight: bold">{{props.event.costUnit.overAllAmount.text}}</td>
                    </tr>
                </table>
            </div>
        </div>

    </div>

</template>

<style scoped>
.participant-flexbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 95%;
    margin: 20px auto 0;
}

.participant-flexbox-row {
    display: flex;
    gap: 10px; /* Abstand zwischen den Spalten */
}

.participant-flexbox-row.top .left {
    flex: 0 0 50%;
    padding: 10px;
}

.participant-flexbox.top .right {
    flex: 0 0 50%;
    padding: 10px;
}

.participant-income-table,
.event-payment-table {
    width: 475px;
}

.participant-income-table th {
    width: 20px;
    font-size: 11pt !important;
}

.participant-income-table tr td:first-child {
    width: 25px !important;
    font-size: 11pt;
}

.event-payment-table {
    width: 100%;
}
</style>