@extends('admin._layouts.master')

@section('content')

    <div class="row">
        <div class="col-md-12">
            <ul class="timeline">
                <li id="progress-indicator">
                    <i class="fa fa-circle-o-notch fa-spin bg-green"></i>
                    <div class="timeline-item">
                        <h3 class="timeline-header">@transUcFirst('.initializing')</h3>
                    </div>
                    <br>
                </li>
                <li class="hidden">
                    <i class="fa fa-check bg-green"></i>
                    <div class="timeline-item">
                        <span class="time"><i class="fa fa-clock-o"></i> <span></span></span>

                        <h3 class="timeline-header hidden"></h3>

                        <div class="timeline-body hidden">
                        </div>
                    </div>
                </li>
                <li class="time-label">
                  <span class="bg-olive">
                    @transTitleCase('.test_started')
                  </span>
                </li>
            </ul>
        </div>
    </div>

@endsection

@push('scripts')

    <script>

        var $timeline, $template, $progressIndicator, $progressIndicatorIcon, $progressIndicatorTitle, testSteps

        /* ----------------------------------------------------------------------------------------------------------------------- default Data -+- */
        testSteps = [
            {
                interface: 'diagnose/oauth-connection',
                title    : '@trans("Testing Google account connection...")',
                essential: true,
            },
            {
                interface: 'diagnose/printer-statuses',
                title    : '@trans("Checking printers...")',
                essential: true,
            },
        ]

        /* ------------------------------------------------------------------------------------------------------------------------------- init -+- */
        $(function () {
            $progressIndicator      = $('#progress-indicator')
            $progressIndicatorIcon  = $progressIndicator.find('i.fa').first()
            $progressIndicatorTitle = $progressIndicator.find('.timeline-header')

            $timeline = $('.timeline')
            $template = $('li.hidden')

            runTests(testSteps)
        })

        /* -------------------------------------------------------------------------------------------------------------------------- run Tests -+- */
        function runTests(tests) {
            var i = 0
            runTestStep(tests, i)
        }

        /* -------------------------------------------------------------------------------------------------------------------------- test Step -+- */
        function runTestStep(tests, i) {
            var step = tests[i]

            processState('running', step)

            console.log('Running step ' + i)
            console.log(step)

            $.ajax({
                url    : step.interface,
                method : 'POST',
                success: function (data) {
                    console.log(data)

                    addNewLogItem(data)

                    // terminate the process when an essential step fails.
                    if (!data.success && step.essential) {
                        console.log('An essential step has failed, terminating the process.')

                        processState('finished-with-failure')

                        return false
                    }

                    i++
                    if (tests.length > i) {
                        runTestStep(tests, i)
                    } else {
                        processState('finished-with-success')
                    }
                },
                error  : function () {
                    addNewLogItem({
                        success: false,
                        title  : '@trans("An error occurred during the test!")'
                    })

                    processState('error')

                    return false
                },
            })
        }

        /* ------------------------------------------------------------------------------------------------------------------- add New Log Item -+- */
        function addNewLogItem(data) {
            // create the item
            var $item = $template.clone().removeClass('hidden')

            //  success variable determines the default mark but allow those to be override if explicitly specified.
            if (data.success) {
                data.icon   = data.icon || 'check'
                data.iconBg = data.iconBg || 'green'
            } else {
                data.icon   = data.icon || 'times'
                data.iconBg = data.iconBg || 'red'
            }

            // put timestamp
            $item.find('.time>span').html(getTimestamp())

            // insert log title
            if (data.title) {
                $item.find('.timeline-header').removeClass('hidden').html(data.title)
            }

            // insert log body
            if (data.body) {
                $item.find('.timeline-body').removeClass('hidden').html(data.body)
            }

            // set log mark
            $item.find('i.fa:first').removeClass('fa-check bg-green').addClass('fa-' + data.icon + ' bg-' + data.iconBg)

            // process done, insert the log item
            $timeline.find('#progress-indicator').after($item)
        }

        /* ---------------------------------------------------------------------------------------------------------------------- get Timestamp -+- */
        function getTimestamp() {
            // create the time and format it
            var date  = new Date()
            var hours = date.getHours().toString()
            if (hours.length === 1) {
                hours = '0' + hours
            }

            var minutes = date.getMinutes().toString()
            if (minutes.length === 1) {
                minutes = '0' + minutes
            }

            var seconds = date.getSeconds().toString()
            if (seconds.length === 1) {
                seconds = '0' + seconds
            }

            return hours + ':' + minutes + ':' + seconds
        }

        /* ------------------------------------------------------------------------------------------------------------------- process State -+- */
        /**
         * Get/set process' state. Possible states;
         * - running
         * - finished-with-failure
         * - finished-with-success
         * - error
         *
         * @param state
         * @param data

         * @returns {*}
         */
        function processState(state, data) {

            data = data || {}

            if (typeof state === 'undefined')
                return this.currentState

            this.currentState = state

            $progressIndicatorIcon.attr('class', 'fa')

            switch (this.currentState) {
                case 'running':
                    $progressIndicatorIcon.addClass('fa-circle-o-notch fa-spin bg-blue disabled')
                    data.title = data.title || '@trans("Running tests...")'
                    break

                case 'finished-with-failure':
                    $progressIndicatorIcon.addClass('fa-exclamation-triangle bg-orange-active')
                    data.title = data.title || '@trans("An error was found.")'
                    break

                case 'finished-with-success':
                    $progressIndicatorIcon.addClass('fa-check bg-green-active')
                    data.title = data.title || '@trans("Diagnostics complete. No error was found.")'
                    break

                case 'error':
                    $progressIndicatorIcon.addClass('fa-times bg-red-active')
                    data.title = data.title || '@trans("Diagnostics could not complete. An error occurred.")'
                    break
            }

            // set special title if specified
            if (data.title) {
                $progressIndicatorTitle.text(data.title)
            }

        }


    </script>

@endpush