{% extends 'base.html.twig' %}
{% block title %}Metroplus - Logos{% endblock %}

{% block body %}
<style>
.updateZone {
	height:30px;
	width:30px;
	background-color:DarkSlateBlue;
	color:White;
	margin-right:10px;
}
</style>
<div class="container-fluid mt-4">
	<div id="custom-toolbar-logo" class="d-flex flex-row">
		<div class="d-flex flex-row align-items-center">
		<h4 class="mt-1">Logos</h4>
		<a class="btn-floating ms-2 me-5"  id="append-data-logo"  href="javascript:void(0)" onclick="" title="Créer un logo"><div class="material-icons material-symbols-outlined icon-dkblue">docs_add_on</div></a>
		</div>
	</div>
	<table id="logos-table" name="logos-table" data-page-size="10" data-toggle="table" data-url="{{ path('liste_logos_json') }}" data-toolbar="#custom-toolbar-logo" data-pagination="true" data-id-field="id" data-cache="false" class='table-striped clickable=row' data-show-refresh="true" data-show-toggle="false" data-show-columns="false" data-search="true" >
		<thead>
			<tr>
				<th data-field="id" data-valign="top" data-visible="true">Id</th>
				<th data-field="filePath" data-valign="top" data-sortable="false">Nom du fichier</th>
				<th data-field="filePath" data-valign="top" data-sortable="false" data-formatter="operateFilePathLogo">Logo</th>
		   </tr>
		</thead>
	</table><br/>
	
	<div id="myModal_logo" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
			  <div class="modal-header headerStandard">
				<h5 class="modal-title">Edition d'un logo</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer" ></button>
			  </div>
				<div class="modal-body">
						<div class="container-fuild">
							<input type="hidden" name="M_LOGO_id" id="M_LOGO_id" value="0"/>
							<div class="row">
								<div class="col-3" id="apercu"></div>
								<div class="col-9">
<input id="fileLogo" type="file" name="fileLogo" accept=".jpg, .png, image/jpeg, image/png" multiple>							</div>
							</div>
						</div>
				</div>
				<!--div class="modal-footer">
				   <p class="text-warning"><small>Si vous ne sauvegardez pas vos modifications seront perdues...</small><br/></p>
					 <button type="button" class="btn btn-default" data-bs-dismiss="modal">Annuler</button> <button type="submit" class="btn btn-primary">Enregistrer</button>
					<button type="button" class="btn btn-warning">Supprimer</button>
					</div-->
				</div>
		   </div>
		</div>
</div>
<script type="text/javascript">
	var cycle=false;
	
	function operateFilePathLogo(value, row, index) {
		return '<div class="d-flex flex-row justify-content-start"><img  height="80px" src="/uploads/logos/'+row.filePath+'" title="'+row.filePath+'" alt="'+row.filePath+'" /></div>'
		;
   }


 {% block document_ready %}
	  
	function propStopped( event ) {
	  if ( event.isPropagationStopped() ) {
		return true;
	  } else {
		return false;
	  }
	  return true;
	}

// $('#demo').FancyFileUpload({

  // send data to this url
  // 'url' : '',

  // key-value pairs to send to the server
  // 'params' : {},

  // editable file name?
  // 'edit' : true,

  // max file size
  // 'maxfilesize' : -1,

  // a list of allowed file extensions
  // 'accept' : null,

  // 'iec_windows', 'iec_formal', or 'si' to specify what units to use when displaying file sizes
  // 'displayunits' : 'iec_windows',

  // adjust the final precision when displaying file sizes
  // 'adjustprecision' : true,

  // the number of retries to perform before giving up
  // 'retries' : 5,

  // the base delay, in milliseconds, to apply between retries
  // 'retrydelay' : 500,

  // an object containing valid MediaRecorder options
  // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  // 'audiosettings' : {},

  // whether or not to display a toolbar button with a webcam icon for recording <a href="https://www.jqueryscript.net/tags.php?/video/">video</a> directly via the web browser 
  // 'recordvideo' : false,

  // an object containing valid MediaRecorder options
  // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  // 'videosettings' : {},

  // A valid callback function that is called after the preview dialog appears. Useful for temporarily preventing unwanted UI interactions elsewhere.
  // 'showpreview' : function(e, data, preview, previewclone) {
    // do something
  // },

  // A valid callback function that is called after the preview dialog disappears. 
  // 'hidepreview' : function(e, data, preview, previewclone) {
    // do something
  // },

  // A valid callback function that is called during initialization to allow for last second changes to the settings. 
  // Useful for altering fileupload options on the fly. 
  // 'preinit' : null,

  // A valid callback function that is called at the end of initialization of each instance. 
  // 'postinit' : null,

  // called for each item after it has been added to the DOM
  // 'added' : function(e, data) {
    // do something
  // },

  // called whenever starting the upload
  // 'startupload' : function(SubmitUpload, e, data){
    // do something
  // }

  // called whenever progress is up<a href="https://www.jqueryscript.net/time-clock/">date</a>d
  // 'continueupload' : function(e, data) {
    // do something
  // },

  // called whenever an upload has been cancelled
  // 'uploadcancelled' : function(e, data) {
    // do something
  // },

  // called whenever an upload has successfully completed
  // 'uploadcompleted' : function(e, data) {
    // do something
  // },

  // jQuery File Upload options
  // 'fileupload' : {},

  // translation strings here
  // 'lang<a href="https://www.jqueryscript.net/tags.php?/map/">map</a>' : {}

// });
		
//-----------------------------------------------------------
// On Event
//-----------------------------------------------------------

	$(function () {

		$('#logos-table').bootstrapTable({
		}).on('dbl-click-row.bs.table', function (e, row, $element) {
			if ( cycle ) return false;
			cycle=true;
			$('#apercu').html("");
			$.ajax({
			type: 'POST',
			url: "{{ path('liste_logos_json') }}/"+row.id,
			// data: { 'parametres' : donnees }, 
			dataType : 'json',
			success: function(data)
			{
				// console.log(data);
				if ( data.retour == "O" ) {
					// $table.bootstrapTable('sortBy', {field: 'selected', sortOrder: 'desc'});
					$("#M_LOGO_id").val( data.id );
					$("#M_LOGO_filePath").val( data.filePath);
					$('#apercu').html("<img  width='150px' src='/uploads/logos/"+data.filePath+"' title='"+data.filePath+"' alt='"+data.filePath+"' />");
					$('#fileLogo').FancyFileUpload({
						url : '{{ path("logo_upload")}}/'+data.id ,
					  params : { action : 'fileuploader', id : data.id },
					  maxfilesize : 1000000,  
					  uploadcompleted : function(e, data) {
							console.log(data.result);
							$('#logos-table').bootstrapTable('refresh');
							$('#apercu').html("<img  width='150px' src='/uploads/logos/"+data.result.filePath+"' title='"+data.result.filePath+"' alt='"+data.result.filePath+"' />");
						}
					});
					$('#myModal_logo').modal('show');
				}
				cycle=false;
			},
			error: function(data)
			{
					alert(JSON.stringify(data));
			}
			});			
			}
		);

	}); 
	
$( '#append-data-logo' ).on( 'click', function(event) {
	if ( ! propStopped( event ) ) {		  
			event.stopPropagation();
			$("#apercu").html('');
			$("#M_LOGO_id").val( 0 );
			$("#M_LOGO_filePath").val( "" );
			$('#fileLogo').FancyFileUpload({
				url : '{{ path("logo_upload")}}/0',
			  params : { action : 'fileuploader', id : 0 },
			  maxfilesize : 1000000,  
			  uploadcompleted : function(e, data) {
					console.log(data.result);
					$('#logos-table').bootstrapTable('refresh');
					$('#apercu').html("<img  width='150px' src='/uploads/logos/"+data.result.filePath+"' title='"+data.result.filePath+"' alt='"+data.result.filePath+"' />");
				}
			});
			$('#myModal_logo').modal('show');
	}	
});

$('#edit-marque-logos-table').bootstrapTable({
  onCheck: function (row, $element) {
	  addMarqueLogo(row.id);
		},
  onUncheck: function (row, $element) {
	  delMarqueLogo(row.id);
   }
});

function addMarqueLogo(logo_id) {
	$table=$('#edit-marque-logos-table');
	var selection=$table.bootstrapTable('getSelections');
	// if ( selection.length > 0 ) {
		// selection.forEach((logo) => {
				// if ( logo_id == logo.id ) return false;
			// });
		// Sélection unique
			// return false;
	// }
	var datas=$table.bootstrapTable('getData');
	var index=0;
	if ( datas.length > 0 ) {
		datas.forEach((logo) => {
			if ( logo_id == logo.id ) {
				$('#filterMarqueLogo').append(
					'<div id="filterMarqueLogo'+logo.id+'" data-id="'+logo.id+'" class="alert filterText alert-dismissible fade show m-1">'+
					'<img  height=20px" src="/uploads/logos/'+logo.filePath+'" title="'+logo.filePath+'" alt="'+logo.filePath+'" /> '+
					logo.filePath+' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"  onClick="delMarqueLogo('+logo.id+');" ></button></div>'
					);
			}
			index++;
		});		
	}
	// $table.bootstrapTable('sortBy', {field: 'selected', sortOrder: 'desc'});
}

function delMarqueLogo(logo_id) {
	$('#filterMarqueLogo'+logo_id).remove();
	$table=$('#edit-marque-logos-table');
	var logos=$table.bootstrapTable('getData');
	index=0;
	logos.forEach((logo) => {
		if (logo.id==logo_id) {
			$table.bootstrapTable('uncheck', index);
		}
		index++;
	});
}

$('#edit-marque-clients-table').bootstrapTable({
  onCheck: function (row, $element) {
		addMarqueClient(row.id);
	},
  onUncheck: function (row, $element) {
		delMarqueClientFilter(row.id);
   }
});

function delMarqueClientFilter(client_id) {
	$('#filterMarqueClients'+client_id).remove();
}

function delMarqueClient(client_id) {
	$table=$('#edit-marque-clients-table');
	var clients=$table.bootstrapTable('getData');
	index=0;
	clients.forEach((client) => {
		if (client.id==client_id) {
			$table.bootstrapTable('uncheck', index);
		}
		index++;
	});
	// $table.bootstrapTable('sortBy', {field: 'selected', sortOrder: 'desc'});
	return true;
}
function addMarqueClient(client_id) {
	$table=$('#edit-marque-clients-table');
	var selection=$table.bootstrapTable('getSelections');
	if ( selection.length > 0 ) {
		selection.forEach((client) => {
			if ( client_id == client.id ) return false;
			});
	}
	var datas=$table.bootstrapTable('getData');
	var index=0;
	if ( datas.length > 0 ) {
		datas.forEach((client) => {
			if ( client_id == client.id ) {
				$('#filterMarqueClients').append(
					'<div id="filterMarqueClients'+client.id+'" data-id="'+client.id+'" class="alert filterText alert-dismissible fade show m-1" title="'+client.designation+'">'+client.identifiantMetroplus+' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"  onClick="delMarqueClient('+client.id+');" ></button></div>'
					);
			}
			index++;
		});		
	}
	// $table.bootstrapTable('sortBy', {field: 'selected', sortOrder: 'desc'});
	return true;
}

$('*[name="btSelectAll"]').prop( "disabled", true );
{% endblock %}
</script>
{% endblock %}