{{* -*- brindille -*- *}}
{{*:assign var=page.title value="Notre Matériel"}}
{{:assign var=page.path value="equipment.html"}}
<h1>{{$page.title|remove_leading_number}}</h1>
*}}

{{* liste des catégories *}}
{{#sql select="json_extract(document, '$.name') as catname" tables="module_data_equipment" where="json_extract(document, '$.type') = 'category'"}}
	{{:assign var="cat_options." value=$catname|strval label=$catname }}
{{/sql}}
{{*:debug cat_options=$cat_options*}}
<style id="material-hide"></style>
<div class="filters">
	<fieldset>
		<legend>Filtrer par catégorie</legend>
		<dl>{{:input name="cat" type="select" default_empty="Toutes les catégories" options=$cat_options label="Catégorie"}}</dl>		
	</fieldset>
</div>
<div class="shortFormRight">
	{{:linkbutton class="main" label="Affichage liste" href="equipment.html?prop=%s&cat_key=%s&fonc=inv"|args:$selected_prop:$selected_category shape="list-ul"}}
</div>

{{* lister les états matériels possibles *}}
{{#module name="equipment"}}
	{{:assign var="states" value=$config.states|explode:","}}
{{/module}}

{{* Affichage des équipements en mode vignette *}}
{{#load module="equipment" type="category" where=$cat_condition}}
	{{:assign lignes=null}}
	{{#select 
		td_equ.id AS wequ_id,
		td_equ.key AS wequ_key, 
		json_extract(td_equ.document, '$.name') AS "name",
		json_extract(td_equ.document, '$.category') AS "category",
		(SELECT json_extract(cat.document, '$.name') AS "catname" FROM !table as cat WHERE cat.key=json_extract(td_equ.document, '$.category')) AS catname,
		(SELECT json_extract(mvt.document, '$.date') AS "mvtdate" FROM !table as mvt WHERE td_equ.key=json_extract(mvt.document, '$.equipment')) AS mvtdate,
		json_extract(td_equ.document, '$.status') AS "status",
		json_extract(td_equ.document, '$.stock') AS "stock",
		json_extract(td_equ.document, '$.out') AS "out",
		json_extract(td_equ.document, '$.notowned') AS "notowned",
		json_extract(td_equ.document, '$.state') AS "state",
		json_extract(td_equ.document, '$.serialno') AS "serialno",
		json_extract(td_equ.document, '$.description') AS "description",
		json_extract(td_equ.document, '$.member') AS "member",
		json_extract(td_equ.document, '$.images') AS "images",
		img.value AS image
		FROM !table AS td_equ
		LEFT JOIN json_each(td_equ.document, '$.images') img
		WHERE ($$.category={$key|strval})
		ORDER BY (catname)
		;
		!table=module_data_equipment
		assign="lignes."
		}}
	{{else}}
	{{/select}}
	{{*:debug l=$lignes*}}
	{{if $lignes}}
		<fieldset class="fieldset" category="{{$name}}">
		<legend>{{$name}}</legend>
		<div class="bike-list">
				{{#foreach from=$lignes}}
					{{if $_key!=$wequ_key}}
						<div class="container" category="{{$catname}}">
							{{:assign var="_key" value=$wequ_key}}
							{{*:debug img=$image*}}
							{{if $image === null}}
								{{:assign var="_image" value="equipment_no_image.png"|url_encode}}
								{{:assign var="thumbnail_src" value="%s?h=%s"|args:$_image:$version_hash}}
								{{:assign var="img_src" value="%s"|args:$_image}}
							{{else}}
								{{:assign var="_image" value=$image|url_encode}}
								{{:assign var="thumbnail_src" value="/ext/m/equipment/public/image-%s/%s?250px&h=%s"|args:$_key:$_image:$version_hash}}
								{{:assign var="img_src" value="/ext/m/equipment/public/image-%s/%s"|args:$wequ_key:$_image}}			
							{{/if}}
							<div class="image-wrapper">
								<a href="{{$img_src}}" target="_dialog"><img class="imagemateriel" src={{$thumbnail_src}} alt="{{$description}}"/></a>
							</div>
							<span class="label2">{{$stock}}</span>
					        <div class="properties">
					            <ul>
									{{*#load module="equipment" type="movement" direction="input" limit=1 where="$$.equipment = :key" :key=$_key order="$$.date"}}   
					                	<li class="date-entree">entré en stock le {{$date|relative_date}}</li>
									{{/load*}}
									<li class="date-entree">entré en stock le {{$mvtdate|relative_date}}</li>
					                <li class="numero-unique">numéro unique : {{$wequ_id}} </li>
					                <li>{{:link href="equipment.html?key=%s&fonc=voir"|args:$_key label=$name}}</li>
					                <li>Qt Disponible : {{$stock}}</li>
									<li>Qt Sorti : {{$out}}</li>
					                {{:assign var="_state" from="states.%d"|args:$state}}
									<li>État : {{$_state}}</li>
									<li class="notes">{{$description|truncate:80:"(...)":false}}</li>
					           </ul>
								{{* Reservation si stock dispo *}}
								{{:assign _dispo="%d-%d"|math:$stock:$out}}
								{{if $_dispo >= 1}}
									<span class="resaactionbutton">{{:linkbutton class="main" label="Réserver" href="equipment.html?key=%s&fonc=resa"|args:$_key shape="plus"}}</span>
								{{else}}
									<span class="resaactionbutton">{{:linkbutton class="main" label="Contacter nous!" href="contact.html?key=%s&fonc=resa"|args:$_key shape="plus"}}</span>
								{{/if}}																
					        </div>
						</div>
					{{/if}}
				{{/foreach}}
		</fieldset>
		</div>
	{{/if}}
{{/load}}

<script type="text/javascript">
	function set_toggle_hide(input_id) {
	console.log(input_id); 
	document.getElementById(input_id).addEventListener('change', function() {
	v_cat = document.getElementById('f_cat').options[document.getElementById('f_cat').selectedIndex].text
	console.log(v_cat); 
		
	css = document.getElementById("material-hide")
	css.innerHTML =  ""
		if (v_cat && !(v_cat.startsWith("Tou"))) {
			css.innerHTML += `
				.container:not([category="${v_cat}"]){
					display:none;
				}
				.fieldset:not([category="${v_cat}"]){
					display:none;
				}
			`;
		}
	  });
	}
	set_toggle_hide('f_cat')
</script>