<template>
  <div>
    <div class="row">
      <card title="Categorias">
        <div class="row">
          <div class="col-8">
            <el-table :data="categorias" border height="500">
              <el-TableColumn prop="name" label="Nombre Categoría" sortable>
              </el-TableColumn>

              <el-TableColumn prop="icon" label="Icono" sortable>
                <div slot-scope="{ row, $index }">
                  <i class="fas text-success fa-2x" :class="[row.icon]"></i>
                </div>
              </el-TableColumn>
              <el-TableColumn>
                <div slot-scope="{ row, $index }">
                  <el-tooltip content="Delete" effect="light">
                    <base-button
                      type="danger"
                      icon
                      size="sm"
                      class="btn-link"
                      @click="deleteCategoria(row._id)"
                    >
                      <i class="fa fa-trash"></i>
                    </base-button>
                  </el-tooltip>
                </div>
              </el-TableColumn>
            </el-table>
          </div>
          <div class="col-4">
            <form>
              
                <base-input
                  type="text"
                  placeholder="Nombre de categoria"
                  v-model="newCategoria.name"
                />
             
          
                <base-input>
                  <select class="form-control" v-model="newCategoria.icon">
                    <option v-for="icono in iconos">
                      {{ icono.icon }}
                    </option>
                  </select>
                </base-input>
   
              <div class="col pull-buttom">
                <base-button
                  type="info"
                  class="mb-3"
                  size="lg"
                  @click="enviarCategoria()"
                  >Enviar</base-button
                >
              </div>
            </form>
          </div>
        </div>
      </card>
    </div>

    <div class="row">
      <card title="Metodos de pago">
        <div class="row">
          <div class="col-8">
            <el-table :data="metodos" border height="500">
              <el-TableColumn prop="name" label="Nombre Categoría" sortable>
              </el-TableColumn>

              <el-TableColumn prop="icon" label="Icono" sortable>
                <div slot-scope="{ row, $index }">
                  <i class="fas text-success fa-2x" :class="[row.icon]"></i>
                </div>
              </el-TableColumn>
              <el-TableColumn>
                <div slot-scope="{ row, $index }">
                  <el-tooltip content="Delete" effect="light">
                    <base-button
                      type="danger"
                      icon
                      size="sm"
                      class="btn-link"
                      @click="deleteMetodo(row._id)"
                    >
                      <i class="fa fa-trash"></i>
                    </base-button>
                  </el-tooltip>
                </div>
              </el-TableColumn>
            </el-table>
          </div>
          <div class="col-4">
              <form>
                  <base-input placeholder="Nombre pago" v-model="newMetodo.name"></base-input>
                  <base-input>
                  <select class="form-control" v-model="newMetodo.icon">
                    <option v-for="icono in iconos">
                      {{ icono.icon }}
                    </option>
                  </select>
                </base-input>
                  
            <div class="col pull-buttom">
                <base-button
                  type="info"
                  class="mb-3"
                  size="lg"
                  @click="enviarMetodo()"
                  >Enviar</base-button
                >
              </div>
              </form>
          </div>
        </div>
      </card>
    </div>
  </div>
</template>

<script>
import { Table, TableColumn } from "element-ui";

export default {
  middleware: "authenticated",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
  },
  mounted() {
    this.getCategorias();
     this.getMetodos();
  },
  data() {
    return {
      newCategoria: {
        name: "",
        icon: "",
      },
       newMetodo: {
        name: "",
        icon: "",
      },
      
      iconos: [
        { icon: "fa-bell" },
        { icon: "fa-book" },
        { icon: "fa-bookmark" },
        { icon: "fa-adjust" },
        { icon: "fa-puzzle-piece" },
        { icon: "fa-heart" },
        { icon: "fa-hotel" },
        { icon: "fa-plug" },
        { icon: "fa-square" },
        { icon: "fa-truck" },
        { icon: "fa-bus" },
        { icon: "fa-university" },
        { icon: "fa-tasks" },
        { icon: "fa-shopping-bag" },
        { icon: "fa-graduation-cap" },
        { icon: "fa-shopping-cart" },
        { icon: "fa-microchip" },
        { icon: "fa-bath" },
        { icon: "fa-star" },
        { icon: "fa-suitcase" },
        { icon: "fa-tablet" },
        { icon: "fa-terminal" },
        { icon: "fa-address-card" },
        { icon: "fa-credit-card" },
        { icon: "fa-paypal" },
        { icon: "fa-cc-mastercard" },
        { icon: "fa-cc-visa" },
        { icon: "fa-money" },
        { icon: "fa-bank" },
      ],
      categorias: [],
      metodos: [],
    };
  },
  methods: {
    enviarCategoria() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      const toSend = this.newCategoria;

      this.$axios
        .post("/categoria", toSend, axiosHeader)
        .then((res) => {
          console.log(res);
          this.getCategorias();
        })
        .catch((e) => {
          this.$notify({
            type: "danger",
            icon: "tim-icons icon-alert-circle-exc",
            message: JSON.parse(e.request.response).error,
          });
          console.log(e.request.responseText);
        });
    },

    getCategorias() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      this.$axios
        .get("/categoria", axiosHeader)
        .then((res) => {
          console.log(res.data.data);
          this.categorias = res.data.data;
          this.$store.commit("setCategorias", this.categorias);
        })
        .catch((e) => console.log(e));
    },
    deleteCategoria(id) {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          id: id,
        },
      };
      this.$axios
        .delete("/categoria", axiosHeader)
        .then((res) => {
          console.log(res.data);
          this.getCategorias();
        })
        .catch((e) => {
          console.log(e);
        });
    },
     enviarMetodo() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      const toSend = this.newMetodo;

      this.$axios
        .post("/metodo", toSend, axiosHeader)
        .then((res) => {
          console.log(res);
          this.getMetodos();
        })
        .catch((e) => {
          this.$notify({
            type: "danger",
            icon: "tim-icons icon-alert-circle-exc",
            message: JSON.parse(e.request.response).error,
          });
          console.log(e.request.responseText);
        });
    },

    getMetodos() {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
      };
      this.$axios
        .get("/metodo", axiosHeader)
        .then((res) => {
          console.log(res.data.data);
          this.metodos = res.data.data;
          this.$store.commit("setMetodos", this.metodos);
        })
        .catch((e) => console.log(e));
    },
    deleteMetodo(id) {
      const axiosHeader = {
        headers: {
          token: this.$store.state.auth.token,
        },
        params: {
          id: id,
        },
      };
      this.$axios
        .delete("/metodo", axiosHeader)
        .then((res) => {
          console.log(res.data);
          this.getMetodos();
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style>
</style>