{% include 'part_header.html' %}
{% include 'part_menu.html' %}
{% include 'part_menu_puntos_priv.html' %}

{% if site_env == 'cusa' %}
    {% include 'part_menu_priv_small.html' %}
{% endif %}


<script>{% include 'page_perfil.js' %}</script>
<div class="content ng-hide" ng-controller="page_perfil" ng-show="d.ready">
    {% if site_env == 'cusa' %}
        {% include 'part_menu_priv.html' %}
        <br/>
    {% endif %}

    {% if site_env == 'cyem' %}
    <div class="content-titulo">
        <div class="row">
            <div class="column small-24">
                <h1 class="titulo-pagina">
                    Perfil
                </h1>
            </div>
        </div>
    </div>
    {% endif %}


    <div class="row">
        <div class="column small-24">
		    <div class="row">
                <div class="column small-24">
                    <div class="titulo-casillero text-center">
                        Casillero ng{{f.casillero}}
                    </div>
                </div>
            </div>
		</div>
    </div>
    <div class="row">
        <div class="column small-24">
            <div class="row">
                <div class="column small-24">
                    <div class="column small-24 medium-12 large-12">
                        <p class="titulo-correo">
                            Correo Electrónico (Usuario)
                        </p>
                    </div>
                    <div class="column small-24 medium-12 large-12">
                        <p class="correo">
                            ng{{f.correo_electronico}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/>
	<div class="row">
		<div class="column small-24">
            <div class="row">
                <div class="column small-24 medium-12 large-12">
    				<ul class="accordion" data-accordion data-allow-all-closed="true">
    					<li class="accordion-item" data-accordion-item>
    				    	<a href="#" class="accordion-title accordion1 font-9">CAMBIAR CORREO ELECTRÓNICO <img src="tw{{template_url}}/img/icon-mas.png" class="icono-amp" alt="" /></a>
    				    	<div class="accordion-content content" data-tab-content>
    				    		<form class="form" action="" method="post">
    				    			<label>Nuevo Correo Electrónico</label>
    								<input ng-model="f_correo_actualizacion.correo_electronico_nuevo" type="text" name="name" value="">
    								<label>Contraseña Actual</label>
    								<input ng-model="f_correo_actualizacion.contrasena_actual" type="password" name="name" value=""><br/>
    								<input type="button" name="name" ng-click="actualizarUsuario()" class="button submit" value="Cambiar Correo ">
    				    		</form>
    				    	</div>
    				  	</li>
    				</ul>
    			</div>
                <div class="column small-24 medium-12 large-12">
    				<ul class="accordion" data-accordion data-allow-all-closed="true">
    					<li class="accordion-item" data-accordion-item>
    				    	<a href="#" class="accordion-title accordion2 font-9">CAMBIAR CONTRASEÑA <img src="tw{{template_url}}/img/icon-mas.png" class="icono-amp" alt="" /></a>
    				    	<div class="accordion-content content" data-tab-content>
    				    		<form class="form" action="" method="post">
    				    			<label>Nueva Contraseña</label>
    								<input ng-model="f_contrasena_actualizacion.contrasena_nueva" type="password" name="name" value="">
    								<label>Confirmar Nueva Contraseña</label>
    								<input ng-model="f_contrasena_actualizacion.confirma_contrasena" type="password" name="name" value="">
    								<label>Contraseña Actual </label>
    								<input ng-model="f_contrasena_actualizacion.contrasena_actual" type="password" name="name" value=""><br/>
    								<input type="button" ng-click="actualizarContrasena()" class="button submit" name="name" value="Cambiar Contraseña">
    				    		</form>
    				    	</div>
    				  	</li>
    				</ul>
    			</div>
            </div>
		</div>
	</div>
	<br/>
	<form class="form" action="" method="">
        <div class="row">
            <div class="column small-24">
                <div class="row">
        			<div class="column small-24">
        				<div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-uno.png" alt="" />
                            </div>
        					<div class="media-object-section">
        						<div class="titulo">
        							Tipo de Casillero
        						</div>
        					</div>
        				</div>
        			</div>
        			<div class="column small-24 centrado">
                        <div class="row">
                            <div class="column small-24 margen-abajo padding-none">
            				    <div class="row">
                                    <div class="column small-24 medium-5 large-3">
                                        <label>Modalidad</label>
                                    </div>
                                    <div class="column small-24 medium-19 large-21">
                                        <div class="content-radio">
                                            <input ng-model="f.modalidad" ng-click="consultarTipoIdentificion()" type="radio" name="modalidad" value="personal" class="check-toggle" /><label class="text-small">Personal (Factura a titulo Personal)</label>
                                        </div>
                                        <div class="content-radio">
                                            <input ng-model="f.modalidad" ng-click="consultarTipoIdentificion()" type="radio" name="modalidad" value="corporativo" class="check-toggle" /><label class="text-small">Corporativo (Factura a su Nit o Rut)</label>
                                        </div>
                                    </div>
                                </div>
            				</div>
                        </div>

                        <div class="row">
                            <div class="column small-24 padding-none">
                                <div class="row">
                                    <div class="column small-24 medium-12 large-12">
                                        <label>Tipo de Identificación</label>
                                        <select ng-model="f.tipo_identificacion" ng-options="r.label for r in ers.tipos_identificacion track by r.data">
                                            <option value="" selected disabled >Selecciona</option>
                                        </select>
                                    </div>
                                    <div class="column small-24 medium-12 large-12">
                                        <label>Identificación</label>
                                        <input ng-model="f.identificacion" type="text"/>
                                    </div>
                                    <div ng-if="f.modalidad == 'corporativo'" class="column small-24 medium-24 large-24">
                                        <label>Nombre de la empresa:</label>
                                        <input ng-model="f.nombre_empresa" type="text"/>
                                    </div>
                                </div>
                            </div>
                        </div>
        			</div>
        		</div>
            </div>
        </div>

		<br/>

        <div class="row">
            <div class="column small-24">
                <div class="row">
        			<div class="column small-24">
        				<div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-dos.png" alt="" />
                            </div>
        					<div class="media-object-section">
        						<div class="titulo">
        							Información de Contacto
        						</div>
        					</div>
        				</div>
        			</div>
        			<div class="column small-24 centrado">
        				<div class="row">
                            <div class="column small-24 padding-none">
            					<div class="row">
                                    <div class="column small-24 medium-12 large-12">
                						<label>Primer Nombre</label>
                						<input ng-model="f.primer_nombre" type="text"/>
                					</div>
                					<div class="column small-24 medium-12 large-12">
                						<label>Segundo Nombre</label>
                						<input ng-model="f.segundo_nombre" type="text"/>
                					</div>
                                </div>
            				</div>
                        </div>
        				<div class="row">
                            <div class="column small-24 padding-none">
            					<div class="row">
                                    <div class="column small-24 medium-12 large-12">
                						<label>Primer Apellido</label>
                						<input ng-model="f.primer_apellido" type="text"/>
                					</div>
                					<div class="column small-24 medium-12 large-12">
                						<label>Segundo Apellido</label>
                						<input ng-model="f.segundo_apellido" type="text"/>
                					</div>
                                </div>
            				</div>
                        </div>
                        <div class="row">
                            <div class="column small-24 padding-none">
                                <div class="row">
                                    <div class="column small-24 medium-4 large-3">
                						<label>Sexo</label>
                					</div>
                					<div class="column small-24 medium-6 large-4">
                                        <div class="content-radio">
                                            <input ng-model="f.sexo" type="radio" name="sexo" value="f" class="check-toggle" /><label>Femenino</label>
                                        </div>
                					</div>
                					<div class="column small-24 medium-6 large-4 end">
                                        <div class="content-radio">
                                            <input ng-model="f.sexo" type="radio" name="sexo" value="m" class="check-toggle" /><label>Masculino</label>
                                        </div>
                					</div>
                                </div>
                            </div>
                        </div>

        				<div class="row">
        					&nbsp;
        				</div>
                        <div class="row">
                            <div class="column small-24 padding-none">
            					<div class="row">
                                    <div class="column small-24 medium-8 large-8">
                						<label>Año Nacimiento</label>
                                        <select ng-model="f.ano_nacimiento" ng-options="r.label for r in ers.anos track by r.data">
                                            <option value="" selected disabled >Selecciona</option>
                                        </select>
                					</div>
                					<div class="column small-24 medium-8 large-8">
                						<label>Mes Nacimiento</label>
                                        <select ng-model="f.mes_nacimiento" ng-options="r.label for r in ers.meses track by r.data">
                                            <option value="" selected disabled >Selecciona</option>
                                        </select>
                					</div>
                					<div class="column small-24 medium-8 large-8">
                						<label>Día Nacimiento</label>
                                        <select ng-model="f.dia_nacimiento" ng-options="r.label for r in ers.dias track by r.data">
                                            <option value="" selected disabled >Selecciona</option>
                                        </select>
                					</div>
                                </div>
            				</div>
                        </div>

                        <div class="row">
                            <div class="column small-24 padding-none">
            					<div class="row">
                                    <div class="column small-24 medium-12 large-12">
                						<label>Teléfono Fijo</label>
                						<input ng-model="f.telefono_fijo" type="text"/>
                					</div>
                					<div class="column small-24 medium-12 large-12">
                						<label>Teléfono Celular</label>
                						<input ng-model="f.telefono_celular" type="text"/>
                					</div>
                                </div>
            				</div>
                        </div>

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

		<br/>

        <div class="row">
            <div class="column small-24">
                <div class="row">
        			<div class="column small-24">
        				<div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-cuatro.png" alt="" />
                            </div>
        					<div class="media-object-section">
        						<div class="titulo">
        							Dirección de Entrega
        						</div>
        					</div>
        				</div>
        			</div>
        			<div class="column small-24 centrado">
        				<div class="row">
                            <div class="column small-24 padding-none">
            					<div class="row">
                                    <div class="column small-24">
                						<label>Departamento</label>
                                        <select ng-model="f.id_departamento" ng-options="r.label for r in ers.departamentos track by r.data">
                                            <option value="" selected disabled >Selecciona</option>
                                        </select>
                					</div>
                					<div class="column small-24">
                						<label>Ciudad</label>
                                        <select ng-model="f.id_ciudad" ng-options="r.label for r in ers.ciudades track by r.data">
                                            <option value="" selected disabled >Selecciona</option>
                                        </select>
                					</div>
                					<div class="column small-24">
                						<label>Dirección</label>
                						<input ng-model="f.direccion" type="text"/>
                						<br/>
                					</div>

                					<div class="column small-24">
                						<input type="button" class="button submit" value="Actualizar Datos" ng-click="actualizarPerfil()"/>
                					</div>
                                </div>
            				</div>
                        </div>
        			</div>
        		</div>
            </div>
        </div>

	</form>
</div>
<br/>
<br/>
<script type="text/javascript">
$('.accordion-title').click(function() {
       var src = ($(this).children(".icono-amp").attr('src') === template_url + '/img/icon-mas.png')
          ? template_url + '/img/icon-menos.png'
          : template_url + '/img/icon-mas.png';
       $(this).children(".icono-amp").attr('src', src);
  });
</script>
{% include 'part_footer.html' %}