@extends('voyager::master')
@if($db->action == 'update')
    @section('page_title', __('voyager::database.editing_table', ['table' => $db->table->name]))
@else
    @section('page_title', __('voyager::database.create_new_table'))
@endif

@section('page_header')
    <h1 class="page-title">
        <i class="voyager-data"></i>
        @if($db->action == 'update')
            {{ __('voyager::database.editing_table', ['table' => $db->table->name]) }}
        @else
            {{ __('voyager::database.create_new_table') }}
        @endif
    </h1>
@stop

@section('content')
    <div class="bread">

        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
            <nav class="navigation">
                <div class="right-top-nav flex-box">
                    <a class="flex-box back">
                        <img src="{{ voyager_asset('icon/back.svg') }}">
                        برگشت
                    </a>
                    <a class="flex-box add-new">
                        <img src="{{ voyager_asset('icon/change.svg') }}">
                        <p>
                            ثبت تغییرات
                        </p>
                    </a>
                </div>
            </nav>
        </div>


        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="row">
                        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                            <h5 class="title">
                                ویرایش جدول Database
                            </h5>
                        </div>
                        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                            <div class="box">
                                <form action="#" class="form">
                                    <div class="row">
                                        <div id="dbManager" class="padding-item margin-bottom col-lg-12 col-md-12 col-sm-12">
                                            <div class="input-row">

                                                <div class="col-md-12">
                                                    <form ref="form" @submit.prevent="stringifyTable" @keydown.enter.prevent action="{{ $db->formAction }}" method="POST">
                                                        @if($db->action == 'update'){{ method_field('PUT') }}@endif


                                                        <input type="hidden" :value="tableJson" name="table">

                                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                    </form>
                                                </div>

                                            </div>
                                            <database-table-editor :table="table"></database-table-editor>

                                        </div>


                                        <div class="padding-item margin-bottom col-lg-8 col-md-12 col-sm-12">
                                            <div class="add-row nav-button-row doc-button-row">
                                                <a class="acsses add-item flex-box">
                                                    <img src="assets/icon/Plus,%20Add.svg">
                                                    افزودن Soft Deletes
                                                </a>
                                                <a class="acsses add-item flex-box">
                                                    <img src="assets/icon/Plus,%20Add.svg">
                                                    افزودن Time Stamps
                                                </a>
                                                <a id="add-colum" class="acsses add-item flex-box">
                                                    <img src="assets/icon/Plus,%20Add.svg">
                                                    افزودن ستون جدید
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




            <div id="dbManager" class="col-md-12">
                <form ref="form" @submit.prevent="stringifyTable" @keydown.enter.prevent action="{{ $db->formAction }}" method="POST">
                    @if($db->action == 'update'){{ method_field('PUT') }}@endif

                    <database-table-editor :table="table"></database-table-editor>

                    <input type="hidden" :value="tableJson" name="table">

                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                </form>
            </div>
    </div>

@stop

@section('javascript')
    @include('voyager::tools.database.vue-components.database-table-editor')

    <script>
        new Vue({
            el: '#dbManager',
            data: {
                table: {},
                originalTable: {!! $db->table->toJson() !!}, // to do comparison later?
                oldTable: {!! $db->oldTable !!},
                tableJson: ''
            },
            created() {
                // If old table is set, use it to repopulate the form
                if (this.oldTable) {
                    this.table = this.oldTable;
                } else {
                    this.table = JSON.parse(JSON.stringify(this.originalTable));
                }
            },
            methods: {
                stringifyTable() {
                    this.tableJson = JSON.stringify(this.table);

                    this.$nextTick(() => this.$refs.form.submit());
                }
            }
        });
    </script>

@stop