@extends ('layouts/template')
@section('content')

<div id="app">
    <br>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="bg-white p-3">
                    <h6>TSV</h6>
                    <div class="input-group">
                        <textarea v-model="content" class="form-control" rows="10" @input="splitContents"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="bg-white p-3">
                    <h6>JSON Structure</h6>
                    <textarea class="form-control" rows="10">@{{jsonStructure}}</textarea>
                </div>
            </div>
        </div>
        <template v-if="rows.length">
            <div class="row my-3">
                <div class="col">
                    <div class="bg-white p-3">
                        <h6>Table output:</h6>
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover">
                                <tbody>
                                    <tr v-for="(row, rowIndex) in rows">
                                        <td v-for="(column, columnIndex) in columns[rowIndex]">
                                            <input class="border-0" type="text" v-model="columns[rowIndex][columnIndex]" @keyup="updateColumns(rowIndex, columnIndex)">
                                        </td>
                                        </td>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            content: '',
            rowSplitter: '\n',
            columnSplitter: '\t',
            rows: [],
            columns: [],
            maxColumn: 0,
            jsonStructure: '',
        },
        methods: {
            updateColumns(rowIndex, columnIndex) {
                try {
                    this.rows[rowIndex] = this.columns[rowIndex].join(this.columnSplitter);
                    this.content = this.rows.join('\n');
                } catch (error) {
                    console.error(error);
                    this.rows = [];
                    this.content = '';
                }
                this.updateJsonStructure();
            },
            splitContents() {
                this.maxColumn = 0;
                try {
                    this.rows = this.content.split(this.rowSplitter);
                    this.rows.map((row, index) => {
                        this.columns[index] = row.split(this.columnSplitter);
                        const length = this.columns[index].length;
                        if (length > this.maxColumn) {
                            this.maxColumn = length
                        }
                        const emptyFields = this.maxColumn - length;
                        for (ii = 0; ii < emptyFields; ii++) {
                            this.columns[index].push('');
                        }
                    });
                } catch (error) {
                    console.error(error);
                    this.rows = [];
                }
                this.updateJsonStructure();
            },
            updateJsonStructure() {
                try {
                    this.jsonStructure = JSON.stringify(this.columns, null, '\t');
                } catch (error) {
                    console.error(error);
                    this.jsonStructure = JSON.stringify([], null, '\t');
                }
            }
        },
        watch: {
            maxColumn(maxColumn) {
                this.columns.map((column, index) => {
                    const emptyFields = maxColumn - column.length;
                    if (emptyFields) {
                        for (ii = 0; ii < emptyFields; ii++) {
                            this.columns[index].push('');
                        }
                    }
                })
            }
        }
    })
</script>

@endsection