<script>
    $(function () {
        $("#item-id").change(function () {
            var $this = $(this);

            if ($this.val()) {
                var $image = $("#item-image");
                var $name = $("#item-name");
                var $skill = $("#item-skill");
                var $ancient = $("#item-ancient");
                var $refine = $("#item-refine");
                var $harmony = $("#item-harmony");
                var $socket = $("#item-socket");
                var $excellent = $("#item-excellent");
                var $durability = $("#item-durability");

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

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

                    if (data.has_ancient) {
                        $ancient.show();
                    } else {
                        $ancient.hide();
                    }

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

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

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

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

                    if (data.stackable) {
                        $durability.show();
                    } else {
                        $durability.hide();
                    }

                    var index = 0;
                    $.each(data.excellent_options, function (val, ex) {
                        index++;

                        var $exn = $("#item-exe-name-" + index);
                        var $ext = $(".item-exe-" + index);

                        $ext.show();
                        $exn.html(ex);
                    });

                    if (index < 6) {
                        for (var i = index + 1; i <= 6; i++) {
                            $(".item-exe-" + i).hide();
                        }
                    }
                });

            }
        });
    });
</script>

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

    <div class="actions">
        <a data-ajax class="btn btn-default btn-sm" href="<?= admin_url_to('/lootboxes/items?lootbox_id=' . $box['id']) ?>"><?= __('List') ?></a>
    </div>
</section>

<section class="content">
    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
            <li><a data-ajax href="<?= admin_url_to('/lootboxes/edit/' . $box['id']) ?>"><?= __('Loot box') ?></a></li>
            <li data-ajax class="active"><a href="<?= admin_url_to('/lootboxes/items?lootbox_id=' . $box['id']) ?>"><?= __('Items') ?></a></li>
        </ul>
        <div class="tab-content" style="padding:0">
            <form data-ajax data-upload class="form-focus" action="<?= admin_url_to('/lootboxes/items/add?lootbox_id=' . $box['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><?= __('Basic percentage') ?></h5>
                            </div>

                            <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <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 => $item): ?>
                                                    <optgroup label="<?= $category ?>">
                                                        <?php foreach ($item as $it): ?>
                                                            <option value="<?= $it['id'] ?>"><?= $it['name'] ?></option>
                                                        <?php endforeach ?>
                                                    </optgroup>
                                                <?php endforeach ?>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="control-label" for="item-percent"><?= __('Item percent') ?> <span class="required">*</span></label>
                                            <input class="form-control" type="text" name="item_percent" id="item-percent" />
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label class="control-label" for="rarity"><?= __('Rarity') ?></label>
                                            <select class="form-control" name="rarity_id" id="rarity">
                                                <option value=""></option>
                                                <?php foreach ($rarities as $rarity): ?>
                                                    <option value="<?= $rarity['id'] ?>"><?= $rarity['name'] ?></option>
                                                <?php endforeach ?>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row" id="item-durability">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="control-label" for="durability"><?= __('Durability') ?></label>
                                            <input class="form-control" type="text" name="durability" />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="percent-level"><?= __('Percent level') ?></label>
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <?php for ($i = 1; $i <= config('item.max_level', 15); $i++): ?>
                                                    <th class="text-center">+<?= $i ?></th>
                                                <?php endfor ?>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php for ($i = 1; $i <= config('item.max_level', 15); $i++): ?>
                                                <td><input class="form-control" type="text" name="percent_levels[<?= $i ?>]" /></td>
                                            <?php endfor ?>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="percent-options"><?= __('Percent option') ?></label>
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr>
                                                <?php for ($i = 4; $i <= config('item.max_option', 28); $i+=4): ?>
                                                    <th class="text-center">+<?= $i ?></th>
                                                <?php endfor ?>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php for ($i = 4; $i <= config('item.max_option', 28); $i+=4): ?>
                                                <td><input class="form-control" type="text" name="percent_options[<?= $i ?>]" /></td>
                                            <?php endfor ?>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="control-label" for="percent-luck"><?= __('Percent luck') ?></label>
                                            <input class="form-control" type="text" name="percent_luck" id="item-luck" />
                                        </div>
                                    </div>

                                    <div class="col-md-4" id="item-skill" style="display:none">
                                        <div class="form-group">
                                            <label class="control-label" for="percent-skill"><?= __('Percent skill') ?></label>
                                            <input class="form-control" type="text" name="percent_skill" id="item-skill" />
                                        </div>
                                    </div>

                                    <div class="col-md-4" id="item-ancient" style="display:none">
                                        <div class="form-group">
                                            <label class="control-label" for="percent-ancient"><?= __('Percent ancient') ?></label>
                                            <input class="form-control" type="text" name="percent_ancient" id="item-ancient" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section" id="item-excellent" style="display:none">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                <h5><?= __('Excellent percentage') ?></h5>
                            </div>

                            <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <?php for ($i = 1; $i <= 6; $i++): ?>
                                                <th class="text-center" class="item-exe-<?= $i ?>"><span id="item-exe-name-<?= $i ?>"></span></span></th>
                                            <?php endfor ?>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php for ($i = 1; $i <= 6; $i++): ?>
                                            <td class="item-exe-<?= $i ?>"><input class="form-control" type="text" name="percent_exc[<?= $i ?>]" /></td>
                                        <?php endfor ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="section" id="item-refine" style="display:none">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                <h5><?= __('Refine percentage') ?></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="percent-refine"><?= __('Percent refine') ?></label>
                                            <input class="form-control" type="text" name="percent_refine" id="item-refine" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section" id="item-harmony" style="display:none">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                <h5><?= __('Harmony percentage') ?></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">
                                            <input class="form-control" type="text" name="percent_harmony" id="item-harmony" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section" id="item-socket" style="display:none">
                        <div class="row">
                            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                <h5><?= __('Socket percentage') ?></h5>
                            </div>

                            <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <?php for ($i = 1; $i <= 5; $i++): ?>
                                                <th class="text-center">#<?= $i ?></th>
                                            <?php endfor ?>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php for ($i = 1; $i <= 5; $i++): ?>
                                            <td><input class="form-control" type="text" name="percent_sockets[<?= $i ?>]" /></td>
                                        <?php endfor ?>
                                    </tbody>
                                </table>
                            </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>
