{% extends 'EPSCoreBundle::layout.html.twig' %}

{% block main %}

<div id="ribbon">
	<h1 class="pull-right text-muted">Habillage</h1>
	<div class="page_actions">
		<a href="{{ path('coreadminz_campagnehabillage_edit', {"campagne" :campagne.id } ) }}" class="btn btn-primary">modifier la mise en page</a>
	</div>
</div>   

<div id="content">

    <div class="row">	    
    	<div class="col-md-12">
        	<h1>{{ campagne.lib }} </h1>        	
    	</div>        	
	</div>
	<div class="row">

    <div class="col-xs-12 col-sm-12 col-md-3">
        <div class="jarviswidget jarviswidget-color-default" data-widget-colorbutton="false" data-widget-editbutton="false" style="" role="widget">
        		<header role="heading">
					<h2>Images</h2>		
				</header>   
    			<div role="content">				
    				<div class="widget-body">           	
				
				{% for code, conf in bgTargets %}
					<a href="{{ path('coreadminz_campagnehabillagebg_edit', {"campagne" :campagne.id, 'target' : code } ) }}" class="btn btn-primary btn-xs btn-block">{{ conf.lib }}</a>
    				
    				{% for bg in campagneHabillage.campagneHabillageBgs %}
    					{% if bg.cssTarget == code %}
                            {% set logosrc = vich_uploader_asset(bg, 'lgImgFile') %}
                            {% if  logosrc %}
                            	<em>Image large</em>
                                <div style="width:216px; height:130px;background:#fff url('{{ logosrc }}') no-repeat center;background-size: contain;"></div>                            
                            {% endif %}
                            {% set logosrc = vich_uploader_asset(bg, 'mdImgFile') %}
                            {% if  logosrc %}
                            	<em>Image moyen</em>
                                <div style="width:216px; height:130px;background:#fff url('{{ logosrc }}') no-repeat center;background-size: contain;"></div>                            
                            {% endif %}
                            {% set logosrc = vich_uploader_asset(bg, 'smImgFile') %}
                            {% if  logosrc %}
                            	<em>Image petit</em>
                                <div style="width:216px; height:130px;background:#fff url('{{ logosrc }}') no-repeat center;background-size: contain;"></div>                            
                            {% endif %}
                            {% set logosrc = vich_uploader_asset(bg, 'xsImgFile') %}
                            {% if  logosrc %}
                            	<em>Image mini</em>
                                <div style="width:216px; height:130px;background:#fff url('{{ logosrc }}') no-repeat center;background-size: contain;"></div>                            
                            {% endif %}
    					
    					
    					{% endif %}
    				{% endfor %}
				{% endfor %}
				
{#
    				<!-- widget content -->
                {% set logosrc = vich_uploader_asset(campagneHabillage, 'imgFullFile') %}
                {% if  logosrc %}
                	<em>Image full</em>
                    <div style="width:216px; height:130px;background:#fff url('{{ logosrc }}') no-repeat center;background-size: contain;"></div>                            
                {% endif %}
                {% set logosrc = vich_uploader_asset(campagneHabillage, 'imgFondFile') %}
                {% if  logosrc %}
                	<em>Image fond</em>
                    <div style="width:216px; height:130px;background:#fff url('{{ logosrc }}') no-repeat center;background-size: contain;"></div>                            
                {% endif %}
                {% set logosrc = vich_uploader_asset(campagneHabillage, 'imgFondSmFile') %}
                {% if  logosrc %}
                	<em>Image mobile</em>
                    <div style="width:216px; height:130px;background:#fff url('{{ logosrc }}') no-repeat center;background-size: contain;"></div>                            
                {% endif %}
        #}       
            </div>
        	<br/>     
        	<br/>     
        </div>
        
    </div>
    </div>


	  
        <div class="col-xs-12 col-sm-12 col-md-9">
        <div class="jarviswidget jarviswidget-color-default" data-widget-colorbutton="false" data-widget-editbutton="false" style="" role="widget">
        		<header role="heading">
					<h2>Paramétrage</h2>		
				</header>   
					       			<!-- widget div-->
    			<div role="content">				
    				<!-- widget content -->
    				<div class="widget-body">
				<form method="POST" id="frmParams">            	
                <button type="submit" class="btn btn-success pull-right">enregistrer les paramètres</button>
                <h2>Paramètres</h2>
                <br/>Conseil : utiliser une extension navigateur (ex "colorZilla" pour firefox) afin de prendre directement les codes couleurs dans les visuels 
                <br/>
                <br/>
                <table class="table table-condensed">
                	<tr>
                		<th>Section / Paramètre</th>
                		<th>Personnalisé</th>
                		<th>Valeur</th>
                	</tr>
                
                	{% for sectionkey , section in defs %}
                	<tr>
                		<th colspan=3><span class="label bg-color-blueDark"> {{ section.titre }}</span></th>            		
                	</tr>
                    	{% for k, li in section.prms %}
                    	
                    	{% if config[sectionkey][k] is defined %}
                    		{% set selected = true %}
                    		{% set val = config[sectionkey][k] %}
                    	{% else %}
                    	    {% set selected = false%}
                    	    {% set val = '' %}
                		{% endif %}
                    	
                    	<tr>	
                    		<td>{{ li.titre }}</td>
                    		<td>
                                <div class="checkbox">
                                    <label>
                                    	<input type="checkbox" value="" name="ch[selected][{{ sectionkey }}][{{ k }}]" 
                                    	    {% if selected %}checked=checked{% endif %} class="sel" id="ch_val_{{ sectionkey }}_{{ k }}_sel" />
                                    </label>
                                </div>                		
                		    </td>
                    		<td>
                    			{% if 'boolean' == li.type %}
                					<div style="margin-left:3em;">
                    					<input type="checkbox" value="1" name="ch[val][{{ sectionkey }}][{{ k }}]" 
                    						class="form-control valcheckbox" id="ch_val_{{ sectionkey }}_{{ k }}"  
                    						{% if config[sectionkey][k] is defined and config[sectionkey][k] %}checked=checked{% endif %} />
                    				</div>
                    				<div class="help">
                    				</div>
                    			{% endif %}  
                    			  
                    			{% if 'numberempx' == li.type %}
                					<div style="margin-left:0em;">
                    					<input type="text" value="{{ val }}" name="ch[val][{{ sectionkey }}][{{ k }}]" 
                    						class="form-control val" id="ch_val_{{ sectionkey }}_{{ k }}" />
                    				</div>
                    				<div class="help">
                    					Exemple : 2em
                    				</div>
                    			{% endif %}    
                    			           			                		
                    			{% if 'color' == li.type %}
                					<div style="float:left;border:1px solid #000;height:2em;width:2em;border-radius:100%; {% if val %}background:{{ val }};{% endif %}" id="ch_val_{{ sectionkey }}_{{ k }}_previsu"> </div>
                					<div style="margin-left:3em;">
                    					<input type="text" value="{{ val }}" name="ch[val][{{ sectionkey }}][{{ k }}]" 
                    						class="form-control val" id="ch_val_{{ sectionkey }}_{{ k }}"  />
                    				</div>
                    				<div class="help">
                    					code couleur sous la forme : #FEFEFE
                    				</div>
                    			{% endif %}  
                    			             			                		
                    			{% if 'text' == li.type %}
                					<div style="">
                    					<input type="text" value="{{ val }}" name="ch[val][{{ sectionkey }}][{{ k }}]" 
                    						class="form-control val" id="ch_val_{{ sectionkey }}_{{ k }}"  />
                    				</div>
                    				<div class="help">
                    					
                    				</div>
                    			{% endif %}               			                		
                    		</td>
                    	</tr>                	
                    	{% endfor %}
                	{% endfor %}
                </table>
                
            </form>
                </div>
                </div>       
    	</div>
    	</div>
    </div> 
           


</div>
{% endblock main %}


{% block javascripts %}
    {{  parent() }}

    
<script type="text/javascript">
var campagneHabillage = {
		
    initShow : function() {
    	$('#frmParams .sel').change(function(){		    	
	    	id = $(this).attr('id');	    	
	    	vid = id.substr(0, (id.length - 4) );		    	
			ch = $(this).prop('checked');
			vtype = $('#' + vid ).attr('type');
			if ( 'checkbox' == vtype ) {
				$('#' + vid ).prop('checked' , $(this).prop('checked') );
			}
			
			if ( ! ch &&  'text' == vtype ) {
				$('#' + vid ).val('');
			}
			else {
			}		    	
    	});
    	$('#frmParams .val').keyup(function(){		    	
	    	id = $(this).attr('id');	    	
	    	sid = id + '_sel';	   	
	    	pid = id + '_previsu';	   	
			$('#' + sid ).prop('checked' , true);
			$('#' + pid ).css('backgroundColor' , $(this).val() );
    	});
    	$('#frmParams .valcheckbox').change(function(){		    	
	    	id = $(this).attr('id');	    	
	    	sid = id + '_sel';	   	
	    	pid = id + '_previsu';	   	
			$('#' + sid ).prop('checked' , true );
    	});
    }
}
	
$(function () {
	campagneHabillage.initShow();
})


</script>
{% endblock %}