Vue.component('PreorderCustom300', {
    template: `
      <tt-card>
        <tt-table :data="window['TT_CONFIG']['PREORDERS_DATA']" :config="preorderTableConfig" excel-export>

          <template v-slot:preorder_id="{ row }">
            <strong>{{ row.preorder_id }}</strong>
          </template>

          <template v-slot:ucode="{ row }">
            {{ row.ucode }}
          </template>

          <template v-slot:preorder_email="{ row }">
            <a :href="'mailto:' + row.preorder_email">{{ row.preorder_email }}</a>
          </template>

          <template v-slot:campaign_name="{ row }">
            {{ row.campaign_name }}
          </template>

          <template v-slot:current_status_name="{ row }">
            <span :class="getStatusClass(row.current_status_code)">{{ row.current_status_name }}</span>
          </template>

          <template v-slot:notification_logged_email="{ row }">
            {{ row.notification_logged_email }}
          </template>

          <template v-slot:notification_type_logged="{ row }">
            {{ row.notification_type_logged }}
          </template>

          <template v-slot:notification_log_timestamp="{ row }">
            <span>{{ window.moment(row.notification_log_timestamp).format('DD.MM.YYYY HH:mm:ss') }}</span>
          </template>

          <template v-slot:actions="{ row }">
            <a :href="'/Preorder?filter[ucode]=' + row.ucode" target="_blank" class="btn btn-primary btn-sm">
                <i class="fas fa-eye"></i> Details
            </a>
          </template>
        </tt-table>
      </tt-card>
    `,
    data() {
        return {
            window: window,
            preorderTableConfig: {
                key: 'PreorderCustom300Table',
                tableHeader: 'Kundenspezifische Vorbestellungen (Typ 300)',
                defaultPageSize: 10,
                headers: [
                    {text: 'Bestellcode', key: 'ucode', sortable: true, class: 'text-nowrap', filter: 'search'},
                    {text: 'Preorder E-Mail', key: 'preorder_email', sortable: true, class: 'text-nowrap', filter: 'search'},
                    {text: 'Kampagnenname', key: 'campaign_name', sortable: true, class: 'text-nowrap', filter: 'search'},
                    {
                        text: 'Aktueller Status',
                        key: 'current_status_name',
                        sortable: true,
                        class: 'text-center',
                        filter: 'select',
                        // Assuming current_status_code values correspond to different statuses
                        filterOptions: [
                            {value: 'Waiting for Service', text: 'Warten auf Service'},
                            {value: 'Ready for Service', text: 'Bereit für Service'},
                            {value: 'Finished', text: 'Abgeschlossen'},
                        ]
                    },
                    {text: 'Log E-Mail', key: 'notification_logged_email', sortable: true, class: 'text-nowrap', filter: 'search'},
                    {text: 'Log Typ', key: 'notification_type_logged', sortable: true, class: 'text-nowrap', filter: 'search'},
                    {text: 'Log Zeitstempel', key: 'notification_log_timestamp', sortable: true, class: 'text-center', filter: 'date'},
                    {text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, filter: false},
                ],
            },
        };
    },
    methods: {
        // You might need to adjust this based on actual 'current_status_code' values
        getStatusClass(statusCode) {
            switch (statusCode) {
                case 'new':
                    return 'badge badge-primary';
                case 'pending':
                    return 'badge badge-warning';
                case 'completed':
                    return 'badge badge-success';
                case 'cancelled':
                    return 'badge badge-danger';
                default:
                    return 'badge badge-secondary';
            }
        }
    }
});