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

{% block title %}{{ title }}{% endblock title %}

{% block content %}
    <h1>{{ title }}</h1>
    <h1>Create Hardware:</h1>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md">
                <form id="hardware-type-selection-form">
                    <div class="row">
                        {% csrf_token %}
                        {% for field in type_form.visible_fields %}
                            <div class="form-group col-4">
                                <label class="col-12">{{ field.label }}</label>
                                {{ field }}
                            </div>
                        {% endfor %}
                        {#                        <input type="submit" class="btn btn-primary" value="Select Hardware Type"/>#}
                    </div>
                </form>


            </div>
        </div>

        <form id="hardware-form">
            <div class="row">
                {% csrf_token %}
                {% for field in form.visible_fields %}
                    <div class="form-group col-4">
                        <label class="col-12">{{ field.label }}</label>
                        {{ field }}
                    </div>

                {% endfor %}
                {% for field in form.hidden_fields %}
                    {{ field }}

                {% endfor %}

            </div>
            <div class="row">
                <div class="form-group col-4">

                    <p><input type="submit" class="btn btn-primary" value="Create hardware"/></p>
                </div>
            </div>
        </form>
    </div>
    <hr/>

    <div class="container-fluid">
        <table class="table table-striped table-sm" id="my_hardwares">
            <thead>
            <tr>
                <th>Serial No.</th>
                <th>Type</th>
                <th>Updated At</th>
                <th>Created At</th>
            </tr>
            </thead>
            <tbody>
            {% for hardware in hardwares %}
                <tr>
                    <td><a href=/hardwares/{{ hardware.id }} style="color:#0000EE">{{ hardware.id }}</a></td>
                    <td>{{ hardware.type }}</td>
                    <td>{{ hardware.updated_at }}</td>
                    <td>{{ hardware.created_at }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

    </div>
{% endblock content %}
{% block javascript %}
    <script>
        $("#hardware-type-selection-form").submit(function (e) {
            e.preventDefault();
            var data = $("#hardware-type-selection-form").serialize()
            $.ajax({
                url: "{% url 'get_hardware_types' %}",
                type: "POST",
                data: data,
                success: function (response) {

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

                    $("#hardware-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);#}
                }
            })
        })

        $("#id_type").on('change', function () {
            $("#hardware-type-selection-form").submit()
        })

        /*
            On submiting the form, send the POST ajax
            request to server and after successfull submission
            display the object.
        */
        $("#hardware-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_hardware' %}",
                data: serializedData,
                success: function (response) {
                    // on successfull creating object
                    // 1. clear the form.
                    $("#hardware-form").trigger('reset');
                    // 2. focus to nickname input
                    $("#id_id").focus();

                    // display the newly hardware to table.
                    var instance = JSON.parse(response["instance"]);
                    var fields = instance[0]["fields"];
                    var pk = instance[0]["pk"];
                    var link = /hardwares/ + pk
                    $("#my_hardwares 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 %}