{% load i18n %}

<script>
async function SelectCompany(){
    const sku = document.getElementById("sku").value
    const supplier = parseInt(document.getElementById("supplier").value)
    const mpart = parseInt(document.getElementById("manupart").value)
    const ignoreMPNCheck = document.getElementById("ignoreMPNCheck").checked

    const pk = {{ part.pk }}
    const cmd_url="{% url 'plugin:suppliercart:add-supplierpart' %}";
    data = {
	sku: sku,
	supplier: supplier,
        pk: pk,
        mpart: mpart,
        ignoreMPNCheck: ignoreMPNCheck,
    }
    document.getElementById("loader").style.visibility = "visible";
    response = await inventreeFormDataUpload(url=cmd_url, data=JSON.stringify(data));
    document.getElementById("result").textContent=response.message;
    if (response.message == "OK") {
        document.getElementById("result").className="alert alert-block alert-success";
    } else {
        document.getElementById("result").className="alert alert-block alert-danger";
    }
    document.getElementById("loader").style.visibility = "hidden";
}
</script>

<style>
.wheel {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
  visibility: hidden;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<div class='alert alert-block ' id='result'>&nbsp</div>
<div id="loader" class="wheel"></div>
<table class='table table-condensed'>
<form>
<tbody>
    <tr>
        <td> Select Supplier </td>
        <td>
	    <select id="supplier">
		{% for supplier,data in plugin.registered_suppliers.items %}
                {% if data.is_registered == True %}

		<option value="{{ data.pk }}"> {{ data.name }}</option>
                {% endif %}
		{% endfor %}
	    </select>
        </td>
    </tr>
    <tr>
        <td>
          {% if plugin.manufacturer_parts.all|length == 0 %}
              <div style="color:red;"> Part has no manufacturer part </div>
          {% else %}
              <div> Select Manufacturer Part </div>
          {% endif %}
        </td>
        <td>
	    <select id="manupart">
		{% for data in plugin.manufacturer_parts %}
		<option value="{{ data.pk }}"> {{ data.MPN }}</option>
		{% endfor %}
	    </select>
        </td>
    </tr>
    <tr>
        <td> Exact supplier part number from suppliers WEB page</td>
        <td>
            <input id="sku" type="text" value="">
        </td>
    </tr>
    <tr>
        <td> Ignore MPN mismatch </td>
        <td>
            <input id="ignoreMPNCheck" type="checkbox">
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
	<td>
          {% if plugin.manufacturer_parts.all|length == 0 %}
            <input type="button" value="Add Part" onclick="SelectCompany()" title='Add Part' disabled />
          {% else %}
            <input type="button" value="Add Part" onclick="SelectCompany()" title='Add Part' />
          {% endif %}
	</td>
	<td> </td>
    </tr>
</tfoot>
</form>
</table>