<template>
  <div class="container">
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"> <i class="fa-solid fa-globe"></i> Portal da Transparência</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- <FormDominio/> -->
    <div>
      <br>
      <h6> <i class="fa-regular fa-folder-open"></i> <i class="fa-duotone fa-plus"></i> Inserir Domínio</h6>
      <form @submit.prevent="PostDominio">
        <input id="idom" type="text" v-model="form.Titulo">
        <button id="sendom" v-on:click="PostDominio" class="btn btn-outline-primary btn-sm shadow-sm p-1 mb-1">
          <i class="fa-duotone fa-plus"></i> Gravar</button>
      </form>
      <br>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Domínio</th>
          <th scpde="col">Ações</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="dominio in dominios" v-bind:key="dominio.ID">
          <td> {{ dominio.ID }} </td>
          <td> <i class="fa-regular fa-folder-open"></i> {{ dominio.Titulo }}</td>
          <td>
            <div class="btn-toolbar" role="toolbar">
              <div class="btn-group" role="group">
                <b-button v-b-modal.modal-1 v-bind:id="dominio.ID" @click="GetDominio(dominio.ID)"
                  class="btn btn-success btn-sm p-1 mb-1">
                  <i class="fa-solid fa-pen-clip"></i>
                  Alterar
                </b-button>
              </div>
              <div class="btn-group" role="group">
                <button v-bind:id="dominio.ID" @click="DeleteDominio(dominio.ID)"
                  class="btn btn-danger btn-sm shadow-sm p-1 mb-1">
                  <i class="fa-solid fa-trash-can"></i> Apagar</button>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- Modal -->
    <b-modal id="modal-1" centered title="Alterar Domínio" @ok="PutDominio()">
      <form @submit.prevent="PutDominio" >
        <input id="updatedom" type="text" v-model="formUpdate.Titulo">
      </form>
    </b-modal>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "PortalDominio",
  data() {
    return {
      form: {
        Titulo: ""
      },
      formUpdate: {
        Titulo: "",
        ID:""
      },
      dominios: {},
    };
  },
  created() {
    this.getDominios();
  },
  methods: {
    getDominios() {
      axios
        .get("http://localhost:3000/dominios")
        .then((res) => {
          this.dominios = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    ListDominios() {
      axios.get("http://localhost:3000/dominios")
        .then((res) => this.dominios = res.data)
        .then(() => this.form.Titulo = "")
        .catch((error) => {
          console.log(error);
        })
    },
    PostDominio(e) {
      e.preventDefault()
      axios.post("http://localhost:3000/dominios", this.form)
        .then(() => { this.ListDominios() })
        .catch((error) => {
          console.log(error);
        })
    },
    DeleteDominio(dom) {
      axios.delete("http://localhost:3000/dominios/" + dom)
        .then((res) => { console.log(res.data) })
        .then(() => { this.ListDominios() })
        .catch((error) => {
          console.log(error);
        })
    },
    PutDominio() {
      console.log(this.formUpdate)
      axios.put("http://localhost:3000/dominios/" + this.formUpdate.ID, { "Titulo": this.formUpdate.Titulo })
        .then(() => { console.log("Put Done!") })
        .then(()=>{this.ListDominios()})
        .catch((error) => {
          console.log(error);
        })
    },
    GetDominio(dom) {
      var ldom;
      axios.get("http://localhost:3000/dominios/" + dom)
        .then((res) => { ldom = res.data })
        .then(() => {
          this.formUpdate.Titulo = ldom.Titulo
          this.formUpdate.ID = ldom.ID
        })
        .then(() => { console.log(this.formUpdate) })
        .catch((error) => {
          console.log(error);
        })
    },
  }
}
</script>

<style>
.btn {
  margin-right: 5px;
  min-width: 100px;
}

#sendom {
  margin-left: 5px;
}

#lbldom {
  margin-right: 5px;
}

#idom {
  min-width: 400px;
}

#updatedom {
  width: 100%
}
</style>