<?php 
ce("myApi")
->js(function(){
?>
<script>
	app.directive('myApi', function () {
		return {
			restrict: 'A',
			scope:{myApi:"@",reponce:"&"},
			controller:function($scope){
				$scope.scopename = "myApi";
			},
			link: function (scope, iElement, iAttrs) {
				$(iElement).submit(function(e){
				    e.preventDefault();
				    var form = this;
					var btns = form.querySelectorAll("*[type=submit]");
					for (var i = 0; i < btns.length; i++) {
						btns[i].originalhtml = btns[i].innerHTML;
						btns[i].disabled  =  true;
						btns[i].innerHTML = '<md-progress-circular md-mode="indeterminate" md-diameter="20">...</md-progress-circular>';
					}
				    api(scope.myApi,this,function(data){
				    	scope.reponce({data:data});
						for (var i = 0; i < btns.length; i++) {
							btns[i].innerHTML=btns[i].originalhtml;
							btns[i].disabled  =  false;
						}
				    	scope.$apply();
				    });
				});
			}
		};
	});
</script>
<?php
});
ce("dialog")
->tpl(function(){
?>
<div class="modal fade">
	<!-- style="width:{{width}}" -->
	<div class="modal-dialog modal-{{size || ''}}" style="max-width:94%;width:{{width}}">
		<div class="modal-content" ng-if="api">
			<form my-api="{{api}}" reponce="ngModel.data=data;data.etat?fermer():false">
				<div class="modal-header" ng-show="titre && titre!=''">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">{{titre}}</h4>
				</div>
				<div class="modal-body">
					<div ng-transclude></div>
				</div>
				<div class="modal-footer">
					<button ng-if="btnFermer" type="button" class="btn btn-default" data-dismiss="modal" ng-click="fermer()">Fermer</button>
					<button ng-if="btnValider" type="submit" class="btn btn-primary">{{btnValiderText}}</button>
				</div>
			</form>
		</div>
		<div class="modal-content" ng-if="!api || api==''">
			<div class="modal-header" ng-show="titre && titre!=''">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">{{titre}}</h4>
			</div>
			<div class="modal-body">
				<div style="{{width=='fit-content'?'overflow-x: auto;':''}}" ng-transclude></div>
			</div>
			<div class="modal-footer">
				<button type="button" ng-repeat="btn in ngModel.btns" class="btn {{btn.class}}" ng-click="btn.click()">{{btn.titre}}</button>
				<button ng-if="btnFermer || ngModel.valider" type="button" class="btn btn-default" data-dismiss="modal" ng-click="fermer()">Fermer</button>
				<button ng-if="btnValider || ngModel.valider" type="button" class="btn btn-primary" ng-click="valider()">{{btnValiderText}}</button>
			</div>
		</div>
	</div>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('dialog', function ($compile) {
		return {
			restrict: 'E',
			template:{{inject-tpl}},
			scope:{ngModel:"=",use:"=",titre:"@",api:"@",btnValiderText:"@",btnFermer:"=",btnValider:"=",ngFermer:"&",ngValider:"&",width:"@",inline:"@",size:"@?"},
			replace:true,
			transclude:true,
			controller:function($scope){
				$scope.scopename = "dialog";
				$scope.btnValiderText = $scope.btnValiderText || "Valider";
				if ($scope.btnValiderText=="") {
					$scope.btnValiderText = "Valider";
				}
				$scope.originalBtnValiderText = $scope.btnValiderText;
				$scope.ngModel = {};
				$scope.ngModel.btns = [];
				$scope.ngModel.scopename = "dialog";
				$scope.ngModel.visible = false;
				$scope.ngModel.reset = function(){
					$scope.btnValiderText = $scope.originalBtnValiderText;
				}
				$scope.ngModel.show = function(args){
					if(args)
					for(var x in args){
						$scope.$parent.$parent[x] = args[x];
					}
					$scope.btnValiderText = $scope.originalBtnValiderText;
					if(window.CKEDITOR) {
						$(".cke",$scope.elm).each(function(){
							var a = CKEDITOR.instances[this.id.replace("cke_","")];
							if(a){
								a.destroy();
							}else{
								$(this).remove();
							}
						});
						setTimeout(function(){
							$("textarea.editor",$scope.elm).each(function(){
								var self = this;
								var editor = CKEDITOR.replace(this);
								editor.on( 'change', function( evt ) {
								    var input = $(self);
								    input.val(evt.editor.getData());
								    input.trigger('input');
								    input.trigger('change');
								});
							});
						},100);
					}
					$($scope.elm).appendTo("body");
					$($scope.elm).modal({});
					$($scope.elm).unbind("hidden.bs.modal");
					$($scope.elm).on('hidden.bs.modal', function () {
					  	$scope.btnValiderText = $scope.originalBtnValiderText;
					  	$scope.ngModel.visible = false;
					  	$scope.$apply();
					});
					$($scope.elm).on('shown.bs.modal', function () {
					  	$scope.btnValiderText = $scope.originalBtnValiderText;
					  	$scope.ngModel.visible = true;
					  	$scope.$apply();
					});
					$($scope.elm).modal("show");
					setTimeout(function(){
						$scope.$root.$broadcast("dialog.show", $scope);
						$scope.$apply();
					},100); 
				}
				$scope.fermer = function(){
					$($scope.elm).modal("hide");
					if ($scope.ngFermer) {
						$scope.ngFermer();
					}
				}
				$scope.ngModel.hide = function(){
					$scope.fermer();
				}
				$scope.valider = function(){
					$scope.btnValiderText = "Chargement...";
					var fermer = function(){
						$($scope.elm).modal("hide");
					}
					$scope.ngValider({fermer:fermer});
					if ($scope.ngModel.valider) {
						$scope.ngModel.valider(fermer);
					}
				}
			},
			link: function ($scope, iElement, iAttrs) {
				$scope.elm = iElement[0];
				console.log($scope.abc,iElement);
				// $("body").append($scope.elm);
			}
		};
	});
</script>
<?php
});
ce("dialogInline")
->tpl(function(){
?>
<div ng-show="ngModel.active">
	<div ng-show="api">
		<form my-api="{{api}}" reponce="data.etat?fermer():false">
			<div ng-show="titre && titre!=''">
				<h4 class="modal-title">{{titre}}</h4>
			</div>
			<div>
				<div ng-transclude></div>
			</div>
			<div class="modal-footer" style="margin-top: 15px;">
				<button ng-if="btnFermer" type="button" class="btn btn-default" data-dismiss="modal" ng-click="fermer()">Annuler</button>
				<button ng-if="btnValider" type="submit" class="btn btn-primary">{{btnValiderText}}</button>
			</div>
		</form>
	</div>
	<div ng-hide="api">
		<div ng-show="titre && titre!=''">
			<h4 class="modal-title">{{titre}}</h4>
		</div>
		<div>
			<div ng-transclude></div>
		</div>
		<div class="modal-footer" style="margin-top: 15px;">
			<button ng-if="btnFermer || ngModel.valider" type="button" class="btn btn-default" data-dismiss="modal" ng-click="fermer()">Annuler</button>
			<button ng-if="btnValider || ngModel.valider" type="button" class="btn btn-primary" ng-click="valider()">{{btnValiderText}}</button>
		</div>
	</div>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('dialogInline', function ($compile) {
		return {
			restrict: 'E',
			template:{{inject-tpl}},
			scope:{ngModel:"=",use:"=",titre:"@",api:"@",btnValiderText:"@",btnFermer:"=",btnValider:"=",ngFermer:"&",ngValider:"&",width:"@",inline:"@"},
			replace:true,
			transclude:true,
			controller:function($scope){
				$scope.scopename = "dialogInline";
				$scope.btnValiderText = $scope.btnValiderText || "Valider";
				if ($scope.btnValiderText=="") {
					$scope.btnValiderText = "Valider";
				}
				$scope.ngModel = {};
				$scope.ngModel.scopename = "dialogInline";
				$scope.ngModel.show = function(args){
					if($scope.tmpfermer) $scope.tmpfermer();
					if(args)
					for(var x in args){
						$scope.$parent.$parent[x] = args[x];
					}
					$scope.ngModel.active = true;
				}
				$scope.fermer = function(){
					$scope.ngModel.active = false;
					if ($scope.ngFermer) {
						$scope.ngFermer();
					}
				}
				$scope.ngModel.hide = function(){
					$scope.fermer();
				}
				$scope.tmpfermer = false;
				$scope.valider = function(){
					var txt = $scope.btnValiderText;
					$scope.btnValiderText = "Chargement...";
					var fermer = function(){
						$scope.ngModel.active = false;
						$scope.btnValiderText = txt;
					}
					$scope.ngValider({fermer:fermer});
					if ($scope.ngModel.valider) {
						$scope.ngModel.valider(fermer);
					}
					$scope.tmpfermer = fermer;
				}
			},
			link: function ($scope, iElement, iAttrs) {
				$scope.elm = iElement;
			}
		};
	});
</script>
<?php
});
ce("mdDialog")
->tpl(function(){
?>
<div>
	<ng-transclude></ng-transclude>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('mDialog', function ($mdDialog) {
		return {
			restrict: 'EA',
			template:{{inject-tpl}},
			scope:{ngModel:"="},
			replace:true,
			transclude:true,
			controller:function($scope){
				$scope.ngModel = $scope.ngModel || {};
				$scope.ngModel.show = function(ev){
					var confirm = $mdDialog.confirm()
					      .title('Would you like to delete your debt?')
					      .contentElement($scope.elm)
					      .ariaLabel('Lucky day')
					      .targetEvent(ev)
					      .ok('Please do it!')
					      .cancel('Sounds like a scam');
					$mdDialog.show(confirm).then(function() {
					  
					}, function() {
					  
					});
				};
			},
			link: function ($scope, iElement, iAttrs) {
				$scope.elm = iElement;
			}
		};
	});
</script>
<?php
});