<?php 

Route::isJs(function(){
ob_start();
?>
<div style="background: whitesmoke;border-left: 5px solid #7bbcf3;" class="configrowdiv">
	<style type="text/css">
		.btnupdateconfigrowdiv{
			-webkit-transition: all 200ms ease-in-out;
			-moz-transition: all 200ms ease-in-out;
			-ms-transition: all 200ms ease-in-out;
			-o-transition: all 200ms ease-in-out;
			transition: all 200ms ease-in-out;
		}
		.configrowdiv:hover > div > div > .btnupdateconfigrowdiv{
			color: #fff;
			background-color: #204d74;
			border-color: #122b40;
		}
	</style>
	<div style="display: grid;grid-gap: 2px 2px;grid-template-columns: 25% 90fr 1fr;margin: 5px 0;    padding: 5px;">
		<div style="font-weight: bold;padding-top: 5px;" ng-transclude="titre"></div>
		<div ng-show="mode=='edit'" style="grid-column: span 2;padding-bottom: 20px;">
			<hr>
			<div ng-transclude="edit"></div>
			<hr>
			<button class="btn btn-primary" ng-click="save()">Enregistrer</button>
			<button class="btn btn-default" ng-click="annuler()">Annuler</button>
		</div>
		<div ng-transclude="show" ng-show="mode==''" style="padding-top: 5px;"></div>
		<div ng-show="mode==''">
			<button class="btn btn-default btnupdateconfigrowdiv" ng-click="modifier()">Modifier</button>
		</div>
		<div ng-show="mode == 'loading'">
			<div style="padding: 15px;text-align: center;">
				<span>Enregistrement ...</span>
				<md-progress-linear md-mode="indeterminate"></md-progress-linear>
			</div>
		</div>
	</div>
</div>
<?php
$code=ob_get_clean();

ob_start();
?>
<div>
	<rowconfig store-widget="{{storeWidget}}" change-mode="changeMode(mode,action)">
		<titre>
			<div style="display: flex;align-items: flex-start;">
				<span class="glyphicon glyphicon-menu-right" style="margin-top: 2px;font-weight: normal !important;color:#aaa;"></span>
				<div  style="flex:1;margin-left: 10px;">
					<ng-transclude></ng-transclude>
				</div>
			</div>
		</titre>
		<edit>
			<div ng-switch="type">
				<div ng-switch-when="textarea">
					<textarea rows="5" class="form-control avs" ng-model="ctrl.ngModel" placeholder="{{ctrl.placeholder}}"></textarea>
				</div>
				<div ng-switch-when="bool">
					<md-switch ng-model="ctrl.ngModel" aria-label="active" style="margin: 0;padding: 22px 12px;">{{ctrl.placeholder}}</md-switch>
				</div>
				<div ng-switch-when="select">
					<select class="form-control avs" ng-model="ctrl.ngModel" ng-options="item.value as item.titre for item in ctrl._options track by item.titre"></select>
				</div>
				<div ng-switch-when="date">
					<input type="date" class="form-control avs" mydate="ctrl.ngModel" placeholder="{{ctrl.placeholder}}">
				</div>
				<div ng-switch-when="map">
					<maping ng-model="ctrl.ngModel" refrech="ctrl.refrechmap1"></maping>
				</div>
				<div ng-switch-when="menu">
					


					<paneltree
						ng-model="ctrl.ngModel" 
						current="current"
						accept="ctrl.accept" 
						width1="50%" 
						width2="50%" 
						jstree="jstree"
						min-height="300px"
						contextmenu = "true"
						dnd = "true"
						addnew="addnew"
						onselected="initjstreerules(current.data,ctrl.Widgets[ctrl.storeWidget].ngModel.roles)"
						>
						<div class="row" ng-show="current">
							<div class="col-xs-12">
								<h2 style="border-left: 5px solid #ade5ff; padding: 12px; padding-left: 12px; margin: 0;">{{current.text}}</h2>
								<hr>
							</div>
							<div class="col-xs-12">
								<div class="form-group avs">
									<label style="display:block" class="control-label">Titre</label>
									<input type="text" class="form-control avs" name="titre" ng-model="current.text" placeholder="Titre">
								</div>
							</div>
							<div class="col-xs-12">
								<div class="form-group avs">
									<label style="display:block" class="control-label">Left/Right</label>
									<select class="form-control avs" ng-model="current.data.align">
										<option value="">Left</option>
										<option value="right">Right</option>
									</select>
								</div>
							</div>
							<div class="col-xs-12">
								<div class="form-group avs">
									<label style="display:block" class="control-label">URL</label>
									<input type="text" class="form-control avs" name="url" ng-model="current.data.url" placeholder="URL">
								</div>
							</div>

							<div class="col-xs-12">
								<div class="form-group avs">
									<label style="display:block" class="control-label">Module</label>
									<select class="form-control avs" name="directive" ng-model="current.data.directive">

										<option value="">--</option>
<?php 
		$list = db_table::allClass();
		foreach ($list as $db_class) {
			$titre = $db_class::param("titre_page,titre");
			?>
			<option value="<?= $db_class::_getDirectiveName(true) ?>"><?= $titre ?></option>
			<?php
		}
		foreach(db_table::$viewList as $k=>$v){  
			?>
			<option value="<?= $k ?>"><?= $v["titre"] ?></option>
			<?php
		}

?>
										<option value="utilisateurs">Gestion des Utilisateurs</option>


									</select>
								</div>
							</div>

							<div class="col-xs-12">
								<div class="form-group avs">
									<label style="display:block" class="control-label">Icon</label>
									<upfile
										ng-model="current.data.icon"
										max="1"
										height="70"
										width="70"
										dist="images"
										titre="{{current.text}}"
										accept="image/*"
									></upfile>
								</div>
							</div>
							<div class="col-xs-12">
								<div class="form-group avs">

									<div style="display:flex;justify-content: space-between;align-items: center;">
										<label class="control-label">Rôles</label>
										<md-radio-group ng-model="demoval" ng-init="demoval='demo'" style="display:flex;align-items: center;zoom:0.75">
										  <md-radio-button class="radred" value="demo">Non</md-radio-button>
										  <md-radio-button value="demo" style="margin: 0px 15px 15px 15px;">Ces donnés</md-radio-button>
										  <md-radio-button class="radgreen" value="demo">Tout</md-radio-button>
										</md-radio-group>
									</div>
									<table class="table table-striped" style="zoom: 0.75;">
										<tr>
											<th>Rôle</th>
											<th style="text-align: center;">Consult.</th>
											<th style="text-align: center;">Ajout</th>
											<th style="text-align: center;">Modif.</th>
											<th style="text-align: center;">Suppr.</th>
										</tr> 
										<tr ng-repeat="role in ctrl.Widgets[ctrl.storeWidget].ngModel.roles">
											<td>{{role.titre}}</td>
											<td style="text-align: center;">
												<div style="display:flex;justify-content: center;">
												    <md-radio-group ng-model="current.data.rules[role.titre].show">
												      <md-radio-button class="radred" value="0"></md-radio-button>
												      <md-radio-button value="1"></md-radio-button>
												      <md-radio-button class="radgreen" value="2"></md-radio-button>
												    </md-radio-group>
											    </div>
											</td>
											<td style="text-align: center;">
												<div style="display:flex;justify-content: center;">
												    <md-radio-group ng-model="current.data.rules[role.titre].add">
												      <md-radio-button class="radred" value="0"></md-radio-button>
												      <!-- <md-radio-button value="1"></md-radio-button> -->
												      <md-radio-button class="radgreen" value="2" style="margin-top: 52px;"></md-radio-button>
												    </md-radio-group>
											    </div>
											</td>
											<td style="text-align: center;">
												<div style="display:flex;justify-content: center;">
												    <md-radio-group ng-model="current.data.rules[role.titre].update">
												      <md-radio-button class="radred" value="0"></md-radio-button>
												      <md-radio-button value="1"></md-radio-button>
												      <md-radio-button class="radgreen" value="2"></md-radio-button>
												    </md-radio-group>
											    </div>
											</td>
											<td style="text-align: center;">
												<div style="display:flex;justify-content: center;">
												    <md-radio-group ng-model="current.data.rules[role.titre].delete">
												      <md-radio-button class="radred" value="0"></md-radio-button>
												      <md-radio-button value="1"></md-radio-button>
												      <md-radio-button class="radgreen" value="2"></md-radio-button>
												    </md-radio-group>
											    </div>
											</td>
										</tr>
										<!-- 
										<tr ng-repeat="role in ctrl.Widgets[ctrl.storeWidget].ngModel.roles">
											<td>{{role.titre}}</td>
											<td style="text-align: right;">

												<md-switch style="margin: -13px 0px;display: inline-block;" ng-model="current.data.roles[role.titre]" aria-label="role"></md-switch>

											</td>
											<td style="text-align: right;">

												<md-switch style="margin: -13px 0px;display: inline-block;" ng-model="current.data.roles['add__'+role.titre]" aria-label="role"></md-switch>

											</td>
											<td style="text-align: right;">

												<md-switch style="margin: -13px 0px;display: inline-block;" ng-model="current.data.roles['update__'+role.titre]" aria-label="role"></md-switch>

											</td>
											<td style="text-align: right;">

												<md-switch style="margin: -13px 0px;display: inline-block;" ng-model="current.data.roles['delete__'+role.titre]" aria-label="role"></md-switch>

											</td>
										</tr> -->


									</table>
									<style type="text/css">
										md-radio-button.radgreen .md-on{
											background-color: green !important;
										}
										md-radio-button.radgreen.md-checked .md-off{
											border-color: green !important;
										}

										md-radio-button.radred .md-on{
											background-color: red !important;
										}
										md-radio-button.radred.md-checked .md-off{
											border-color: red !important;
										}
									</style>
								</div>
							</div>
						</div>
						<div ng-hide="current" style="display: flex;align-items: center;justify-content: center;height: 200px;color:#aaa">
							Aucun élément sélectionné
						</div>
					</paneltree>
					<button class="btn btn-default" ng-click="dailogadd.show()">Ajouter</button>
					<dialog ng-model="dailogadd" titre="Nouveau" btn-fermer="true" btn-valider="true" ng-valider="fermer();addnew(dailogadd.titrenew)">
						<div class="row">
							<div class="col-xs-12">
								<div class="form-group avs">
									<label style="display:block" class="control-label">Titre</label>
									<input type="text" class="form-control avs" ng-model="dailogadd.titrenew" placeholder="Titre">
								</div>
							</div>
						</div>
					</dialog>

				</div>
				<div ng-switch-when="image">
					<upfile 
						ng-model="ctrl.ngModel"
						max="{{ctrl.max}}"
						height="150"
						width="150"
						dist="{{ctrl.dist || 'upload'}}"
						titre="{{ctrl.titre || 'image'}}"
						accept="image/*"
					></upfile>
				</div>
				<div ng-switch-when="color">
					<div style="display: flex;">
						<input type="color" style="margin:0 10px;flex:1" class="form-control avs" ng-model="ctrl.ngModel" placeholder="{{ctrl.placeholder}}">
						<input type="text" style="margin:0 10px;flex:1" class="form-control avs" ng-model="ctrl.ngModel" placeholder="{{ctrl.placeholder}}">
					</div>
				</div>
				<div ng-switch-default>
					<input type="{{type || 'text'}}" class="form-control avs" ng-model="ctrl.ngModel" placeholder="{{ctrl.placeholder}}">
				</div>
			</div>
		</edit>
		<show>
			<div ng-switch="type">
				<div ng-switch-default>
					<div style="white-space: pre-line;">{{ctrl.ngModel}}</div>
				</div>
				<div ng-switch-when="bool">
					<label class="label label-success" ng-show="ctrl.ngModel">Activé</label>
					<label class="label label-danger" ng-hide="ctrl.ngModel">Desactivé</label>
				</div>
				<div ng-switch-when="select">
					{{ctrl.ngModel.titre || ctrl.ngModel}}
				</div>
				<div ng-switch-when="map">
					<maping ng-model="ctrl.ngModel" readonly="true" refrech="ctrl.refrechmap"></maping>
				</div>
				<div ng-switch-when="menu">
					



				</div>
				<div ng-switch-when="color">
					<div style="display: flex;">
						<div style="width: 50px;height: 50px;border-radius: 5px;margin:5px 0;background: {{ctrl.ngModel}};"> </div>
						<span style="margin-left: 15px;display: flex;align-items: center;">{{ctrl.ngModel}}</span>
					</div>
				</div>
				<div ng-switch-when="image">
					<div ng-if="ctrl.ngModel.length">
						<div ng-if="ctrl.max == 1">
							<img ng-src="{{ctrl.ngModel}}" style="height: 100px;margin:5px 5px 5px 0;padding: 2px;background:#fff;border:1px solid #ccc;border-radius: 3px;">
						</div>
						<div ng-if="ctrl.max > 1">
							<img ng-repeat="img in ctrl.ngModel" ng-src="{{img}}" style="height: 100px;margin:5px 5px 5px 0;padding: 2px;background:#fff;border:1px solid #ccc;border-radius: 3px;">
						</div>
					</div>
				</div>
				<div ng-switch-when="date">
					{{ctrl.ngModel.split("-").reverse().join("/")}}
				</div>
			</div>
		</show>
	</rowconfig>
</div>
<?php
$tplConfigInput=ob_get_clean();
?>
<script>
			app.directive('rowconfigInput', [function () {
				return {
					restrict: 'E',
					template : <?= json_encode($tplConfigInput) ?>,
					scope : {ngModel:"=",storeWidget : "@",placeholder : "@?",type : "@?",options:"=?",titre:"@?",dist:"@?",max:"=?"},
					transclude : true,
					controller : function($scope){
						$scope.ctrl = $scope;
						$scope.ngModel = $scope.ngModel || "";
						$scope._options = [];
						$scope.checkMaxValue = function(){
							if($scope.type == "image"){
								if ($scope.max) {
									if ($scope.max*1>1) {
										if (typeof $scope.ngModel == "string") {
											$scope.ngModel = [];
										}else if(!$scope.ngModel.splice){
											$scope.ngModel = [];
										}
									}
								}
							}else if($scope.type == "map"){
								$scope.ngModel = $scope.ngModel || {};
							}else if($scope.type == "menu"){
								$scope.ngModel = $scope.ngModel || [];
							}
						}
						$scope.$watch("max",function(){
							$scope.checkMaxValue();
						});
						$scope.$watch("ngModel",function(){
							$scope.checkMaxValue();
						});
						$scope.$watch("options",function(){
							$scope._options = [];
							if($scope.options){
								for (var i = 0; i < $scope.options.length; i++) {
									if (typeof $scope.options[i] == "string") {
										$scope._options.push({
											titre : $scope.options[i],
											value : $scope.options[i]
										});
									}else if($scope.options[i].titre){
										$scope._options.push({
											titre : $scope.options[i].titre,
											value : $scope.options[i]
										});
									}
								}
							}
						});
						var origonaldata = "";
						$scope.changeMode = function(mode,action){
							switch(action){
								case "annuler":
									$scope.ngModel = origonaldata;
								break;
								case "modifier":
									origonaldata = $scope.ngModel;
								break;
								case "save":
									origonaldata = $scope.ngModel;
									if($scope.type == "map"){
										$scope.refrechmap();
										$scope.refrechmap1();
									}
									if($scope.type == "menu"){
										$scope.accept();
									}
								break;
							}
						}
						$scope.initjstreerules = function(data,rules){
							data.rules = data.rules || {};
							(rules || []).forEach(function(role){
								data.rules[role.titre] = data.rules[role.titre] || {};
								if(!("add" in data.rules[role.titre])){
									data.rules[role.titre].add = 0;
								}
								if(!("update" in data.rules[role.titre])){
									data.rules[role.titre].update = 0;
								}
								if(!("delete" in data.rules[role.titre])){
									data.rules[role.titre].delete = 0;
								}
								if(!("show" in data.rules[role.titre])){
									data.rules[role.titre].show = 0;
								}
							});
						}
					},
					link: function ($scope, iElement, iAttrs) {
						$scope.checkMaxValue();
					}
				};
			}]);
			app.directive('storeData', [function () {
				return {
					restrict: 'E',
					scope : {ngModel:"=",name:"@"},
					controller : function($scope){
						$scope.save = function(callback){
							$scope.ngModel = $scope.ngModel || {};
							api("storeDataApi",{action:"save",name:$scope.name,data:$scope.ngModel},function(rep){
								if(callback) callback(rep);
								$scope.$apply();
							});
						}
						$scope.load = function(callback){
							api("storeDataApi",{action:"load",name:$scope.name},function(rep){
								$scope.ngModel = $scope.ngModel || {};
								if (rep) {
									for(var x in rep){
										$scope.ngModel[x] = rep[x];
									}
								}
								if(callback) callback(rep);
								$scope.$apply();
							});
						}
					},
					link: function ($scope, iElement, iAttrs) {
						$scope.load();
					}
				};
			}]);
			app.directive('rowconfig', [function () {
				return {
					restrict: 'E',
					template : <?= json_encode($code) ?>,
					transclude : {
						titre : "titre",
						edit : "edit",
						show : "show"
					},
					scope : {
						storeWidget : "@",
						changeMode:"&?",
						varname : "=?",
						varsource : "=?"
					},
					controller : function($scope){
						$scope.mode = "";
						$scope.$watch("varsource",function(){
							$scope.varname = $scope.varsource;
						});
						$scope.save = function(){
							if(!$scope.storeWidget || !$scope.Widgets[$scope.storeWidget]){
								if($scope.changeMode) $scope.changeMode({mode : $scope.mode,action:"save"});
								$scope.mode = "";
								if($scope.changeMode) $scope.changeMode({mode : $scope.mode,action:"saved"});
								return;
							}
							$scope.mode = "loading";
							if($scope.changeMode) $scope.changeMode({mode : $scope.mode,action:"save"});
							$scope.Widgets[$scope.storeWidget].save(function(){
								$scope.mode = "";
								if($scope.changeMode) $scope.changeMode({mode : $scope.mode,action:"saved"});
							});
						}
						$scope.annuler = function(){
							$scope.mode = "";
							if($scope.changeMode) $scope.changeMode({mode : $scope.mode,action:"annuler"});
						}
						$scope.modifier = function(){
							$scope.mode = "edit";
							if($scope.changeMode) $scope.changeMode({mode : $scope.mode,action:"modifier"});
						}
					},
					link: function (scope, iElement, iAttrs) {
						
					}
				};
			}]);
</script>
<?php 

});