@extends('admin.masters.base')

@section('pagetitle')
	Photos <small>overview</small>
@stop

@section('crumbs')
    <li><a href="{{ url('/admin/albums') }}"><i class="fa fa-photo"></i> Albums</a></li>
    <li class="active">
        <i class="fa fa-photo"></i> {{ ucwords($album->album_name) }}
    </li>
@stop

@section('pagecontents')

    <div class="progress" id="uploadProgress">
        <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
            <span class="sr-only">20% Complete</span>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title pull-left"><i class="fa fa-th fa-photo"></i> Photos Panel</h3>
                    <div class="pull-right rightactions">
                        {!! Form::open (['class' => 'pull-right', 'id' => 'photoForm', 'files' => true]) !!}
                    	   <input type="file" name="uploadedFiles" multiple id="addPhotos">
                           <input type="hidden" name="albumslug" value="{{ $album->slug }}">
                           <input type="hidden" name="albumid" value="{{ $album->id }}">
                        {!! Form::close() !!}
                        <span class="fa fa-upload fa-2x" id="uploadBtn"></span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-body album">
                    @if ($photolist == '')
                        <div class="alert alert-info">Album list is currently empty. </div>
                        <div class="row">
                            <img clas="preview" src="">
                        </div> 
                    @else
                        <div class="row">
                            <div class="clearfix mosaicflow">
                            @foreach($photolist as $a)
                                <div class="mosaicflow__item">
                                    <img src="{{ asset('/uploads/album') }}/{{ $album->slug }}/{{ $a->filename }}" alt="">
                                </div>
                            @endforeach
                            </div>
                        </div> 
                    @endif
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script type="text/javascript" src="{{ asset('/js/jquery.mosaicflow.min.js') }}"></script>

    <script>
        var progressValue = 0;

        $('#photoForm').on('submit', function(e){
            e.preventDefault();

            var progOn = setInterval(function(){
                $('#uploadProgress .progress-bar').css('width', progressValue + 10 +'%');
                    progressValue += 20;
            },1000);

            var $form    = $(e.target),
                formData = new FormData(),
                params   = $form.serializeArray(),
                files    = $form.find('[name="uploadedFiles"]')[0].files;

            $.each(files, function(i, file) {
                // Prefix the name of uploaded files with "uploadedFiles-"
                // Of course, you can change it to any string
                formData.append('uploadedFiles-' + i, file);
            });

            $.each(params, function(i, val) {
                formData.append(val.name, val.value);
            });

            $.ajax({
                url: '/ajaxcall/uploadphotos/1',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function(result) {
                    //console.log(result);
                    //if(progDone()) location.reload();
                    progDone();
                },
                error: function(result) {
                    console.log(result.responseText);
                }
            });
        });

        // check if progress is done
        function progDone()
        {
            if(progressValue >= 100) {
                location.reload();
            } else {
                setTimeout(function(){ progDone(); },200);
            }
        }

        $('#addPhotos').on('change', function(){
            $('#photoForm').submit();
        });

        // hover / out upload btn
        $('#photoForm').on('mouseover', function(){
            $('#uploadBtn').addClass('hovered');
        }).on('mouseleave', function(){
            $('#uploadBtn').removeClass('hovered');
        });
    </script>
@stop