@extends('template_pages.session')

@section('page_title', 'Gestão de NF - Relatórios')
@section('page_icon', 'file-text')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- 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-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>
            @php
                $prevMonth = now()->subMonth()->format('m');
            @endphp
            <select class="select2 form-control select2-multiple" id="reference_month" name="reference_month" data-toggle="select2" multiple="multiple">
                <option value="01" {{ $prevMonth === '01' ? 'selected' : '' }}>Janeiro</option>
                <option value="02" {{ $prevMonth === '02' ? 'selected' : '' }}>Fevereiro</option>
                <option value="03" {{ $prevMonth === '03' ? 'selected' : '' }}>Março</option>
                <option value="04" {{ $prevMonth === '04' ? 'selected' : '' }}>Abril</option>
                <option value="05" {{ $prevMonth === '05' ? 'selected' : '' }}>Maio</option>
                <option value="06" {{ $prevMonth === '06' ? 'selected' : '' }}>Junho</option>
                <option value="07" {{ $prevMonth === '07' ? 'selected' : '' }}>Julho</option>
                <option value="08" {{ $prevMonth === '08' ? 'selected' : '' }}>Agosto</option>
                <option value="09" {{ $prevMonth === '09' ? 'selected' : '' }}>Setembro</option>
                <option value="10" {{ $prevMonth === '10' ? 'selected' : '' }}>Outubro</option>
                <option value="11" {{ $prevMonth === '11' ? 'selected' : '' }}>Novembro</option>
                <option value="12" {{ $prevMonth === '12' ? 'selected' : '' }}>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="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">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1" id="summary-received-count">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-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1" id="summary-total-value">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="invoices-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 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>
<!-- 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.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 preselectCurrentMonthYear() {
        const now = new Date();
        const mm = String(now.getMonth() + 1).padStart(2, '0');
        const yy = String(now.getFullYear());

        const $month = $(monthSelect);
        const $year = $(yearSelect);

        // Mês (Select2)
        if ($month.find('option[value="' + mm + '"]').length) {
            $month.val(mm).trigger('change');
        } else {
            const optMonth = new Option(mm, mm, true, true);
            $month.append(optMonth).trigger('change');
        }

        // Ano (Select2)
        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: current month/year preselected
    preselectCurrentMonthYear();

    // Initialize DataTable with AJAX + filters
    var table = $('#invoices-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.invoices.reports.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: function (d) {
                d.invoice_types  = getSelectedValues(invoiceTypesSelect);
                d.months         = getSelectedValues(monthSelect);
                d.years          = getSelectedValues(yearSelect);
            },
            dataSrc: 'data'
        },
        columns: [
            { data: null, orderable: false, searchable: false, className: 'details-control align-middle', render: function(data, type, row) {
                return '<a class="btn btn-light btn-icon btn-sm rounded-circle toggle-row" data-id="' + row.id + '"><i data-lucide="plus" class="fs-sm"></i></a>';
            }},
            { 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, 'asc']],
        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();
            }
        }
    });

    // Update summary on AJAX response
    $('#invoices-ajax-table').on('xhr.dt', function (e, settings, json) {
        const s = json?.summary || {};
        document.getElementById('summary-received-count').textContent = s.received_count ?? 0;
        document.getElementById('summary-total-value').textContent = s.total_value ?? 'R$ 0,00';
    });

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

    // Clear filters
    clearBtn.addEventListener('click', function () {

        $('#invoice_types option').prop('selected', true);
        $('#invoice_types').trigger('change');

        // Reset month/year to current
        preselectCurrentMonthYear();

        table.ajax.reload();
    });

    // Toggle row details (DataTables child rows) - atualizado com layout/ações da Index
    $('#invoices-ajax-table tbody').on('click', 'a.toggle-row', function (e) {
        e.preventDefault();

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

        // Se já está aberto, fecha e sai
        if (row.child.isShown()) {
            row.child.hide();
            $btn.find('i').attr('data-lucide', 'plus');
            if (typeof lucide !== 'undefined') lucide.createIcons();
            return;
        }

        // Fecha outras linhas
        table.rows().every(function () {
            if (this.child.isShown()) {
                this.child.hide();
                $(this.node()).find('a.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 || 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();
                }
            }
        });
    });

    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' }
                    });
                    $('#invoices-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' }
            });
            $('#invoices-ajax-table').DataTable().ajax.reload(null, false);
        }
    });
});
</script>
@endpush