{% extends "dashboard_base.html" %}

{% load staticfiles %}

{% block extrahead %}
{{block.super}}

<!--Ventana Modal-->
<link rel="stylesheet" href="{% static "modal/jquery-ui.css" %}" media="screen">
<script src="{% static "modal/jquery-1.9.1.js" %}"></script>
<script src="{% static "modal/jquery-ui.js" %}"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />


    <script>
    $(function(){ 

        $(".Modal").bind("click", function(event) {
            $("#dgtic-ex-dialog-div").html( $(this).find('div').html() );
            $("#dgtic-ex-dialog-div").dialog("option", {modal: true}).dialog("open");
            event.preventDefault();
        });
    });
    </script>

<script type="text/javascript">

function eliminar(id, id_dependencia){
 $(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Eliminar": function() {
window.location='/borrar_contacto/'+id +' and '+ id_dependencia;
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}

function editar(id, id_dependencia){
 $(function() {
$( "#dialog-confirm1" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Editar": function() {
window.location='/editar_contacto/'+id +' and '+ id_dependencia;
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}


</script>

{% endblock extrahead%}

{% block breadcrumbs %}

<li class=""><a href="/admin/"><i class="icon-home"></i> Agregar Contacto</a></li>
<li class="active"><a href=""><i class="icon-home"></i> Contactos </a></li>
                            
{% endblock %}

{% block maincontent %}


<div class="row-fluid">
    <div class="span15">
        <i style="background-color:#{{registro.color}}"
        data-original-title="{{registro.nombre}}" rel="tooltip"
        >&nbsp;&nbsp;&nbsp;&nbsp;</i>
{% if messages %}
<div class="messages">
    {% for message in messages %}
    <div{% if message.tags %} class="dgtic-message {{ message.tags }}"{% endif %}>{{ message }}</div>
    {% endfor %}
</div>
{% endif %}  
		<div class="dgtic-panel collapsible">
			<div class="dgtic-panel-header">
				<span class="dgtic-panel-title">
				<i class="icol-grid"></i>Contactos

                {% if contacts %}

				<span class="step-links">
					<select id="rpp" onchange = "window.location.href = '?bscr={{bscr}}&rpp=' + this.value">
                        <option value="5" {% if rpp == '5'%}selected{% endif %}>5</option>
						<option value="10" {% if rpp == '10'%}selected{% endif %}>10</option>
						<option value="20" {% if rpp == '20'%}selected{% endif %}>20</option>
						<option value="50" {% if rpp == '50'%}selected{% endif %}>50</option>
						<option value="100" {% if rpp == '100'%}selected{% endif %}>100</option>
						<option value="250" {% if rpp == '250'%}selected{% endif %}>250</option>
					</select>

					{% if contacts.has_previous %}
					<a href="?page={{ contacts.previous_page_number }}&rpp={{rpp}}& bscr={{bscr}}">Anterior</a>
					{% endif %}

					<span class="current">
						página {{ contacts.number }} de {{ contacts.paginator.num_pages }}.
					</span>

					{% if contacts.has_next %}
					<a href="?page={{ contacts.next_page_number }}&rpp={{rpp}}&bscr={{bscr}}">Siguiente</a>
					{% endif %}
					<input class="search-query" placeholder="Buscar..."
					onkeypress = "
					if (window.event && window.event.keyCode == 13) {
					window.location.href = '?rpp={{rpp}}&bscr='+this.value
				} else if (evn && evn.keyCode == 13) {
				window.location.href = '?rpp={{rpp}}&bscr='+this.value
			}
			"
			value="{{bscr}}"
			>
				</span>

{% endif %}

			</span>
	<div class="dgtic-panel-toggler"><span></span></div></div>
	<div class="dgtic-panel-inner-wrap"><div class="dgtic-panel-content dgtic-table-container">

		<table class="dgtic-table checkable">
			{% if persona %}
			<thead>
				<tr>
					
					<th></th>
					<th>Nombre</th>
					<th>Dependencia</th>
                    {% if user.is_superuser %}
                    <th>Editar</th>
                    <th>Borrar</th>
                    {% endif %}

				</tr>
			</thead>
			<tbody>
				{% for p in persona %}
				<tr>
					<td>
						<ul class="dgtic-summary-stat">
							<li>
								<a href="#">
									<span class="dgtic-summary-icon-1" style="background-color:#FFE100;">
										{% if p.persona.foto != '' %}
										<img class="dgtic-summary-image-1" src="{{ MEDIA_URL }}{{p.persona.foto}}" alt="image">										
										{% endif %}
									</span>

								</a>
							</li>
						</ul>
						
					</td>
					<td>
						
						<a class="Modal" href="#">
						{{p.persona}}
						{{p.persona.apellido_paterno}}
						{{p.persona.apellido_materno}}
						<div id="vm{{p.id}}" style="display:none">
		
							
                            	<div class="dgtic-panel">
                                	
                                    <div class="dgtic-panel-content dgtic-form-container">
                                    	<form class="dgtic-form">
                                        	<div class="dgtic-form-block">
                                        		<div class="dgtic-form-row">    
                                                    <div class="dgtic-form-item">
                                                    	<ul class="dgtic-summary-stat">
                                                    		<li>

                                                    			<span class="dgtic-summary-icon-1" style="background-color:#FFE100;">
                                                    				{% if p.persona.foto != '' %}
                                                                    <img class="dgtic-summary-image-1" src="{{ MEDIA_URL }}{{p.persona.foto}}" alt="image">                                     
                                                                    {% endif %}
                                                    			</span>


                                                    		</li>
                                                    	</ul>
                                                    </div>
                                                    <div class="dgtic-form-item">
                                                       {{p.persona}}
														{{p.persona.apellido_paterno}}
														{{p.persona.apellido_materno}}
                                                    </div>
                                                </div>
                                                
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Dependencia</h5></label>
                                                    	{{p.dependencia}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Direccion:</h5></label>          	
                                                    	{{p.direccion}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Cargo:</h5></label>
                                                    	{{p.cargo}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Correo:</h5></label>          	
                                                    	{{p.correo}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Teléfono:</h5></label>
                                                    	{{p.telefono}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Extención:</h5></label>          	
                                                    	{{p.extencion}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Celular:</h5></label>
                                                    	{{p.celular}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>URL:</h5></label>          	
                                                    	{{p.pagina_web}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>                            
                                                       


						</div>
						</a>
						
					</td>
					<td>
						{{p.dependencia}}						
					</td>
                    {% if user.is_superuser %}
                    <td>
                        <a href="#" onclick ="editar({{p.id}})"><i class = "icol-report"></i></a>
                    </td>
                    <td>
                        <a href="#" onclick = "eliminar({{p.persona.id}}, 0)"><i class="icol-cross"></i></a>
                    </td>
                    {% endif %}
					</tr>
					{%endfor%}
				</tbody>


			

			{% elif contacts %}
			<thead>
				<tr>
					
					<th></th>
					<th>Nombre</th>
					<th>Dependencia</th>

                    {% if user.is_superuser %}
                    <th>Editar</th>
                    <th>Borrar</th>
                    {% endif %}

				</tr>
			</thead>
			<tbody>
				{% for p in contacts %}
				<tr>
					<td>
						<ul class="dgtic-summary-stat">
							<li>
								<a href="#">
									<span class="dgtic-summary-icon-1" style="background-color:#FFE100;">
										{% if p.persona.foto != '' %}
										<img class="dgtic-summary-image-1" src="{{ MEDIA_URL }}{{p.persona.foto}}" alt="image">										
										{% endif %}
									</span>

								</a>
							</li>
						</ul>
						
					</td>
					<td>
						
						<a class="Modal" href="#">
						{{p.persona}}
						{{p.persona.apellido_paterno}}
						{{p.persona.apellido_materno}}
						<div id="vm{{p.id}}" style="display:none">
		
							
                            	<div class="dgtic-panel">
                                	
                                    <div class="dgtic-panel-content dgtic-form-container">
                                    	<form class="dgtic-form">
                                        	<div class="dgtic-form-block">
                                        		<div class="dgtic-form-row">    
                                                    <div class="dgtic-form-item">
                                                    	<ul class="dgtic-summary-stat">
                                                    		<li>

                                                    			<span class="dgtic-summary-icon-1" style="background-color:#FFE100;">
                                                    				{% if p.persona.foto != '' %}
                                                    				<img class="dgtic-summary-image-1" src="{{ MEDIA_URL }}{{p.persona.foto}}" alt="image">
                                                    				{% endif %}
                                                    			</span>


                                                    		</li>
                                                    	</ul>
                                                    </div>
                                                    <div class="dgtic-form-item">
                                                       {{p.persona}}
														{{p.persona.apellido_paterno}}
														{{p.persona.apellido_materno}}
                                                    </div>
                                                </div>
                                                
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Dependencia</h5></label>
                                                    	{{p.dependencia}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Direccion:</h5></label>          	
                                                    	{{p.direccion}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Cargo:</h5></label>
                                                    	{{p.cargo}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Correo:</h5></label>          	
                                                    	{{p.correo}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Teléfono:</h5></label>
                                                    	{{p.telefono}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Extención:</h5></label>          	
                                                    	{{p.extencion}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dgtic-form-row">
                                                <div class="dgtic-form-cols">
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>Celular:</h5></label>
                                                    	{{p.celular}}
                                                    </div>
                                                    <div class="col-4-8">
                                                    	<label class=""><h5>URL:</h5></label>          	
                                                    	{{p.pagina_web}}			
														
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>                            
                                                       


						</div>
						</a>
						
					</td>
					<td>
						{{p.dependencia}}						
					</td>
                    
                    {% if user.is_superuser %}
                    <td>
                        <a href="#" onclick = "editar({{p.id}},{{id_dependencia}})"><i class = "icol-report"></i></a>
                    </td>
                    <td>
                        <a href="#" onclick = "eliminar({{p.persona.id}},{{id_dependencia}})"><i class="icol-cross"></i></a>
                    </td>
                    {% endif %}
					</tr>
					{%endfor%}
				</tbody>
				{% else %}                              
				<tbody>
				<tr>
					<td><h3>Sin Contacto</h3></td>
				</tr>
			</tbody>



			{% endif %}
		</table>
	</div></div>
</div>

</div>




                                        
<div id="dgtic-ex-dialog-div" style="display:none;">
</div>

<div id="dialog-confirm" style="display:none;" title="¡Alerta!" >
¿Seguro que desea eliminar el registro?
</div>

<div id="dialog-confirm1" style="display:none;" title="¡Alerta!" >
¿Seguro que desea editar el registro?
</div>









{% endblock maincontent %}

{% block extralibs %}
{{block.super}}

    <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.timepicker.min.js" %}"></script>
    <script src="{% static "assets/jui/jquery.ui.touch-punch.min.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "assets/jui/css/jquery.ui.all.css" %}" media="screen">
    <script src="{% static "plugins/validate/jquery.validate.min.js" %}"></script>
    <script src="{% static "assets/js/demo/demo.ui.js" %}"></script>

    <script src="{% static "assets/js/demo/demo.form.js"%}"></script>
    <script src="{% static "assets/js/core/dandelion.core.js"%}"></script>
    <script src="{% static "assets/js/core/dandelion.customizer.js"%}"></script>
{% endblock extralibs %}