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

        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' + ($category.data("category") && $category.data("category") == v.id ? ' selected="selected"' : '') + ' value="' + v.id + '">' + v.name + '</option>';
                    }

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

    $(function () {
        loadCategories();

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

</script>

<section class="content-header">
    <h1><?= __('Edit kit') ?></h1>

    <div class="actions">
        <a data-ajax class="btn btn-default btn-sm" href="<?= admin_url_to('/webshop/kits') ?>"><?= __('List') ?></a>
    </div>
</section>

<section class="content">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#"><?= __('Kit') ?></a></li>
            <li><a data-ajax href="<?= admin_url_to('/webshop/kits/items?kit_id=' . $product['id']) ?>"><?= __('Items') ?></a></li>
        </ul>
        <div class="tab-content" style="padding:0">
            <form data-ajax data-upload class="form-focus" action="<?= admin_url_to('/webshop/kits/edit/' . $product['id']) ?>" method="post">
                <?= csrf_field() ?>

                <div class="box-body">
                    <div class="section">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                <h5><?= __('Kit') ?></h5>
                            </div>

                            <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label class="control-label" for="product-name"><?= __('Name') ?> <span class="required">*</span></label>
                                            <input class="form-control" value="<?= $product['name'] ?>" type="text" name="name" id="product-name" />
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="control-label" for="product-offer"><?= __('Offer') ?></label>
                                            <div>
                                                <input class="form-control toggle"<?= $product['offer'] ? ' checked' : '' ?> type="checkbox" id="product-offer" value="1" name="offer" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label class="control-label" for="product-active"><?= __('Active') ?></label>
                                            <div>
                                                <input class="form-control toggle"<?= $product['active'] ? ' checked' : '' ?> type="checkbox" id="product-active" value="1" name="active" />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="product-slug"><?= __('URL') ?> <span class="required">*</span></label>
                                    <input class="form-control" value="<?= $product['slug'] ?>" type="text" name="slug" id="product-slug" />
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label" for="product-image"><?= __('Image') ?></label>
                                            <input data-upload-field class="form-control" type="file" name="image" />
                                        </div>
                                    </div>
                                </div>

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

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="control-label" for="product-category"><?= __('Category') ?> <span class="required">*</span></label>
                                            <select class="form-control select2" name="category_id" id="product-category" data-category="<?= $product['category_id'] ?>">
                                                <option value=""><?= __('Select a shop first') ?></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="control-label" for="product-stock"><?= __('Stock') ?></label>
                                            <input class="form-control" value="<?= $product['stock'] ?>" type="text" name="stock" id="product-stock" />
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="control-label" for="product-normal-price"><?= __('Price') ?> <span class="required">*</span></label>
                                            <input class="form-control" value="<?= $product['price'] ?>" type="text" name="price" id="product-normal-price" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-footer">
                    <div class="row">
                        <div class="col-sm-offset-3" style="padding-left:15px">
                            <input type="submit" class="btn btn-primary" value="<?= __('Save') ?>" />
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>