<script>
    $(function () {
        $("#ranking-database").change(function () {
            var $this = $(this);
            var $table = $("#ranking-table");
            var $score = $("#ranking-score-column");
            var $name = $("#ranking-character-column");

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

                $table.val(data[0].TABLE_NAME);
                $("#character-column").hide();

                $("#ranking-table").trigger("change");
            });


        });

        $("#ranking-table").change(function () {
            var $this = $(this);
            var $score = $("#ranking-score-column");
            var $name = $("#ranking-character-column");
            var $database = $("#ranking-database");

            $score.html('');
            $name.html('');
            $.getJSON(prefix + "sql/columns/" + $this.val() + "/" + $database.val(), function (data) {
                $.each(data, function (key, value) {
                    $score.append('<option value="' + value.COLUMN_NAME + '">' + value.COLUMN_NAME + '</option>')
                });

                if ($this.val() !== "Character") {
                    $("#character-column").show();

                    $.each(data, function (key, value) {
                        $name.append('<option vaslue="' + value.COLUMN_NAME + '">' + value.COLUMN_NAME + '</option>')
                    });
                } else {
                    $("#character-column").hide();
                }
            });
        });
    })

</script>

<section class="content-header">
    <h1><?= __('Add custom ranking') ?></h1>

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

<section class="content">
    <div class="box box-default">
        <form data-ajax class="form-focus" action="<?= admin_url_to('/configs/rankings/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><?= __('Ranking') ?></h5>
                        </div>

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

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="ranking-type"><?= __('Type') ?> <span class="required">*</span></label>
                                        <select class="form-control" id="ranking-type" name="type">
                                            <option value="character"><?= __( 'Character') ?></option>
                                            <option value="guild"><?= __( 'Guild') ?></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label" for="ranking-database"><?= __('Database') ?> <span class="required">*</span></label>
                                        <select class="form-control" id="ranking-database" name="database">
                                            <option value=""></option>
                                            <?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>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" for="ranking-table"><?= __('Table') ?> <span class="required">*</span></label>
                                        <select class="form-control" id="ranking-table" name="table">
                                            <option value=""></option>
                                            <?php foreach (sql_tables() as $table): ?>
                                                <option value="<?= $table['TABLE_NAME'] ?>"><?= $table['TABLE_NAME'] ?></option>
                                            <?php endforeach ?>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label" for="ranking-score-column"><?= __('Score column') ?> <span class="required">*</span></label>
                                        <select class="form-control" id="ranking-score-column" name="score_column">
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4" id="character-column" style="display:none">
                                    <div class="form-group">
                                        <label class="control-label" for="ranking-character-column"><?= __('Character column') ?> <span class="required">*</span></label>
                                        <select class="form-control" id="ranking-character-column" name="character_column">
                                        </select>
                                    </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>