@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Developers
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
@stop

{{-- Page content --}}
@section('content')

    <section class="content-header">
        <h1>Run artisan commands on  {{config('database.connections.mysql.database')}} database</h1>

    </section>
    <!--section ends-->
    <section class="content paddingleft_right15">
        <!--main content-->
        <div class="row" id="app">

            <form v-on:submit.prevent="callCommand">
                {{ csrf_field() }}
                {{ method_field('PUT') }}
                php artisan <input name="command" type="text" required v-model="command">
                <button   type="submit">Run command</button>
            </form>

            <pre>

                @{{response}}

            </pre>

        </div>

    </section>
    <!-- content -->
@stop

{{-- page level scripts --}}
@section('footer_scripts')

    <script>

        var route_call_command="{{route("admin.call_command")}}"

        new Vue({
            el: '#app',
            data: () => ({
                command: "",
                response: "Fill out the command and experience magic, developer magic. \n" +
                    "                       .-. \n" +
                    "                      '_8_' \n" +
                    "                     .| |o|. \n" +
                    "                     ||___|| \n" +
                    "                     |J   L| \n",
            }),

            methods: {
                callCommand() {
                    axios.put(route_call_command, {command: this.command})
                        .then(response => {
                            this.response = response.data.output;
                        })
                        .catch(error => {
                            console.log(error)
                            this.response = error + " Try looking in the browser console for more information";
                        });
                },
            }
        });

    </script>

@stop