@extends('template_pages.session')

@section('page_title', 'Relatório Cobranças')
@section('page_icon', 'chart-no-axes-combined')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- Daterangepicker Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.css') }}" type="text/css">
<!-- Select Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/select2/select2.min.css') }}">
@endpush

@php 
    $filter = request()->get('filter');
@endphp

@section('content_page')
<div class="card-body pb-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="funnel" class="fs-4"></i>
        <h4 class="mb-0">Filtros</h4>
    </div>
    <div class="row mt-3">
        <div class="col-md-4">
            <label class="form-label">Data de Emissão</label>
            <div class="input-group date_range_ptbr" data-toggle="date-range-picker">
                <span class="input-group-text"><i data-lucide="calendar"></i></span>
                <input type="text" class="form-control" name="issue_date" id="issue_date" placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <label class="form-label">Data de Vencimento</label>
            <div class="input-group date_range_ptbr" data-toggle="date-range-picker">
                <span class="input-group-text"><i data-lucide="calendar"></i></span>
                <input type="text" class="form-control" name="due_date" id="due_date" placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <label class="form-label">Data de Pagamento</label>
            <div class="input-group date_range_ptbr" data-toggle="date-range-picker">
                <span class="input-group-text"><i data-lucide="calendar"></i></span>
                <input type="text" class="form-control" name="payment_date" id="payment_date" placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off">
            </div>
        </div>
        <div class="col-md-12 mt-3">
            <label class="form-label">Status</label>
            <select class="select2 form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Selecionar Status" id="bill_status" name="bill_status">
                <option value="Autorizado">Autorizado</option>
                <option value="Cancelado">Cancelado</option>
                <option value="Contestado">Contestado</option>
                <option value="Em análise">Em análise</option>
                <option value="Em protesto">Em protesto</option>
                <option value="Expirado">Expirado</option>
                <option value="Pago" {{ is_null($filter) ? 'selected' : '' }}>Pago</option>
                <option value="Pago Externamente" {{ is_null($filter) ? 'selected' : '' }}>Pago Externamente</option>
                <option value="Pago com atraso" {{ is_null($filter) ? 'selected' : '' }}>Pago com atraso</option>
                <option value="Parcialmente pago">Parcialmente pago</option>
                <option value="Pendente" {{ ($filter === 'aguardando') ? 'selected' : (is_null($filter) ? 'selected' : '') }}>Pendente</option>
                <option value="Programado">Programado</option>
                <option value="Reembolsado">Reembolsado</option>
                <option value="Vencido" {{ ($filter === 'inadimplentes') ? 'selected' : (is_null($filter) ? 'selected' : '') }}>Vencido</option>
            </select>
        </div>
    </div>
    <div class="row mt-3">
        <div class="d-flex gap-2 col-12 col-lg-auto">
            <a href="javascript:void(0);" class="btn btn-light apply_filters">Aplicar Filtros</a>
            <a href="javascript:void(0);" class="btn btn-dark remove_filters">Limpar Filtros</a>
        </div>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="chart-column-big" class="fs-4"></i>
        <h4 class="mb-0">Resumo</h4>
    </div>
</div>

<div class="card-body pt-0 pb-0" style="flex: none;">
    <div class="row">
        <div class="col-md-3">
            <div class="card bg-light bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Total cobrado</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-dark bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-dollar-sign"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-total-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-total-count">0 cobranças emitidas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Pago</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-success bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-check"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-paid-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-paid-count">0 cobranças pagas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Pendente</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-warning bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-alert"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-pending-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-pending-count">0 cobranças a vencer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-danger bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Vencido</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-danger bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-minus"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-overdue-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-overdue-count">0 cobranças vencidas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="chart-no-axes-combined" class="fs-4"></i>
        <h4 class="mb-0">Resultados</h4>
    </div>
</div>
<div class="card-body">
    <table id="charges-ajax-table" class="table table-custom table-centered table-select table-hover w-100 mb-0">
        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
            <tr class="text-uppercase fs-xxs">
                <th data-table-sort>ID</th>
                <th data-table-sort>Projeto</th>
                <th data-table-sort>Valor</th>  
                <th data-table-sort>Emissão</th>
                <th data-table-sort>Vencimento</th>
                <th data-table-sort>Pago Em</th>
                <th data-table-sort>Tipo Empresa</th>
                <th data-table-sort>Status</th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<div class="card-footer border-0">
    <div class="d-flex justify-content-between align-items-center">
        <div data-table-pagination-info=""></div>
        <div data-table-pagination></div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Daterangepicker Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('assets/scripts/date_picker_pt_br.js') }}"></script>
<!-- Datatables js -->
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.bootstrap5.min.js') }}"></script>
<!-- Select2 Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/select2/select2.min.js') }}"></script>
<!--Select 2 Demo js-->
<script src="{{ asset('assets/inspinia/js/pages/form-select2.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const applyBtn = document.querySelector('.apply_filters');
    const clearBtn = document.querySelector('.remove_filters');
    const issueInput = document.getElementById('issue_date');
    const dueInput = document.getElementById('due_date');
    const paymentInput = document.getElementById('payment_date');
    const statusSelect = document.getElementById('bill_status');

    const summaryEls = {
        totalValue: document.getElementById('summary-total-value'),
        totalCount: document.getElementById('summary-total-count'),
        paidValue: document.getElementById('summary-paid-value'),
        paidCount: document.getElementById('summary-paid-count'),
        pendingValue: document.getElementById('summary-pending-value'),
        pendingCount: document.getElementById('summary-pending-count'),
        overdueValue: document.getElementById('summary-overdue-value'),
        overdueCount: document.getElementById('summary-overdue-count'),
    };

    function getSelectedStatuses() {
        return $('#bill_status').val() || [];
    }

    function parseRange(value) {
        if (!value) return { start: null, end: null };
        const v = String(value).trim();
        if (!v) return { start: null, end: null };
        const parts = v.split(' - ').map(s => s.trim());
        if (parts.length === 2) {
            return { start: parts[0], end: parts[1] };
        } else {
            return { start: v, end: v };
        }
    }

    function renderSummary(s) {
        if (!s) return;
        summaryEls.totalValue.textContent = s.total_value ?? 'R$ 0,00';
        summaryEls.totalCount.textContent = `${s.total_count ?? 0} cobranças emitidas`;
        summaryEls.paidValue.textContent = s.paid_value ?? 'R$ 0,00';
        summaryEls.paidCount.textContent = `${s.paid_count ?? 0} cobranças pagas`;
        summaryEls.pendingValue.textContent = s.pending_value ?? 'R$ 0,00';
        summaryEls.pendingCount.textContent = `${s.pending_count ?? 0} cobranças a vencer`;
        summaryEls.overdueValue.textContent = s.overdue_value ?? 'R$ 0,00';
        summaryEls.overdueCount.textContent = `${s.overdue_count ?? 0} cobranças vencidas`;
    }

    function formatDateBR(d) {
        const dd = String(d.getDate()).padStart(2, '0');
        const mm = String(d.getMonth() + 1).padStart(2, '0');
        const yyyy = d.getFullYear();
        return `${dd}/${mm}/${yyyy}`;
    }

    function setDefaultDueLast60Days() {
        const today = new Date();
        const past = new Date();
        past.setDate(today.getDate() - 60);
        dueInput.value = `${formatDateBR(past)} - ${formatDateBR(today)}`;
    }

    const hasFilter = {{ $filter ? 'true' : 'false' }};
    if(hasFilter == false) {
        setDefaultDueLast60Days();
    }

    // Inicializa DataTable com AJAX + filtros
    var table = $('#charges-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.reports.charges.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: function (d) {
                const issueRange = parseRange(issueInput.value);
                const dueRange = parseRange(dueInput.value);
                const paymentRange = parseRange(paymentInput.value);
                d.issue_start = issueRange.start;
                d.issue_end = issueRange.end;
                d.due_start = dueRange.start;
                d.due_end = dueRange.end;
                d.paid_start = paymentRange.start;
                d.paid_end = paymentRange.end;
                d.statuses = getSelectedStatuses();
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'project', name: 'project' },
            { data: 'value', name: 'value' },
            { data: 'issue_date', name: 'issue_date' },
            { data: 'due_date', name: 'due_date' },
            { data: 'paid_at', name: 'paid_at' },
            { data: 'company_type', name: 'company_type' },
            { data: 'status', name: 'status' },
            { data: 'timestamp_issue_day' },
            { data: 'timestamp_due_date' },
            { data: 'timestamp_paid_at' }
        ],
        order: [[0, 'desc']],
        pageLength: 10,
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        language: {
            url: '{{ asset('assets/inspinia/plugins/datatables/pt_br.json') }}',
            paginate: {
                first: '<i class="ti ti-chevrons-left"></i>',
                previous: '<i class="ti ti-chevron-left"></i>',
                next: '<i class="ti ti-chevron-right"></i>',
                last: '<i class="ti ti-chevrons-right"></i>'
            },
            processing: '',
        },
        columnDefs: [
            { targets: [8, 9, 10], visible: false, searchable: false },
            { targets: 3, orderData: [8] },
            { targets: 4, orderData: [9] },
            { targets: 5, orderData: [10] }
        ],
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    // Atualiza resumo quando a chamada AJAX retornar
    $('#charges-ajax-table').on('xhr.dt', function (e, settings, json) {
        renderSummary(json?.summary || {});
    });

    // Aplicar filtros
    applyBtn.addEventListener('click', function () {
        table.ajax.reload();
    });

    clearBtn.addEventListener('click', function () {
        // Limpa campos de data
        document.getElementById('issue_date').value = '';
        document.getElementById('due_date').value = '';
        document.getElementById('payment_date').value = '';

        // Limpa campo de status (Choices)
        $('#bill_status option').prop('selected', true);
        $('#bill_status').trigger('change');

        // Recarrega tabela
        table.ajax.reload();
    });
});
</script>
@endpush