<template>
<div class="container-fluid">
  <section class="content">
    <div class="header pb-2">
      
          <div class="header-body">
            <div class="row align-items-center py-4">
              <div class="col-lg-6 col-7">
                <nav
                  aria-label="breadcrumb"
                  class="d-none d-md-inline-block ml-md-4"
                >
                  <ol class="breadcrumb breadcrumb-links">
                    <li class="breadcrumb-item">
                      <a href="#"><i class="fas fa-home"></i></a>
                    </li>
                    <li class="breadcrumb-item">
                      <a href="#">Dashboards</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                      ຂໍ້ມູນລູກຄ້າ
                    </li>
                  </ol>
                </nav>
              </div>
              <div class="col-lg-6 col-5 text-right">

              </div>
            </div>
          </div>
      
      </div>
    <div class="row" v-if="isLoggedIn">
      <div class="col-lg-12">
        <div class="card-wrapper">
          <div class="card">
            <!-- Card header -->
            <div class="card-header">
              <h3 class="mb-0">ແກ້ໄຂຂໍ້ມູນລູກຄ້າ</h3>
            </div>
            <!-- Card body -->
            <div class="card-body">
              <form @submit.prevent="Check_form_validation">
                <div class="row">
                  <div class="col-md-4">
                    <uploadimgone :imagesBack="customers" />
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label class="form-control-label"
                        >ຊື່ຜູ້ໃຊ້:
                        <span class="text-red"
                          >* <span v-if="msg.name"> {{ msg.name }} </span></span
                        ></label
                      >
                      <div class="input-group input-group-merge">
                        <div class="input-group-prepend">
                          <span class="input-group-text"
                            ><i class="fas fa-user"></i
                          ></span>
                        </div>

                        <input
                          type="text"
                          class="form-control"
                          name="name"
                          ref="focusMe"
                          v-model="customers.name"
                        />
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="form-control-label">ນາມສະກຸນ:</label>
                      <div class="input-group input-group-merge">
                        <div class="input-group-prepend">
                          <span class="input-group-text"
                            ><i class="fas fa-user-tag"></i
                          ></span>
                        </div>
                        <input
                          type="text"
                          class="form-control"
                          v-model="customers.last_name"
                        />
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="form-control-label">ເພດ: </label>
                      <div class="input-group input-group-merge">
                        <div class="input-group-prepend">
                          <span class="input-group-text"
                            ><i class="fa fa-venus-mars"></i
                          ></span>
                        </div>
                        <select name="" class="form-control" v-on:change="onChangeSex($event)" v-model="customers.sex" >
                          <option value="">-- ເລືອກ --</option>
                          <option value="ທ່ານ">ຊາຍ</option>
                          <option value="ທ່ານ ນ">ຍິງ</option>
                        </select>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <label class="form-control-label">ສຳນັກງານ: </label>
                      <div class="input-group input-group-merge">
                        <div class="input-group-prepend">
                          <span class="input-group-text"
                            ><i class="fa fa-building"></i
                          ></span>
                        </div>
                        <select
                          name=""
                          class="form-control"
                          v-on:change="onChangeOffice($event)" v-model="customers.office"
                        >
                          <option value="">-- ເລືອກ --</option>
                          <option v-bind:value="office.id" :key="office.id" v-for="office in officeList">{{ office.office_name }}</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="form-control-label"
                        >ເບີໂທ:
                        <span class="text-red"
                          >*
                          <span v-if="msg.tel">
                            {{ msg.tel }}
                          </span></span
                        ></label
                      >
                      <div class="input-group input-group-merge">
                        <div class="input-group-prepend">
                          <span class="input-group-text"
                            ><i class="fa fa-phone-square mr-1"></i
                          > 020 </span>
                        </div>
                        <input
                          type="text"
                          class="form-control"
                           maxlength="8"
                          v-model="customers.tel"
                        />
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="form-control-label">ອີເມວລ໌:</label>
                      <div class="input-group input-group-merge">
                        <div class="input-group-prepend">
                          <span class="input-group-text"
                            ><i class="fa fa-envelope"></i
                          ></span>
                        </div>
                        <input
                          type="text"
                          class="form-control"
                          v-model="customers.email"
                        />
                      </div>
                    </div>
                  </div>

                  <div class="col-md-4"></div>
                  <div class="col-md-8">
                    <label class="form-control-label">ທີ່ຢູ່:</label>
                    <textarea
                      class="form-control mb-4"
                      rows="6"
                      v-model="customers.address"
                    ></textarea>
                  </div>
            
                </div>
                <div class="row justify-content-end pr-4">
                  <button type="submit" class="btn btn-info">
                    ບັນທຶກຂໍ້ມູນ
                  </button>
                  <button
                    type="button"
                    class="btn btn-secondary"
                    @click="$router.go(-1)"
                  >
                    ຍົກເລີກ
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
</template>

<script>
export default {
  name: "editCustomer",

  components: {},

  directives: {},

  data() {
    return {
      valid: false,
      msg: [],
      customers: [],
      officeList:[],
      isLoggedIn: false,
    };
  },

  mounted() {},

  methods: {
      onChangeSex: function (e) {
      var id = e.target.value;
      var name = e.target.options[e.target.options.selectedIndex].text;
      this.customers.sex = id;
      //  this.Check_form_validation(e);
    },
     onChangeOffice: function (e) {
      var id = e.target.value;
      var name = e.target.options[e.target.options.selectedIndex].text;
      this.customers.office = id;
      //  this.Check_form_validation(e);
    },
    Check_form_validation: function (event) {
      this.msg = [];
      var a = 0,
        b = 0,
        all;
      if (!this.customers.name) {
        this.msg.name = "ບໍ່ໃຫ້ເປັນຄ່າຫວ່າງ";
        a = 0;
      } else {
        this.msg.name = null;
        a = 1;
      }
      if (!this.customers.tel) {
        this.msg.tel = "ບໍ່ໃຫ້ເປັນຄ່າຫວ່າງ";
        b = 0;
      } else {
        this.msg.tel = null;
        b = 1;
      }

      all = a + b;

      if (all == 2) {
        this.updateCustomer();
      }
    },
     updateCustomer() {
      this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        this.$axios
          .post(`/api/customer/update/${this.$route.params.id}`, this.customers)
          .then((response) => {
            if(response.data.success){
               this.$router.push({ name: "customer" });
              this.$Progress.finish();
              this.$notify({ group: "sucess", title: "ສຳເລັດ!", text: " ຂໍ້ມູນໄດ້ຖຶກອັບເດດແລ້ວ! " }, 2000)
          
            } else {
              this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+ response.data.message}, 4000)
               this.$Progress.fail();
            }
           
          })
          .catch( (error)=> {
            this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+error.message }, 4000)
            //console.error(error);
            this.$Progress.fail();
          });
      });
    },
    getOffice(){
            this.$Progress.start()
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
                axios.get(`/api/customeroffice`)
                    .then((response) => {
                             this.officeList = response.data;
                            this.$Progress.finish()
                    })
                    .catch((error) => {
                      this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+error.message }, 4000)
                       // console.error(error)
                        this.$Progress.fail()
                    });
                });
        }
  },
  created() {
    this.$Progress.start();
    this.$axios.get("/sanctum/csrf-cookie").then((response) => {
      this.$axios
        .get(`/api/customer/edit/${this.$route.params.id}`)
        .then((response) => {
          this.customers = response.data;
          this.$Progress.finish();
        })
        .catch((error)=> {
          this.$notify({ group: "error", title: "ບໍ່ສຳເລັດ!", text: 'ຜິດຜາດ: '+error.message }, 4000)
          //console.error(error);
          this.$Progress.fail();
        });
    });

    this.$axios.get(`/api/users/checkauth`).then((response) => {
      if (!response.data.isLogin) {
        window.location.href = "/";
      }
    })
    this.getOffice()

    if(window.Laravel.isLoggedin){
           this.isLoggedIn = true
        }

  },
  beforeRouteEnter(to, from, next) {
    if (!window.Laravel.isLoggedin) {
      window.location.href = "/";
    }
    next();
  },
};
</script>

<style lang="scss" scoped></style>
