@extends(config('dotenveditor.template', 'dotenv-editor::master'))

@section('content')
    <div class="box box-success box-solid">
        <div class="box-header">
            <h3 class="box-title">{{ __('dotenv-editor::views.title') }}</h3>
            <div class="box-tools"></div>
        </div>
        <div class="box-body" id="app">
            <h1><a href="{{ url(config('dotenveditor.route.prefix')) }}">{{ __('dotenv-editor::views.title') }}</a></h1>
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-tabs">
                        <li v-for="view in views" role="presentation" class="@{{ view.active ? 'active' : '' }}">
                            <a href="javascript:;" @click="setActiveView(view.name)">@{{ view.name }}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    {{-- Error-Container --}}
                    <div>
                        <div class="alert alert-success" role="alert" v-show="alertsuccess">
                            <button type="button" class="close" @click="closeAlert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            @{{ alertmessage }}
                        </div>
                        {{-- Errors from POST-Requests --}}
                        @if(session('dotenv'))
                            <div class="alert alert-success alert-dismissable" role="alert">
                                <button type="button" class="close" aria-label="Close" data-dismiss="alert"
                                        aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                {{ session('dotenv') }}
                            </div>
                        @endif
                    </div>
                    {{-- Overview --}}
                    <div v-show="views[0].active">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title"> {{ __('dotenv-editor::views.overview_title') }} </h2>
                            </div>
                            <div class="panel-body">
                                <p> {!! __('dotenv-editor::views.overview_text') !!} </p>
                                <p>
                                    <a href="javascript:;" v-show="loadButton" class="btn btn-primary" @click="loadEnv">
                                        {{ __('dotenv-editor::views.overview_button') }}
                                    </a>
                                </p>
                            </div>
                            <div class="table-responsive" v-show="!loadButton">
                                <table class="table table-striped">
                                    <tr>
                                        <th>{{ __('dotenv-editor::views.overview_table_key') }}</th>
                                        <th>{{ __('dotenv-editor::views.overview_table_value') }}</th>
                                        <th>{{ __('dotenv-editor::views.overview_table_options') }}</th>
                                    </tr>
                                    <tr v-for="entry in entries">
                                        <td>@{{ entry.key }}</td>
                                        <td>
                                            <i class="fa fa-eye" @click="entry.hide = !entry.hide"></i>
                                            <span>@{{ entry.value | hide(entry.hide) }}</span>
                                        </td>
                                        <td>
                                            <a href="javascript:;" @click="editEntry(entry)"
                                               title="{{ __('dotenv-editor::views.overview_table_popover_edit') }}">
                                                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                                            </a>
                                            <a href="javascript:;" @click="modal(entry)"
                                               title="{{ __('dotenv-editor::views.overview_table_popover_delete') }}">
                                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        {{-- Modal delete --}}
                        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title">@{{ deleteModal.title }}</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>{!! __('dotenv-editor::views.overview_delete_modal_text') !!}</p>
                                        <p class="text text-warning">
                                            <strong>@{{ deleteModal.content }}</strong>
                                        </p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            {!! __('dotenv-editor::views.overview_delete_modal_no') !!}
                                        </button>
                                        <button type="button" class="btn btn-danger" @click="deleteEntry">
                                            {!! __('dotenv-editor::views.overview_delete_modal_yes') !!}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- Modal edit --}}
                        <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title">{!! __('dotenv-editor::views.overview_edit_modal_title') !!}</h4>
                                    </div>
                                    <div class="modal-body">
                                        <strong>{!! __('dotenv-editor::views.overview_edit_modal_key') !!}:</strong> @{{
                                        toEdit.key }}<br><br>
                                        <div class="form-group">
                                            <label for="editvalue">{!! __('dotenv-editor::views.overview_edit_modal_value') !!}</label>
                                            <input type="text" v-model="toEdit.value" id="editvalue"
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            {!! __('dotenv-editor::views.overview_edit_modal_quit') !!}
                                        </button>
                                        <button type="button" class="btn btn-primary" @click="updateEntry">
                                            {!! __('dotenv-editor::views.overview_edit_modal_save') !!}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Add new --}}
                    <div v-show="views[1].active">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">{!! __('dotenv-editor::views.addnew_title') !!}</h2>
                            </div>
                            <div class="panel-body">
                                <p>
                                    {!! __('dotenv-editor::views.addnew_text') !!}
                                </p>

                                <form @submit.prevent="addNew()">
                                    <div class="form-group">
                                        <label for="newkey">{!! __('dotenv-editor::views.addnew_label_key') !!}</label>
                                        <input type="text" name="newkey" id="newkey" v-model="newEntry.key"
                                               class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="newvalue">{!! __('dotenv-editor::views.addnew_label_value') !!}</label>
                                        <input type="text" name="newvalue" id="newvalue" v-model="newEntry.value"
                                               class="form-control">
                                    </div>
                                    <button class="btn btn-default" type="submit">
                                        {!! __('dotenv-editor::views.addnew_button_add') !!}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    {{-- Backups --}}
                    <div v-show="views[2].active">
                        {{-- Create Backup --}}
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">{!! __('dotenv-editor::views.backup_title_one') !!}</h2>
                            </div>
                            <div class="panel-body">
                                <a href="{{ url(config('dotenveditor.route.prefix') . "/createbackup") }}"
                                   class="btn btn-primary">
                                    {!! __('dotenv-editor::views.backup_create') !!}
                                </a>
                                <a href="{{ url(config('dotenveditor.route.prefix') . "/download") }}"
                                   class="btn btn-primary">
                                    {!! __('dotenv-editor::views.backup_download') !!}
                                </a>
                            </div>
                        </div>

                        {{-- List of available Backups --}}
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">{!! __('dotenv-editor::views.backup_title_two') !!}</h2>
                            </div>
                            <div class="panel-body">
                                <p>
                                    {!! __('dotenv-editor::views.backup_restore_text') !!}
                                </p>
                                <p class="text-danger">
                                    {!! __('dotenv-editor::views.backup_restore_warning') !!}
                                </p>
                                @if(!$backups)
                                    <p class="text text-info">
                                        {!! __('dotenv-editor::views.backup_no_backups') !!}
                                    </p>
                                @endif
                            </div>
                            @if($backups)
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <tr>
                                            <th>{!! __('dotenv-editor::views.backup_table_nr') !!}</th>
                                            <th>{!! __('dotenv-editor::views.backup_table_date') !!}</th>
                                            <th>{!! __('dotenv-editor::views.backup_table_options') !!}</th>
                                        </tr>
                                                                                @foreach($backups as $backup)
                                            <tr>
                                                <td>{{ $c++ }}</td>
                                                <td>{{ $backup['formatted'] }}</td>
                                                <td>
                                                    <a class="btn btn-success" href="javascript:;"
                                                       @click="showBackupDetails('{{ $backup['unformatted'] }}', '{{ $backup['formatted'] }}')"
                                                       title="{!! __('dotenv-editor::views.backup_table_options_show') !!}">
                                                        <span class="fa fa-search-plus"></span>
                                                    </a>
                                                    <a class="btn btn-warning" href="javascript:;"
                                                       @click="restoreBackup({{ $backup['unformatted'] }})"
                                                       title="{!! __('dotenv-editor::views.backup_table_options_restore') !!}">
                                                        <span class="fa fa-refresh"
                                                              title="{!! __('dotenv-editor::views.backup_table_options_restore') !!}"></span>
                                                    </a>
                                                    <a class="btn btn-info"
                                                       href="{{ url(config('dotenveditor.route.prefix') . "/download/" . $backup['unformatted']) }}">
                                                        <span class="fa fa-download"
                                                              title="{!! __('dotenv-editor::views.backup_table_options_download') !!}"></span>
                                                    </a>
                                                    <a onclick="return confirm('are you sure?')" class="btn btn-danger"
                                                       href="{{ url(config('dotenveditor.route.prefix') . "/deletebackup/" . $backup["unformatted"]) }}"
                                                       title="{!! __('dotenv-editor::views.backup_table_options_delete') !!}">
                                                        <span class="fa fa-trash"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </table>
                                </div>
                            @endif
                        </div>

                        @if($backups)
                            {{-- Details Modal --}}
                            <div class="modal fade" id="showDetails" tabindex="-1" role="dialog">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">{!! __('dotenv-editor::views.backup_modal_title') !!}</h4>
                                        </div>
                                        <div class="modal-body">
                                            <table class="table table-striped">
                                                <tr>
                                                    <th>{!! __('dotenv-editor::views.backup_modal_key') !!}</th>
                                                    <th>{!! __('dotenv-editor::views.backup_modal_value') !!}</th>
                                                </tr>
                                                <tr v-for="entry in details">
                                                    <td>@{{ entry.key }}</td>
                                                    <td>@{{ entry.value }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="modal-footer">
                                            <a href="javascript:;" @click="restoreBackup(currentBackup.timestamp)"
                                               title="Stelle dieses Backup wieder her" class="btn btn-primary">
                                                {!! __('dotenv-editor::views.backup_modal_restore') !!}
                                            </a>

                                            <button type="button" class="btn btn-default"
                                                    data-dismiss="modal">{!! __('dotenv-editor::views.backup_modal_close') !!}</button>

                                            <a onclick="return confirm('are you sure?')"
                                               href="{{ url(config('dotenveditor.route.prefix') . "/deletebackup/" . $backup["unformatted"]) }}"
                                               class="btn btn-danger">
                                                {!! __('dotenv-editor::views.backup_modal_delete') !!}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                    {{-- Upload --}}
                    <div v-show="views[3].active">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h2 class="panel-title">{!! __('dotenv-editor::views.upload_title') !!}</h2>
                            </div>
                            <div class="panel-body">
                                <p>
                                    {!! __('dotenv-editor::views.upload_text') !!}<br>
                                    <span class="text text-warning">
                  {!! __('dotenv-editor::views.upload_warning') !!}
                </span>
                                </p>
                                <form method="post" action="{{ url(config('dotenveditor.route.prefix') . "/upload") }}"
                                      enctype="multipart/form-data">
                                    <div class="form-group">
                                        <label for="backup">{!! __('dotenv-editor::views.upload_label') !!}</label>
                                        <input type="file" name="backup">
                                    </div>
                                    <button type="submit" class="btn btn-primary"
                                            title="Ein Backup von deinem Computer hochladen">
                                        {!! __('dotenv-editor::views.upload_button') !!}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- box body -->
    </div> <!-- box -->
@endsection

@push('js')
    <script>
        new Vue({
            el: '#app',
            data: {
                loadButton: true,
                alertsuccess: 0,
                alertmessage: '',
                views: [
                    { name: "{{ __('dotenv-editor::views.overview') }}", active: 1 },
                    { name: "{{ __('dotenv-editor::views.addnew') }}", active: 0 },
                    { name: "{{ __('dotenv-editor::views.backups') }}", active: 0 },
                    { name: "{{ __('dotenv-editor::views.upload') }}", active: 0 },
                ],
                newEntry: {
                    key: '',
                    value: '',
                },
                details: {},
                currentBackup: {
                    timestamp: '',
                },
                toEdit: {},
                toDelete: {},
                deleteModal: {
                    title: '',
                    content: '',
                },
                token: "{!! csrf_token() !!}",
                entries: [],
            },
            filters: {
                hide: function (value, hide) {
                    if (hide) {
                        return '*'.repeat(value.length)
                    }
                    return value
                },
            },
            methods: {
                loadEnv: function () {
                    var vm = this
                    this.loadButton = false
                    $.getJSON("/{{ $url }}/getdetails", function (items) {
                        vm.entries = items.map(item => {
                            item.hide = false
                            if (
                                item.key.toLowerCase().includes('key') ||
                                item.key.toLowerCase().includes('secret') ||
                                item.key.toLowerCase().includes('password')
                            ) {
                                item.hide = true
                            }
                            return item
                        })
                    })
                },
                setActiveView: function (viewName) {
                    $.each(this.views, function (key, value) {
                        if (value.name == viewName) {
                            value.active = 1
                        } else {
                            value.active = 0
                        }
                    })
                },
                addNew: function () {
                    var vm = this
                    var newkey = this.newEntry.key
                    var newvalue = this.newEntry.value
                    $.ajax({
                        url: "/{{ $url }}/add",
                        type: 'post',
                        data: {
                            _token: this.token,
                            key: newkey,
                            value: newvalue,
                        },
                        success: function () {
                            vm.entries.push({
                                key: newkey,
                                value: newvalue,
                            })
                            var msg = "{{ __('dotenv-editor::views.new_entry_added') }}"
                            vm.showAlert('success', msg)
                            vm.alertsuccess = 1
                            $('#newkey').val('')
                            vm.newEntry.key = ''
                            vm.newEntry.value = ''
                            $('#newvalue').val('')
                            $('#newkey').focus()
                        },
                    })
                },
                editEntry: function (entry) {
                    this.toEdit = {}
                    this.toEdit = entry
                    $('#editModal').modal('show')
                },
                updateEntry: function () {
                    var vm = this
                    $.ajax({
                        url: "/{{ $url }}/update",
                        type: 'post',
                        data: {
                            _token: this.token,
                            key: vm.toEdit.key,
                            value: vm.toEdit.value,
                        },
                        success: function () {
                            var msg = "{{ __('dotenv-editor::views.entry_edited') }}"
                            vm.showAlert('success', msg)
                            $('#editModal').modal('hide')
                        },
                    })
                },
                makeBackup: function () {
                    var vm = this
                    $.ajax({
                        url: "/{{ $url }}/createbackup",
                        type: 'get',
                        success: function () {
                            vm.showAlert('success', "{{ __('dotenv-editor::views.backup_created') }}")
                        },
                    })
                },
                showBackupDetails: function (timestamp, formattedtimestamp) {
                    this.currentBackup.timestamp = timestamp
                    var vm = this
                    $.getJSON("/{{ $url }}/getdetails/" + timestamp, function (items) {
                        vm.details = items
                        $('#showDetails').modal('show')
                    })
                },
                restoreBackup: function (timestamp) {
                    var vm = this
                    if (confirm('are you sure?')) {
                        $.ajax({
                            url: "/{{ $url }}/restore/" + timestamp,
                            type: 'get',
                            success: function () {
                                vm.loadEnv()
                                $('#showDetails').modal('hide')
                                vm.setActiveView('overview')
                                vm.showAlert('success', '{{ __('dotenv-editor::views.backup_restored') }}')
                            },
                        })
                    }
                },
                deleteEntry: function () {
                    var entry = this.toDelete
                    var vm = this

                    $.ajax({
                        url: "/{{ $url }}/delete",
                        type: 'post',
                        data: {
                            _token: this.token,
                            key: entry.key,
                        },
                        success: function () {
                            var msg = "{{ __('dotenv-editor::views.entry_deleted') }}"
                            vm.showAlert('success', msg)
                        },
                    })
                    this.entries.$remove(entry)
                    this.toDelete = {}
                    $('#deleteModal').modal('hide')
                },
                showAlert: function (type, message) {
                    this.alertmessage = message
                    this.alertsuccess = 1
                },
                closeAlert: function () {
                    this.alertsuccess = 0
                },
                modal: function (entry) {
                    this.toDelete = entry
                    this.deleteModal.title = "{{ __('dotenv-editor::views.delete_entry') }}"
                    this.deleteModal.content = entry.key + '=' + entry.value
                    $('#deleteModal').modal('show')
                },
            },
        })
        $(document).ready(function () {
            $(function () {
                $('[data-toggle="popover"]').popover()
            })
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
        })
    </script>
@endpush