{% extends 'rates/base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Rate{% endblock %}
{% block content %}
    <h1>
        {% if item %}
            {{ item }}
        {% elif forms %}
            {{ forms.0.instance.type }}
        {% else %}
            Create
        {% endif %}
        rate
    </h1>
    <p>
        <br>
        <span class="primary-highlight glyphicon glyphicon-info-sign"></span> The rates for tool usage & training, area access and staff charges are to be expressed <strong>per hour</strong>.
    </p>
    <form id="rate_form"
          method="post"
          class="form-horizontal"
          action="{% if item %}{% url 'create_rate' rate_type_choice item.id %}{% else %}{% url 'create_rate' rate_type_choice %}{% endif %}"
          style="margin-top: 25px">
        {% csrf_token %}
        {% if not forms %}
            <div class="form-group">
                <label class="control-label col-sm-2" for="rate_type">
                    <strong>Rate type</strong>
                </label>
                <div class="col-sm-4">
                    <select id="rate_type" name="rate_type" class="form-control" onchange="rate_type_selection(this.value)">
                        <option value="">Select rate type</option>
                        {% for value, display in rate_type_choices %}
                            <option value="{{ value }}" {% if value == rate_type_choice %}selected{% endif %}>{{ display }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div id="tool_select" class="form-group item_select" style="display: none">
                <label class="control-label col-sm-2" for="tool">
                    <strong>Tool</strong>
                </label>
                <div class="col-sm-4">
                    <select id="tool" name="tool" class="form-control" onchange="rate_type_selection('Tool', this.value)">
                        <option disabled selected>Choose a tool</option>
                        {% regroup tools by category as tool_categories %}
                        {% for category in tool_categories %}
                            {% if tool_categories|length > 1 or category.grouper %}
                                <optgroup label="{{ category.grouper|default_if_none:'Uncategorized' }}">
                                {% endif %}
                                {% for item in category.list %}<option value="{{ item.id }}">{{ item.name }}</option>{% endfor %}
                                {% if tool_categories|length > 1 or category.grouper %}</optgroup>{% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div id="area_select" class="form-group item_select" style="display: none">
                <label class="control-label col-sm-2" for="area">
                    <strong>Area</strong>
                </label>
                <div class="col-sm-4">
                    <select id="area" name="area" class="form-control" onchange="rate_type_selection('Area', this.value)">
                        <option disabled selected>Choose an area</option>
                        {% if areas|length == 1 %}
                            <option value="{{ areas.0.id }}">{{ areas.0 }}</option>
                        {% elif areas %}
                            <option disabled selected value="">Choose an area</option>
                            {% for area in areas %}<option value="{{ area.id }}">{{ area.name }}</option>{% endfor %}
                        {% endif %}
                    </select>
                </div>
            </div>
            <div id="consumable_select" class="form-group item_select" style="display: none">
                <label class="control-label col-sm-2" for="consumable">
                    <strong>Supply</strong>
                </label>
                <div class="col-sm-4">
                    <select id="consumable"
                            name="consumable"
                            class="form-control"
                            onchange="rate_type_selection('CONSUMABLE', this.value)">
                        <option disabled selected value="">Choose a supply</option>
                        {% regroup consumables by category as consumable_categories %}
                        {% for category in consumable_categories %}
                            {% if consumable_categories|length > 1 or category.grouper %}
                                <optgroup label="{{ category.grouper|default_if_none:"Uncategorized" }}">
                                {% endif %}
                                {% for item in category.list %}<option value="{{ item.id }}">{{ item.name }}</option>{% endfor %}
                                {% if consumable_categories|length > 1 or category.grouper %}</optgroup>{% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% else %}
            {% for rate_form in forms %}
                {% include "rates/rate_form_details.html" with rate_form=rate_form %}
            {% endfor %}
            <div class="col-sm-6 text-right">{% button type="save" value="Confirm" %}</div>
        {% endif %}
    </form>
    <script>
	function rate_type_selection(rate_type, id)
    {
        if (rate_type)
        {
			if (id)
			{
				window.location = '{% url 'create_rate' 'tool' '9999' %}'.replace('tool', rate_type).replace('9999', id);
			}
			else if (rate_type.toLowerCase() !== 'tool' && rate_type.toLowerCase() !== 'area' && rate_type.toLowerCase() !== 'consumable')
			{
				window.location = '{% url 'create_rate' 'tool' %}'.replace('tool', rate_type);
			}
			else
			{
                $('.item_select').hide();
				$('#'+rate_type.toLowerCase()+"_select").show();
			}
        }
	}
    function add_rate_form(form_number)
    {
        {# Figure out the max form number to send it #}
        let form_number_inputs = document.querySelectorAll('input[name="form_numbers[]"]');
        let max_form_number = 0;
        for (let i=0; i < form_number_inputs.length; i++)
        {
            max_form_number = Math.max(max_form_number, parseInt(form_number_inputs[i].value));
		}
        let rate_form_url = '{% url 'new_time_rate_form' %}?';
        rate_form_url += '&count=' + (max_form_number + 1);
        for (let field of ['type', 'category', 'tool', 'area', 'consumable'])
        {
            let input_name = form_number + "_" + field;
			rate_form_url += '&' + field + '=' + $('input[name="'+input_name+'"]').val();
        }
        $.get(rate_form_url, function (content)
        {
            $('#'+form_number+'_form').after(content);
        }
        );
	}
    function delete_rate_form(form_number, rate_id)
    {
        let success_callback = function () { $('#'+form_number+'_form').remove(); }
        if (rate_id)
        {
            if (confirm("Are you sure you want to delete this rate? This cannot be undone."))
            {
            	ajax_get('{% url 'delete_rate_time' '9999' %}'.replace('9999', rate_id), undefined, success_callback, ajax_failure_callback('Error deleting rate'));
            }
		}
        else
        {
            success_callback();
        }
	}
	function update_daily_split_checkbox(checkbox, label_selector)
    {
        let daily_split_label = $('#' + label_selector);
		if ($(checkbox).is(':checked'))
        {
            daily_split_label.show();
        }
        else
        {
            daily_split_label.hide();
        }
	}
	
    </script>
{% endblock %}
