<template>
    <v-app>
      <v-card v-if="data">
        <v-card-title>
          Administración de Modalidades
          <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="40" max-width="80" contain :src="item.imagen"></v-img
          ></template>
          <template v-slot:item.actions="{ item }">
            <v-btn color="red" 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.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: "Icono", value: "image" },
          { text: "Acciones", value: "actions", sortable: false },
        ],
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData() {
        axios.get("/api/modality/index").then((response) => {
          this.data = response.data;
        });
      },
      edit(id) {
        window.location.href = "/panel-administracion/modalidades/" + id + "/editar";
      },
      trash(id, name) {
        Swal.fire({
          title: "Confirmación",
          html: `<p margin-bottom: 10px;">
                  ¿Estás seguro de que deseas eliminar <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/modality/delete/" + id, {
                headers: {
                  Authorization: AT,
                  Accept: "application/json",
                },
              })
              .then((response) => {
                Swal.fire({
                  title: "Eliminado",
                  text: "Se ha eliminado el elemento con éxito.",
                  icon: "success",
                  timer: 2000,
                }).then((_) => {});
                this.loadData();
              });
          }
        });
      },
    },
  };
  </script>