@extends('voyager::master')

@section('page_title', __('voyager::generic.viewing').' '.__('voyager::generic.database'))

@section('page_header')
    <div class="action">
        <a href="{{ route('voyager.database.create') }}" class="btn btn-blue add">
            {{ __('voyager::database.create_new_table') }}</a>
    </div>
@stop

@section('content')
    @include('voyager::alerts')


    <div class="row">

        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
            <div class="row">

                <div class="col-lg-12 col-md-12 col-sm-12">
                    <table>
                        <thead>
                        <tr class="tr">
                            <th class="child1">
                            </th>
                            <th class="child2">
                                <div class="flex-box list-filter">
                                    {{ __('voyager::database.table_name') }}
                                </div>
                            </th>

                            <th class="child4 text-center">
                                <div class="flex-box list-filter">
                                    {{ __('voyager::database.table_actions') }}
                                </div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>

                        @foreach($tables as $table)
                            @continue(in_array($table->name, config('voyager.database.tables.hidden', [])))
                            <tr class="tr">
                                <td class="child2">
                                    <div class="flex-box">
                                        <div>
                                            <a style="color: inherit"
                                               href="{{ route('voyager.database.show', $table->prefix.$table->name) }}"
                                               data-name="{{ $table->prefix.$table->name }}">
                                                {{ $table->name }}
                                            </a>

                                        </div>
                                    </div>
                                </td>

                                @if($table->dataTypeId)
                                    <td class="child4" style="display: flex">
                                        <a class="green-2 Condition"
                                           href="{{ route('voyager.' . $table->slug . '.index') }}">
                                            {{ __('voyager::generic.browse') }}
                                        </a>
                                        <a class="yellow Condition"
                                           href="{{ route('voyager.bread.edit', $table->name) }}">
                                            {{ __('voyager::generic.edit') }}
                                        </a>
                                        <a class="red Condition" href="#delete-bread"
                                           data-id="{{ $table->dataTypeId }}" data-name="{{ $table->name }}">
                                            {{ __('voyager::generic.delete') }}
                                        </a>
                                    </td>


                                @else
                                    <td class="child4 text-center">
                                        <a class="account-number"
                                           href="{{ route('voyager.bread.create', $table->name) }}">
                                            {{ __('voyager::bread.add_bread') }}
                                        </a>
                                    </td>
                                @endif

                                <td class="child2 text-center">
                                    <div class="flex-box button-row">

                                        <a  class="btn account-number  btn-sm pull-right delete_table @if($table->dataTypeId) remove-bread-warning @endif"
                                           data-table="{{ $table->prefix.$table->name }}">

                                            <img src="{{voyager_asset('icon/trash.svg')}}">
                                        </a>
                                        <a href="{{ route('voyager.database.edit', $table->prefix.$table->name) }}"
                                           class="btn btn-sm account-number pull-right"
                                           >

                                            <img src="{{voyager_asset('icon/pen.svg')}}">
                                        </a>
                                        <a href="{{ route('voyager.database.show', $table->prefix.$table->name) }}"
                                           data-name="{{ $table->name }}"
                                           class="btn account-number btn-sm  pull-right desctable"
                                           >

                                            <img src="{{voyager_asset('icon/folder.svg')}}">
                                        </a>
                                    </div>

                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div> {{-- Delete BREAD Modal --}}
        <div class="modal modal-danger fade" tabindex="-1" id="delete_bread_modal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="{{ __('voyager::generic.close') }}"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">
                            <i class="voyager-trash"></i>
                            {!! __('voyager::bread.delete_bread_quest', ['table' => '<span id="delete_bread_name"></span>']) !!}
                        </h4>
                    </div>
                    <div class="modal-footer">
                        <form action="#" id="delete_bread_form" method="POST">
                            {{ method_field('DELETE') }}
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="submit" class="btn btn-danger"
                                   value="{{ __('voyager::bread.delete_bread_conf') }}">
                        </form>
                        <button type="button" class="btn btn-outline pull-right"
                                data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="{{ __('voyager::generic.close') }}"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"><i
                                class="voyager-trash"></i> {!! __('voyager::database.delete_table_question', ['table' => '<span id="delete_table_name"></span>']) !!}
                        </h4>
                    </div>
                    <div class="modal-footer">
                        <form action="#" id="delete_table_form" method="POST">
                            {{ method_field('DELETE') }}
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="submit" class="btn btn-danger pull-right"
                                   value="{{ __('voyager::database.delete_table_confirm') }}">
                            <button type="button" class="btn btn-outline pull-right" style="margin-right:10px;"
                                    data-dismiss="modal">{{ __('voyager::generic.cancel') }}
                            </button>
                        </form>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <div class="modal modal-info fade" tabindex="-1" id="table_info" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="{{ __('voyager::generic.close') }}"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"><i class="voyager-data"></i> @{{ table.name }}</h4>
                    </div>
                    <div class="modal-body" style="overflow:scroll">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>{{ __('voyager::database.field') }}</th>
                                <th>{{ __('voyager::database.type') }}</th>
                                <th>{{ __('voyager::database.null') }}</th>
                                <th>{{ __('voyager::database.key') }}</th>
                                <th>{{ __('voyager::database.default') }}</th>
                                <th>{{ __('voyager::database.extra') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="row in table.rows">
                                <td><strong>@{{ row.Field }}</strong></td>
                                <td>@{{ row.Type }}</td>
                                <td>@{{ row.Null }}</td>
                                <td>@{{ row.Key }}</td>
                                <td>@{{ row.Default }}</td>
                                <td>@{{ row.Extra }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline pull-right"
                                data-dismiss="modal">{{ __('voyager::generic.close') }}</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        @stop

        @section('javascript')

            <script>

                var table = {
                    name: '',
                    rows: []
                };

                new Vue({
                    el: '#table_info',
                    data: {
                        table: table,
                    },
                });

                $(function () {

                    // Setup Show Table Info
                    //
                    $('.database-tables').on('click', '.desctable', function (e) {
                        e.preventDefault();
                        href = $(this).attr('href');
                        table.name = $(this).data('name');
                        table.rows = [];
                        $.get(href, function (data) {
                            $.each(data, function (key, val) {
                                table.rows.push({
                                    Field: val.field,
                                    Type: val.type,
                                    Null: val.null,
                                    Key: val.key,
                                    Default: val.default,
                                    Extra: val.extra
                                });
                                $('#table_info').modal('show');
                            });
                        });
                    });

                    // Setup Delete Table
                    //
                    $('td.actions').on('click', '.delete_table', function (e) {
                        table = $(this).data('table');
                        if ($(this).hasClass('remove-bread-warning')) {
                            toastr.warning('{{ __('voyager::database.delete_bread_before_table') }}');
                        } else {
                            $('#delete_table_name').text(table);

                            $('#delete_table_form')[0].action = '{{ route('voyager.database.destroy', ['database' => '__database']) }}'.replace('__database', table)
                            $('#delete_modal').modal('show');
                        }
                    });

                    // Setup Delete BREAD
                    //
                    $('table .bread_actions').on('click', '.delete', function (e) {
                        id = $(this).data('id');
                        name = $(this).data('name');

                        $('#delete_bread_name').text(name);
                        $('#delete_bread_form')[0].action = '{{ route('voyager.bread.delete', '__id') }}'.replace('__id', id);
                        $('#delete_bread_modal').modal('show');
                    });
                });
            </script>

@stop