@extends('template_pages.session')

@section('page_title', 'NFs - Colaborador: ' . ($collaborator->name ?? '-'))
@section('page_icon', 'file-text')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- Choices Plugin CSS-->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/choices/choices.min.css') }}">
<!-- Datatables CSS (optional if already global) -->
{{-- Keep structure; only data hooked via JS --}}
<!-- Select2 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-4">
            <label class="form-label">Tipo de NFs</label>
            <select class="select2 form-control select2-multiple" id="invoice_types" name="invoice_types" data-toggle="select2" multiple="multiple">
                <option value="Serviço Prestado" selected>Serviço Prestado</option>
                <option value="Prêmio" selected>Prêmio</option>
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label">Mês de Referência <small class="text-muted">(escolha 2 meses para definir o intervalo De → Até)</small></label>
            <select class="select2 form-control select2-multiple" id="reference_month" name="reference_month" data-toggle="select2" multiple="multiple">
                <option value="01">Janeiro</option>
                <option value="02">Fevereiro</option>
                <option value="03">Março</option>
                <option value="04">Abril</option>
                <option value="05">Maio</option>
                <option value="06">Junho</option>
                <option value="07">Julho</option>
                <option value="08">Agosto</option>
                <option value="09">Setembro</option>
                <option value="10">Outubro</option>
                <option value="11">Novembro</option>
                <option value="12">Dezembro</option>
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label">Ano</label>
            <select class="select2 form-control select2-multiple" id="reference_year" name="reference_year" data-toggle="select2" multiple="multiple">
                <option value="{{ date('Y') }}" selected>{{ date('Y') }}</option>
                <option value="{{ date('Y') - 1 }}">{{ date('Y') - 1 }}</option>
                <option value="{{ date('Y') - 2 }}">{{ date('Y') - 2 }}</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" id="apply-filters">Aplicar Filtros</a>
            <a href="javascript:void(0);" class="btn btn-dark" id="clear-filters">Limpar Filtros</a>
        </div>
    </div>
</div>

<div class="card-body pt-0 mt-3" 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-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1">{{ $collaborator->name ?? '-' }}</h3>
                            <p class="mb-0 text-muted">Colaborador</p>
                        </div>
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-dark rounded-circle fs-32">
                                <i data-lucide="user"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- cards unchanged -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1" id="user-summary-received-count-number">0</h3>
                            <p class="mb-0 text-muted">NFs Recebidas</p>
                        </div>
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-dark rounded-circle fs-32">
                                <i data-lucide="badge-check"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>    
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1" id="user-summary-total-amount">R$ 0,00</h3>
                            <p class="mb-0 text-muted">Total</p>
                        </div>
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-dark rounded-circle fs-32">
                                <i data-lucide="badge-dollar-sign"></i>
                            </span>
                        </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 pt-0 pb-0" style="flex: none;">
    <table id="invoice-ajax-table" class="table table-custom table-centered table-select table-hover w-100 mb-0" data-collaborator-id="{{ $collaborator->id ?? '' }}">
        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
            <tr class="text-uppercase fs-xxs">
                <th class="text-center" style="width: 1%;"></th>
                <th data-table-sort>Colaborador</th>
                <th data-table-sort>Tipo NF</th>
                <th data-table-sort>Nota Fiscal</th>  
                <th data-table-sort>Valor</th>
                <th data-table-sort>Valor reconhecido (IA)</th>
                <th data-table-sort>Mês Referência</th>
                <th data-table-sort>Recebimento</th>
                <th data-table-sort>Status</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')
<!-- Custom table -->
<script src="{{ asset('assets/inspinia/js/pages/custom-table.js') }}"></script>
<!-- Choises.js Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/choices/choices.min.js') }}"></script>
<!-- Choices Demo Js-->
<script src="{{ asset('assets/inspinia/js/pages/form-choice.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).ready(function () {
    var $tableEl = $('#invoice-ajax-table');
    var collaboratorId = $tableEl.data('collaborator-id');

    const applyBtn = document.getElementById('apply-filters');
    const clearBtn = document.getElementById('clear-filters');
    const invoiceTypesSelect  = document.getElementById('invoice_types');
    const monthSelect         = document.getElementById('reference_month');
    const yearSelect          = document.getElementById('reference_year');

    function getSelectedValues(selectEl) {
        return $(selectEl).val() || [];
    }

    function getSelectedMonthRangeValues(selectEl) {
        const raw = getSelectedValues(selectEl);
        const nums = raw.map(v => parseInt(v, 10)).filter(n => !isNaN(n));
        if (nums.length === 0) return [];
        const min = Math.min(...nums);
        const max = Math.max(...nums);
        const range = [];
        for (let m = min; m <= max; m++) {
            range.push(String(m).padStart(2, '0'));
        }
        return range;
    }

    function preselectCurrentMonthYear() {
        const now = new Date();
        const currentMonthIdx = now.getMonth() + 1;
        const yy = String(now.getFullYear());

        const $month = $(monthSelect);
        const $year = $(yearSelect);
    
        // Seleciona de janeiro até o mês atual
        const monthsArray = ['01'];
        const currentMonthStr = String(currentMonthIdx).padStart(2, '0');
        if (currentMonthStr !== '01') {
            monthsArray.push(currentMonthStr);
        }
        $month.val(monthsArray).trigger('change');
    
        // Seleciona apenas o ano atual
        if ($year.find('option[value="' + yy + '"]').length) {
            $year.val([yy]).trigger('change');
        } else {
            const optYear = new Option(yy, yy, true, true);
            $year.append(optYear).trigger('change');
        }
    }

    // Default: todos os meses até o atual do ano corrente
    preselectCurrentMonthYear();

    var table = $tableEl.DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.invoices.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: function (d) {
                d.collaborator_id = collaboratorId;
                d.contract_types = []; // não usado aqui
                d.invoice_types = getSelectedValues(invoiceTypesSelect);
                d.statuses = []; // não usado aqui
                // Envia meses como intervalo contínuo
                d.months = getSelectedMonthRangeValues(monthSelect);
                d.years  = getSelectedValues(yearSelect);
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'expand', name: 'expand', orderable: false, searchable: false, className: 'text-center' },
            { data: 'collaborator', name: 'collaborator' },
            { data: 'invoice_type', name: 'invoice_type' },
            { data: 'filename', name: 'filename' },
            { data: 'value', name: 'value' },
            { data: 'value_ia', name: 'value_ia' },
            { data: 'month_range', name: 'month_range' },
            { data: 'received_at', name: 'received_at' },
            { data: 'status', name: 'status' },
            { data: 'timestamp_month_range' },
            { data: 'timestamp_received_at' }
        ],
        order: [[1, 'desc']],
        pageLength: 50,
        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: [9, 10], visible: false, searchable: false },
            { targets: 6, orderData: [9] },
            { targets: 7, orderData: [10] }
        ],
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    // Atualiza resumo após cada resposta AJAX (contagem + total conforme filtros)
    table.on('xhr.dt', function (e, settings, json, xhr) {
        var summary = json && json.summary ? json.summary : null;
        if (!summary) return;

        var totalReceived = summary.received && summary.received.count ? summary.received.count : 0;
        $('#user-summary-received-count-number').text(totalReceived);

        var totalReceivedAmount = summary.received && summary.received.amount ? summary.received.amount : 'R$ 0,00';
        $('#user-summary-total-amount').text(totalReceivedAmount);
    });

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

    // Limpar filtros
    clearBtn.addEventListener('click', function () {
        $('#invoice_types option').prop('selected', true);
        $('#invoice_types').trigger('change');
        preselectCurrentMonthYear();
        $tableEl.DataTable().ajax.reload();
    });

    // Toggle de linha com detalhes – mantido
    $('#invoice-ajax-table tbody').on('click', '.toggle-row', function (e) {
        e.preventDefault();

        var $btn = $(this);
        var tr = $btn.closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
            $btn.find('i').attr('data-lucide', 'plus');
        } else {
            table.rows().every(function() {
                if (this.child.isShown()) {
                    this.child.hide();
                    $(this.node()).removeClass('shown');
                }
            });
            $('.toggle-row i').attr('data-lucide', 'plus');

            var data = row.data();
            var invoiceId = $btn.data('id');

            $.ajax({
                url: "{{ route('finance.invoices.details.ajax') }}",
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                data: { invoice_id: invoiceId },
                success: function(response) {
                    var expandedContent = createInvoiceDetailedInfoBox({
                        invoiceId: invoiceId,
                        filepath: data.filepath || response.filepath || '',
                        collaborator: data.collaborator || response.collaborator || '-',
                        invoiceType: data.invoice_type || response.invoice_type || '-',
                        filename: data.filename || response.filename || '-',
                        value: data.value || response.expected_amount || 'R$ 0,00',
                        valueIa: data.value_ia || response.received_amount || '-',
                        monthRange: data.month_range || response.reference_month || '-',
                        receivedAt: data.received_at || response.received_at || '-',
                        statusHtml: data.status || '',
                        statusKey: data.status_key || response.status_key || null,
                        contractType: response.contract_type || '',
                        notificationStage: response.notification_stage ?? 0,
                        notes: response.notes || '',
                        originType: (response.origin && response.origin.type) || '',
                        originReferenceDescription: (response.origin && response.origin.reference_description) || '',
                        originValue: (response.origin && response.origin.value) || ''
                    });

                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">'+expandedContent+'</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }

                    // Carrega o iframe da NF apenas ao abrir os detalhes
                    var $childRow = $(tr).next('tr');
                    $childRow.find('iframe.nf-iframe[data-src]').each(function() {
                        var $ifr = $(this);
                        if (!$ifr.attr('src')) {
                            $ifr.attr('src', $ifr.data('src'));
                        }
                    });
                },
                error: function() {
                    var errorContent = createInvoiceErrorBox();
                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">'+errorContent+'</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    if (typeof lucide !== 'undefined') {
                        lucide.createIcons();
                    }
                }
            });
        }

        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });

    function createInvoiceDetailedInfoBox(options) {
        var defaults = {
            invoiceId: '',
            filename: '-',
            filepath: '',
            value: 'R$ 0,00',
            valueIa: '-',
            monthRange: '-',
            receivedAt: '-',
            statusHtml: '',
            contractType: '',
            notificationStage: 0,
            notes: '',
            originType: '',
            originReferenceDescription: '',
            originValue: ''
        };
        var s = Object.assign({}, defaults, options);

        var hasFile = s.filename && s.filename !== '-' && s.filename.toString().trim() !== '';
        var fileViewerBaseUrl = "{{ url('/file_google') }}";
        var update_nf = "{{ route('finance.invoices.upload') }}/" + s.invoiceId;
        var edit_nf   = "{{ route('finance.invoices.edit') }}/" + s.invoiceId;

        var stageText = {
            0: 'Não enviado',
            1: 'Notificação enviada',
            2: 'Lembrete para envio da nota fiscal enviado',
            3: 'Aviso de prazo final para envio da nota fiscal enviado'
        }[s.notificationStage] || 'Não enviado';

        var statusKey = s.statusKey || null;
        var canForceApprove = statusKey === 'rejected' && hasFile;
        var canReject = ['rejected','received'].includes(statusKey) && hasFile;
        var canReplaceNF = ['rejected','received','cancelled'].includes(statusKey);

        var actionButtons = [];
        if (canForceApprove) {
            actionButtons.push(`<button type="button" class="btn btn-success btn-sm" id="approve_nf" data-id="${s.invoiceId}" data-name="${s.collaborator}">Forçar aprovação</button>`);
        }
        if (canReject) {
            actionButtons.push(`<button type="button" class="btn btn-danger btn-sm" id="reject_nf" data-id="${s.invoiceId}" data-name="${s.collaborator}">Rejeitar</button>`);
        }
        if (canReplaceNF) {
            actionButtons.push(`<a href="${update_nf}" class="btn btn-dark btn-sm">Substituir NF</a>`);
        }
        var buttonsHtml = actionButtons.join('\n');

        var fileSection = `
            <div class="p-3 border rounded bg-light h-100">
                <div class="d-flex align-items-center mb-2">
                    <i data-lucide="${hasFile ? 'file-check' : 'file-x'}" class="me-2 text-primary"></i>
                    <label class="col-form-label fw-bold mb-0">Nota Fiscal</label>
                </div>
                <div class="row">
                    ${hasFile || canReplaceNF ? `
                    <div class="d-flex flex-wrap gap-2">
                        ${buttonsHtml}
                    </div>` : `<div>Aguardando envio da Nota Fiscal.</div>`}
                    ${hasFile ? `
                    <div class="mt-2">
                        <iframe
                            class="nf-iframe w-100"
                            height="600"
                            style="width:100%;height:600px;border:1px solid #dee2e6;border-radius:.25rem;"
                            data-src="${fileViewerBaseUrl}/${s.filepath}"
                        ></iframe>
                    </div>` : ``}
                </div>
            </div>
        `;

        return `
        <div class="container-fluid p-3">
            <div class="row g-2">
                <div class="col-12">
                    ${fileSection}
                </div>
            </div>
            <div class="row g-2 mt-2">
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-light">
                        <div class="d-flex align-items-center mb-2">
                            <i data-lucide="sticky-note" class="me-2 text-primary"></i>
                            <label class="col-form-label fw-bold mb-0">Notas</label>
                        </div>
                        <div>${s.notes || '-'}</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="p-3 border rounded bg-light h-100">
                        <div class="d-flex align-items-center mb-2">
                            <i data-lucide="bell" class="me-2 text-primary"></i>
                            <label class="col-form-label fw-bold mb-0">Notificações</label>
                        </div>
                        <small class="text-muted">Status atual:</small>
                        <span class="ms-2 badge bg-primary">${stageText}</span>
                    </div>
                </div>
            </div>
        </div>`;
    }

    function createInvoiceErrorBox() {
        return `
        <div class="p-3 border rounded bg-light">
            <div class="alert alert-danger py-2 mb-0">
                <i data-lucide="alert-triangle" class="me-2"></i>
                <small>Não foi possível carregar os detalhes desta NF.</small>
            </div>
        </div>`;
    }
});

 // Ações dos botões (mesmas da Index)
$(document).on('click', '#approve_nf', function (e) {
    e.preventDefault();
    var id = $(this).data('id');
    var name = $(this).data('name');

    Swal.fire({
        title: 'Atenção',
        html: "Tem certeza que deseja forçar a aprovação da NFS-e de <strong>" + name + "</strong>?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sim',
        cancelButtonText: 'Cancelar',
        customClass: {
            confirmButton: 'btn btn-success',
            cancelButton: 'btn btn-default',
        }
    }).then(function (result) {
        if (result.isConfirmed) {
            $.ajax({
                url: "{{ route('finance.invoices.aprove.nfs') }}",
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                data: { idinvoice: id },
                success: function (resp) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sucesso',
                        text: (resp && resp.message) ? resp.message : 'Nota fiscal aprovada com sucesso.',
                        confirmButtonText: 'OK',
                        customClass: { confirmButton: 'btn btn-success' }
                    });
                    $('#invoice-ajax-table').DataTable().ajax.reload(null, false);
                },
                error: function () {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erro',
                        text: 'Não foi possível aprovar a NF.',
                        confirmButtonText: 'OK',
                        customClass: { confirmButton: 'btn btn-danger' }
                    });
                }
            });
        }
    });
});

$(document).on('click', '#reject_nf', function (e) {
    e.preventDefault();
    var id = $(this).data('id');
    var name = $(this).data('name');

    Swal.fire({
        title: 'Rejeitar NF',
        html: "Informe o motivo da rejeição da NFS-e de <strong>" + name + "</strong>:",
        input: 'textarea',
        inputPlaceholder: 'Descreva o motivo...',
        inputAttributes: { 'aria-label': 'Motivo da rejeição' },
        showCancelButton: true,
        confirmButtonText: 'Rejeitar',
        cancelButtonText: 'Cancelar',
        customClass: {
            confirmButton: 'btn btn-danger',
            cancelButton: 'btn btn-default',
        },
        showLoaderOnConfirm: true,
        allowOutsideClick: () => !Swal.isLoading(),
        footer: '',
        preConfirm: (value) => {
            if (!value || value.trim() === '') {
                Swal.showValidationMessage('Informe o motivo da reprovação.');
                return false;
            }

            Swal.update({ footer: 'Enviando solicitação. Aguarde...' });

            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: "{{ route('finance.invoices.reject.nfs') }}",
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    data: { idinvoice: id, reason: value },
                    success: function (resp) {
                        resolve(resp);
                    },
                    error: function (xhr) {
                        var msg = (xhr && xhr.responseJSON && xhr.responseJSON.message)
                            ? xhr.responseJSON.message
                            : 'Não foi possível rejeitar a NF.';
                        Swal.update({ footer: '' });
                        Swal.showValidationMessage(msg);
                        reject(new Error(msg));
                    }
                });
            });
        }
    }).then(function (result) {
        if (result.isConfirmed) {
            var resp = result.value;
            Swal.fire({
                icon: 'success',
                title: 'Sucesso',
                text: (resp && resp.message) ? resp.message : 'Nota fiscal rejeitada com sucesso.',
                confirmButtonText: 'OK',
                customClass: { confirmButton: 'btn btn-success' }
            });
            $('#invoice-ajax-table').DataTable().ajax.reload(null, false);
        }
    });
});
</script>
@endpush