<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 loadItemInfo() {
        var $this = $('#item-id');
        var $name = $('#product-name');
        var $ancients = $('#ancients');
        var $hasExcellent = $('.product-has-excellent');
        var $hasAncient = $('.product-has-ancients');
        var $hasSkill = $('.product-has-skill');
        var $hasLuck = $('.product-has-luck');
        var $hasRefine = $('.product-has-refine');
        var $hasHarmony = $('.product-has-harmony');
        var $hasSocket = $('.product-has-socket');

        $.getJSON(prefix + "items/info/" + $this.val(), function (data) {
            $name.val(data.name);

            $ancients.html('');
            if (data.has_ancient) {
                $hasAncient.show();

                $.each(data.ancients, function (key, value) {
                    $ancients.append(
                        '<div style="width:33%;margin-bottom:5px;float:left">' +
                        '<input type="checkbox" name="ancients[]" id="product-ancient-' + key + '" value="' + key + '" /> <label for="product-ancient-' + key + '">' + value + '</label>' +
                        '</div>'
                    );
                });
            } else {
                $hasAncient.hide();
            }

            if (data.has_luck) {
                $hasLuck.show();
            } else {
                $hasLuck.hide();
            }

            if (data.has_skill) {
                $hasSkill.show();
            } else {
                $hasSkill.hide();
            }

            if (data.has_refine) {
                $hasRefine.show();
            } else {
                $hasRefine.hide();
            }

            if (data.has_harmony) {
                $hasHarmony.show();
            } else {
                $hasHarmony.hide();
            }

            if (data.has_sockets) {
                $hasSocket.show();
            } else {
                $hasSocket.hide();
            }

            if (data.has_excellent) {
                $hasExcellent.show();
            } else {
                $hasExcellent.hide();
            }

            runCustomCheckbox($ancients);
        });
    }

    $(function () {
        loadCategories();

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

        $("#item-id").change(function () {
            loadItemInfo();
        });
    });

</script>

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

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

<section class="content">
    <div class="box box-default">
        <form data-ajax data-upload class="form-focus" action="<?= admin_url_to('/webshop/products/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><?= __('Product') ?></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="item-id"><?= __('Item') ?> <span class="required">*</span></label>
                                        <select class="form-control select2" name="item_id" id="item-id">
                                            <option value=""><?= __('Search for a item') ?></option>
                                            <?php foreach ($items as $category => $data): ?>
                                                <optgroup label="<?= $category ?>">
                                                    <?php foreach ($data as $it): ?>
                                                        <option<?= $product['item_id'] === $it['id'] ? ' selected' : '' ?> value="<?= $it['id'] ?>"><?= $it['name'] ?></option>
                                                    <?php endforeach ?>
                                                </optgroup>
                                            <?php endforeach ?>
                                        </select>
                                    </div>
                                </div>

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

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

                                <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="form-group">
                                <label class="control-label" for="product-slug"><?= __('URL') ?> <span class="required">*</span></label>
                                <input class="form-control" type="text" name="slug" id="product-slug" value="<?= $product['slug'] ?>" />
                            </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<?= $product['shop_id'] == $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-fix-level"><?= __('Fix level') ?></label>
                                        <select class="form-control" name="fix_level" id="product-fix-level">
                                            <option value="-1"></option>
                                            <?php for ($i = 0; $i <= config('item.max_level', 15); $i++): ?>
                                                <option<?= $product['fix_level'] == $i ? ' selected' : '' ?> value="<?= $i ?>">+<?= $i ?></option>
                                            <?php endfor ?>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="control-label" for="product-fix-option"><?= __('Fix option') ?></label>
                                        <select class="form-control" name="fix_option" id="product-fix-option">
                                            <option value="-1"></option>
                                            <?php for ($i = 0; $i <= config('item.max_option', 28); $i+=4): ?>
                                                <option<?= $product['fix_option'] == $i ? ' selected' : '' ?>  value="<?= $i ?>">+<?= $i ?></option>
                                            <?php endfor ?>
                                        </select>
                                    </div>
                                </div>

                                <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-quantity"><?= __('Quantity') ?></label>
                                        <input class="form-control" value="<?= $product['quantity'] ?>" type="text" name="quantity" id="product-quantity" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                            <div class="row">
                                <div class="col-md-3 product-has-luck" style="display:<?= $item->getDefinitions()->hasLuck() ? 'block' : 'none' ?>">
                                    <div class="form-group">
                                        <label class="control-label" for="product-luck"><?= __('Luck') ?></label>
                                        <div>
                                            <input<?= $product['luck'] ? ' checked' : '' ?> class="form-control toggle" type="checkbox" id="product-luck" value="1" name="luck" />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-3 product-has-skill" style="display:<?= $item->getDefinitions()->hasSkill() ? 'block' : 'none' ?>">
                                    <div class="form-group">
                                        <label class="control-label" for="product-skill"><?= __('Skill') ?></label>
                                        <div>
                                            <input<?= $product['skill'] ? ' checked' : '' ?> class="form-control toggle" type="checkbox" id="product-skill" value="1" name="skill" />
                                        </div>
                                    </div>
                                </div>

                                <?php if ($version > 2): ?>
                                    <div class="col-md-3 product-has-refine" style="display:<?= $item->getDefinitions()->hasRefine() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-refine"><?= __('Refine') ?></label>
                                            <div>
                                                <input<?= $product['refine'] ? ' checked' : '' ?> class="form-control toggle" type="checkbox" id="product-refine" value="1" name="refine" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3 product-has-harmony" style="display:<?= $item->getDefinitions()->hasHarmony() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-harmony"><?= __('Harmony') ?></label>
                                            <div>
                                                <input<?= $product['harmony'] ? ' checked' : '' ?> class="form-control toggle" type="checkbox" id="product-harmony" value="1" name="harmony" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-3 product-has-socket" style="display:<?= $item->getDefinitions()->hasSockets() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-sockets"><?= __('Sockets') ?></label>
                                            <div>
                                                <input<?= $product['sockets'] ? ' checked' : '' ?> class="form-control toggle" type="checkbox" id="product-sockets" value="1" name="sockets" />
                                            </div>
                                        </div>
                                    </div>
                                <?php endif ?>

                                <div class="col-md-3 product-has-excellent" style="display:<?= $item->getDefinitions()->hasExcellentOptions() ? 'block' : '' ?>">
                                    <div class="form-group">
                                        <label class="control-label" for="product-max-excellent"><?= __('Max excellent options') ?></label>
                                        <select class="form-control" name="max_excellent" id="product-max-excellent">
                                            <option value=""></option>
                                            <?php for ($i = 1; $i <= 6; $i++): ?>
                                                <option<?= $product['max_excellent'] == $i ? ' selected' : '' ?>  value="<?= $i ?>"><?= $i ?></option>
                                            <?php endfor ?>
                                        </select>
                                    </div>
                                </div>

                                <?php if ($version > 2): ?>
                                    <div class="col-md-3 product-has-socket" style="display:<?= $item->getDefinitions()->hasSockets() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-max-sockets"><?= __('Max socket options') ?></label>
                                            <select class="form-control" name="max_sockets" id="product-max-sockets">
                                                <option value=""></option>
                                                <?php for ($i = 1; $i <= 5; $i++): ?>
                                                    <option<?= $product['max_sockets'] == $i ? ' selected' : '' ?>  value="<?= $i ?>"><?= $i ?></option>
                                                <?php endfor ?>
                                            </select>
                                        </div>
                                    </div>
                                <?php endif ?>
                            </div>

                            <?php if ($version >= 1.1): ?>
                                <div class="form-group product-has-ancients" style="display:<?= $item->getDefinitions()->hasAncient() ? 'block' : 'none' ?>">
                                    <label class="control-label" for=""><?= __('Ancient') ?></span></label>

                                    <div id="ancients">
                                        <?php foreach ($item->getAncient()->available() as $code => $name): ?>
                                            <div style="width:33%;margin-bottom:5px;float:left">
                                                <input type="checkbox"<?= in_array($code, explode(',', $product['ancient'])) ? ' checked' : '' ?> name="ancients[]" id="product-ancient-<?= $code ?>" value="<?= $code ?>" /> <label for="product-ancient-<?= $code ?>"><?= $name ?></label>
                                            </div>
                                        <?php endforeach ?>
                                    </div>
                                </div>
                            <?php endif ?>
                        </div>
                    </div>
                </div>

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

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

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

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

                                <div class="col-md-4 product-has-skill" style="display:<?= $item->getDefinitions()->hasSkill() ? 'block' : 'none' ?>">
                                    <div class="form-group">
                                        <label class="control-label" for="product-price-skill"><?= __('Price for skill') ?></label>
                                        <input class="form-control" value="<?= $product['price_skill'] ?>" type="text" name="price_skill" id="product-price-skill" />
                                    </div>
                                </div>

                                <div class="col-md-4 product-has-luck" style="display:<?= $item->getDefinitions()->hasLuck() ? 'block' : 'none' ?>">
                                    <div class="form-group">
                                        <label class="control-label" for="product-price-luck"><?= __('Price for luck') ?></label>
                                        <input class="form-control" value="<?= $product['price_luck'] ?>" type="text" name="price_luck" id="product-price-luck" />
                                    </div>
                                </div>

                                <div class="col-md-4 product-has-excellent" style="display:<?= $item->getDefinitions()->hasExcellentOptions() ? 'block' : 'none' ?>">
                                    <div class="form-group">
                                        <label class="control-label" for="product-price-excellent"><?= __('Price for excellent') ?></label>
                                        <input class="form-control" value="<?= $product['price_excellent'] ?>" type="text" name="price_excellent" id="product-price-excellent" />
                                    </div>
                                </div>

                                <?php if ($version >= 1.1): ?>
                                    <div class="col-md-4 product-has-ancients" style="display:<?= $item->getDefinitions()->hasAncient() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-price-ancient"><?= __('Price for ancient') ?></label>
                                            <input class="form-control" value="<?= $product['price_ancient'] ?>" type="text" name="price_ancient" id="product-price-ancient" />
                                        </div>
                                    </div>
                                <?php endif ?>

                                <?php if ($version > 2): ?>
                                    <div class="col-md-4 product-has-harmony" style="display:<?= $item->getDefinitions()->hasHarmony() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-price-harmony"><?= __('Price for harmony') ?></label>
                                            <input class="form-control" value="<?= $product['price_harmony'] ?>" type="text" name="price_harmony" id="product-price-harmony" />
                                        </div>
                                    </div>

                                    <div class="col-md-4 product-has-refine" style="display:<?= $item->getDefinitions()->hasRefine() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-price-refine"><?= __('Price for refine') ?></label>
                                            <input class="form-control" value="<?= $product['price_refine'] ?>" type="text" name="price_refine" id="product-price-refine" />
                                        </div>
                                    </div>

                                    <div class="col-md-4 product-has-socket" style="display:<?= $item->getDefinitions()->hasSockets() ? 'block' : 'none' ?>">
                                        <div class="form-group">
                                            <label class="control-label" for="product-price-socket"><?= __('Price for socket') ?></label>
                                            <input class="form-control" value="<?= $product['price_socket'] ?>" type="text" name="price_socket" id="product-price-socket" />
                                        </div>
                                    </div>
                                <?php endif ?>
                            </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>
</section>