@extends('layouts.relatorios')

@section('titulo', 'Próximas Contas a Pagar')
@section('page_header', 'Relatórios')
@section('titulo-rel', 'Próximas Contas a Pagar')

@section('breadcrumbs')
    @breadcrumbs(["itens" => ["Dashboard" => ""]])
@endsection

@section('rota-filtro-data', route('relatorio-proximas-contas-pagar', compact('start', 'end')))

@section('tabela')
    <table id="datatable" class="table table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class="text-center">Situação</th>
                <th class="col-table-id">#</th>
                <th>Pagar/Pago a</th>
                <th>Vencimento</th>
                <th>Pagamento</th>
                <th>Valor</th>
            </tr>
        </thead>
        <tbody>
            @foreach($consulta as $item)
                <tr class="{{ $item->diferenca_dias < 0 ? 'text-danger' : '' }}">
                    <td class="text-center" style="font-size: 0.7rem">
                        @if($item->diferenca_dias < 0 && !$item->data_pagamento)
                            <i class="fa fa-exclamation-circle fa-2x text-danger" title="Conta Atrasada" aria-hidden="true"></i>
                        @else
                            <i class="fa fa-clock-o fa-2x text-primary" title="Conta Sem Atrasos" aria-hidden="true"></i>
                        @endif
                    </td>
                    <td>{{$item->id}}</td>
                    <td>{{$item->nome_consultor}}</td>
                    <td>{{date('d/m/Y', strtotime($item->data_vencimento))}}</td>
                    <td>{{$item->data_pagamento ? date('d/m/Y', strtotime($item->data_pagamento)) : ''}}</td>
                    <td>{{number_format($item->total, 2, ",", ".")}}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

@push('js')
    <script class="text/javascript">
        $(document).ready(function() {
            let table = $('#datatable').DataTable();
            table
            .order( [ 1, 'asc'] )
            .draw();
        });
    </script>
@endpush