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

@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">Analysing...</div>
                    <div class="panel-body">
                        <p>Your uploaded photos are now being analysed.</p>
                        <div id="progress-bar-container">
                            <div class="progress"></div>
                        </div>

                        <div id="file-list" style="margin-top: 20px;">
                            @foreach ($photos as $photo)
                                <p data-photo-id="{{ $photo->id }}">{{ $photo->name }} ... <i class="fa fa-fw"></i></p>
                            @endforeach
                        </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 number_successful = 0;
        var number_error = 0;
        var number_total = 0;

        function redrawProgressBar()
        {
            var successPercentage = (number_successful / number_total) * 100;
            var failedPercentage = (number_error / number_total) * 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() {
            number_total = $('#file-list p').length;

            if (number_total == 0) {
                $('#status-panel').hide();
                $('#complete-panel').show();
            }
            else
            {
                $('#file-list p').each(function (index, element) {
                    var photo_id = $(element).data('photo-id');
                    var url = '{{ route('photos.analyse', ['id' => 0]) }}';
                    url = url.replace(/0$/, photo_id);

                    $.ajax(
                            url,
                            {
                                complete: function () {
                                    redrawProgressBar();

                                    if (number_successful + number_error >= number_total) {
                                        $('#status-panel').hide();
                                        $('#complete-panel').show();
                                    }
                                },
                                dataType: 'json',
                                error: function (xhr, textStatus, errorThrown) {
                                    $('i', '#file-list p[data-photo-id=' + photo_id + ']')
                                            .addClass('text-danger')
                                            .addClass('fa-times');
                                    number_error++;
                                },
                                method: 'POST',
                                success: function (data) {
                                    if (data.is_successful) {
                                        $('i', '#file-list p[data-photo-id=' + photo_id + ']')
                                                .addClass('text-success')
                                                .addClass('fa-check');
                                        number_successful++;
                                    }
                                    else {
                                        $('i', '#file-list p[data-photo-id=' + photo_id + ']')
                                                .addClass('text-danger')
                                                .addClass('fa-times');
                                        number_error++;
                                    }
                                }
                            }
                    );
                });
            }
        });
    </script>
@endpush