<template>
  <div>
    <div class="alert alert-info">
      <p>Suche nur nach E-Mail m&ouml;glich</p>
    </div>
    <sortable-columns
        :columns="columns"
        :font-awesome-ver="4"
        search
        pagination
        show-limit
        lang="de"
        :data="data"
        @params-changed="onChange"

    >
      <template slot="tbody">
        <tbody>
        <template v-for="item in data.data">
          <tr>
            <th>{{item.kKunde}}</th>
            <td>{{item.kunde}}</td>
            <td>{{item.cMail}}</td>
            <td>{{item.sum}}</td>
            <td v-html="item.sumLocalized" />
            <td>{{item.sumPending}}</td>
            <td v-html="item.sumPendingLocalized" />
            <td>
              <div class="btn-group">
                <button type="button" @click="onShowModal('modal_plus', item)" class="btn btn-success btn-sm"><i
                    class="fa fa-plus"></i></button>
                <button type="button"
                        @click="onShowModal('modal_minus', item)"
                        class="btn btn-warning btn-sm"><i class="fa fa-minus"></i></button>
              </div>
            </td>
          </tr>
        </template>
        </tbody>
      </template>

    </sortable-columns>


    <div class="modal fade" tabindex="-1" ref="modal_plus" id="modal_plus">
      <div class="modal-dialog">
        <form @submit.prevent="onSubmit" class="modal-content" v-if="selectedCustomer != null">
          <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>

            <h4 class="modal-title">Bonusm&uuml;nzen f&uuml;r <span v-html="selectedCustomer.kunde" /> hinzuf&uuml;gen
            </h4>
          </div>
          <div class="modal-body">
            <input type="hidden" name="jtl_token" :value="$shopToken">
            <input type="hidden" name="requests[]" value="bonuses.add">
            <input type="hidden" name="data[customer_id]" :value="selectedCustomer.kKunde">
            <div class="form-group">
              <label for="input_plus">Value</label>
              <input type="text" class="form-control"
                     name="data[value]"
                     pattern="[0-9]{1,}([.][0-9]{0,2})?"
                     required id="input_plus">
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Add</button>
          </div>
        </form>
      </div>
    </div>

    <div class="modal fade" tabindex="-1" ref="modal_minus" id="modal_minus">
      <div class="modal-dialog">
        <form @submit.prevent="onSubmit" class="modal-content" v-if="selectedCustomer != null">
          <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>

            <h4 class="modal-title">Bonusm&uuml;nzen f&uuml;r <span v-html="selectedCustomer.kunde" /> hinzuf&uuml;gen
            </h4>
          </div>
          <div class="modal-body">
            <input type="hidden" name="jtl_token" :value="$shopToken">
            <input type="hidden" name="requests[]" value="bonuses.reduce">
            <input type="hidden" name="data[customer_id]" :value="selectedCustomer.kKunde">
            <div class="form-group">
              <label for="input_minus">Value</label>
              <input type="text" class="form-control"
                     name="data[value]"
                     pattern="[0-9]{1,}([.][0-9]{0,2})?"
                     required id="input_minus">
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Reduce</button>
          </div>
        </form>
      </div>
    </div>


  </div>
</template>

<script>
import SortableColumns from '@tdev-agency/sortable-columns'

export default {
  name: "Home",
  components: {
    SortableColumns
  },
  data: () => ({
    columns: [
      {
        title: 'ID',
        type: 'numeric',
        name: 'kKunde'
      },
      {
        title: 'Kunde',
        name: 'kunde',
        sortable: false,
      },
      {
        title: 'E-Mail',
        name: 'cMail'
      },
      {
        title: 'Verf&uuml;gbare Punkte',
        name: 'sum_diff',
        type: 'numeric',
      },
      {
        title: 'Punkte (&#8364;)',
        sortable: false,
      },
      {
        title: 'Offene Punkte',
        name: 'sum_pending',
        type: 'numeric',
      },
      {
        title: 'Offene Punkte (&#8364;)',
        sortable: false,
      },
      {
        hidden: true,
        width: 85
      },
    ],
    data: {
      current_page: 1,
      per_page: 1,
      data: [],
      total: 1
    },
    selectedCustomer: null,
    lastRequest: null
  }),
  created() {
    const vm = this;
    this.lastRequest = { requests: ['bonuses.index'], data: {} };
    vm.$store.dispatch('request', this.lastRequest).then(({ bonuses }) => {
          vm.data = bonuses;
        }
    ).catch(e => {

    })
  },
  methods: {
    onChange({ data }) {
      const vm = this;
      this.lastRequest = { requests: ['bonuses.index'], data };
      vm.$store.dispatch('request', this.lastRequest).then(({ bonuses }) => {
            vm.data = bonuses;
          }
      ).catch(e => {

      })

    },

    onShowModal(ref, customer) {
      this.selectedCustomer = customer;
      const vm = this;
      this.$nextTick(() => $(`#${ref}`).modal('show'))
    },

    onSubmit({ target }) {
      const vm = this, fd = new FormData(target);
      $(target).closest('.modal').modal('hide')
      vm.$axios.post(window.location.href, fd).then(() => {
            vm.onChange(vm.lastRequest);
          }
      ).catch(e => {

      })
    }
  }
}
</script>

