{% extends "base.html" %}

{% block title %}
Edit service: {{ item.id }}
{% endblock title %}

{% block content %}
<h1>Edit service: {{ item.id }}</h1>
<div class="mb-10">
    <form hx-post="/services/{{ item.id }}" hx-ext="submitjson" hx-target="#success-message">
    <div class="mb-5">
    <div>
        <label>name</label>
        <br />
        <input id="name" name="name" type="text" value="{{item.name}}" required></input>
        </div>
    <div>
        <label>description</label>
        <br />
        <textarea id="description" name="description" type="text">{{item.description}}</textarea>
        </div>
    <div>
        <label>configuration</label>
        <br />
        <textarea id="configuration" name="configuration" type="text">{{item.configuration}}</textarea>
        </div>
    <div>
        <div class="mt-5">
            <button class=" text-xs py-3 px-6 rounded-lg bg-gray-900 text-white" type="submit">Submit</button>
            <button class="text-xs py-3 px-6 rounded-lg bg-red-600 text-white"
                        onclick="confirmDelete(event)">Delete</button>
        </div>
    </div>
</form>
<div id="success-message" class="mt-4"></div>
<br />
<a href="/services">Back to service</a>
</div>
{% endblock content %}

{% block js %}
<script>
    htmx.defineExtension('submitjson', {
        onEvent: function (name, evt) {
            if (name === "htmx:configRequest") {
                evt.detail.headers['Content-Type'] = "application/json"
            }
        },
        encodeParameters: function (xhr, parameters, elt) {
            const json = {};
            for (const [key, value] of Object.entries(parameters)) {
                const inputType = elt.querySelector(`[name=${key}]`).type;
                if (inputType === 'number') {
                    json[key] = parseFloat(value);
                } else if (inputType === 'checkbox') {
                    json[key] = elt.querySelector(`[name=${key}]`).checked;
                } else {
                    json[key] = value;
                }
            }
            return JSON.stringify(json);
        }
    })
    function confirmDelete(event) {
        event.preventDefault();
        if (confirm("Are you sure you want to delete this item?")) {
            var xhr = new XMLHttpRequest();
            xhr.open("DELETE", "/services/{{ item.id }}", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    window.location.href = "/services";
                }
            };
            xhr.send();
        }
    }
</script>
{% endblock js %}