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

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

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

                </form>
            </div>

            <form id="hardware-io-type-form">
                <h6>Hardware IO Type:</h6>
                <div class="row">
                    {% csrf_token %}
                    {% for field in hardware_io_type_form.visible_fields %}
                        <div class="form-group col-4">
                            <label class="col-12">{{ field.label }}</label>
                            {{ field }}
                        </div>
                    {% endfor %}
                    {% for field in hardware_io_type_form.hidden_fields %}
                        {{ field }}
                    {% endfor %}

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

                        <input type="submit" class="btn btn-primary" value="Update Hardware IO"/>

                    </div>
                </div>
            </form>

            <form id="hardware-io-form">
                <h6>Hardware IO Config:</h6>
                <div class="row">
                    {% csrf_token %}
                    {% for field in hardware_io_form.visible_fields %}
                        <div class="form-group col-4">
                            <label class="col-12">{{ field.label }}</label>
                            {{ field }}
                        </div>
                    {% endfor %}
                    {% for field in hardware_io_form.hidden_fields %}
                        {{ field }}
                    {% endfor %}

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

                        <input type="submit" class="btn btn-primary" value="Update Hardware IO"/>
                        <input id="delete" type="button" class="btn btn-primary btn-danger" value="Delete Hardware"
                               onclick="delete_hardware_io()"/>
                    </div>
                </div>
            </form>

        </div>
        <hr/>
        <table class="table table-striped table-sm " id="hardware_ios">
            <thead>
            <tr>
                <th>Serial No.</th>
                <th>Type</th>
                <th>Updated At</th>
                <th>Created At</th>
            </tr>
            </thead>
            <tbody>
            {% for hardware_io in hardware_ios %}
                <tr>
                    {#                    <td><a href=/channel/{{ channel.id }} style="color:#0000EE">{{ channel.id }}</a></td>#}
                    <td><a href=/io/{{ hardware_io.id }} style="color:#0000EE">{{ hardware_io.id }}</a></td>

                    <td>{{ hardware_io.type }}</td>
                    <td>{{ hardware_io.pin }}</td>
                    {#                    <td>{{ hardware_io.updated_at }}</td>#}
                    {#                    <td>{{ chhardware_ioannel.created_at }}</td>#}

                </tr>
            {% endfor %}
            </tbody>
        </table>

    </div>
{% endblock content %}

{% block javascript %}
    <script>
        $("#hardware-io-form").submit(function (e) {
            // preventing from page reload and default actions
            e.preventDefault();
            var data = $("#hardware-io-form").serialize()
            $.ajax({
                url: "{% url 'post_hardware_io' %}",
                type: "POST",
                data: data,
                success: function (response) {

                    $("#hardware-io-form").trigger('reset');

                    $("#hardware-io-form").html('{% csrf_token %}'
                        + response + '<input type="submit" class="btn btn-primary" value="Create hardware"/>'
                    );

                    console.log(response);
                    // response is form in html format
                    {#$("#formdiv").html(response);#}
                }
            })
        })

        $("#hardware-io-type-form").submit(function (e) {
            e.preventDefault();
            var data = $("#hardware-io-type-form").serialize()
            $.ajax({
                url: "{% url 'get_hardware_io' %}",
                type: "POST",
                data: data,
                success: function (response) {

                    $("#hardware-io-form").trigger('reset');

                    $("#hardware-io-form").html('{% csrf_token %}'
                        + response + '<input type="submit" class="btn btn-primary" value="Create hardware"/>'
                    );

                    console.log(response);
                    // response is form in html format
                    {#$("#formdiv").html(response);#}
                }
            })
        })

        delete_channel = function () {

            var serializedData = $("#channel-form").serialize();
            $.ajax({
                headers: {
                    'X-CSRFTOKEN': '{{ csrf_token }}'
                },
                type: 'DELETE',
                url: "{% url 'delete_channel' %}",
                data: serializedData,
                success: function (response) {
                    window.location.replace("/hardwares/");
                },
                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.
        */
        $("#channel-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_channel' %}",
                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"]);
                }
            })
        })


    </script>
{% endblock javascript %}
