@extends($layout)

@section('header_scripts')

@stop

@section('content')



<div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->

                <div class="row">

                    <div class="col-lg-12">

                        <ol class="breadcrumb">

                            <li><a href="{{PREFIX}}"><i class="mdi mdi-home"></i></a> </li>
							<li><a href="{{URL_NOTIFICATIONS}}">Приглашения</a></li>
                            <li>{{$title}}</li>

                        </ol>

                    </div>

                </div>

                

                <div class="panel panel-custom">

                    <div class="panel-heading">
						<h1>{{$title}}</h1>
					</div>
					<div class="panel-body" ng-controller="notificationSubscribeController">
						<div class="col-md-3">
							<div class="panel panel-info">
								<div class="panel-heading">Мои подписки:</div>
								<ul class="list-group notify_groups">
									<li ng-repeat="group in subscribed_groups" class="list-group-item">
										<button type="button" class="btn btn-danger pull-right btn-sm" ng-click="unsubscribe(group.id)">
										  Отписаться
										</button>
										<span ng-bind="group.name"></span>
									</li>
								</ul>
							</div>
						</div>
						<div class="col-md-9 notify-groups-list">
							<div class="form-group">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="{{getPhrase('Search')}}" ng-model="search_group.name" >
									<span class="input-group-addon">
										<span class="glyphicon glyphicon-search"></span>  
									</span>
								</div>
							</div>
							<div class="notify_groups">
								<div ng-repeat="group in groups | filter:search_group | filter:filterAlreadyAdded " class="col-md-3">
									<div class="notific-group">
									
										<button type="button" class="btn btn-success pull-right btn-sm" ng-click="subscribe(group.id)">
										  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Подписаться
										</button>
										<span ng-bind="group.name"></span>
									</div>
								</div>
							</div>							
						</div>
					</div>
                </div>

                <!-- /.row -->

            </div>

            <!-- /.container-fluid -->

        </div>

@endsection

 

@section('footer_scripts')
  <script src="{{JS}}angular.js"></script>
 <script>
	var app = angular.module('academia', []);
	
	app.controller('notificationSubscribeController', function($scope, $http){
		$scope.groups = JSON.parse('{!!$groups!!}');
		$scope.subscriptions = JSON.parse('{!!$subscriptions!!}');
		$scope.subscribed_groups = $scope.groups.filter(checkSelected);

		$scope.filterAlreadyAdded = function(item) {
			return !$scope.subscriptions.includes(item.id);
		};
		
		function checkSelected(value, index, ar){
			return $scope.subscriptions.includes(value.id);
		};
		
		$scope.selectGroup = function(group_id){
			$scope.subscriptions.push(group_id);
			$scope.subscribed_groups.push ($scope.groups.find(item => item.id === group_id));
		}
		
		$scope.unselectGroup = function(group_id){
			$scope.subscriptions.splice($scope.subscriptions.findIndex(item => item === group_id),1);
			$scope.subscribed_groups.splice($scope.subscribed_groups.findIndex(item => item.id === group_id),1);
		}
		
		$scope.subscribe = function(id) {
			 $http.post('{{URL_NOTIFICATIONS_SUBSCRIBE}}', {
				'id': id
			}).then(function mySuccess(response) {
				$scope.selectGroup(id);
			 }, function myError(response) {
				 console.log("error");
			 }
		)};
		
		$scope.unsubscribe = function(id) {
			 $http.post('{{URL_NOTIFICATIONS_UNSUBSCRIBE}}', {
				'id': id
			}).then(function mySuccess(response) {
				$scope.unselectGroup(id);
			 }, function myError(response) {
				 console.log("error");
			 }
		)};
		
	});
	
 </script>
@stop