<template>
  <v-app>
    <v-card v-if="data">
      <v-card-title>
        Administración de Congresos
        <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="110"
            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="info" fab x-small dark @click="gallery(item.id)">
            <v-icon> mdi-folder-multiple-image </v-icon>
          </v-btn>
          <v-btn color="warning" fab x-small dark @click="trash(item.id, item.name)">
            <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: "Nombre", value: "name" },
        { text: "Fecha de Inicio", value: "start_date" },
        { text: "Fecha de Finalización", value: "end_date" },
        { text: "Acciones", value: "actions", sortable: false },
      ],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      axios.get("/api/conference/index").then((response) => {
        this.data = response.data;
      });
    },
    edit(id) {
      window.location.href = "/panel-administracion/congresos/" + id + "/editar";
    },
    gallery(id){
      window.location.href = "/panel-administracion/congresos/" + id + "/galeria";
    },
    trash(id, name) {
      Swal.fire({
        title: "Confirmación",
        html: `<p margin-bottom: 10px;">
                ¿Estás seguro de que deseas eliminar el <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/conference/delete/" + id, {
              headers: {
                Authorization: AT,
                Accept: "application/json",
              },
            })
            .then((response) => {
              console.log(response.data)
              Swal.fire({
                title: "Eliminado",
                text: "Se ha eliminado el congreso con éxito.",
                icon: "success",
                timer: 2000,
              }).then((_) => {});
              this.loadData();
            });
        }
      });
    },
  },
};
</script>