<template>
  <v-layout>
    <!-- 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 -->
    <!-- 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="deleteExpedition()">
            Yakin lah
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- End alert dialog -->
    <!-- DIALOG -->
    <v-dialog v-model="dialog_form" persistent width="50%"
      ><v-card>
        <v-card-title>
          <span class="title">Form Data Ekspedisi</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-progress-linear
          v-if="getLoadingSave === 1"
          :indeterminate="true"
        ></v-progress-linear>
        <v-card-text class="pt-0 pb-0">
          <v-layout column>
            <v-flex xs12>
              <v-text-field
                v-model="xname"
                :error="error_xname_message !== ''"
                :error-messages="error_xname_message"
                @blur="checkXName"
                label="Nama*"
              ></v-text-field>
            </v-flex>
            <v-flex xs12>
              <v-radio-group v-model="xinternal">
                <template v-slot:label>
                  <div>Ekspedisi Internal</div>
                </template>
                <v-radio value="Y">
                  <template v-slot:label>
                    <div>Ya</div>
                  </template>
                </v-radio>
                <v-radio value="N">
                  <template v-slot:label>
                    <div>Tidak</div>
                  </template>
                </v-radio>
              </v-radio-group>
            </v-flex>
            <v-flex>
              <v-card-title class="primary white--text title"
                >STAFF EKSPEDISI <v-spacer></v-spacer
                ><v-icon
                  v-ripple
                  class="white--text"
                  style="cursor: pointer"
                  @click="showHideStaff()"
                  >library_add</v-icon
                >
              </v-card-title>
              <div v-if="show_from_staff">
                <v-card elevation="1" class="pa-2 pt-3">
                  <v-select
                    v-if="xinternal == 'Y'"
                    outline
                    v-model="xstaff"
                    :items="getStaff"
                    item-text="staffName"
                    item-value="xstaff"
                    return-object
                    @blur="checkStaffForm"
                    :error="error_staff_message !== ''"
                    :error-messages="error_staff_message"
                    label="Staff*"
                    required
                  ></v-select>
                  <v-text-field
                    v-if="xinternal == 'N'"
                    outline
                    v-model="xstaffName"
                    :error="error_sname_message !== ''"
                    :error-messages="error_sname_message"
                    @blur="checkStaffForm"
                    label="Nama*"
                  ></v-text-field>
                  <v-text-field
                    v-if="xinternal == 'N'"
                    outline
                    v-model="xstaffMobile"
                    :error="error_smobile_message !== ''"
                    :error-messages="error_smobile_message"
                    @blur="checkStaffForm"
                    label="No Telp.*"
                  ></v-text-field>
                  <v-divider class="mb-2 mt-3"></v-divider>
                  <div class="align-right text-lg-right">
                    <v-spacer></v-spacer>
                    <v-btn small depressed @click="hidedialogstaff()"
                      >Batal</v-btn
                    >
                    <v-btn
                      small
                      depressed
                      v-if="act_staff == 'add'"
                      @click="saveStaf()"
                      >Tambahkan</v-btn
                    >
                    <v-btn
                      small
                      depressed
                      v-if="act_staff == 'edit'"
                      @click="editStaff()"
                      >simpan perubahan</v-btn
                    >
                  </div>
                </v-card>
              </div>
              <div v-if="!show_from_staff">
                <div v-if="staffList?.length == 0">
                  <v-alert :value="true" type="info">
                    Tambahkan data staff ekspedisi
                  </v-alert>
                </div>
                <div v-if="staffList?.length > 0">
                  <v-card elevation="1" class="pt-2 pb-2 pl-3 pr-3">
                    <v-card
                      class="mb-2 pa-2"
                      v-for="(staff, kstaff) in staffList"
                      :key="kstaff"
                    >
                      <div>Nama : {{ staff.staffName }}</div>
                      <p>Nomor Telp. {{ staff.staffMobile }}</p>
                      <v-divider></v-divider>
                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn
                          small
                          depressed
                          color="primary"
                          dark
                          @click="openEditStaff(staff, kstaff)"
                          >ubah <v-icon small right dark>edit</v-icon></v-btn
                        >
                        <v-btn
                          small
                          depressed
                          color="danger"
                          dark
                          @click="deleteStaff(kstaff)"
                          >hapus <v-icon small right dark>clear</v-icon></v-btn
                        >
                      </v-card-actions>
                    </v-card>
                  </v-card>
                </div>
              </div>
            </v-flex>
            <v-card-actions class="mt-3 text-lg-right">
              <v-layout column>
                <v-divider></v-divider>
                <v-layout row class="pa-2">
                  <v-spacer></v-spacer>
                  <v-btn
                    color="grey"
                    flat
                    @click="dialog_form = false"
                    :disabled="getLoadingSave === 1"
                    >Tutup
                  </v-btn>
                  <v-btn
                    v-if="act_form === 'add'"
                    color="primary"
                    @click="saveExpedition()"
                    flat
                    :disabled="getLoadingSave === 1"
                    >Simpan</v-btn
                  >
                  <v-btn
                    v-if="act_form === 'edit'"
                    color="primary"
                    flat
                    @click="editExpedition()"
                    :disabled="getLoadingSave === 1"
                    >Simpan Perubahan</v-btn
                  >
                </v-layout>
              </v-layout>
            </v-card-actions>
          </v-layout>
        </v-card-text>
      </v-card>
    </v-dialog>
    <!-- END DIALOG -->
    <v-flex xs12>
      <v-card>
        <!-- Toolbar -->
        <v-toolbar
          color="blue darken-1"
          dark
          :scroll-off-screen="false"
          :inverted-scroll="false"
          scroll-target="#scrolling-techniques"
          :scroll-toolbar-off-screen="false"
        >
          <v-toolbar-title class="headline font-weight-bold"
            >EKSPEDISI</v-toolbar-title
          >
          <v-spacer></v-spacer>
          <div>
            <v-btn icon @click="addForm()"><v-icon>library_add</v-icon></v-btn>
          </div>
        </v-toolbar>
        <!-- End Toolbar -->
        <!-- Search area -->
        <v-card elevation="0">
          <v-card-text>
            <v-layout row>
              <v-flex xs3>
                <v-text-field
                  v-model="xsearch"
                  label="Cari"
                  placeholder="Ketikkan pencarian di sini"
                  outline
                  hide-details
                ></v-text-field>
              </v-flex>
            </v-layout>
          </v-card-text>
        </v-card>
        <v-divider></v-divider>
        <!-- End Search Area -->

        <v-layout row>
          <v-flex xs7>
            <div
              id="scrolling-techniques"
              class="scroll-y"
              style="overflow-y: auto"
              :style="{ height: windowHeight }"
            >
              <!-- DATA TABEL -->
              <v-data-table
                :headers="headers"
                :items="getExpedition"
                :loading="isLoading"
                hide-actions
              >
                <template v-slot:headers="props">
                  <tr style="height: 48px !important">
                    <th
                      v-for="header in props.headers"
                      :key="header.text"
                      @click="changeSort(header.value, sorting.type, header)"
                      :width="header.width"
                    >
                      <v-icon
                        color="blue darken-2"
                        v-if="
                          sorting.sortBy === header.value &&
                          header.sort &&
                          sorting.type == 'desc'
                        "
                        small
                        >arrow_upward</v-icon
                      >
                      <v-icon
                        color="blue darken-2"
                        v-if="
                          sorting.sortBy === header.value &&
                          header.sort &&
                          sorting.type == 'asc'
                        "
                        small
                        >arrow_downward</v-icon
                      >
                      <v-icon
                        color="grey lighten-2"
                        v-if="sorting.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 pl-3"
                    @click="selectMe(props.item)"
                    v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                  >
                    {{ props.item.name }}
                  </td>
                  <td
                    class="text-xs-center pa-2"
                    @click="selectMe(props.item)"
                    v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                  >
                    <p v-if="props.item.internal === 'Y'">YA</p>
                    <p v-if="props.item.internal === 'N'">TIDAK</p>
                  </td>
                  <td
                    class="text-xs-left pa-2"
                    @click="selectMe(props.item)"
                    v-bind:class="{ 'blue lighten-5': isSelected(props.item) }"
                  >
                    <v-toolbar flat dense>
                      <v-btn
                        small
                        color="primary"
                        dark
                        @click="openEditForm(props.item, props.index)"
                        >ubah<v-icon small right dark>edit</v-icon></v-btn
                      >
                      <v-divider vertical></v-divider>
                      <v-btn
                        small
                        color="danger"
                        dark
                        @click="confirmDelete(props.item)"
                        >hapus <v-icon small right dark>clear</v-icon></v-btn
                      >
                    </v-toolbar>
                  </td>
                </template>
              </v-data-table>
              <!-- END DATA TABEL -->
            </div>
          </v-flex>
          <!-- STAFF AREA -->
          <v-divider vertical></v-divider>
          <v-flex xs5>
            <div style="overflow-y: auto" :style="{ height: windowHeight }">
              <v-tabs grow :hide-slider="true" class="white--text"
                ><V-tab style="height: 47px !important"
                  >STAFF EKSPEDISI : {{ selected_item.name }}
                </V-tab></v-tabs
              >
              <v-divider></v-divider>
              <v-tabs-items>
                <v-tab-item>
                  <v-card flat>
                    <v-card-text>
                      <v-alert
                        :value="true"
                        color="info"
                        icon="info"
                        outline
                        v-if="selected_item.staff?.length === 0"
                      >
                        Belum ada data staff ekspedisi
                      </v-alert>
                      <v-card
                        class="mb-2"
                        v-if="selected_item.staff?.length > 0"
                        v-for="(staff, kstaff) in selected_item.staff"
                        :key="kstaff"
                      >
                        <v-card-title>
                          {{ staff.staffName }}
                        </v-card-title>
                        <v-divider></v-divider>
                        <v-card-text>
                          <p class="mb-1">
                            Nomor Telp. {{ staff.staffMobile }}
                          </p>
                        </v-card-text>
                      </v-card>
                    </v-card-text>
                  </v-card>
                </v-tab-item>
              </v-tabs-items>
            </div>
          </v-flex>
          <!-- END STAFF AREA -->
        </v-layout>

        <!-- 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",
      windowHeight: window.innerHeight - 360 + "px",
      xinternal: "Y",
      xname: "",
      xstaffName: "",
      xstaffId: 0,
      xstaffMobile: "",
      xstaff: {},
      error_sname_message: "",
      error_smobile_message: "",
      error_staff_message: "",
      error_xname_message: "",
      staffList: [],
      show_from_staff: false,
      error_form: true,
      act_staff: "add",
      act_form: "add",
      staffIndex: -1,
      staffError: false,
      idExpedition: -1,
      dialogdeletealert: false,
      msgalert: "",
      clr: "success",
      headers: [
        {
          text: "NAMA",
          align: "center",
          sortable: false,
          sort: true,
          value: "ExpeditionName",
          width: "50%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "INTERNAL",
          align: "center",
          sortable: false,
          sort: true,
          value: "ExpeditionIsInternal",
          width: "30%",
          class: "pa-2 blue darken-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sortable: false,
          sort: false,
          value: "rm",
          width: "20%",
          class: "pa-2 blue darken-3 white--text",
        },
      ],
    };
  },
  mounted() {
    this.$store.dispatch("expedition/lookup");
    this.$store.dispatch("expedition/getStaff");
  },
  computed: {
    isLoading() {
      return this.$store.state.expedition.search_status;
    },
    getExpedition() {
      return this.$store.state.expedition.expedition;
    },
    getStaff() {
      return this.$store.state.expedition.staff;
    },
    getLoadingSave() {
      return this.$store.state.expedition.save_status;
    },
    selected_item: {
      get() {
        return this.$store.state.expedition.selected_item;
      },
      // set(val) {
      //   this.$store.commit("supplier/update_selected_supplier", val);
      // },
    },
    curr_page: {
      get() {
        return this.$store.state.expedition.current_page;
      },
      set(val) {
        this.$store.commit("expedition/update_current_page", val);
        this.$store.commit("expedition/update_last_id", -1);
        this.$store.dispatch("expedition/lookup");
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.expedition.total;
      },
      // set(val) {
      //   this.$store.commit("supplier/update_total_page", val);
      // },
    },
    xsearch: {
      get() {
        return this.$store.state.expedition.x_search;
      },
      set(val) {
        this.$store.commit("expedition/update_x_search", val);
      },
    },
    sorting: {
      get() {
        return this.$store.state.expedition.sorting;
      },
      set(val) {
        this.$store.commit("expedition/update_sorting", val);
      },
    },
    dialog_form: {
      get() {
        return this.$store.state.expedition.dialog_form;
      },
      set(val) {
        this.$store.commit("expedition/update_dialog_form", val);
      },
    },
    snackbar: {
      get() {
        return this.$store.state.expedition.alert_success;
      },
      set(val) {
        this.$store.commit("expedition/update_alert_success", val);
      },
    },
    msgsnackbar() {
      return this.$store.state.expedition.msg_success;
    },
    updateAlert_success(val) {
      this.$store.commit("expedition/update_dialog_form", val);
    },
  },
  methods: {
    selectMe(sc) {
      this.$store.commit("expedition/update_selected_item", sc);
    },
    isSelected(p) {
      return p.id == this.selected_item.id;
    },
    changeSort(value, sort, header) {
      if (header.sort) {
        var newVal = value;
        var newSort = sort == "asc" ? "desc" : "asc";
        if (newVal !== this.sorting.sortBy) newSort = "asc";
        this.sorting = { type: newSort, sortBy: newVal };
        this.$store.commit("expedition/update_last_id", -1);
        this.$store.dispatch("expedition/lookup");
      }
    },
    addForm() {
      this.resetForm();
      this.act_form = "add";
      this.dialog_form = true;
      this.xstaffName = "";
      this.xstaffMobile = "";
      this.xname = "";
      this.xstaff = {};
      this.staffList = [];
    },
    openEditForm(item, index) {
      this.selectMe(item);
      this.$store.commit("expedition/update_last_id", item.id);
      this.show_from_staff = false;
      this.resetForm();
      this.act_form = "edit";
      this.dialog_form = true;
      this.xname = item.name;
      this.xinternal = item.internal;
      this.idExpedition = item.id;
      this.staffList = JSON.parse(JSON.stringify(item.staff));
    },
    showHideStaff() {
      this.act_staff = "add";
      this.show_from_staff = !this.show_from_staff;
      this.xstaffName = "";
      this.xstaffMobile = "";
      this.xstaff = {};
    },
    hidedialogstaff() {
      this.show_from_staff = false;
      this.xstaffName = "";
      this.xstaffMobile = "";
      this.xstaff = {};
      this.resetForm();
    },
    saveStaf() {
      let staff = this.staffList;
      if (this.xinternal === "Y") {
        if (Object.keys(this.xstaff).length === 0) {
          this.error_staff_message = "Pilih salah satu staff";
        } else {
          this.xstaff.id = 0;
          staff.push(this.xstaff);
          this.hidedialogstaff();
        }
      } else {
        if (this.xstaffName === "") {
          this.error_sname_message = "Nama tidak boleh kosong ";
        }
        if (this.xstaffMobile === "") {
          this.error_smobile_message = "No Telp tidak boleh kosong ";
        }
        if (this.xstaffMobile !== "" && this.xstaffName !== "") {
          staff.push({
            id: 0,
            staffName: this.xstaffName,
            staffMobile: this.xstaffMobile,
            staffId: 0,
          });
          this.hidedialogstaff();
          this.resetForm();
        }
      }
    },
    editStaff() {
      let staff = this.staffList;
      if (this.xinternal === "Y") {
        if (this.act_form === "edit") {
          this.xstaff.id = this.xstaffId;
        }
        staff[this.staffIndex] = this.xstaff;
      } else {
        stf = {
          staffName: this.xstaffName,
          staffMobile: this.xstaffMobile,
          staffId: 0,
        };
        if (this.act_form === "edit") {
          stf.id = this.xstaffId;
        }
        staff[this.staffIndex] = stf;
      }
      this.xstaffId = 0;
      this.hidedialogstaff();
    },
    resetForm() {
      this.error_sname_message = "";
      this.error_smobile_message = "";
      this.error_staff_message = "";
    },
    resetAllForm() {
      this.error_sname_message = "";
      this.error_smobile_message = "";
      this.error_staff_message = "";
      this.error_xname_message = "";
    },

    openEditStaff(staff, idx) {
      this.act_staff = "edit";
      this.staffIndex = idx;
      if (this.xinternal === "Y") {
        this.xstaff = staff;
        if (this.act_form === "edit") {
          if (typeof staff.id === "undefined") {
            this.xstaffId = 0;
          } else {
            this.xstaffId = staff.id;
          }
        }
      } else {
        if (this.act_form === "edit") {
          if (typeof staff.id === "undefined") {
            this.xstaffId = 0;
          } else {
            this.xstaffId = staff.id;
          }
        }
        this.xstaffName = staff.staffName;
        this.xstaffMobile = staff.staffMobile;
      }
      this.show_from_staff = true;
    },
    deleteStaff(idx) {
      this.act_staff = "add";
      let staff = this.staffList;
      staff.splice(idx, 1);
      this.staffList = staff;
      if (this.staffList.length === 0) {
        this.show_from_staff = true;
      }
    },
    checkStaffForm() {
      this.resetForm();
      if (this.xname === "" && this.staffList.length === 0) {
        this.error_form = true;
      }
      if (this.xname !== "" && this.staffList.length !== 0) {
        this.error_form = false;
      }
    },
    checkXName() {
      if (this.xname === "") {
        this.error_xname_message = "Nama harus diisi";
      }
      if (this.xname !== "") {
        this.error_xname_message = "";
      }
    },
    saveExpedition() {
      this.checkStaffForm();
      this.checkXName();
      var prm;
      if (this.xinternal === "Y") {
        prm = {
          name: this.xname,
          isInternal: this.xinternal,
          staff: this.staffList,
        };
      }
      if (this.xinternal === "N") {
        prm = {
          name: this.xname,
          isInternal: this.xinternal,
          staff: this.staffList,
        };
      }

      if (!this.error_form) {
        this.$store.dispatch("expedition/addData", prm);
      }
    },
    editExpedition() {
      this.checkStaffForm();
      this.checkXName();
      // if (this.staffList.length === 0) {
      //   console.log("staff list == 0");
      // }
      var prm = {
        id: this.idExpedition,
        name: this.xname,
        isInternal: this.xinternal,
        staff: this.staffList,
      };
      if (!this.error_form) {
        this.$store.dispatch("expedition/editData", prm);
      }
    },
    confirmDelete(data) {
      this.idExpedition = data.id;
      this.xname = data.name;
      this.selectMe(data);
      this.msgalert = "Yakin, mau hapus ekspedisi " + data.name + " ?";
      this.dialogdeletealert = true;
    },
    deleteExpedition() {
      this.dialogdeletealert = false;
      this.$store.commit("expedition/update_last_id", -1);
      let prm = {
        id: this.idExpedition,
        name: this.xname,
      };
      this.$store.dispatch("expedition/deleteData", prm);
    },
    thr_search: _.debounce(function () {
      this.$store.dispatch("expedition/lookup");
    }, 1000),
  },
  watch: {
    xsearch(val, old) {
      this.xsearch = val;
      this.thr_search();
    },

    xinternal(val, old) {
      if (this.xinternal !== old && this.act_form === "add")
        this.staffList = [];
      if (
        this.xinternal !== this.selected_item.internal &&
        this.act_form === "edit"
      )
        this.staffList = [];
      if (
        this.xinternal === this.selected_item.internal &&
        this.act_form === "edit"
      )
        this.staffList = JSON.parse(JSON.stringify(this.selected_item.staff));
    },
    xstaff(val, old) {},
  },
};
</script>
