@extends('adminlte.app')

@section('content')

<link rel="stylesheet" href="{{ asset('css/tfds.css') }}">
<div class="content-wrapper tfds-root">

    @if ($message = Session::get('success')) <div class="tfds-alert ok">{{ $message }}</div> @endif
    @if ($message = Session::get('error'))   <div class="tfds-alert err">{{ $message }}</div> @endif

    <div class="tfds-header-row">
        <div>
            <h1 class="tfds-h1">Validar Despesas</h1>
            <p class="tfds-sub">Despesas pendentes de validação</p>
        </div>
        <a href="{{ route('despesas.index') }}" class="tfds-btn tfds-btn-ghost"><i class="fas fa-arrow-left"></i> Despesas</a>
    </div>

    <div class="tfds-card">
        @if($despesas->isEmpty())
            <div class="tfds-empty">Nenhuma despesa pendente de validação.</div>
        @else
        <table id="tabelashow" class="tfds-tbl table">
            <thead>
                <tr>
                    <th>ID</th><th>Data</th><th>Autor</th><th>Centro de Custo</th>
                    <th>Descrição</th><th class="r">Valor</th><th>Status</th><th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($despesas as $despesa)
                    <tr>
                        <td>{{ $despesa->id }}</td>
                        <td>{{ $despesa->data ? date('d/m/Y', strtotime($despesa->data)) : '' }}</td>
                        <td>{{ optional($despesa->user)->name }}</td>
                        <td>{{ optional($despesa->centroCusto)->nome_centro_custo }}</td>
                        <td>{{ $despesa->descricao }}</td>
                        <td class="r">€ {{ number_format($despesa->valor, 2, ',', '.') }}</td>
                        <td>
                            <span class="tfds-badge {{ $despesa->status === \App\Models\Despesa::STATUS_AGUARDANDO ? 'info' : 'pend' }}">{{ $despesa->status }}</span>
                        </td>
                        <td class="r">
                            <a href="{{ route('despesas.validar', $despesa) }}" class="tfds-btn tfds-btn-primary tfds-btn-sm"><i class="fas fa-clipboard-check"></i> Validar</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </div>
</div>

<script src={{ asset('/plugins/datatables/jquery.dataTables.min.js') }}></script>
<script src={{ asset('/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}></script>
<script>
    $(function(){
        if ($('#tabelashow tbody tr').length) {
            $('#tabelashow').DataTable({
                "paging": true, "lengthChange": false, "searching": true, "ordering": true,
                "info": true, "autoWidth": false, "responsive": false, "order": [[1, "desc"]],
                "columnDefs": [{ "orderable": false, "targets": 7 }], "pageLength": 10,
                "oLanguage": { "sSearch":"Buscar:", "sZeroRecords":"Nenhum resultado",
                    "sInfo":"Mostrando _START_ a _END_ de _TOTAL_", "sInfoEmpty":"0 registros",
                    "oPaginate":{ "sPrevious":"Anterior", "sNext":"Seguinte" } }
            });
        }
    });
</script>
@endsection