{% extends 'base_assets.html' %}
{% load widget_tweaks %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/bootstrap-select.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/ajax-bootstrap-select.css' %}"/>
{% endblock %}

{% block js %}
    <script src="{% static 'js/bootstrap-select.js' %}"></script>
    <script src="{% static 'js/ajax-bootstrap-select.js' %}"></script>
    <script src="{% static 'js/autocompleter.js' %}"></script>
    <script>
        const matches = window.matchMedia("(prefers-reduced-motion: reduce)").matches || window.matchMedia("(update: slow)").matches;
        dur = matches ? 0 : 500;
        function checkIfCableHidden() {
          if ($("#id_is_cable").prop('checked')) {
            $("#cable-table").slideDown(dur);
          } else {
            $("#cable-table").slideUp(dur);
          }
        }
        checkIfCableHidden();
    </script>
    <script>
    $('#parent_id')
        .selectpicker({
            liveSearch: true
        })
        .ajaxSelectPicker({
            ajax: {
                url: '{% url 'asset_search_json' %}',
                type: "GET",
                data: function () {
                    let params = {
                        {% verbatim %}query: '{{{q}}}'{% endverbatim  %}
                    };
                    return params;
                }
            },
            locale: {
                emptyTitle: 'Search for item...'
            },
            preprocessData: function(data){
                var assets = [];
                if(data.length){
                    var len = data.length;
                    for(var i = 0; i < len; i++){
                        var curr = data[i];
                        assets.push(
                            {
                                'value': curr.id,
                                'text': curr.label,
                                'disabled': false
                            }
                        );
                    }
                    assets.push(
                    {
                        'value': null,
                        'text': "No parent"
                    });
                }

                return assets;
            },
            preserveSelected: false
        });
    </script>
{% endblock %}

{% block content %}
{% if duplicate %}
    <form method="POST" id="asset_update_form" action="{% url 'asset_duplicate' pk=previous_asset_id %}">
{% elif edit %}
    <form method="POST" id="asset_update_form" action="{% url 'asset_update' pk=object.asset_id %}">
{% else %}
    <form method="POST" id="asset_update_form" action="{% url 'asset_create' %}">
{% endif %}
        {% include 'form_errors.html' %}
        {% csrf_token %}
        <input type="hidden" name="id" value="{{ object.id|default:0 }}" hidden=true>
        <div class="row pt-2">
          <div class="col-sm-12">
            {% include 'partials/asset_detail_form.html' %}
          </div>
        </div>
        <div class="row pt-2">
          <div class="col-12 col-sm">
            {% include 'partials/purchasedetails_form.html' %}
          </div>
          <div class="col-12 col-sm-6 col-md-4" id="cable-table">
            {% include 'partials/cable_form.html' %}
          </div>
          <div class="col-12 col-md-4">
            {% include 'partials/parent_form.html' %}
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            {% include 'partials/asset_buttons.html' %}
          </div>
        </div>
    </form>
{% endblock %}