<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 value="' + value.TABLE_NAME + '">' + value.TABLE_NAME + '</option>')
            });

            columns();
        });
    }

    function columns() {
        var $this = $("#table");
        var $database = $("#database");
        var $column = $("#column");
        var $name = $("#foreign-key");

        $column.html('');
        $name.html('');

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

        $.getJSON(prefix + "sql/columns/" + $this.val() + "/" + $database.val(), function (data) {
            $.each(data, function (key, value) {
                $column.append('<option' + ($column.data("selected") === value.COLUMN_NAME ? ' selected' : '') + ' value="' + value.COLUMN_NAME + '">' + value.COLUMN_NAME + '</option>')
                $name.append('<option' + ($name.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><?= __('Add new coin') ?></h1>

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

<section class="content">

    <div class="box box-default">
        <form data-ajax class="form-focus" action="<?= admin_url_to('/coins/add') ?>" 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><?= __('Coin') ?></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="id">ID <span class="required">*</span></label>
                                        <input class="form-control" type="text" name="id" id="id" />
                                    </div>
                                </div>

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

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <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<?= config('conn.default.dbname') === $database['name'] ? ' selected' : '' ?> value="<?= $database['name'] ?>"><?= $database['name'] ?></option>
                                            <?php endforeach ?>
                                        </select>
                                    </div>
                                </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" type="text" name="table" id="table"></select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="column"><?= __('Amount column') ?> <span class="required">*</span></label>
                                        <select class="form-control" type="text" name="column" id="column"></select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="foreign-key"><?= __('Account column') ?> <span class="required">*</span></label>
                                        <select class="form-control" type="text" name="foreign_key" id="foreign-key"></select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="coins-where-column"><?= __('Where column') ?></label>
                                        <input class="form-control" type="text" name="where_column" id="coins-where-column" />
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="coins-where-value"><?= __('Where value') ?></label>
                                        <input class="form-control" type="text" name="where_value" id="coins-where-value" />
                                    </div>
                                </div>
                            </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>