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

{% block body %}

	<nav class="breadcrumb bg-white push">
		<a class="breadcrumb-item" href="{{ path('home')}}">Início</a>
		<a class="breadcrumb-item" href="{{ path('transporte_index')}}">Transportes</a>
		<span class="breadcrumb-item active">Trânsito</span>
	</nav>
	<div class="block">
        <div class="block-header block-header-default">
            <h3 class="block-title">Transportes em Trânsito</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_transito" class="table table-bordered table-striped table-vcenter" role="grid" aria-describedby="DataTables_Table_1_info">
							<thead>
								<tr>
									<th>ID</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 %}
								<tr>
									<td>{{ transporte.id }}</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>					
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
<script>
$(document).ready(function() {
    $('.m_transporte').addClass("open");
    $('.m_transporte_transito').addClass("active");
	
	var table = $('#t_transito').DataTable( {
		"stateSave": true,
        "order": [[ 0, "desc" ]],
		"columns": [
			{ "width": "5%" },
			null,
			{ "width": "15%" },
			{ "width": "25%" },
			{ "width": "25%" },
			null,
			null,
			null,
		],
    });
} );
</script>
{% endblock %}

{% block stylesheets %}
{% endblock %}