@extends('themes.base.layout')
@section('title', 'Processing...')

@section('content')
    <div class="container" style="margin-top: 40px;">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2">
                <div class="panel panel-default" id="status-panel">
                    <div class="panel-heading">Processing...</div>
                    <div class="panel-body">
                        <p>Your upload is now being processed.</p>
                        <div id="progress-bar-container">
                            <div class="progress"></div>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default" id="complete-panel" style="display: none;">
                    <div class="panel-heading">Upload completed</div>
                    <div class="panel-body">
                        <p>Your upload has completed.</p>
                        <div class="btn-toolbar btn-group-sm pull-right">
                            <a class="btn btn-default" href="{{ $album->url() }}">View album</a>
                            <a class="btn btn-primary" href="{{ route('albums.show', ['id' => $album->id]) }}">Back to album settings</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        var refreshInterval = null;

        function refreshStatus()
        {
            $.get('{{ route('albums.monitorUploadJson', ['id' => $album->id, 'upload_id' => $upload->id]) }}', function(data)
            {
                var total = data.number_photos;

                if (data.is_completed)
                {
                    // Stop the refresh
                    window.clearInterval(refreshInterval);

                    // Display the complete box
                    $('#status-panel').hide();
                    $('#complete-panel').show();
                }

                var successPercentage = (data.number_successful / data.number_photos) * 100;
                var failedPercentage = (data.number_failed / data.number_photos) * 100;

                {{-- Render a Bootstrap-3 compatible progress bar --}}
                var progressBar = $('<div/>').addClass('progress');

                {{-- Successful --}}
                var progressBarSuccess = $('<div/>')
                        .addClass('progress-bar')
                        .addClass('progress-bar-success')
                        .css('width', parseInt(successPercentage) + '%')
                        .appendTo(progressBar);
                var progressBarSuccessSpan = $('<span/>').addClass('sr-only').html(parseInt(successPercentage) + '% successful').appendTo(progressBarSuccess);

                {{-- Failed --}}
                var progressBarError = $('<div/>')
                                .addClass('progress-bar')
                                .addClass('progress-bar-warning')
                                .css('width', parseInt(failedPercentage) + '%')
                                .appendTo(progressBar);
                var progressBarErrorSpan = $('<span/>').addClass('sr-only').html(parseInt(failedPercentage) + '% failed').appendTo(progressBarError);

                {{-- Add to DOM --}}
                $('#progress-bar-container').html(progressBar[0].outerHTML);
            });
        }

        $(document).ready(function() {
            refreshInterval = window.setInterval(refreshStatus, 1000);
        });
    </script>
@endpush