<script>
    function loadCategories() {
        var $shop = $("#product-shop-id");
        var $category = $("#product-category-id");

        if ($shop.val() != "") {

            $category.attr("disabled", true);

            $.getJSON(prefix + "webshop/shops/" + $shop.val() + "/categories", function (data) {
                $category.html('<option value=""></option>');
                var html = "";
                for (var j = 0; j < data.length; j++) {
                    var value = data[j];
                    html += '<optgroup label="' + value.name + '">';

                    for (var i = 0; i < value.children.length; i++) {
                        var v = value.children[i];
                        html += '<option value="' + v.id + '">' + v.name + '</option>';
                    }

                    html += "</optgroup>";
                };
                $category.append(html);
                $category.attr("disabled", false);
            });
        }
    }

    $(function () {
        $("#product-shop-id").change(function () {
            loadCategories();
        });
    });

</script>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3><?= __('Search products') ?></h3>
</div>

<form id="search-products" action="<?= admin_url_to('/webshop/products') ?>">
    <?= csrf_field() ?>

    <div class="modal-body">
        <div class="form-group">
            <label for="product-name" class="form-control-label"><?= __('Name') ?></label>
            <input type="text" class="form-control" id="product-name" name="name" />
        </div>

        <div class="form-group">
            <label for="product-shop-id" class="form-control-label"><?= __('Shop') ?></label>
            <select name="shop_id" class="form-control" id="product-shop-id">
                <option value=""></option>
                <?php foreach ($shops as $shop): ?>
                    <option value="<?= $shop['id'] ?>"><?= $shop['name'] ?></option>
                <?php endforeach ?>
            </select>
        </div>

        <div class="form-group">
            <label for="product-category-id" class="form-control-label"><?= __('Category') ?></label>
            <select name="category_id" class="form-control" id="product-category-id">

            </select>
        </div>

    </div>

    <div class="modal-footer">
        <input type="submit" data-send-modal-form="search-products" class="btn btn-primary" value="<?= __('Search') ?>" />
    </div>
</form>