<template>
  <div id="wrapper">
    <SidebarAdmintes />
    <div id="content-wrapper" class="service_section layout_padding">
      <Navbar />
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-12">
        <div class="card border-0 rounded shadow">
          <div class="card-body">
            <h4>TAMBAH MERK</h4>
            <hr />

            <form @submit.prevent="store">
              <div class="form-group">
                <label for="nama_merk" class="font-weight-bold">Nama Merk</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="post.nama_merk"
                  placeholder="Masukkan nama merk"
                />

                <div v-if="validation.nama_merk" class="mt-2 alert alert-danger">
                  {{ validation.nama_merk[0] }}
                </div>
              </div>

              <button type="submit" class="btn btn-primary">SIMPAN</button>
              <router-link :to="{ name: 'allMerk' }" class="btn btn-secondary"
                >CANCEL</router-link
              >
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer />
  </div>
  </div>
</template>

<script>
import Footer from "../../../includes/Footer.vue";
import SidebarAdmintes from "../../../includes/SidebarAdmintes.vue";
import Navbar from "../../../includes/navbar.vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

export default {
  components: {
    Footer,
    SidebarAdmintes,
    Navbar,
  },
  setup() {
    const post = reactive({
      nama_merk: "",
    });

    const validation = ref([]);

    const router = useRouter();

    function store() {
      let formData = new FormData();
      formData.append('nama_merk', post.nama_merk);

      axios
        .post('/api/merk/add_merk', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        })
        .then(() => {
          router.push('/admin/all_merk');
        })
        .catch((error) => {
          validation.value = error.response.data;
        });
    }

    return {
      post,
      validation,
      router,
      store,
    };
  },
};
</script>

<style>
body {
  background: lightgray;
}
</style>