const template = html`
  <div>
    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary"
      data-toggle="modal"
      data-target="#requestHolidayModal"
    >
      Make new Holiday Request
    </button>

    <!-- Modal -->
    <div
      class="modal fade"
      id="requestHolidayModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="#requestHolidayModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="requestHolidayModalLabel">
              New Holiday Request
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div v-if="error != ''" class="alert  alert-danger" role="alert">
              {{error}}
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label" for="inputStart"
                >Description:</label
              >
              <div class="col-sm-9">
                <input
                  type="text"
                  name="description"
                  class="form-control"
                  v-model="description"
                  required
                />
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3" for="inputStart">date:</label>
              <div class="col-sm-9">
                <input class="form-control" type="date" v-model="startDate" />
                <div class="input-group-addon">to</div>
                <input class="form-control" type="date" v-model="endDate" />
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label" for="inputStart"
                  >Paid holiday:</label
                >
                <div class="col-sm-9">
                  <label class="radio-inline">
                    <input
                      type="radio"
                      name="paid"
                      value="1"
                      required=""
                      class="ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required"
                      v-model="paid"
                    />
                    Yes
                  </label>
                  <label class="radio-inline">
                    <input
                      required
                      type="radio"
                      name="paid"
                      v-model="paid"
                      value="0"
                      required=""
                      class="ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required"
                    />
                    No
                  </label>
                  <span class="help-block"
                    ><small
                      >You have
                      <strong><em class="ng-binding">{{daysLeft}}</em></strong>
                      paid holiday days left.</small
                    ></span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">
              cancel
            </button>
            <button type="button" class="btn btn-primary" @click="save()">
              add
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
`;
import api from "../../api.js";

export default {
  props: ["userId"],
  data: function() {
    return {
      daysLeft: 13,
      paid: false,
      startDate: moment()
        .add(1, "days")
        .format("YYYY-MM-DD"),
      endDate: moment()
        .add(1, "days")
        .format("YYYY-MM-DD"),
      description: "",
      error: ""
    };
  },
  mounted() {},
  components: {},
  filters: {},
  methods: {
    async save() {
      if (!this.description || this.description == "") {
        this.error = "you need to set an description";
        return;
      }
      const data = {
        description: this.description,
        end_date: this.endDate,
        start_date: this.startDate,
        paid: this.paid
      };
      const output = await api.post["hr/holiday"]({}, data);
      $("#requestHolidayModal").modal("hide");
      const holiday = await api.get["hr/holiday"]({ user_id: this.userId });
      state.set(`hr/holiday/${this.userId}`, holiday);
    }
  },
  template
};
