<template>
  <!-- Add State -->
  <div class="modal fade" id="add_role">
    <div class="modal-dialog modal-dialog-centered custom-modal">
      <div class="modal-content">
        <div class="modal-wrapper">
          <div class="modal-header">
            <h4 class="modal-title">Add State</h4>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            >
              <i class="ti ti-x"></i>
            </button>
          </div>
          <form @submit.prevent="submitForm">
            <div class="modal-card">
              <div class="row">
                <div class="col-md-12">
                  <div class="mb-3">
                    <label class="col-form-label">State Name</label>
                    <input
                      type="text"
                      class="form-control"
                      placeholder="Enter State Name"
                    />
                  </div>
                  <div class="mb-3">
                    <label class="col-form-label">Country Name</label>
                    <vue3-select
                      v-model="selected"
                      :options="Statve"
                      placeholder="Select"
                    />
                  </div>
                  <div
                    class="modal-satus-toggle d-flex align-items-center justify-content-between"
                  >
                    <div class="status-title">
                      <h5>Status</h5>
                      <p>Change the Status by toggle</p>
                    </div>
                    <div class="status-toggle modal-status">
                      <input type="checkbox" id="user1" class="check" />
                      <label for="user1" class="checktoggle"> </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-btn text-end">
              <a
                href="javascript:void(0);"
                class="btn btn-light me-2"
                data-bs-dismiss="modal"
                >Cancel</a
              >
              <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">
                Add State
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Add State -->

  <!-- Delete Modal -->
  <div class="modal fade" id="delete-modal">
    <div class="modal-dialog modal-dialog-centered custom-modal promote-modal">
      <div class="modal-content">
        <div class="modal-wrapper">
          <form @submit.prevent="submitFormOne">
            <div class="promote-modal-body text-center">
              <span class="delete-icon">
                <i class="ti ti-trash-x"></i>
              </span>
              <h4>Confirm Deletion</h4>
              <p>
                You want to delete all the marked items, this cant be undone once you
                delete.
              </p>
              <div class="d-flex justify-content-center">
                <a
                  href="javascript:void(0);"
                  class="btn btn-light me-3"
                  data-bs-dismiss="modal"
                  >Cancel</a
                >
                <button
                  type="submit"
                  class="btn btn-danger"
                  id="toprightToastBtn"
                  data-bs-dismiss="modal"
                >
                  Yes, Delete
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Delete Modal -->
</template>
<script>
export default {
  data() {
    return {
      selected: null,
      Statve: [
        { label: "Select", value: "Select" },
        { label: "United States", value: "United States" },
        { label: "Germany", value: "Germany" },
        { label: "Canda", value: "Canda" },
        { label: "Australia", value: "Australia" },
      ],
    };
  },
  methods: {
    submitForm() {
      this.$router.push("/user/roles-permission");
    },
    submitFormOne() {
      this.$router.push("/user/delete-account");
    },
  },
};
</script>
