Vue.component('HistoricTicket', {
    //language=Vue
    template: `
      <tt-card>

        <tt-table :fetch-url="window['TT_CONFIG']['HISTORIC_TICKET_API_URL'] + '?do=getHistoricTickets'"
                  :config="historicTicketTableConfig"
                  small ssr ref="table">
          <template v-slot:top-buttons>
            <!-- add input for global search with label and bootstrap class-->
            <div class="input-group mb-3">
              <input type="text" class="form-control" placeholder="Globale Suche" v-model="globalSearch"
                     @keydown.enter="doGlobalSearch">
              <div class="input-group-append">
                <button class="btn btn-primary" type="button" @click="doGlobalSearch">Submit</button>
              </div>
            </div>
          </template>

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

          <template v-slot:ctime="{ row }">
            {{ new Date(row.ctime * 1000).toLocaleString() }}
          </template>

          <template v-slot:ticket_number="{ row }">
            <a href="#" @click="clickTicketNumber(row.ticket_number)">{{ row.ticket_number }}</a>
          </template>

        </tt-table>


        <!-- Bootstrap Modal to show global search results -->
        <div class="modal show d-block" tabindex="0" role="dialog" style="background: rgba(0, 0, 0, 0.5);"
             @click="globalSearchModal = false" @keydown.esc="globalSearchModal = false" ref="globalSearchModal"
             v-if="globalSearchModal">
          <div class="modal-dialog" role="document" @click.stop
               style="width:fit-content;max-width: 80vw ; max-height: 80vh; overflow-y: auto;">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Suchergebnisse</h5>
                <button type="button" class="close" @click="globalSearchModal = false">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <tt-table
                    :fetch-url="\`${window['TT_CONFIG']['HISTORIC_TICKET_API_URL']}?do=findHistoricTicket&query=\${globalSearch}\`"
                    :config="globalSearchModalTableConfig"
                    small ref="table">

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

                  <template v-slot:ticket_number="{ row }">
                    <a href="#" @click="clickTicketNumber(row.ticket_number)">{{ row.ticket_number }}</a>
                  </template>
                </tt-table>
              </div>
              <div class="modal-footer">
                <button class="btn btn-secondary" @click="globalSearchModal = false">Close</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Bootstrap Modal to show ticket messages -->
        <div class="modal show d-block" tabindex="0" role="dialog" style="background: rgba(0, 0, 0, 0.5);"
             @click="selectedTicketNumber = null" @keydown.esc="selectedTicketNumber = null" ref="selectedTicketModal"
             v-if="selectedTicketNumber">
          <div class="modal-dialog" role="document" @click.stop
               style="width:fit-content;max-width: 80vw ; max-height: 80vh; overflow-y: auto;">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Ticket {{ selectedTicketNumber }}</h5>
                <button type="button" class="close" @click="selectedTicketNumber = null">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <div v-if="selectedTicketData">
                  <h5>{{ selectedTicketData.ticket.subject }}</h5>
                  <p>{{ selectedTicketData.ticket.message }}</p>
                  <div v-for="message in selectedTicketData.messages">
                    <hr>
                    <h6>{{ new Date(message.ctime * 1000).toLocaleString()}}</h6>
                    <p style="word-break: break-all;" v-html="message.content?.replaceAll('\\n', '<br>')"></p>
                  </div>
                </div>
                <div v-else class="spinner-border text-primary" role="status">
                  <span class="sr-only">Loading...</span>
                </div>

              </div>
            </div>
          </div>
        </div>

      </tt-card>
    `, data() {
        return {
            window: window,
            selectedTicketNumber: null,
            selectedTicketData: null,
            globalSearch: '',
            globalSearchModal: false,
            globalSearchModalTableConfig: {
                headers: [{text: 'Ticket Number', key: 'ticket_number', filter: false, sortable: false},
                    {text: 'Erstellt', key: 'ctime', filter: false, sortable: false},
                    {text: 'Subject', key: 'ticket_subject', filter: false, sortable: false},
                    {text: 'Message', key: 'ticket_message', filter: false, sortable: false},],
                tableHeader: 'Suchergebnisse',
                key: 'HistoricTicketGlobalSearch',
            },
            historicTicketTableConfig: {
                headers: [{text: 'Ticket Number', key: 'ticket_number', filter: 'search'},
                    {text: 'Erstellt', key: 'ctime', filter: false},
                    {text: 'Subject', key: 'subject', filter: 'search', sortable: false},
                    {
                        text: 'Type',
                        key: 'type',
                        filter: 'select',
                        filterOptions: [{value: 'BACKOFFICE', text: 'BACKOFFICE'},
                            {value: 'KUNDENANFRAGEN', text: 'KUNDENANFRAGEN'},
                            {value: 'STÖRUNGEN', text: 'STÖRUNGEN'},
                            {value: 'ALLGEMEINES', text: 'ALLGEMEINES'},
                            {value: 'TERMIN VEREINBART', text: 'TERMIN VEREINBART'},
                            {value: 'VERRECHNEN AB DATUM', text: 'VERRECHNEN AB DATUM'},
                            {value: 'ONLINE-TICKETS', text: 'ONLINE-TICKETS'},
                            {value: 'KÜNDIGUNG', text: 'KÜNDIGUNG'},
                            {value: 'BESTELLUNGEN', text: 'BESTELLUNGEN'},
                            {value: 'PORTIERUNG', text: 'PORTIERUNG'},
                            {value: 'KABEL-TV', text: 'KABEL-TV'},
                            {value: 'TIEFBAU', text: 'TIEFBAU'},
                            {value: 'ENERGIE STEIERMARK', text: 'ENERGIE STEIERMARK'},
                            {value: 'INTERN', text: 'INTERN'},
                            {value: 'FELIX', text: 'FELIX'},
                            {value: '0', text: '0'},
                            {value: 'JETTEN', text: 'JETTEN'},]
                    },
                    {
                        text: 'Status',
                        key: 'status',
                        filter: 'select',
                        filterOptions: [{value: 'Geschlossen', text: 'Geschlossen'},
                            {value: 'In Evidenz', text: 'In Evidenz'},
                            {value: 'In Bearbeitung', text: 'In Bearbeitung'},
                            {value: 'Business In Bearbeitung', text: 'Business In Bearbeitung'},
                            {value: 'Business Angebot gelegt', text: 'Business Angebot gelegt'},]
                    },
                    {text: 'Name', key: 'first_name', filter: 'search', sortable: false},
                    {text: 'Email', key: 'email', filter: 'search', sortable: false},
                    {text: 'Phone', key: 'phone', filter: 'search', sortable: false},],
                defaultPageSize: 25,
                tableHeader: 'Historische Tickets',
                key: 'HistoricTicket',
            }
        }
    }, methods: {
        async doGlobalSearch() {
            if (this.globalSearch.length > 0) {
                this.globalSearchModal = true;
                this.$nextTick(() => {
                    this.$refs.globalSearchModal.focus();
                });
            }
        }, async clickTicketNumber(ticketNumber) {
            this.globalSearchModal = false;
            this.selectedTicketData = null;

            this.selectedTicketNumber = ticketNumber;
            const response = await axios.post(`${window['TT_CONFIG']['HISTORIC_TICKET_API_URL']}?do=getHistoricTicketMessages`,
                                              {ticketNumber});
            this.selectedTicketData = response.data;
            this.$nextTick(() => {
                this.$refs.selectedTicketModal.focus();
            });
        }
    }

})