<script>
    function tables() {
        var $this = $("#database");
        var $table = $("#table");

        $table.html('<option value=""></option>');
        $.getJSON(prefix + "sql/tables/" + $this.val(), function (data) {
            $.each(data, function (key, value) {
                $table.append('<option' + ($table.data("selected") === value.TABLE_NAME ? ' selected' : '') + ' value="' + value.TABLE_NAME + '">' + value.TABLE_NAME + '</option>')
            });

            columns();
        });
    }

    function columns() {
        var $this = $("#table");
        var $database = $("#database");
        var $account = $("#column-account");
        var $type = $("#column-type");
        var $expire = $("#column-expire")

        $account.html('');
        $type.html('');
        $expire.html('');

        if ($this.val() === '') return;

        $.getJSON(prefix + "sql/columns/" + $this.val() + "/" + $database.val(), function (data) {
            $.each(data, function (key, value) {
                $account.append('<option' + ($account.data("selected") === value.COLUMN_NAME ? ' selected' : '') + ' value="' + value.COLUMN_NAME + '">' + value.COLUMN_NAME + '</option>')
                $type.append('<option' + ($type.data("selected") === value.COLUMN_NAME ? ' selected' : '') + ' value="' + value.COLUMN_NAME + '">' + value.COLUMN_NAME + '</option>')
                $expire.append('<option' + ($expire.data("selected") === value.COLUMN_NAME ? ' selected' : '') + ' value="' + value.COLUMN_NAME + '">' + value.COLUMN_NAME + '</option>')
            });
        });
    }

    $(function () {
        tables();
        $("#table").change(function () {
            columns();
        });

        $("#database").change(function () {
            tables();
        });
    });
</script>

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

<section class="content">
    <div class="box box-default">
        <form data-ajax class="form-focus" action="<?= admin_url_to('/configs/vip') ?>" 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-6">
                                    <label class="control-label" for="database"><?= __('Database') ?> <span class="required">*</span></label>
                                    <select class="form-control" id="database" name="database">
                                        <?php foreach (sql_databases() as $database): ?>
                                            <option<?= (isset($vip['database']) ? $vip['database'] : config('conn.default.dbname')) === $database['name'] ? ' selected' : '' ?> value="<?= $database['name'] ?>"><?= $database['name'] ?></option>
                                        <?php endforeach ?>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="table"><?= __('Table') ?> <span class="required">*</span></label>
                                        <select class="form-control" id="table" data-selected="<?= isset($vip['table']) ? $vip['table'] : '' ?>" name="table">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" for="column-account"><?= __('Account column') ?> <span class="required">*</span></label>
                                        <select class="form-control" type="text" id="column-account" data-selected="<?= isset($vip['column_account']) ? $vip['column_account'] : '' ?>" name="column_account">
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" for="column-type"><?= __('Vip column') ?> <span class="required">*</span></label>
                                        <select class="form-control" type="text" id="column-type" data-selected="<?= isset($vip['column_type']) ? $vip['column_type'] : '' ?>" name="column_type">
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" for="column-expire"><?= __('Maturity column') ?> <span class="required">*</span></label>
                                        <select class="form-control" id="column-expire" data-selected="<?= isset($vip['column_expire']) ? $vip['column_expire'] : '' ?>" name="column_expire">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label" for="config-vip-types"><?= __('Types') ?></label>

                                <div class="container-add-vip-type">
                                    <?php if (isset($vip['types'])): ?>
                                        <?php $i = 0; foreach ($vip['types'] as $code => $name): ?>
                                            <div style="display:flex;margin-bottom:10px;">
                                                <input class="form-control" type="text" value="<?= $code ?>" name="types[<?= $i ?>][code]" placeholder="<?= __('Code') ?>" style="width:30%;margin-right:2%" />
                                                <input class="form-control" type="text" value="<?= $name ?>" name="types[<?= $i ?>][name]" placeholder="<?= __('Name') ?>" style="width:68%" />
                                            </div>
                                            <?php $i++; endforeach ?>
                                    <?php endif ?>
                                    <div style="display:flex;">
                                        <input class="form-control" type="text" name="types[<?= count(config('vip.types', [])) + 1 ?>][code]" placeholder="<?= __('Code') ?>" style="width:30%;margin-right:2%" />
                                        <input class="form-control" type="text" name="types[<?= count(config('vip.types', [])) + 1 ?>][name]" placeholder="<?= __('Name') ?>" style="width:68%;" />
                                    </div>
                                </div>
                            </div>

                            <div style="text-align:right;margin-top:10px">
                                <a class="btn btn-xs btn-success add-vip-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>