<template>
  <v-app>
    <v-card v-if="data">
      <v-card-title>
        Administración de Banners
        <v-spacer></v-spacer>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Buscar"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="data"
        class="elevation-1"
        :search="search"
      >
        <template v-slot:item.image="{ item }">
          <v-img
            max-height="51"
            max-width="90"
            contain
            :src="item.imagen"
          ></v-img
        ></template>
        <template v-slot:item.actions="{ item }">
          <v-btn color="primary" fab x-small dark @click="edit(item.id)">
            <v-icon> mdi-pencil </v-icon>
          </v-btn>
          <v-btn
            color="warning"
            fab
            x-small
            dark
            @click="trash(item.id, item.title)"
          >
            <v-icon> mdi-delete </v-icon>
          </v-btn>
        </template>
      </v-data-table>
    </v-card>
  </v-app>
</template>

<script>
const Swal = require("sweetalert2");
export default {
  data() {
    return {
      data: null,
      search: "",
      headers: [
        { text: "Titulo", value: "title" },
        { text: "Banner", value: "image" },
        { text: "Pagina", value: "name" },
        { text: "Acciones", value: "actions", sortable: false },
      ],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      axios.get("/api/banner/index").then((response) => {
        this.data = response.data;
      });
    },
    edit(id) {
      window.location.href = "/panel-administracion/banner/" + id + "/editar";
    },
    trash(id, name) {
      Swal.fire({
        title: "Confirmación",
        html: `<p margin-bottom: 10px;">
                ¿Estás seguro de que deseas eliminar el banner <b>"${name}"</b>?</p>
                    <p style="font-size: 0.7em;">
                        Si lo eliminas, no podrás recuperarlo.
                    </p>`,
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Sí, eliminar",
        cancelButtonText: "Cancelar",
      }).then((result) => {
        if (result.isConfirmed) {
          axios
            .delete("/api/banner/delete/" + id, {
              headers: {
                Authorization: AT,
                Accept: "application/json",
              },
            })
            .then((response) => {
              Swal.fire({
                title: "Eliminado",
                text: "Se ha eliminado el banner con éxito.",
                icon: "success",
                timer: 2000,
              }).then((_) => {});
              this.loadData();
            });
        }
      });
    },
  },
};
</script>