<template>
  <v-layout>
    <!-- Alert dialog -->
    <v-dialog v-model="dialogdeletealert" max-width="30%">
      <v-card>
        <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
          Peringatan !
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 d-flex>
              <v-layout row>
                <v-flex pb-1 xs12>
                  <v-layout row>
                    <v-flex pt-2 pr-2 xs12>
                      {{ msgalert }}
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="dialogdeletealert = false">
            Tutup
          </v-btn>
          <v-btn color="primary" flat @click="deleteRow()"> Yakin lah </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- End alert dialog -->
    <!-- ERROR DIALOG -->
    <v-dialog v-model="dialog_error" max-width="500px">
      <v-card>
        <v-card-title>
          <span>ERROR !</span>
          <v-spacer></v-spacer>
        </v-card-title>
        <v-divider></v-divider>
        <div class="ma-3 red--text">{{ msgError }}</div>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="dialog_error = false"
            >Close</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- END ERROR DIALOG -->
    <!-- Snackbar -->
    <v-snackbar
      v-model="snackbar"
      :timeout="5000"
      :multi-line="false"
      :vertical="false"
      :top="true"
      :color="clr"
      :value="snackbar"
    >
      {{ msgsnackbar }}
      <v-btn flat @click="snackbar = false"> Tutup </v-btn>
    </v-snackbar>
    <!-- End Snackbar -->
    <!-- Form Dialog -->
    <v-dialog v-model="dialog_form" persistent width="50%">
      <v-card>
        <v-card-title>
          <span class="title">Form Lokasi Counter</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-progress-linear
          v-if="loading_save"
          :indeterminate="true"
        ></v-progress-linear>
        <v-card-text class="pt-0 pb-0">
          <v-layout wrap>
            <v-flex xs12 pr-2>
              <v-text-field
                v-model="locationCode"
                label="Kode"
                @blur="locationCodeValidation"
                :error="error_location_code_message !== ''"
                :error-messages="error_location_code_message"
              ></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout wrap>
            <v-flex xs12 pr-2>
              <v-text-field
                v-model="locationName"
                label="Nama Lokasi"
                @blur="locationNameValidation"
                :error="error_location_name_message !== ''"
                :error-messages="error_location_name_message"
              ></v-text-field>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="grey"
            flat
            @click="dialog_form = false"
            :disabled="loading_save"
            >Tutup</v-btn
          >
          <v-btn
            v-if="xact === 'add'"
            color="primary"
            flat
            :disabled="loading_save"
            @click="saveAdd()"
            >Simpan</v-btn
          >
          <v-btn
            v-if="xact === 'edit'"
            color="primary"
            flat
            :disabled="loading_save"
            @click="saveEdit()"
            >Simpan Perubahan</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- End Form Dialog -->

    <v-flex xs12>
      <v-card>
        <!-- Toolbar -->
        <v-toolbar
          color="blue darken-1"
          dark
          scroll-off-screen
          scroll-target="#scrolling-techniques"
        >
          <v-toolbar-title class="headline font-weight-bold"
            >Lokasi Counter</v-toolbar-title
          >
          <v-spacer></v-spacer>
          <v-btn class="text-xs-right" @click="addForm()" icon>
            <v-icon>library_add</v-icon>
          </v-btn>
        </v-toolbar>
        <!-- End Toolbar -->
        <!-- Data Tabel -->
        <div
          id="scrolling-techniques"
          class="scroll-y"
          :style="{ height: windowHeight }"
        >
          <v-card elevation="0">
            <v-card-text>
              <v-layout row>
                <v-flex xs3>
                  <v-text-field
                    v-model="xsearch"
                    label="Cari"
                    placeholder="Ketikkan Code atau Nama Lokasi"
                    outline
                    hide-details
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
          <v-divider></v-divider>
          <v-data-table
            :headers="headers"
            :items="vlocation"
            :loading="isLoading"
            hide-actions
          >
            <template v-slot:headers="props">
              <tr>
                <th
                  v-for="header in props.headers"
                  :key="header.text"
                  @click="
                    changeSort(header.value, pagination.descending, header)
                  "
                  :width="header.width"
                  class="mb-5"
                >
                  <v-icon
                    color="blue darken-2"
                    v-if="
                      pagination.sortBy === header.value &&
                      header.sort &&
                      pagination.descending == 'desc'
                    "
                    small
                    >arrow_upward</v-icon
                  >
                  <v-icon
                    color="blue darken-2"
                    v-if="
                      pagination.sortBy === header.value &&
                      header.sort &&
                      pagination.descending == 'asc'
                    "
                    small
                    >arrow_downward</v-icon
                  >
                  <v-icon
                    color="grey lighten-2"
                    v-if="pagination.sortBy !== header.value && header.sort"
                    small
                    >arrow_downward</v-icon
                  >
                  {{ header.text }}
                </th>
              </tr>
            </template>
            <v-progress-linear
              v-slot:progress
              color="blue"
              indeterminate
            ></v-progress-linear>
            <template v-slot:no-data>
              <v-alert :value="true" color="error" icon="warning">
                Belum ditemukan data
              </v-alert>
            </template>
            <template v-slot:items="props">
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                {{ props.item.locationCode }}
              </td>
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                {{ props.item.locationName }}
              </td>
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                <v-toolbar flat dense>
                  <v-btn
                    @click="openEdit(props.item)"
                    small
                    color="primary"
                    dark
                    >ubah <v-icon small right dark>edit</v-icon></v-btn
                  >
                  <v-divider vertical></v-divider>
                  <v-btn
                    @click="confirmDelete(props.item)"
                    small
                    color="danger"
                    dark
                    >hapus <v-icon small right dark>clear</v-icon></v-btn
                  >
                </v-toolbar>
              </td>
            </template>
          </v-data-table>
        </div>
        <!-- End Data Tabel -->
        <!-- Pagination -->
        <v-divider></v-divider>
        <v-flex xs12 class="text-xs-left pt-3 pb-3">
          <v-pagination
            v-model="curr_page"
            :length="xtotal_page"
          ></v-pagination>
        </v-flex>
        <!-- End Pagination -->
      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
  min-height: 60px;
}

.searchbox .v-btn {
  min-height: 60px;
}

table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

table.v-table thead tr {
  height: 40px;
}

.textinput {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  background-color: white;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
  border: 1px solid #607d8b;
}

.textinput:focus {
  width: 100%;
}

.textinput:focus::-webkit-input-placeholder {
  color: transparent;
}

.textinput:focus::-moz-placeholder {
  color: transparent;
}

.textinput:-moz-placeholder {
  color: transparent;
}

.boxoutline {
  color: red;
  border: 1px solid red;
  justify-content: center;
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1px;
}

.boxoutline:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  font-size: 15px;
  font-weight: 700;
}

.boxsolid {
  color: #ffffff;
  border: 1px solid #ffffff;
  justify-content: center;
  height: 45px;
  line-height: 45px;
  padding-left: 10px;
  background: #f44336;
  font-size: 14px;
  font-weight: 500;
  border-radius: 1px;
}

.boxsolid:hover {
  background: #f44336de;
  font-size: 15px;
  font-weight: 700;
}

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}

::-webkit-scrollbar {
  width: 7px;
}

/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
  background-color: #73baf3;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
  background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
  background-color: #0079da;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
  background-color: black;
}

/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
module.exports = {
  data() {
    return {
      windowHeight: window.innerHeight - 300 + "px",
      locationCode: "",
      locationName: "",
      error_location_form: false,
      error_location_message: "",
      error_location_code: false,
      error_location_code_message: "",
      error_location_name: false,
      error_location_name_message: "",
      dialogdeletealert: false,
      msgalert: "",
      clr: "success",
      headers: [
        {
          text: "KODE",
          align: "left",
          sort: true,
          sortable: true,
          value: "locationCode",
          width: "40%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "LOKASI",
          align: "left",
          sort: true,
          sortable: true,
          value: "locationName",
          width: "50%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sort: false,
          sortable: false,
          value: "mr",
          width: "10%",
          class: "pa-2 blue darken-3 white--text",
        },
      ],
    };
  },
  mounted() {
    this.$store.dispatch("location/search");
  },
  computed: {
    vlocation() {
      return this.$store.state.location.location;
    },
    isLoading() {
      return this.$store.state.location.search_status == 1;
    },
    curr_page: {
      get() {
        return this.$store.state.location.current_page;
      },
      set(val) {
        this.$store.commit("location/update_current_page", val);
        this.$store.commit("location/update_last_id", -1);
        this.$store.dispatch("location/search");
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.location.total_locations;
      },
      set(val) {
        this.$store.commit("location/update_total_locations", val);
      },
    },
    pagination: {
      get() {
        return this.$store.state.location.pagination;
      },
      set(val) {
        this.$store.commit("location/update_pagination", val);
      },
    },
    xsearch: {
      get() {
        return this.$store.state.location.x_search;
      },
      set(val) {
        this.$store.commit("location/update_x_search", val);
      },
    },
    dialog_form: {
      get() {
        return this.$store.state.location.dialog_form;
      },
      set(val) {
        this.$store.commit("location/update_dialog_form", val);
      },
    },
    loading_save: {
      get() {
        return this.$store.state.location.loading_save;
      },
      set(val) {
        this.$store.commit("location/update_loading_save", val);
      },
    },
    xact: {
      get() {
        return this.$store.state.location.act;
      },
      set(val) {
        this.$store.commit("location/update_act", val);
      },
    },
    snackbar: {
      get() {
        return this.$store.state.location.alert_success;
      },
      set(val) {
        this.$store.commit("location/update_alert_success", val);
      },
    },
    msgsnackbar() {
      return this.$store.state.location.msg_success;
    },
    msgError() {
      return this.$store.state.location.error_message;
    },
    dialog_error: {
      get() {
        return this.$store.state.location.alert_error;
      },
      set(val) {
        this.$store.commit("location/update_alert_error", val);
      },
    },
  },
  methods: {
    changeSort(value, sort, header) {
      if (header.sort) {
        var newVal = value;
        var newSort = sort == "asc" ? "desc" : "asc";
        if (newVal !== this.pagination.sortBy) newSort = "asc";

        this.pagination = { descending: newSort, sortBy: newVal };
        this.$store.dispatch("location/search");
      }
    },
    isSelected(p) {
      return p.id == this.$store.state.location.selected_location.id;
    },
    selectMe(selected) {
      this.$store.commit("location/update_selected_location", selected);
      this.$store.commit("location/update_last_id", selected.id);
    },
    thr_search: _.debounce(function () {
      this.$store.dispatch("location/search");
    }, 1000),
    addForm() {
      this.xact = "add";
      this.$store.commit("location/update_last_id", -1);
      this.resetErrors();
      this.locationCode = "";
      this.locationName = "";

      this.dialog_form = true;
    },
    saveAdd() {
      this.resetErrors();
      this.locationValidation();

      let prm = {};
      prm.code = this.locationCode;
      prm.name = this.locationName;
      if (!this.error_location_form) this.$store.dispatch("location/save", prm);
    },
    locationCodeValidation() {
      if (this.locationCode === "") {
        this.error_location_code_message = "Anda belum mengisi";
        this.error_location_code = true;
      } else {
        this.error_location_code_message = "";
        this.error_location_code = false;
      }
    },
    locationNameValidation() {
      if (this.locationName === "") {
        this.error_location_name_message = "Anda belum mengisi";
        this.error_location_name = true;
      } else {
        this.error_location_name_message = "";
        this.error_location_name = false;
      }
    },
    locationValidation() {
      this.resetErrors();
      this.error_location_form = false;
      if (this.locationCode === "") {
        this.error_location_code_message = "Anda belum mengisi";
        this.error_location_code = true;
      }
      if (this.locationName === "") {
        this.error_location_name_message = "Anda belum mengisi";
        this.error_location_name = true;
      }

      if (this.locationCode === "" || this.locationName === "") {
        this.error_location_form = true;
      } else {
        this.error_location_form = false;
      }
    },
    resetErrors() {
      this.error_location_code_message = "";
      this.error_location_name_message = "";
    },
    openEdit(item) {
      this.xact = "edit";
      this.$store.commit("location/update_last_id", item.id);
      this.selectMe(item);
      this.resetErrors();
      this.resetLocation();
      this.xid = item.id;
      this.locationCode = item.locationCode;
      this.locationName = item.locationName;

      this.dialog_form = true;
    },
    saveEdit() {
      this.resetErrors();
      this.locationValidation();
      let prm = {};
      prm.id = this.xid;
      prm.code = this.locationCode;
      prm.name = this.locationName;
      if (!this.error_location_form) this.$store.dispatch("location/edit", prm);
    },
    resetLocation() {
      this.locationCode = "";
      this.locationName = "";
    },
    confirmDelete(data) {
      this.xid = data.id;
      this.xlocationName = data.locationName;
      this.selectMe(data);
      this.msgalert = "Yakin, mau hapus alasan " + data.locationName + " ?";
      this.dialogdeletealert = true;
    },
    deleteRow() {
      this.dialogdeletealert = false;
      this.$store.commit("location/update_last_id", -1);
      let prm = {
        id: this.xid,
      };
      this.$store.dispatch("location/delete", prm);
    },
  },
  watch: {
    xsearch(val, old) {
      this.xsearch = val;
      this.thr_search();
    },
  },
};
</script>
