<template>
  <div id="wrapper">
    <SidebarAdmintes />
    <div id="content-wrapper" class="service_section layout_padding">
      <Navbar />
      <div class="container">
        <router-link to="/admin/add_alat" class="btn btn-success mb-3">
          Tambah Alat
        </router-link>
  
        <table class="table table-bordered table-hover">
          <thead class="thead-dark">
            <tr>
              <th scope="col">No</th>
              <th scope="col">No Inventaris</th>
              <th scope="col">Kondisi</th>
              <th scope="col">ID Jenis Alat</th>
              <th scope="col">ID Ruang</th>
              <th scope="col">Tahun</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(alat, index) in ListAlat" :key="alat.id_alat">
              <td>{{ index + 1 }}</td>
              <td>{{ alat.no_inventaris }}</td>
              <td>{{ alat.kondisi }}</td>
              <td>{{ alat.id_jenis_alat }}</td>
              <td>{{ alat.id_ruang }}</td>
              <td>{{ alat.tahun }}</td>
              <td>
                <button @click="updateAlat(alat.id_alat)" class="btn btn-info">Update</button>
                <button @click="deleteAlat(alat.id_alat)" class="btn btn-danger">Delete</button>
              </td>
            </tr>
          </tbody>
        </table>
        </div>
        <Footer />
      </div>
    </div>
</template>

<script>
import Footer from "../../includes/Footer.vue";
import SidebarAdmintes from "../../includes/SidebarAdmintes.vue";
import Navbar from "../../includes/navbar.vue";

export default {
  components: {
    Footer,
    SidebarAdmintes,
    Navbar,
  },
  data() {
      return {
        ListAlat: [],
      };
    },
    mounted() {
      this.fetchAlat();
    },
    methods: {
      async fetchAlat() {
        try {
          const response = await this.$axios.get('/api/alat');
          this.ListAlat = response.data;
        } catch (error) {
          console.error('Error fetching alat:', error);
        }
      },
      updateAlat(id_alat) {
        this.$router.push({ name: 'updateAlat', params: { id: id_alat } });
      },
      async deleteAlat(id_alat) {
        const isConfirmed = window.confirm("Are you sure you want to delete this alat?");
        if (isConfirmed) {
          try {
            await this.$axios.delete(`/api/alat/${id_alat}`);
            this.fetchAlat();
          } catch (error) {
            console.error('Error deleting alat:', error);
          }
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .product-image {
    max-width: 100px;
    max-height: 75px;
    object-fit: cover;
  }
  
  .container {
    padding: 30px;
  }
  
  .btn-success {
    background-color: #28a745;
    border-color: #28a745;
  }
  
  .btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
  }
  
  .table th,
  .table td {
    text-align: center;
    vertical-align: middle;
  }
  
  .btn-info,
  .btn-danger {
    width: 80px;
  }
  </style>
  