{% extends 'admin/base_site.html' %}

{% block title %}{{ title }}{% endblock title %}
{% block content %}
    <h1>Accessory: </h1>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm">
                <form id="accessory-form">
                    {% csrf_token %}
                    {% for field in accessory_form.visible_fields %}
                        <div class="form-group col">
                            <label class="col-12">{{ field.label }}</label>
                            {{ field }}
                        </div>
                        {% for field in accessory_form.hidden_fields %}
                            {{ field }}
                        {% endfor %}
                    {% endfor %}
                    <input type="submit" class="btn btn-primary" value="Update accessory"/>
                    <input id="delete" type="button" class="btn btn-primary btn-danger" value="Delete accessory"
                           onclick="delete_accessory()"/>

                </form>
            </div>
            <div class="col-sm">
                <div class="row">
                    <div class="col-sm">
                        <form id="calibration-form">
                            <h6>Create Calibration:</h6>
                            <div class="row">
                                {% csrf_token %}
                                {% for field in calibration_form.visible_fields %}
                                    <div class="form-group col-4">
                                        <label class="col-12">{{ field.label }}</label>
                                        {{ field }}
                                    </div>
                                {% endfor %}
                                {% for field in calibration_form.hidden_fields %}
                                    {{ field }}
                                {% endfor %}
                                <input type="submit" class="btn btn-primary" value="Create Calibration"/>
                            </div>
                        </form>
                        <hr/>

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm">

                        <table class="table table-striped table-sm " id="my_calibrations" style="width:100%">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Type</th>
                                <th>Updated At</th>
                                <th>Created At</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for calibration in calibrations %}
                                <tr>
                                    <td>
                                        <a href=/calibration/{{ calibration.id }} style="color:#0000EE">{{ calibration.id }}</a>
                                    </td>
                                    <td>{{ calibration.type }}</td>
                                    <td>{{ calibration.updated_at }}</td>
                                    <td>{{ calibration.created_at }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block javascript %}
    <script>

        delete_accessory = function () {

            var serializedData = $("#accessory-form").serialize();
            $.ajax({
                headers: {
                    'X-CSRFTOKEN': '{{ csrf_token }}'
                },
                type: 'DELETE',
                url: "{% url 'delete_accessory' %}",
                data: serializedData,
                success: function (response) {
                    window.location.replace("/accessories/");
                },
                error: function (response) {
                    // alert the error if any error occured
                    alert(response["responseJSON"]["error"]);
                }
            })
        }


        /*
            On submiting the form, send the POST ajax
            request to server and after successfull submission
            display the object.
        */
        $("#accessory-form").submit(function (e) {
            // preventing from page reload and default actions
            e.preventDefault();
            // serialize the data for sending the form data.
            var serializedData = $(this).serialize();
            // make POST ajax call
            $.ajax({
                headers: {
                    'X-CSRFTOKEN': '{{ csrf_token }}'
                },
                type: 'PATCH',
                url: "{% url 'update_accessory' %}",
                data: serializedData,
                success: function (response) {
                    // on successfull creating object
                    // 2. focus to nickname input
                    $("#id_id").focus();

                    // display the newly accessory to table.
                    var instance = JSON.parse(response["instance"]);

                },
                error: function (response) {
                    // alert the error if any error occured
                    alert(response["responseJSON"]["error"]);
                }
            })
        })


        $("#calibration-form").submit(function (e) {
            // preventing from page reload and default actions
            e.preventDefault();
            // serialize the data for sending the form data.
            var serializedData = $(this).serialize();
            // make POST ajax call
            $.ajax({
                type: 'POST',
                url: "{% url 'post_calibration' %}",
                data: serializedData,
                success: function (response) {
                    // on successfull creating object
                    // 2. focus to nickname input
                    $("#id_id").focus();

                    // display the newly accessory to table.
                    var instance = JSON.parse(response["instance"]);
                    var fields = instance[0]["fields"];
                    var pk = instance[0]["pk"];
                    var link = /calibration/ + pk
                    $("#my_calibrations tbody").prepend(
                        `<tr>
                    <td><a href=${link} style="color:#0000EE">${pk}</a></td>
                    <td>${fields["type"] || ""}</td>
                    <td>${fields["updated_at"] || ""}</td>
                    <td>${fields["created_at"] || ""}</td>

                    </tr>`
                    )
                },
                error: function (response) {
                    // alert the error if any error occured
                    alert(response["responseJSON"]["error"]);
                }
            })
        })
    </script>
{% endblock javascript %}
