{% extends 'base.html.twig' %}

{% block body %}
<!-- BEGIN: Subheader -->
<div class="m-subheader">
    <div class="d-flex align-items-center">
        <div class="mr-auto">
            <h3 class="m-subheader__title">Item Pricing</h3>
        </div>
    </div>
</div>
<!-- END: Subheader -->
<div class="m-content">
    <div class="row">
        <div class="col-xl-12">
            <div class="m-portlet m-portlet--mobile">
                <div class="m-portlet__body">
                    <div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
                        <div class="row align-items-center">
                            <div class="col-xl-12">
                                <div class="form-group m-form__group row align-items-center">
                                    <div class="col-md-2">
                                        <label>Item Prices for </label>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="m-input-icon m-input-icon--left">
                                            <div class="input-group">
                                                <select class="form-control m-input" id="price-tier-select" name="price_tier_list">
                                                    <option value="0">Default Price Tier</option>
                                                    {% for price_tier in sets.price_tiers %}
                                                        <option value="{{ price_tier.getID }}">{{ price_tier.getName }} </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="m-input-icon m-input-icon--left">
                                            <div class="input-group">
                                                <select class="form-control m-input" id="item-type-select" name="item_type_list">
                                                    {% for item_type in sets.item_types %}
                                                        <option value="{{ item_type.getID }}">{{ item_type.getName }} </option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right" method="post" action="{{ url('item_pricing_update') }}">
                        <input id="price-tier-id" type="hidden" name="price_tier_id" value="0">
                        <input id="item-type-id" type="hidden" name="item_type_id" value="{{ default_item_type_id }}">
                        <div style="padding-left: 25px; padding-right: 25px;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th style="width: 100px">ID</th>
                                        <th>Name</th>
                                        <th hidden> Item Type ID </th>
                                        <th>Item Type</th>
                                        <th style="width: 180px">Price</th>
                                    </tr>
                                </thead>
                                <tbody id="table-body">
                                    {% for id, item in items.items %}
                                        <tr>
                                            <td>{{ id }}</td>
                                            <td>{{ item.name }} </td>
                                            <td hidden> {{ item.item_type_id }} </td>
                                            <td>{{ item.item_type }} </td>
                                            <td class="py-1">
                                                <input name="price[{{ id }}]" class="form-control ca-filter" type="number" value="{{ item.price }}" step="0.01">
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="">
                                <input type="submit" class="btn btn-primary" value="Update Price">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>

initialize();

function initialize() {
    init_price_tier_dropdown();
    init_item_type_dropdown();
}

function init_price_tier_dropdown() {
    var pt_dropdown = document.getElementById('price-tier-select');
    var it_dropdown = document.getElementById('item-type-select');
    pt_dropdown.addEventListener('change', function(e) {
        var it_type = it_dropdown.value;
        load_prices(e.target.value, it_type);
    });
}

function init_item_type_dropdown() {
    var it_dropdown = document.getElementById('item-type-select');
    var pt_dropdown = document.getElementById('price-tier-select');
    it_dropdown.addEventListener('change', function(e) {
        var pt_type = pt_dropdown.value;
        load_prices(pt_type, e.target.value);
    });
}

function load_prices(price_tier_id, item_type_id) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        // process response
        if (this.readyState == 4 && this.status == 200) {
            // update form
            update_table(JSON.parse(req.responseText));
            var pt_field = document.getElementById('price-tier-id');
            pt_field.value = price_tier_id;
            var it_field = document.getElementById('item-type-id');
            it_field.value = item_type_id;
        } else {
            // console.log('could not load tier prices');
        }
    }
    var url_pattern = '{{ url('item_pricing_prices', {'pt_id': '--id--', 'it_id': '--it-id--'}) }}';
    var url = url_pattern.replace('--id--', price_tier_id).replace('--it-id--', item_type_id);
    console.log(url);
    req.open('GET', url, true);
    req.send();
}

function update_table(data) {
    console.log(data);
    var item_html = '';
    for (var i in data.items) {
        var item = data.items[i];
        // console.log(item);
        item_html += '<tr>';
        item_html += '<td>' + item.id + '</td>';
        item_html += '<td>' + item.name + '</td>';
        item_html += '<td hidden>' + item.item_type_id + '</td>';
        item_html += '<td>' + item.item_type + '</td>';
        item_html += '<td class="py-1">';
        item_html += '<input name="price[' + item.id + ']" class="form-control ca-filter" type="number" value="' + item.price + '" step="0.01">';
        item_html += '</td>';
        item_html += '</tr>';
    }

    var table_body = document.getElementById('table-body');
    table_body.innerHTML = item_html;
}

</script>
{% endblock %}