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

{% block body %}

	<nav class="breadcrumb bg-white push">
		<a class="breadcrumb-item" href="{{ path('home')}}">Início</a>
		{% if app.user.grupo.id == utilizador.grupo.id %}
		<span class="breadcrumb-item active">Meu perfil</span>
		{% else %}
		<a class="breadcrumb-item" href="{{ path('funcionario_index')}}">Funcionários</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</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:</th>
						<td>{{ utilizador.nome }}</td>
					</tr>
					<tr>
						<th>Username:</th>
						<td>{{ utilizador.username }}</td>
					</tr>
					<tr>
						<th>Contacto:</th>
						<td>{{ utilizador.contacto }}</td>
					</tr>
					<tr>
						<th>Email:</th>
						<td>{{ utilizador.email }}</td>
					</tr>
					<tr>
						<th>Morada:</th>
						<td>{{ utilizador.morada }}</td>
					</tr>
					<tr>
						<th colspan="2">
							<div class="btn-group" role="group" aria-label="btnGroup2"> 
								<a href="{{ path('funcionario_edit', {'token': utilizador.token}) }}" class="btn btn-sm btn-secondary">Editar</a>
								<a href="{{ path('funcionario_password', {'token': utilizador.token}) }}" class="btn btn-sm btn-secondary">Alterar Password</a>
							</div>
						</th>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
		<div class="block">
		<div class="block-header block-header-default">
			<h3 class="block-title">Transportes do Funcionário</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>Tp ID</th>
									<th></th>
									<th>Data Carga</th>
									<th>Ordem</th>
									<th>Local Carga</th>
									<th>Local Descarga</th>
									<th>Opções</th>
								</tr>
							</thead>
							<tbody>
							{% for transporte in utilizador.transportesFuncionario %}						
									{% if transporte.cancelado == 1%}
										{% set cor = cor_cancelado %}
									{% elseif 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</a>											
											</div>
										</td>									
									</tr>
							{% 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 -
							<svg height="20" width="20">
								<circle cx="10" cy="10" r="7" fill="{{cor_transito}}" />
							</svg> Em Trânsito -
							<svg height="20" width="20">
								<circle cx="10" cy="10" r="7" fill="{{cor_concluido}}" />
							</svg> Concluído -
							<svg height="20" width="20">
								<circle cx="10" cy="10" r="7" fill="{{cor_cancelado}}" />
							</svg> Cancelado 
						</div>							
                    </div>
                </div>
            </div>
		</div>
	</div>
{% endblock %}
{% block javascripts %}
<script>
$(document).ready(function() {
    $('.m_funcionario').addClass("open");
	
	var table = $('#t_transportes').DataTable( {
        "order": [[ 0, "desc" ]],
		responsive: true
    });
} );
</script>
{% endblock %}
{% block stylesheets %}
{% endblock %}