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

{% block body %}

	<nav class="breadcrumb bg-white push">
		<a class="breadcrumb-item" href="{{ path('home')}}">Início</a>
		<span class="breadcrumb-item active">Transportes</span>
	</nav>
	<div class="block">
        <div class="block-header block-header-default">
            <h3 class="block-title">Transportes</h3>
			{% if app.user.grupo.id < 3 %}
			<div class="block-options">
				<a type="button" class="btn btn-sm btn-secondary" href="{{ path('transporte_new')}}">
					<i class="si si-plus"> </i> Criar Transporte
				</a>
			</div>
			{% endif %}
        </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</th>
									<th></th>
									<th>Ordem</th>
									<th>Matrícula</th>
									<th>Data Descarga</th>
									<th>Local Carga</th>
									<th>Local Descarga</th>
									<th>Fornecedor</th>
									<th>Cliente</th>
									<th>Opções</th>
								</tr>
							</thead>
							<tbody>
							{% for transporte in transportes %}
								{% 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.ordem }}</td>
									<td>{{ transporte.matricula.matricula }}</td>
									<td>{{ transporte.dataPrevista|date("Y-m-d H:i")}}</td>
									<td>{{ transporte.localCarga }}</td>
									<td>{{ transporte.localDescarga }}</td>
									<td><a class="text-muted" href="{{ path('fornecedor_show', {'token': transporte.fornecedor.token}) }}">{{ transporte.fornecedor.nome }}</a></td>
									<td><a class="text-muted" href="{{ path('cliente_show', {'token': transporte.cliente.token}) }}">{{ transporte.cliente.nome }}</a></td> 
									<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_transporte').addClass("open");
    $('.m_transporte_listar').addClass("active");
	
	var table = $('#t_transportes').DataTable( {
		"stateSave": true,
        "order": [[ 0, "desc" ]],
		"columns": [
			null,
			null,
			null,
			null,
			{ "width": "12%" },
			null,
			null,
			{ "width": "10%" },
			{ "width": "10%" },
			null,
		]
    });
} );
</script>
{% endblock %}

{% block stylesheets %}
{% endblock %}