<script type="text/javascript">
    $(function () {

        $(".add-post-type").click(function (e) {
            var $this = $(this);
            var $container = $this.closest("form").find(".container-add-post-type");
            var index = ($container.find(":input").size() / 2) + 1;
            $container.append('<div style="margin-top:10px;display:flex"><input class="form-control" type="text" placeholder="<?= __('Name') ?>" name="types[' + index + '][name]" style="width:63%;margin-right:2%;" /><input class="form-control" type="text" placeholder="<?= __('Color') ?>" name="types[' + index + '][color]" style="width:35%" /></div>');
            e.preventDefault();
        });

    });
</script>

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

<section class="content">

    <div class="box box-default">
        <form data-ajax class="form-focus" action="<?= admin_url_to('/posts/config') ?>" 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><?= __('Settings') ?></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-limit"><?= __('Post limit') ?></label>
                                        <input class="form-control" type="text" value="<?= config('posts.limit') ?>" name="limit" id="config-limit" />
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" for="config-allow-comments"><?= __('Allow comments') ?>?</label>
                                        <div>
                                            <input class="form-control toggle" type="checkbox" id="config-allow-comments"<?= config('posts.allow_comments', false) ? 'checked="checked"' : '' ?> value="1" name="allow_comments" />
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" for="config-show-preview"><?= __('Show preview') ?>?</label>
                                        <div>
                                            <input class="form-control toggle" type="checkbox" id="config-show-preview"<?= config('posts.show_preview', false) ? 'checked="checked"' : '' ?> value="1" name="show_preview" />
                                        </div>
                                    </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><?= __('Categories') ?></h5>
                        </div>

                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                            <div class="container-add-post-type">
                                <?php foreach (config('posts.types', []) as $index => $type): ?>
                                    <div style="margin-bottom:10px;display:flex">
                                        <input class="form-control" type="text" value="<?= $type['name'] ?>" name="types[<?= $index - 1 ?>][name]" style="width:63%;margin-right:2%" />
                                        <input class="form-control" type="text" value="<?= $type['color'] ?>" name="types[<?= $index - 1 ?>][color]" style="width:35%;" />
                                    </div>
                                <?php endforeach ?>
                                <div style="margin-bottom:10px;display:flex">
                                    <input class="form-control" type="text" placeholder="<?= __('Name') ?>" name="types[<?= count(config('posts.types', [])) + 1 ?>][name]" style="width:63%;margin-right:2%" />
                                    <input class="form-control" type="text" placeholder="<?= __('Color') ?>" name="types[<?= count(config('posts.types', [])) + 1 ?>][color]" style="width:35%" />
                                </div>
                            </div>

                            <div style="text-align:right;margin-top:10px">
                                <a class="btn btn-success btn-xs add-post-type" href="javascript:void(0)"><?= __('Add') ?></a>
                            </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>