@extends('layouts.installer')

@section('content')
    <div class="container">
        <div class="row justify-content-center align-content-center" style="height: 75vh;">
            <div class="col-md-8 text-center">
                <div class="card" v-if="finish">
                    <div class="card-header" style="background: #d9dce2;">
                        <h1 class="h4 text-center m-0 card-title">Success !</h1>
                    </div>
                    <div class="card-body px-md-5 text-center">
                        <i class="fas fa-check-circle h1 text-success" aria-hidden="true"></i>
                        <h5 class="card-title mb-5">Mopie has been installed. Thank you, and happy working!</h5>
                        <a href="{{ route('admin') }}" class="btn btn-info" autofocus>Login</a>
                    </div>
                </div>
                <div class="text-center" v-else>
                    <div class="spinner-border text-primary mb-5" role="status">
                      <span class="sr-only d-blok mb-3">Loading..</span>
                    </div>

                    <div class="progress">
                      <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" v-bind:style="{width: ((translations.index/languages.length)*100)+'%'}" v-bind:aria-valuenow="((translations.index/languages.length)*100)" aria-valuemin="0" aria-valuemax="100" v-text="'Importing translations ' + Math.round(((translations.index/languages.length)*100)) + '%'"></div>
                    </div>
                  </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
 <script>
     var app = new Vue({
        el: '#app',
        mounted() {
            this.fetchLanguages()
        },
        data: {
            finish: false,
            languages: [],
            translations : {
                index: 0,
                translate: []
            }
        },
        methods: {
            fetchLanguages() {
                axios.get('/api/install/languages')
                     .then((res) => {
                        this.languages = res.data
                        var languages = this.languages
                        var index_translate = this.translations.index
                        var translations = this.translations

                        this.fetchTranslate(languages[index_translate])
                     })
                     .catch((err) => {
                         console.log(err)
                     })
            },
            fetchTranslate(lang) {
                axios.post('/api/install/translations/' + lang )
                     .then((res) => {
                        var languages = this.languages
                        var index_translate = this.translations.index
                        var translations = this.translations

                        if (typeof(languages[index_translate]) != 'undefined') {
                            this.fetchTranslate(languages[index_translate])
                            this.translations.index += 1
                        }else{
                            this.finish = true
                        }
                     })
            }
        },
    })
 </script>
@endpush