@extends('template_pages.session')

@section('page_title', 'Relatório NFs - Clientes')
@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

@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-6">
            <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" value="{{ \Carbon\Carbon::now()->startOfMonth()->format('d/m/Y') }} - {{ \Carbon\Carbon::now()->format('d/m/Y') }}">
            </div>
        </div>
        <div class="col-md-6">
            <label class="form-label">Status</label>
            <select class="select2 form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Status ..." id="nfs_status" name="nfs_status">
                <option value="Emitida" selected>Emitida</option>
                <option value="Cancelada" selected>Cancelada</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_filter">Aplicar Filtros</a>
            <a href="javascript:void(0);" class="btn btn-dark clear_filter">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">
            <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">NFs Emitidas</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-issued-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-issued-count">0 NFs emitidas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card bg-dark bg-opacity-20 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">NFs Canceladas</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-x"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-cancelled-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-cancelled-count">0 NFs canceladas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <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">
            <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 pendentes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <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-expired-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-expired-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="nfs-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>Cliente Faturável</th>
                <th data-table-sort>Valor da NF Emitida</th>  
                <th data-table-sort>Emissão</th>
                <th data-table-sort>Tipo Empresa</th>
                <th data-table-sort>Status</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>
<!-- Custom table -->
<script src="{{ asset('assets/inspinia/js/pages/custom-table.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>
<!-- 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>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const applyBtn = document.querySelector('.apply_filter');
    const clearBtn = document.querySelector('.clear_filter');
    const issueInput = document.getElementById('issue_date');
    const statusSelect = document.getElementById('nfs_status');

    function getSelectedStatuses() {
         return $('#nfs_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;
        document.getElementById('summary-issued-value').textContent = s.issued_value ?? 'R$ 0,00';
        document.getElementById('summary-issued-count').textContent = `${s.issued_count ?? 0} NFs emitidas`;
        document.getElementById('summary-cancelled-value').textContent = s.cancelled_value ?? 'R$ 0,00';
        document.getElementById('summary-cancelled-count').textContent = `${s.cancelled_count ?? 0} NFs canceladas`;
        // Novos boxes
        document.getElementById('summary-paid-value').textContent = s.paid_value ?? 'R$ 0,00';
        document.getElementById('summary-paid-count').textContent = `${s.paid_count ?? 0} cobranças pagas`;
        document.getElementById('summary-pending-value').textContent = s.pending_value ?? 'R$ 0,00';
        document.getElementById('summary-pending-count').textContent = `${s.pending_count ?? 0} cobranças pendentes`;
        document.getElementById('summary-expired-value').textContent = s.expired_value ?? 'R$ 0,00';
        document.getElementById('summary-expired-count').textContent = `${s.expired_count ?? 0} cobranças vencidas`;
    }

    // Inicializa DataTable com AJAX + filtros
    var table = $('#nfs-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.reports.nfs.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: function (d) {
                const issueRange = parseRange(issueInput.value);
                d.issue_start = issueRange.start;
                d.issue_end = issueRange.end;
                d.statuses = getSelectedStatuses();
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'project', name: 'project' },
            { data: 'client', name: 'client' },
            { data: 'value', name: 'value' },
            { data: 'issue_date', name: 'issue_date' },
            { data: 'company_type', name: 'company_type' },
            { data: 'status', name: 'status' },
            { data: 'timestamp_issue_day' }
        ],
        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: [7], visible: false, searchable: false },
            { targets: 4, orderData: [7] }
        ],
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

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

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

    // Limpar filtros
    clearBtn.addEventListener('click', function () {
        issueInput.value = '';
        $('#nfs_status option').prop('selected', true);
        $('#nfs_status').trigger('change');
        table.ajax.reload();
    });
});
</script>
@endpush