@extends('admin.template')

@push('scripts')
    <script type="text/javascript">
        var jobId = -1;
        var running = false;
        var lastMessage = "";
        var lastAction = null;
        var lastOrder = 0;

        window.addEventListener('beforeunload', event => {
            const confirmationText = "Closing window will not stop the script. Do you really want to close?";
            if (running) {
                event.returnValue = confirmationText;
                return confirmationText;
            }
        });

        function enable_start_button() {
            jobId = -1;
            running = false;
            lastOrder = 0;
            $('#start_install').prop('disabled', false);
            $('#start_install').html('<i class="material-icons">play_arrow</i> <span>START</span>');
        }

        function start_recurring_check() {
            if (!running) {
                return;
            }

            $.getJSON({
                url: "{{route('servers.check_status')}}",
                data: {
                    id: jobId,
                    last: lastOrder
                },
                success: function(response) {
                    var actionsLen = response.actions.length;
                    running = response.status == 'running'
                    console.log("status=" + response.status);
                    console.log("Running=" + running);

                    if (running && actionsLen == 0 && lastAction != null && lastAction.result_code == -1) {
                        //this part is called if lastAction is still running and didn't complete
                        console.log("still running");
                        setTimeout(start_recurring_check, 2000);
                        return;
                    }

                    var message = "";
                    console.log("actionsLen=" + actionsLen);

                    if (actionsLen != 0) {
                        lastAction = response.actions[actionsLen - 1];
                        lastOrder = lastAction.result_code == -1 ? lastAction.order : lastAction.order + 1;

                        console.log("lastAction="  + lastAction);
                        console.log("lastOrder=" + lastOrder)
                        response.actions.forEach(function (action, index) {
                            var resultMessage = action.result;
                            message += action.action + " : " + resultMessage + "\n";
                        });
                    }

                    console.log("Message=" + message);
                    console.log("Lastmessage=" + lastMessage);
                    if (message !== lastMessage) {
                        lastMessage = message;
                        $('#install_log').append(message);
                    }
                    if (response.status == 'failed') {
                        $('#install_log').append("Failed configuring server. Check you server data and retry.\n");
                    }

                    window.scrollTo(0, document.body.scrollHeight);
                    if (running) {
                        setTimeout(start_recurring_check, 2000);
                    } else {
                        $('#install_log').append("Finished");
                        if (response.status == "success") {

                            $('#done_row').removeClass('hidden');
                            $('#download_div').removeClass('hidden');
                            $('#download_link').attr('href', response.download_url);

                            if (response.edit_url != '') {
                                $('#edit_div').removeClass('hidden');
                                $('#edit_link').attr('href', response.edit_url);
                            }

                            toastr.options = {
                                tapToDismiss: true,
                                toastClass: 'toast',
                                containerId: 'toast-container',
                                debug: false,
                                fadeIn: 300,
                                fadeOut: 500,
                                extendedTimeOut: 1000,
                                iconClass: 'toast-info',
                                positionClass: 'toast-top-right',
                                timeOut: 3000,
                                titleClass: 'toast-title',
                                messageClass: 'toast-message'
                            }

                            toastr.success('Server created successfully');
                        }
                        enable_start_button();
                    }
                },
                error: function(err) {
                    console.log(err);
                    setTimeout(start_recurring_check, 2000);
                }
            });
        }

        $(function() {
            $('#config_server_auto_add').on('change', function() {
                var isChecked = $('#config_server_auto_add').is(':checked');
                $('#config_server_add_enabled').prop('disabled', !isChecked);
            });

            $('#create_form').submit(function(e) {
                $('#done_row').addClass('hidden');
                $('#download_div').addClass('hidden');
                $('#edit_div').addClass('hidden');
                $('#start_install').prop('disabled', true);
                $('#start_install').html('<i class="material-icons">access_time</i> <span>RUNNING</span>');
                e.preventDefault();

                var ip = $('#ip').val();
                $('#install_log').text("Sending data to server...\n");
                $('.error-prompt').each(function() {
                    $(this).text("");
                });

                $.ajax({
                    url: "{{route('servers.install_action')}}",
                    type: 'POST',
                    data: {
                        country_code: $('#country_code').val(),
                        ip: ip,
                        username: $('#username').val(),
                        password: $('#password').val(),
                        port: $('#port').val(),
                        protocol: $('#protocol').val(),
                        settings: {
                            config_server_ssh_timeout: $('#ssh_timeout').val(),
                            config_server_auto_add: $('#config_server_auto_add').is(':checked') ? 1 : 0,
                            config_server_add_enabled: $('#config_server_add_enabled').is(':checked') ? 1 : 0,
                        }
                    },
                    success: function(result) {
                        if (isNaN(result)) {
                            enable_start_button();
                        } else {
                            jobId = result;
                            running = true;
                            start_recurring_check();
                        }
                    },
                    error: function(err) {
                        enable_start_button();
                        if (err.status == 422) {
                            $.each(err.responseJSON.errors, function (i, error) {
                                var el = $(document).find('[name="'+i+'"]');
                                $('#'+i+'_error').text(error[0]);
                            });
                        } else {
                            alert("Something wrong has happened. Check if you are connected to Internet or contact developper.");
                        }
                    }
                });
            });
        });
    </script>
@endpush

@section('content')
<section>
    <aside id="rightsidebar" class="right-sidebar">
        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto;">
            <h4 style="text-align: center;">Advanced settings</h4>
            <div id="settings" style="overflow: hidden; width: auto; height: 611px;">
                <ul class="setting-list">
                    <li>
                        <span>Connect timeout duration (seconds)</span>
                        <input type="number" id="ssh_timeout" step="5" value="{{$data['config_server_ssh_timeout']}}" min="0" max="60">
                    </li>
                    <li>
                        <span>Add server to list when done</span>
                        <div class="switch" id="auto_add_container">
                            <label><input type="checkbox" id="config_server_auto_add" {{(isset($data['config_server_auto_add']) ? $data['config_server_auto_add'] : '1') == 1 ? 'checked' : ''}}><span class="lever"></span></label>
                        </div>
                    </li>
                    <li>
                        <span>Add enabled</span>
                        <div class="switch">
                            <label><input type="checkbox" id="config_server_add_enabled" {{(isset($data['config_server_add_enabled']) ? $data['config_server_add_enabled'] : '1') == 1 ? 'checked' : ''}}><span class="lever"></span></label>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </aside>
</section>

<div class="row clearfix">
    @if(!check_exec())
        <div class="alert alert-danger">Your current host does not support this feature (Are you using shared hosting?). Please download <a href="">install files</a> and continue from your PC.</div>
    @endif
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <h2>New server info:</h2>
                </div>
                <div class="body">
                    <form class="p-20" method="post" id="create_form" enctype='multipart/form-data'>
                        <div class="body squize-up">
                            <div class="row clearfix">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label for="country_code">Country (*)</label>
                                            <select class="selectpicker countrypicker" data-live-search="true" id="country_code" name="country_code" required></select>
                                            <span class="text-danger" id="country_code_error"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label for="ip">IP address (*)</label>
                                            <input type="text" class="form-control" id="ip" name="ip" value="" required>
                                            <span class="error-prompt text-danger" id="ip_error"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label for="username">VPS Username (*)</label>
                                            <input type="text" class="form-control" id="username" name="username" value="root" required>
                                            <span class="error-prompt text-danger" id="username_error"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label for="password">VPS Password</label>
                                            <input type="text" class="form-control" id="password" name="password" value="">
                                            <span class="error-prompt text-danger" id="password_error"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <div class="form-line">
                                            <label for="port">Port (*)</label>
                                            <input type="number" min="1" max="65535" class="form-control" id="port" name="port" value="1194" required>
                                            <span class="error-prompt text-danger" id="port_error"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="protocol">Protocol (*)</label>
                                        <select class="form-control" id="protocol" name="protocol" required>
                                            <option value="udp">UDP</option>
                                            <option value="tcp">TCP</option>
                                        </select>
                                        <span class="error-prompt text-danger" id="protocol_error"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                Click to start remote server installation with default OVPN config.
                            </div>
                            <div class="col-md-2 btn-group-vertical" style="box-shadow: none;">
                                <button type="button" href="javascript:void(0);" class="js-right-sidebar btn bg-black waves-effect" data-close="true"><i class="material-icons">settings_applications</i> <span> More Options</span></button>
                            </div>
                            <div class="col-md-2 btn-group-vertical" style="box-shadow: none;">
                                <button id="start_install" type="submit" class="btn btn-primary waves-effect"><i class="material-icons">play_arrow</i> <span>START</span></button>
                            </div>
                        </div>
                    </form>

                    <pre><code id="install_log"></code></pre>

                    <div class="row hidden" id="done_row">
                        <div class="col-md-2 hidden" id="edit_div" style="box-shadow: none;">
                            <a type="button" id="edit_link" class="btn bg-cyan btn-block btn-lg waves-effect"><i class="material-icons">mode_edit</i> <span> EDIT SERVER</span></a>
                        </div>
                        <div class="col-md-2 hidden" id="download_div" style="box-shadow: none;">
                            <a type="button" id="download_link" class="btn bg-teal btn-block btn-lg waves-effect"><i class="material-icons">file_download</i> <span> DOWNLOAD FILE</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete android config modal -->
<div class="modal fade" id="delete_android_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Delete android config confirmation <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>
            </div>
            <div class="modal-body">Deleting this configuration is irreversible. Please make sure you copied this configuration to your Android source code before deleting it.</div>
            <div class="modal-footer">
                <div class="btn-group" role="group">
                    <button type="button" class="btn bg-grey waves-effect" id="cancel_delete" data-dismiss="modal"><i class="material-icons">close</i> CANCEL</button>
                    <button type="button" class="btn bg-pink waves-effect" id="confirm_delete" data-dismiss="modal"><i class="material-icons">warning</i><span>DELETE</span></button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection