{% extends 'base.html.twig' %}

{% block body %}

	<nav class="breadcrumb bg-white push">
		<a class="breadcrumb-item" href="{{ path('home')}}">{{ 'Início'|trans }}</a>
		{% if app.user.grupo.id == utilizador.grupo.id %}
		<span class="breadcrumb-item active">{{ 'Meu perfil'|trans }}</span>
		{% else %}
		<a class="breadcrumb-item" href="{{ path('cliente_index')}}">{{ 'Clientes'|trans }}</a>
		<span class="breadcrumb-item active">{{ utilizador.nome }}</span>
		{% endif %}
	</nav>
	<div class="block">
		<div class="block-header block-header-default">
			<h3 class="block-title">{{ 'Perfil'|trans }}</h3>
		</div> 
		<div class="block-content table-responsive">
			{% if utilizador.imagem != ''%}
				<img class="img-avatar" src="{{ asset('uploads/utilizadores/' ~ utilizador.imagem) }}" alt="" style="width:100px;height:100px"><br><br>
			{% endif %}
			<table class="table">
				<tbody>
					<tr>
						<th>{{ 'Nome'|trans }}:</th>
						<td>{{ utilizador.nome }}</td>
					</tr>
					<tr>
						<th>{{ 'Username'|trans }}:</th>
						<td>{{ utilizador.username }}</td>
					</tr>
					<tr>
						<th>{{ 'Email'|trans }}:</th>
						<td>{{ utilizador.email }}</td>
					</tr>
					{% if utilizador.email2 %}
					<tr>
						<th>{{ 'Email'|trans }} 2:</th>
						<td>{{ utilizador.email2}}</td>
					</tr>		
					{% endif %}
					{% if utilizador.email3 %}
					<tr>
						<th>{{ 'Email'|trans }} 3:</th>
						<td>{{ utilizador.email3}}</td>
					</tr>			
					{% endif %}
					<tr>
						<th>{{ 'Contacto'|trans }}:</th>
						<td>{{ utilizador.contacto }}</td>
					</tr>					
					{% if utilizador.contacto2 %}
					<tr>
						<th>{{ 'Contacto'|trans }} 2:</th>
						<td>{{ utilizador.contacto2}}</td>
					</tr>		
					{% endif %}
					{% if utilizador.contacto3 %}
					<tr>
						<th>{{ 'Contacto'|trans }} 3:</th>
						<td>{{ utilizador.contacto3}}</td>
					</tr>			
					{% endif %}
					<tr>
						<th>{{ 'Morada'|trans }}:</th>
						<td>{{ utilizador.morada }}</td>
					</tr>
					<tr>
						<th colspan="2">
							<div class="btn-group" role="group" aria-label="btnGroup2"> 
								<a href="{{ path('cliente_edit', {'token': utilizador.token}) }}" class="btn btn-sm btn-secondary">{{ 'Editar'|trans }}</a>
								<a href="{{ path('cliente_password', {'token': utilizador.token}) }}" class="btn btn-sm btn-secondary">{{ 'Alterar Password'|trans }}</a>
								{% if app.user.grupo.id < 3 %}
								<a href="{{ path('cliente_credenciais', {'token': utilizador.token}) }}" class="btn btn-sm btn-secondary" onclick="return confirm('Enviar email com credenciais ao cliente?');">Enviar Credenciais</a>
								{% endif %}
							</div>
						</th>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="block">
		<div class="block-header block-header-default">
			<h3 class="block-title">{{ 'Transportes'|trans }}</h3>
		</div>
		<div class="block-content block-content-full">
			<div class="dataTables_wrapper dt-bootstrap4 no-footer">
                <div class="row">
                    <div class="col-sm-12 table-responsive">
                        <table id="t_transportes" class="table table-bordered table-striped table-vcenter" role="grid" aria-describedby="DataTables_Table_1_info">
							<thead>
								<tr>
									<th>ID Tp</th>
									<th></th>
									<th>{{ 'Data de Carga'|trans }}</th>
									<th>{{ 'Local de Carga'|trans }}</th>
									<th>{{ 'Local de Descarga'|trans }}</th>
									{% if app.user.grupo.id < 3 %}
									<th>Fornecedor</th>
									{% endif %}
									<th>{{ 'Opções'|trans }}</th>
								</tr>
							</thead>
							<tbody>
							{% for transporte in utilizador.transportesCliente %}						
								{% if transporte.cancelado == 0%}
									{% if transporte.emCurso == 1 %}
										{% if date(transporte.dataCarga) >= date() %}
											{% set cor = cor_espera %}
										{% else %}										
											{% set cor = cor_transito %}
										{% endif %}
									{% else %}
										{% set cor = cor_concluido %}
									{% endif %}
									<tr>
										<td>{{ transporte.id }}</td>
										<td>
											<svg height="20" width="20">
												<circle cx="10" cy="10" r="8" fill="{{cor}}" />
											</svg> 
										</td>
										<td>{{ transporte.dataCarga|date("Y-m-d H:i")}}</td>
										<td>{{ transporte.localCarga }}</td>
										<td>{{ transporte.localDescarga }}</td>
										{% if app.user.grupo.id < 3 %}
										<td>{{ transporte.fornecedor.nome }}</td>
										{% endif %}
										<td>
											<div class="btn-group" role="group" aria-label="btnGroup2"> 
												<a type="button" class="btn btn-sm btn-secondary" href="{{ path('transporte_show', {'token': transporte.token}) }}">{{ 'Abrir'|trans }}</a>											
											</div>
										</td>									
									</tr>
								{% endif %}
							{% endfor %}
							</tbody>
						</table>	
						<br><br>
						<div class="subtitle">
							<svg height="20" width="20">
								<circle cx="10" cy="10" r="7" fill="{{cor_espera}}" />
							</svg> {{ 'Em Espera'|trans }} -
							<svg height="20" width="20">
								<circle cx="10" cy="10" r="7" fill="{{cor_transito}}" />
							</svg> {{ 'Em Trânsito'|trans }} -
							<svg height="20" width="20">
								<circle cx="10" cy="10" r="7" fill="{{cor_concluido}}" />
							</svg> {{ 'Concluído'|trans }}
						</div>							
                    </div>
                </div>
            </div>
		</div>
	</div>

{% endblock %}
{% block javascripts %}
<script>
$(document).ready(function() {
    $('.m_cliente').addClass("open");
	
	var table = $('#t_transportes').DataTable( {
        "order": [[ 0, "desc" ]]
    });
} );
</script>
{% endblock %}
{% block stylesheets %}

{% endblock %}