@extends('template_pages.session')

@section('page_title', 'Sincronizar Resumo de Cobranças #' . request()->route('id'))
@section('page_icon', 'folder-closed')
@section('navbar', 'finance.navbar')

@section('filter')
<div class="card-header border-light justify-content-between">
    <div class="d-flex gap-2">
        <div class="app-search">
            <input data-table-search type="search" class="form-control" placeholder="Pesquisar">
            <i data-lucide="search" class="app-search-icon text-muted"></i>
        </div>
    </div>

    <div class="d-flex align-items-center gap-2">

        <span class="me-2 fw-semibold">Filtrar por:</span>

        <!-- Filtro Status -->
        <div class="app-search">
            <select data-table-filter="status" class="form-select form-control my-1 my-md-0">
                <option value="">Status</option>
                <option value="pending">Pendente</option>
                <option value="paid">Pago</option>
            </select>
            <i data-lucide="box" class="app-search-icon text-muted"></i>
        </div>

        <!-- Records Per Page -->
        <div>
            <select data-table-set-rows-per-page class="form-select form-control my-1 my-md-0">
                <option value="5">5</option>
                <option value="10" selected>10</option>
                <option value="15">15</option>
                <option value="20">20</option>
            </select>
        </div>

    </div>
</div>
@endsection

@section('content_page')
<input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
<table class="table table-custom table-centered table-select table-hover w-100 mb-0" id="charges_table">
    <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 data-column="status">Status</th>
            <th data-table-sort>Projeto</th>
            <th data-table-sort>Emissão</th>
            <th data-table-sort>Vencimento</th>
            <th data-table-sort>Cliente Faturável</th>
            <th data-table-sort>Tipo Empresa</th>
            <th data-table-sort>Valor</th>
            <th data-table-sort>Tag</th>
            <th class="text-center" style="width: 1%;">Ações</th>
        </tr>
    </thead>
    <tbody id="charges_table_body">
        <!-- Linhas serão carregadas via AJAX -->
    </tbody>
</table>
<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>
<div class="card-body">
    <div class="border-top border-dashed my-3"></div>
    <div class="row mt-2 px-2">
        <div class="d-flex gap-2 col-12 col-lg-auto">
            <button type="button" id="save_sync" class="btn btn-success">Salvar</button>
            <a href="javascript:void(0);" id="sync_payments" class="btn btn-warning"><i data-lucide="download" class="align-middle me-1 fs-xl"></i> Sincronizar Cobranças</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Custom table -->
<script src="{{ asset('assets/inspinia/js/pages/custom-table.js') }}"></script>
<script>
    (function() {
        const summaryId = {{ $billing_summary->id }};
        const csrf = document.getElementById('csrf_token').value;
        let loadedIds = [];
        let excludedIds = new Set();

        function rowTemplate(r) {
            const editUrl = "{{ route('finance.charges.edit', ['id' => '__ID__']) }}".replace('__ID__', r.id);
            return `
                <tr data-id="${r.id}">
                    <td>${r.id}</td>
                    <td>${r.status}</td>
                    <td>${r.project}</td>
                    <td>${r.issue_date}</td>
                    <td>${r.due_date}</td>
                    <td>${r.client_name}</td>
                    <td>${r.company_type}</td>
                    <td>${r.value}</td>
                    <td>${r.tag}</td>
                    <td>
                        <div class="d-flex justify-content-center gap-1">
                            <a href="javascript:void(0);" class="btn btn-light btn-icon btn-sm rounded-circle" data-remove-row data-id="${r.id}"><i data-lucide="minus" class="fs-lg"></i></a>
                            <a href="${editUrl}" class="btn btn-light btn-icon btn-sm rounded-circle"><i class="ti ti-edit fs-lg"></i></a>
                        </div>
                    </td>
                </tr>
            `;
        }

        function attachRemoveHandlers() {
            document.querySelectorAll('[data-remove-row]').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    const id = parseInt(btn.getAttribute('data-id'));
                    excludedIds.add(id);
                    const tr = btn.closest('tr');
                    if (tr) tr.remove();
                });
            });
        }

        function loadCharges() {
            const tbody = document.getElementById('charges_table_body');
            tbody.innerHTML = '<tr><td colspan="10" class="text-center py-3">Carregando...</td></tr>';
            fetch('{{ route('finance.billing_summary.sync.charges', ['id' => $billing_summary->id]) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf
                },
                body: JSON.stringify({})
            }).then(r => r.json()).then(json => {
                const rows = json.data || [];
                loadedIds = rows.map(r => r.id);
                excludedIds.clear();
                tbody.innerHTML = rows.map(rowTemplate).join('');
                if (window.lucide) window.lucide.createIcons();
                attachRemoveHandlers();
            }).catch(() => {
                tbody.innerHTML = '<tr><td colspan="10" class="text-center text-danger py-3">Falha ao carregar cobranças.</td></tr>';
            });
        }

        function saveSync() {
            const selectedIds = loadedIds.filter(id => !excludedIds.has(id));
            if (selectedIds.length === 0) {
                if (typeof showAlert === 'function') {
                    showAlert({
                        title: 'Atenção!',
                        html: 'Nenhuma cobrança selecionada para salvar.',
                        icon: 'warning',
                        buttonsStyling: false,
                        customClass: { confirmButton: 'btn btn-warning' },
                        confirmButtonText: 'OK'
                    });
                } else {
                    alert('Nenhuma cobrança selecionada para salvar.');
                }
                return;
            }

            const submitBtn = document.getElementById('save_sync');
            const originalText = submitBtn.textContent;
            submitBtn.disabled = true;
            submitBtn.textContent = 'Salvando...';

            fetch('{{ route('finance.billing_summary.sync.save', ['id' => $billing_summary->id]) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf
                },
                body: JSON.stringify({ charge_ids: selectedIds })
            })
            .then(async (r) => {
                const ct = r.headers.get('content-type') || '';
                let json = null;
                try {
                    if (ct.includes('application/json')) {
                        json = await r.json();
                    }
                } catch (e) {}

                if (r.ok) {
                    const successMsg = (function resolveSuccessMessage(resp) {
                        if (resp == null) return null;
                        if (typeof resp === 'string') return resp;
                        if (typeof resp === 'boolean') return resp ? 'Sincronização realizada com sucesso!' : null;
                        if (typeof resp === 'object') {
                            if (typeof resp.message === 'string') return resp.message;
                            if (typeof resp.success === 'string') return resp.success;
                            if (resp.success === true) return 'Sincronização realizada com sucesso!';
                        }
                        return null;
                    })(json);

                    const finalMessage = successMsg || 'Sincronização realizada com sucesso!';

                    if (typeof showAlert === 'function') {
                        showAlert({
                            title: 'Sucesso!',
                            html: finalMessage,
                            icon: 'success',
                            buttonsStyling: false,
                            customClass: { confirmButton: 'btn btn-primary' },
                            confirmButtonText: 'Continuar'
                        }).then(function(result) {
                            if (json && json.redirect) {
                                window.location.href = json.redirect;
                            } else if (result && result.isConfirmed) {
                                window.location.href = '{{ route('finance.billing_summary.index') }}';
                            }
                        });
                    } else {
                        alert(finalMessage);
                        if (json && json.redirect) {
                            window.location.href = json.redirect;
                        } else {
                            window.location.href = '{{ route('finance.billing_summary.index') }}';
                        }
                    }
                } else {
                    let errorMsg = 'Falha ao processar sua solicitação.';
                    if (r.status === 422 && json && json.errors) {
                        let errorList = '';
                        Object.keys(json.errors).forEach(function(field) {
                            (json.errors[field] || []).forEach(function(message) {
                                errorList += '• ' + message + '<br>';
                            });
                        });
                        errorMsg = errorList || errorMsg;
                    } else if (json && (json.error || json.message)) {
                        errorMsg = json.error || json.message;
                    }

                    if (typeof showAlert === 'function') {
                        showAlert({
                            title: 'Erro!',
                            html: errorMsg,
                            icon: 'error',
                            buttonsStyling: false,
                            customClass: { confirmButton: 'btn btn-danger' },
                            confirmButtonText: 'OK'
                        });
                    } else {
                        alert(errorMsg);
                    }
                }
            })
            .catch(() => {
                if (typeof showAlert === 'function') {
                    showAlert({
                        title: 'Erro!',
                        html: 'Erro interno ao salvar sincronização',
                        icon: 'error',
                        buttonsStyling: false,
                        customClass: { confirmButton: 'btn btn-danger' },
                        confirmButtonText: 'OK'
                    });
                } else {
                    alert('Erro interno ao salvar sincronização');
                }
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            });
        }

        document.getElementById('sync_payments').addEventListener('click', loadCharges);
        document.getElementById('save_sync').addEventListener('click', saveSync);

        // Load on page ready
        document.addEventListener('DOMContentLoaded', loadCharges);
    })();
</script>
@endpush