<script type="text/javascript">
    function byType() {
        var val = $("#config-use-type").val();
        console.log(val);
        if (val == "1") {
            $(".by-category").show();
            $(".by-upload").hide();
        } else if (val == "2") {
            $(".by-category").hide();
            $(".by-upload").show();
        } else {
            $(".by-category").hide();
            $(".by-upload").hide();
        }
    }

    $(function () {
        byType();

        $("#config-use-type").change(function () {
            console.log('a');
            byType();
        });

        $(document).on("click", ".add-department", function (e) {
            var $this = $(this);
            var $container = $this.closest("form").find(".container-add-category");
            var index = $container.find(":input").size() + 1;
            $container.append('<input class="form-control" type="text" style="margin-top:3px;" name="categories[]" />');
            e.preventDefault();
        });
    });
</script>

<section class="content-header">
    <h1><?= __('Avatar plugin settings') ?></h1>
</section>

<section class="content">

    <div class="box box-default">
        <form data-ajax class="form-focus" action="<?= admin_url_to('/configs/avatar') ?>" 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><?= __('Type') ?></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="config-use-type"><?= __('Use type') ?></label>
                                        <select class="form-control" name="use_type" id="config-use-type">
                <!--                            <option value="1"--><?//= config('avatar.use_type') == 1 ? ' selected' : '' ?><!-->--><?//= __('by category') ?><!--</option>-->
                                            <option value="2"<?= config('avatar.use_type') == 2 ? ' selected' : '' ?>><?= __('Upload') ?></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section by-upload" style="display:none;border-bottom:0;padding-bottom:0">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                            <h5><?= __('Upload') ?></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="config-filesize"><?= __('Filesize') ?></label>
                                        <input class="form-control" value="<?= config('avatar.filesize', 100) ?>" type="text" id="config-filesize" name="filesize" />
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="config-gif"><?= __('Allow GIF') ?>?</label>
                                        <div>
                                            <input class="form-control toggle" type="checkbox"<?= config('avatar.allow_gif', false) ? ' checked' : '' ?> id="config-gif"<?= config('avatar.gif', false) ? 'checked="checked"' : '' ?> value="1" name="allow_gif" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section by-category" style="display:none;border-bottom:0;padding-bottom:0">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                            <h5><?= __('Categories') ?></h5>
                        </div>

                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                            <div class="container-add-category">
                                <?php foreach (config('avatar.categories', []) as $category): ?>
                                    <input class="form-control" type="text" style="margin-bottom:3px;" value="<?= $category ?>" name="categories[]" />
                                <?php endforeach ?>
                                <input class="form-control" type="text" name="categories[]" />
                            </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>