@extends('admin.masters.base')

@section('styles')
    <link rel="stylesheet" href="{{ asset('/admin/css/sweetalert.css') }}">
@stop

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

@section('crumbs')
	<li class="active">
		<i class="fa fa-photo"></i> Album
	</li>
@stop

@section('pagecontents')

    <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> Album Panel</h3>
                    <p class="pull-right">
                    	<a href="{{ url('admin/albums/create') }}" class="btn btn-primary btn-sm" id="createAlbum"><i class="fa fa-plus"></i> Add Album</a>
                    </p>
                    <div class="clearfix"></div>
                </div>
                <div class="panel-body album">
                    @if ($albumlist == '')
                        <div class="alert alert-info">Album list is currently empty. </div>
                        <div class="row"></div> 
                    @else
                        <div class="row">
                            @foreach($albumlist as $a)
                                <div class="col-md-2 col-xs-3">
                                    <div class="album-item">
                                        <a href="{{ url('/admin/albums') }}/{{ $a->slug }}">
                                            <img src="{{ asset('/uploads/album') }}/{{ $a->cover_image }}" alt="" class="thumbnail img-responsive"> 
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div> 
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">New Album</h4>
                </div>
                <div class="modal-body">
                    <div class="col-md-10 col-md-offset-1 col-xs-12">
                        {!! Form::open(['id' => 'albumForm']) !!}
                            <div class="form-group">
                                <label for="album_name">Album Name</label>
                                <input type="text" name="album_name" id="album_name" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label for="album_desc">Description</label>
                                <textarea name="album_desc" id="album_desc" rows="8" class="form-control"></textarea>
                            </div>
                        {!! Form::close() !!}
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveAlbum"><i class="fa fa-floppy-o"></i> Save Album</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script type="text/javascript" src="{{ asset('/admin/js/sweetalert.min.js') }}"></script>
    <script>
        $(function() {
            $('button.deltriggerbtn').click(function(e){
                var id = $(this).data('id');

                $('#pageDelete').attr('action', '{{ url("/admin/albums/") }}'+'/'+id );
            });

            $('#createAlbum').click(function(e){
                e.preventDefault();

                $('#myModal').modal('show');
            });

            $('#saveAlbum').click(function(e){
                $('#myModal').modal('hide');

                var formData = {
                    'album_name'    : $('#album_name').val(),
                    'album_desc'    : $('textarea#album_desc').val(),
                    '_token'        : $('input[name=_token]').val()
                };
                
                $.ajax({
                    type    : 'POST',
                    url     : '',
                    data    : formData,
                    dataType: 'json'
                }).done(function(data){


                    if(!data.errors) {
                        $('.album .row').append('<div class="col-md-2 col-xs-3">'+
                            '<div class="album-item">'+
                                '<a href="/admin/albums/'+data.url+'">'+
                                    '<img src="{{ asset("/uploads/album/blank.png") }}" alt="" class="thumbnail img-responsive">'+
                                '</a>'+
                            '</div>'+
                        '</div>'
                        ); 
                    } else {
                        swal("Error", data.errors['name'], "error");   
                    }
                });
            });

        });
    </script>
@stop