<?php 
Route::isJs(function(){
ce("selectElm1")
->tpl(function(){
?>
<div>
	<div class="input-group" style="display: block;">
		<label style="display:block" class="control-label">{{libelle}}</label>
		<div class="input-group">
			<input readonly="true"  type="text" class="form-control" ng-model="nom">
			<span class="input-group-btn">
			  <button ng-click="dialogshow()" class="btn" type="button"><span class="glyphicon glyphicon-option-horizontal"></span></button>
			</span>
		</div>
	</div>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('selectElm', [function () {
		return {
			restrict: 'E',
			template:{{inject-tpl}},
			scope:{id:"=",nom:"=",libelle:"@",colId:"@",colNom:"@"},
			replace:true,
			transclude:true,
			controller:function($scope){
				$scope.dialogshow = function(){
					$scope.dialog.show([{
						titre:"Valider",
						class:"btn btn-primary pull-right",
						click:function(){
							if ($scope.colId in $scope.dialog.table.$selected) {
								$scope.id = $scope.dialog.table.$selected[$scope.colId];
							}else{
								console.error("select-elm : la colonne "+$scope.colId+" introuvable !",$scope.dialog.table.$selected);
							}
							if ($scope.colNom in $scope.dialog.table.$selected) {
								$scope.nom = $scope.dialog.table.$selected[$scope.colNom];
							}else{
								console.error("select-elm : la colonne "+$scope.colNom+" introuvable !",$scope.dialog.table.$selected);
							}
							$scope.dialog.hide();
						}
					}]);
				}
			}
		};
	}]);
</script>
<?php
});
ce("selectElm")
->tpl(function(){
?>
<div>
	<div class="input-group" style="display: block;">
		<label style="display:block" class="control-label">{{libelle}}</label>
		<div class="input-group">
			<input readonly="true"  type="text" class="form-control" ng-model="nom">
			<span class="input-group-btn">
			  <button ng-click="dialogshow()" class="btn" type="button"><span class="glyphicon glyphicon-option-horizontal"></span></button>
			</span>
		</div>
	</div>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('selectElm', [function () {
		return {
			restrict: 'E',
			template:{{inject-tpl}},
			scope:{id:"=",nom:"=",libelle:"@",dialog:"=",colId:"@",colNom:"@"},
			controller:function($scope){
				$scope.dialogshow = function(){
					$scope.dialog.show([{
						titre:"Valider",
						class:"btn btn-primary pull-right",
						click:function(){
							if ($scope.colId in $scope.dialog.table.$selected) {
								$scope.id = $scope.dialog.table.$selected[$scope.colId];
							}else{
								console.error("select-elm : la colonne "+$scope.colId+" introuvable !",$scope.dialog.table.$selected);
							}
							if ($scope.colNom in $scope.dialog.table.$selected) {
								$scope.nom = $scope.dialog.table.$selected[$scope.colNom];
							}else{
								console.error("select-elm : la colonne "+$scope.colNom+" introuvable !",$scope.dialog.table.$selected);
							}
							$scope.dialog.hide();
						}
					}])
				}
			}
		};
	}]);
</script>
<?php
});
ce("selectElm2")
->tpl(function(){
?>
<div>
	<style type="text/css">
		.input-group .nothasicon .btn{
			border-bottom-left-radius: 4px;
			border-top-left-radius: 4px;
		}
		.ui-select-bootstrap>.ui-select-choices, .ui-select-bootstrap>.ui-select-no-choice {
			width: 200px !important;
			height: auto !important;
			max-height: 250px !important;
			overflow-x: hidden !important;
			position: absolute !important;
			margin-top: -1px !important;
			top: 38px !important;
		}
		.ui-selectdiv .form-control,.btnuiselect{
			height: 36px;
			line-height: 18px;
		}
		.ui-select-placeholder,.ui-select-match-text{
			line-height: 1.6em;
		}
		.selectElm2 .form-control{
		    border-bottom-left-radius: 4px !important;
		    border-top-left-radius: 4px !important;
		}
		.selectElm2 .ui-selectdiv,.selectElm2 *, .selectElm2 .form-control:focus,.selectElm2 .btn:focus,.selectElm2 .form-control:active,.selectElm2 .btn:active{
			outline:none !important;
			box-shadow:none !important;
			/*border-color: transparent !important;*/
		}
	</style>
	<div class="input-group selectElm2" style="width: 100%" ng-class="{'loading':loading}">
		<label style="display:block" class="control-label" ng-show="libelle">{{libelle}}</label>
		<div class="input-group" style="border-radius: 4px;"> 
			<span class="input-group-addon" ng-if="icon" style="overflow: hidden;">
				<img ng-src="{{icon}}" style="margin: -9px;height: 25px;">
			</span>
			<input readonly="true" ng-if="useselect2!='true'" type="text" class="form-control" ng-model="nom" style="min-width: 90px">
			<div style="padding: 0;border:0;z-index: 5;max-width: {{isfilter=='true'?'200px':'100%'}};" ng-show="useselect2=='true'" class="ui-selectdiv" ng-class="{'nothasicon':!icon}" >
				<ui-select ng-model="aa.selected" on-select="selectedelm($item, $model)" theme="bootstrap" style="display: block;width: 100%;">
				    <ui-select-match placeholder="{{placeholder}}">{{$select.selected.titre}}</ui-select-match>
				    <ui-select-choices style="min-height: 175px;position: relative;" refresh="search($select)" refresh-delay="100" repeat="item in mdllist | filter: $select.search" ui-disable-choice="item.loading">
				      <div style="min-width: {{isfilter=="true"?"300px":"100%"}};">
				      	<div ng-hide="item.loading" ng-bind-html="item.titre | highlight: $select.search"></div>
				      	<div ng-show="item.loading" style="padding: 5px 0;position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
				      		<!-- <md-progress-linear md-mode="indeterminate"></md-progress-linear> -->
				      		<md-progress-circular md-mode="indeterminate"></md-progress-circular>
				      	</div>
				      </div>
				    </ui-select-choices>
				</ui-select>
			</div>
			<span class="input-group-btn">
			  <button ng-click="clickShow()" ng-class="{'btn-default':isfilter!='true' || !aa.selected,'btn-primary':isfilter=='true' && aa.selected}" class="btn btnuiselect" type="button"><span  ng-hide="$root.isprint" class="glyphicon glyphicon-option-horizontal"></span></button>
			</span>
		</div>
	</div>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('selectElm2', ['$timeout','$compile',function ($timeout,$compile) {
		return {
			restrict: 'E',
			template:{{inject-tpl}},
			scope:{id:"=",nom:"=",libelle:"@",dialog:"=",colId:"@",colNom:"@",changed:"&",directive:"@",titres:"@",icon:"@?",isfilter:"@?",useselect2:"@?",forfilter:"@?",placeholder:"@?",width:"@?"},
			controller:function($scope){
				var compiled = false;
				$scope.mdllist = [];
				$scope.aa = {};
				if ($scope.id) {
					$scope.aa.selected = {};
					$scope.aa.selected.titre = $scope.nom;
					$scope.aa.selected.id = $scope.id;
				}else{
					$scope.aa = {};
				}
				$scope.$watch("nom",function(){
					if ($scope.id) {
						$scope.aa.selected = {};
						$scope.aa.selected.titre = $scope.nom;
						$scope.aa.selected.id = $scope.id;
					}else{
						$scope.aa = {};
					}
				});
				$scope.$watch("id",function(){
					if ($scope.id) {
						$scope.aa.selected = {};
						$scope.aa.selected.titre = $scope.nom;
						$scope.aa.selected.id = $scope.id;
					}else{
						$scope.aa = {};
					}
				});
				$scope.selectedelm = function(item,mdl){
					$scope.nom = item.titre;
					$scope.id = item.id;
					$timeout(function(){
						$scope.changed({value:item});
					},10);
				}
				$scope.loading = false;
				$scope.search = function($select){
					$scope.mdllist = [];
					if ($scope.forfilter == "true") {
						$scope.mdllist.push({
							titre : "Tout"
						});
					}
					$scope.mdllist.push({
						loading : true
					});
					if ($select.open) {
						$scope.loading = true;
						api($scope.directive+"_autocomplete",{q: $select.search},function(data){
							$scope.loading = false;
						    $scope.mdllist = data;
						    if(!$scope.mdllist) $scope.mdllist = [];
						    if ($scope.forfilter == "true") {
						    	$scope.mdllist.unshift({
						    		titre : "Tout"
						    	});
						    }
						    $scope.$apply();
						});
					}
				}
				$scope.clickShow = function(){
					if (!$scope.directive) {
						$scope.dialog1 = $scope.dialog;
						$scope.dialogshow();
						return;
					}
					if (compiled) {
						$scope.dialogshow();
					}else{
						compiled = true;
						$compile('<dialog ng-model="dialog1" titre="'+$scope.titres+'" width="'+($scope.width?$scope.width:"600px")+'"> <'+$scope.directive+' checked-list="dialog1.selected" isselect="true" selectedid="id" isfilter="{{isfilter}}"></'+$scope.directive+'> </dialog>')($scope);
						$timeout(function(){
							$scope.dialogshow();
						},100);
					}
				}
				$scope.dialogshow = function(){
					$scope.dialog1.valider = function(fermer){
						$scope.id = null;
						$scope.nom = "";
						if ($scope.dialog1.selected instanceof Array) {
							if ($scope.dialog1.selected.length>0) {
								var ss = $scope.dialog1.selected[0];
								if ($scope.colId in ss) {
									$scope.id = ss[$scope.colId];
									ss.id = $scope.id;
								}else{
									console.error("select-elm : la colonne "+$scope.colId+" introuvable !",ss);
								}
								if ($scope.colNom in ss) {
									$scope.nom = ss[$scope.colNom];
									ss.titre = $scope.nom;
								}else{
									console.error("select-elm : la colonne "+$scope.colNom+" introuvable !",ss);
								}
							}
						}
						setTimeout(function(){
							delete ss.$checked;
							$scope.mdllist = [ss];
							$scope.aa.selected = $scope.mdllist[0];
							$scope.$apply();
						},5);
						$timeout(function(){
							$scope.changed({value:ss});
						},10);
						fermer();
					}
					$scope.dialog1.show();
				}
			}
		};
	}]);
</script>
<?php
});
});