{% extends "layout.html" %}


{% block title %}{% if service_item.name.len() > 0 %}{{service_item.name}}{%else%}Add Service/Item{% endif %}{% endblock
%}
{% block description %}{{service_item.description}}{% endblock %}

{% block head %}
<style>
</style>
{% endblock %}

{% block content %}
<div class="container">
  <div class="row justified">
    <div class="backed col-sm-12 col-md-12 col-lg-12">
      <h1>
       {% if service_item.name.len() == 0 %}Create Service / Item{%else%}Update {{service_item.service_item_type.to_string()}}: {{service_item.name}}{% endif %}
       </h1>
       {% if service_item.name.len() != 0 %}<button id="delete" class="delete_button center">🗑️ Delete</button>{% endif %}
      <div class="row justified">
        <div class="content">
          <form id="add_service_item_form">
            <a href="https://app.akaunting.com/{{organization.external_accounting_id}}/common/items/{{service_item.value}}/edit">View Item</a>
            <label>Service/Product</label>
            <select name="service_item_type">
              {% for svctype in ServiceItemType::iter() %}
              <option value='{{svctype.to_string().replace(" ", "")}}' {% if svctype==service_item.service_item_type
                %}selected{% endif %}>
                {{svctype.to_string()}}</option>
              {% endfor %}
            </select>
            <div>
              <label for="name">Name</label>
              <input type="text" name="name" id="name" placeholder="Name" value="{{service_item.name}}" />
            </div>
            <div>
              <label for="description">Description</label>
              <textarea name="description" id="description" placeholder="Description"
                value="{{service_item.description}}">{{service_item.description}}</textarea>
            </div>

            <label>Billing Type</label>
            <select name="service_value_type">
              {% for svc_value_type in ServiceValueType::iter() %}
              <option value='{{svc_value_type.to_string().replace(" ", "")}}' {% if
                svc_value_type==service_item.service_value_type %}selected{% endif %}>
                {{svc_value_type.to_string()}}</option>
              {% endfor %}
            </select>

            <div class="content">
              <div class="row justified">
                <div class="col-sm-4 col-md-4 col-lg-4">
                  <label>Select Currency</label>
                  <select name="currency">
                    <option value='USD' {% if "USD" == service_item.currency %}selected{% endif %}>USD</option>
                    <option value='CAD' {% if "CAD" == service_item.currency%}selected{% endif %}>CAD</option>
                    <option value='EUR' {% if "UEURSD" == service_item.currency %}selected{% endif %}>EUR</option>
                  </select>
                </div>
                <div class="col-sm-8 col-md-8 col-lg-8">
                  <label for="value">Value</label>
                  <input type="number" id="value" min="0" step="any" name="value" placeholder="amount"
                    value="{{service_item.value}}" />
                </div>
              </div>
            </div>

            <div>
              <input type="submit" class="add_button"
                value="{% if service_item.name.len() == 0 %}Create service item!{%else%}Update {{service_item.service_item_type.to_string()}}{% endif %}" />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script>
    window.addEventListener('load', function () {

      {% if service_item.key.to_string() != "00000000-0000-0000-0000-000000000000" %}
      send_delete("delete", "/service_item/{{service_item.key}}", (deleted, res) => {
        if (deleted) {
          window.location.href = `/`
        }
      })
      {% endif %}

      post_form("add_service_item_form", "/service_item", data => {
        const key = "{{service_item.key}}"
        data.key = key == "" ? "00000000-0000-0000-0000-000000000000" : key
        data.organization_key = "{{user.organization_key}}"
        data.external_accounting_id = data.external_accounting_id ||"{{service_item.external_accounting_id}}"
        data.owner_key = "{{user.key}}"
        data.service_item_type = (data.service_item_type || "Service");
        data.name = data.name || "";
        data.description = data.description || "";
        // TODO: this should be handled server side with the enum ??????
        data.service_value_type = data.service_value_type == "UponCompletion" ? "Full" : data.service_value_type;
        data.service_value_type = (data.service_value_type || "Hourly");
        data.currency = data.currency || "";
        data.value = data.value || 50.0;
        try {
            data.value = parseFloat(data.value);
            if (data.value == NaN) {
              data.value = 0.0
            }
        } catch (err) {
            console.error(err);
            data.value = 0.00
        }
        data.value = parseInt(data.value * 100)
        data.expenses = data.expenses || [];
        data.created = data.created || 0;
        data.updated = data.updated || 0;
        return data;
      }, (response_text) => {
        const object = JSON.parse(response_text);
        window.location.href = `/service_item/${object.key}`
      });
    })
  </script>
  {% endblock %}