<?php 




Route::isJs(function(){
	/*

		<w-list 
			ng-model="mylist"
			item-name="$elm"
			label="Element"
			confirm-delete="message de confirmation"
			ctrl="myListScope"
			init-item="item.aa = 'test'"
			hide-panel="false"
		></w-list>
	*/
	ob_start();
	?>
	<div class="wlistelm">
		<style type="text/css">
			.ctrl-panel-heading{
				display: flex;
				align-items: center;
			}
			.ctrl-panel-heading > *+*{
				margin-left: 5px;
			}
			.wlistelm .panel {
			    opacity: 1;
			}
			.wlistelm .panel.ng-enter {
			    -webkit-transition: 0.5s;
			    transition: 0.5s;
			    opacity: 0;
			}
			.wlistelm .panel.ng-enter-active {
			    opacity: 1;
			}
			.wlistelm .panel.ng-leave {
			    -webkit-transition: 0.2s;
			    transition: 0.2s;
			    opacity: 1;
			}
			.wlistelm .panel.ng-leave-active {
			    opacity: 0;
			}
		</style>
		<div ng-if="!hidePanel">	
			<div class="panel panel-info" ng-repeat="$item in ngModel">
				<div class="panel-heading" style="display: flex;align-items: center;">
					<button class="btn btn-xs" ng-click="$item.$visible = !$item.$visible" style="margin-right: 7px;">
						<span ng-hide="$item.$visible" class="glyphicon glyphicon-eye-open"></span>
						<span ng-show="$item.$visible" class="glyphicon glyphicon-eye-close"></span>
					</button>
					<span style="flex:1;">{{$index + 1}} : {{$item.label || $item.titre || ctrl.label || 'Element'}}</span>
					<div bindtrans="$item" bindselector="header" bindname="{{ctrl.itemName}}"></div>
					<div class="ctrl-panel-heading">
						<button class="btn btn-xs" ng-click="$item.$addNext($item)"><span class="glyphicon glyphicon-paste"></span></button>
						<button class="btn btn-xs" ng-click="$item.$addPrev()"><span class="glyphicon glyphicon-share-alt"></span></button>
						<button class="btn btn-xs" ng-click="$item.$up()"><span class="glyphicon glyphicon-arrow-up"></span></button>
						<button class="btn btn-xs" ng-click="$item.$down()"><span class="glyphicon glyphicon-arrow-down"></span></button>
						<button class="btn btn-xs" ng-click="$item.$delete()"><span class="glyphicon glyphicon-trash"></span></button>
					</div>
				</div>
				<div class="panel-body" ng-show="$item.$visible">
					<div bindtrans="$item" bindname="{{ctrl.itemName}}"></div>
				</div>
			</div>
		</div>
		<div ng-if="hidePanel">
			<div ng-repeat="$item in ngModel">
				<div bindtrans="$item" bindname="{{ctrl.itemName}}"></div>
			</div>
		</div>
		<div>
			<button class="btn btn-xs" ng-click="add({a:''})"><span class="glyphicon glyphicon-plus"></span> Ajouter </button>
		</div>
	</div>
	<?php
	$code=ob_get_clean();
	?>
	<script>
		app.directive('wList', [function () {
			return {
				restrict: 'EA',
				transclude : {
					header : "?header"
				},
				replace : false,
				template : <?= json_encode(preg_replace("/\t|\n|\r/i", "", $code)) ?>,
				scope : {
					ngModel : "=",
					hidePanel : "=?",
					itemName : "@",
					label : "@?",
					confirmDelete : "@?",
					ctrl : "=?",
					initItem : "&?",
				},
				controller : function($scope){
					if(!$scope.ngModel) $scope.ngModel = [];
					$scope.ctrl = $scope;
					$scope.$watch("ngModel",function(){
						if(!$scope.ngModel) $scope.ngModel = [];
						$scope.ngModel.forEach($scope._initItem);
					});
					$scope.add = function(obj,index){
						obj = angular.copy(obj || {});
						$scope._initItem(obj);
						if (index===0 || index) {
							$scope.ngModel.splice(index,0,obj);
						}else{
							$scope.ngModel.push(obj);
						}
					}
					$scope.delete = function(index){
						if($scope.confirmDelete) if(!confirm($scope.confirmDelete)) return;
						$scope.ngModel.splice(index,1);
					}
					$scope._initItem = function(item){
						item.$visible = true;
						item.$getIndex = function(){
							for (var i = 0; i < $scope.ngModel.length; i++) {
								if ($scope.ngModel[i] === item) {
									return i;
								}
							}
							return -1;
						}
						item.$delete = function(){
							$scope.delete(item.$getIndex());
						}
						item.$up = function(){
							$scope.ngModel.move_up(item.$getIndex());
						}
						item.$down = function(){
							$scope.ngModel.move_down(item.$getIndex());
						}
						item.$addBefore = function(obj){
							$scope.add(obj,item.$getIndex());
						}
						item.$addAfter = function(obj){
							$scope.add(obj,item.$getIndex()+1);
						}
						item.$addNext = item.$addAfter;
						item.$addPrev = item.$addBefore;
						if($scope.initItem) $scope.initItem({item:item});
					}
				},
				link: function ($scope, $element, $attrs, $ctrl, $transclude) {
					$transclude(
				      function(_transcludedElement, _scope) {
				      	_scope.$elm = "test";
				      }
				    );
				}
			};
		}]);
		app.directive('bindtrans', [function () {
			return {
				restrict: 'A',
				scope : {bindtrans : "=",bindname:"@",bindselector:"@"},
				link: function ($scope, $element, $attrs, $ctrl, $transclude) {
					$transclude(function(content,scope){
						scope[$scope.bindname] = $scope.bindtrans;
						$element.replaceWith(content);
					},null,$scope.bindselector);
				}
			};
		}])
	</script>
	<?php
});