@extends('layouts.admin-Lti')

@section('title', 'Listagem de Despesas')

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-md-12">
                <h2><i class="fas fa-list"></i> Listagem de Despesas</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item active">Despesas</li>
                </ol>
            </div>
        </div>

        <!-- Filtros -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Filtros</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('gestao-despesas.despesas.index') }}">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="status">Status</label>
                            <select class="form-control" name="status" id="status">
                                <option value="">Todos</option>
                                <option value="pendente" {{ request('status') == 'pendente' ? 'selected' : '' }}>Pendente</option>
                                <option value="aprovado" {{ request('status') == 'aprovado' ? 'selected' : '' }}>Aprovado</option>
                                <option value="rejeitado" {{ request('status') == 'rejeitado' ? 'selected' : '' }}>Rejeitado</option>
                                <option value="pago" {{ request('status') == 'pago' ? 'selected' : '' }}>Pago</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="categoria_id">Categoria</label>
                            <select class="form-control" name="categoria_id" id="categoria_id">
                                <option value="">Todas</option>
                                @foreach($categorias as $categoria)
                                    <option value="{{ $categoria->id }}" {{ request('categoria_id') == $categoria->id ? 'selected' : '' }}>
                                        {{ $categoria->nome }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="data_inicio">Data Início</label>
                            <input type="date" class="form-control" name="data_inicio" id="data_inicio" value="{{ request('data_inicio') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="data_fim">Data Fim</label>
                            <input type="date" class="form-control" name="data_fim" id="data_fim" value="{{ request('data_fim') }}">
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12 text-right">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-filter"></i> Filtrar
                            </button>
                            <a href="{{ route('gestao-despesas.despesas.index') }}" class="btn btn-default">
                                <i class="fas fa-times"></i> Limpar
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Tabela -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Despesas</h3>
                <div class="card-tools">
                    <a href="{{ route('gestao-despesas.despesas.create') }}" class="btn btn-success">
                        <i class="fas fa-plus"></i> Nova Despesa
                    </a>
                </div>
            </div>
            <div class="card-body table-responsive">
                <table id="tabelaDespesas" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Descrição</th>
                            <th>Valor</th>
                            <th>Vencimento</th>
                            <th>Categoria</th>
                            <th>Status</th>
                            <th>anexo</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($despesas as $despesa)
                        <tr>
                            <td>{{ $despesa->descricao }}</td>
                            <td>R$ {{ number_format($despesa->valor, 2, ',', '.') }}</td>
                            <td>{{ $despesa->data_vencimento->format('d/m/Y') }}</td>
                            <td>{{ $despesa->categoria->nome }}</td>
                            <td>
                                <span class="badge badge-{{
                                    $despesa->status == 'pendente' ? 'warning' :
                                    ($despesa->status == 'aprovado' ? 'success' :
                                    ($despesa->status == 'rejeitado' ? 'danger' : 'info'))
                                }}">
                                    {{ ucfirst($despesa->status) }}
                                </span>
                            </td>
                                <td>
                                    @if($despesa->anexo)
                        <a href="{{ asset('storage/' . $despesa->anexo) }}" target="_blank" class="btn btn-sm btn-info" title="Visualizar anexo">
                            <i class="fas fa-paperclip"></i>
                        </a>
                    @else
                        <span class="text-muted">—</span>
                    @endif</td>
                            <td>
                                <a href="{{ route('gestao-despesas.despesas.show', $despesa->id) }}" class="btn btn-sm btn-primary">
                                    <i class="fa fa-eye"></i>
                                </a>
                                @if($despesa->status == 'pendente')
                                <a href="{{ route('gestao-despesas.despesas.edit', $despesa->id) }}" class="btn btn-sm btn-warning">
                                    <i class="fa fa-edit"></i>
                                </a>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center">Nenhuma despesa encontrada</td>
                        </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Total</th>
                            <th id="total_valor"></th>

                            <th>Vencimento</th>
							<th>Categoria</th>
                            <th>Status</th>
                            <th>anexo</th>
                            <th>Ações</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@push('script')

<!-- Inicialização do DataTable -->
<script>
$(document).ready(function() {



    let table = $('#tabelaDespesas').DataTable({
        dom: 'Bfrtip',
        buttons: [
            { extend: 'copy', text: '<i class="fa fa-copy"></i> Copiar', className: 'btn btn-primary' },
            { extend: 'excel', text: '<i class="fa fa-file-excel"></i> Excel', className: 'btn btn-info' },
            { extend: 'pdf', text: '<i class="fa fa-file-pdf"></i> PDF', className: 'btn btn-danger' },
            { extend: 'print', text: '<i class="fa fa-print"></i> Imprimir', className: 'btn btn-success' }
        ],
        responsive: true,
        paging: true,
        lengthChange: true,
        searching: true,
        ordering: true,
        autoWidth: false,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
        language: {
            lengthMenu: "Mostrar _MENU_ registros por página",
            zeroRecords: "Nenhuma despesa encontrada",
            info: "Página _PAGE_ de _PAGES_",
            infoEmpty: "Sem dados disponíveis",
            infoFiltered: "(filtrado de _MAX_ registros totais)",
            search: "Pesquisar:",
            paginate: {
                first: "Primeira",
                last: "Última",
                next: "Próxima",
                previous: "Anterior"
            }
        },
        footerCallback: function (row, data, start, end, display) {
            let api = this.api();
            let total = api
                .column(1, { page: 'current' })
                .data()
                .reduce(function (a, b) {
                    let x = typeof a === 'string' ? parseFloat(a.replace(/[^\d,-]/g, '').replace(',', '.')) : a;
                    let y = typeof b === 'string' ? parseFloat(b.replace(/[^\d,-]/g, '').replace(',', '.')) : b;
                    return x + y;
                }, 0);

            $('#total_valor').html('R$ ' + total.toLocaleString('pt-BR', { minimumFractionDigits: 2 }));
        },
		 initComplete: function() {
                                createColumnFilters(this, [2, 3]);
                            }
    });
});




 function createColumnFilters(datatable, columns) {
                        columns.forEach(colIndex => {
                            const column = datatable.api().column(colIndex);
                            const select = $('<select class="SelectorSerach"><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function() {
                                    const val = $.fn.dataTable.util.escapeRegex($(this).val());
                                    column.search(val ? '^' + val + '$' : '', true, false).draw();
                                });

                            column.data().unique().sort().each((d, j) => {
                                select.append(`<option value="${d}">${d}</option>`);
                            });
                        });
                    }
</script>
@endpush