@extends('layouts.app')

@section('template_title')
    Активация
@endsection

@section('head')
@endsection

@section('content')

    <div class="container">
        <div class="row">
            <div id="deploy" class="col-md-12 text-center">
                <h1 class="mt-5">Активация...</h1>
                <p class="font-weight-bold">может занять несколько минут, не закрывайте страницу</p>
                <div class="modal fade" tabindex="-1" role="dialog">
                    <div class="modal-dialog modal-dialog-centered justify-content-center" role="document">
                        <span class="fa fa-spinner fa-spin fa-3x"></span>
                    </div>
                </div>
            </div>
            <div id="complete" class="col-md-12 text-center d-none">
                <h1 class="mt-5"><span class="fa fa-check-circle text-success"></span> Выполнено!</h1>
                <p class="font-weight-bold">Сейчас вы будете перенаправлены на страницу с данными для подключения</p>
            </div>
        </div>
    </div>

@endsection

@section('footer_scripts')
    <script type="application/javascript">
        $(document).ready(function () {
            showWait();
            deploy();

            function deploy() {
                $.ajax({
                    type: 'GET',
                    url: '/deploy_db',
                    success: function (data) {
                        $('#deploy').hide();
                        hideWait()
                        $('#complete').toggleClass("d-none");
                        setTimeout(function () {
                            location.href = data.url;
                        }, 3000);
                    },
                    error: function (xhr) {
                        hideWait();
                        alert('Error, try again!');
                    }
                });
            }

            function showWait() {
                $('.modal').modal({backdrop: 'static', keyboard: false});
            }

            function hideWait() {
                $('.modal').modal('hide');
            }
        });
    </script>
@endsection