@php
    $module = request()->segment(1);
@endphp

<div class="offcanvas-lg offcanvas-start outlook-left-menu outlook-left-menu-md sub-nav" tabindex="-1" id="fileSidebaroffcanvas">
    <div class="card h-100 mb-0 rounded-0 border-0" data-simplebar>
        <ul class="side-nav mt-2">

            {{-- Clientes --}}
            <li class="side-nav-item {{ request()->routeIs('clients.institutional.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarClients"
                aria-expanded="{{ request()->routeIs('clients.institutional.*') ? 'true' : 'false' }}"
                aria-controls="sidebarClients"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="handshake"></i></span>
                    <span class="menu-text">Clientes Institucionais</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('clients.institutional.*') ? 'show' : '' }}" id="sidebarClients">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('clients.institutional.index') ? 'active' : '' }}">
                            <a href="{{ route('clients.institutional.index', ['module' => $module]) }}"
                            class="side-nav-link">
                                <span class="menu-text">Ver Todos</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('clients.institutional.add') ? 'active' : '' }}">
                            <a href="{{ route('clients.institutional.add', ['module' => $module]) }}"
                            class="side-nav-link">
                                <span class="menu-text">Novo Cliente Institucional</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Cliente Faturável --}}
            <li class="side-nav-item {{ request()->routeIs('finance.billing.client.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarBillingClient"
                   aria-expanded="{{ request()->routeIs('finance.billing.client.*') ? 'true' : 'false' }}"
                   aria-controls="sidebarBillingClient"
                   class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="hand-coins"></i></span>
                    <span class="menu-text">Clientes Faturáveis</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.billing.client.*') ? 'show' : '' }}" id="sidebarBillingClient">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.billing.client.index') ? 'active' : '' }}">
                            <a href="{{route('finance.billing.client.index')}}"
                               class="side-nav-link {{ request()->routeIs('finance.billing.client.index') ? 'active' : '' }}">
                                <span class="menu-text">Ver Todos</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.billing.client.addview') ? 'active' : '' }}">
                            <a href="{{route('finance.billing.client.addview')}}"
                               class="side-nav-link {{ request()->routeIs('finance.billing.client.addview') ? 'active' : '' }}">
                                <span class="menu-text">Novo Cliente Faturável</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Projetos --}}
            <li class="side-nav-item {{ request()->routeIs('projects.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarProjects"
                aria-expanded="{{ request()->routeIs('projects.*') ? 'true' : 'false' }}"
                aria-controls="sidebarProjects"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="folder-kanban"></i></span>
                    <span class="menu-text">Projetos</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('projects.*') ? 'show' : '' }}" id="sidebarProjects">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('projects.index') ? 'active' : '' }}">
                            <a href="{{ route('projects.index', ['module' => $module]) }}"
                            class="side-nav-link">
                                <span class="menu-text">Ver Todos</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('projects.addview') ? 'active' : '' }}">
                            <a href="{{ route('projects.addview', ['module' => $module]) }}"
                            class="side-nav-link">
                                <span class="menu-text">Novo Projeto</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Resumo de Cobranças --}}
            <li class="side-nav-item {{ request()->routeIs('finance.billing_summary.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarSummary"
                aria-expanded="{{ request()->routeIs('finance.billing_summary.*') ? 'true' : 'false' }}"
                aria-controls="sidebarSummary"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="folder-closed"></i></span>
                    <span class="menu-text">Resumo de Cobranças</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.billing_summary.*') ? 'show' : '' }}" id="sidebarSummary">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.billing_summary.index') ? 'active' : '' }}">
                            <a href="{{ route('finance.billing_summary.index') }}"
                            class="side-nav-link {{ request()->routeIs('finance.billing_summary.index') ? 'active' : '' }}">
                                <span class="menu-text">Ver Todos</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.billing_summary.add') ? 'active' : '' }}">
                            <a href="{{ route('finance.billing_summary.add') }}"
                            class="side-nav-link {{ request()->routeIs('finance.billing_summary.add') ? 'active' : '' }}">
                                <span class="menu-text">Novo Resumo de Cobrança</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Recorrências --}}
            <li class="side-nav-item {{ request()->routeIs('finance.recurrence.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarRecurrence"
                aria-expanded="{{ request()->routeIs('finance.recurrence.*') ? 'true' : 'false' }}"
                aria-controls="sidebarRecurrence"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="calendar-check"></i></span>
                    <span class="menu-text">Recorrências</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.recurrence.*') ? 'show' : '' }}" id="sidebarRecurrence">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.recurrence.index') ? 'active' : '' }}">
                            <a href="{{ route('finance.recurrence.index') }}"
                            class="side-nav-link {{ request()->routeIs('finance.recurrence.index') ? 'active' : '' }}">
                                <span class="menu-text">Ver Todas</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.recurrence.add') ? 'active' : '' }}">
                            <a href="{{ route('finance.recurrence.add') }}"
                            class="side-nav-link {{ request()->routeIs('finance.recurrence.add') ? 'active' : '' }}">
                                <span class="menu-text">Nova Recorrência</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Cobranças --}}
            <li class="side-nav-item {{ request()->routeIs('finance.charges.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarBilling"
                aria-expanded="{{ request()->routeIs('finance.charges.*') ? 'true' : 'false' }}"
                aria-controls="sidebarBilling"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="badge-dollar-sign"></i></span>
                    <span class="menu-text">Cobranças</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.charges.*') ? 'show' : '' }}" id="sidebarBilling">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.charges.index') ? 'active' : '' }}">
                            <a href="{{ route('finance.charges.index') }}"
                            class="side-nav-link {{ request()->routeIs('finance.charges.index') ? 'active' : '' }}">
                                <span class="menu-text">Ver Todas</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.charges.add') ? 'active' : '' }}">
                            <a href="{{ route('finance.charges.add') }}"
                            class="side-nav-link {{ request()->routeIs('finance.charges.add') ? 'active' : '' }}">
                                <span class="menu-text">Nova Cobrança</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Relatórios --}}
            <li class="side-nav-item {{ request()->routeIs('finance.reports.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarReport"
                aria-expanded="{{ request()->routeIs('finance.reports.*') ? 'true' : 'false' }}"
                aria-controls="sidebarReport"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="chart-no-axes-combined"></i></span>
                    <span class="menu-text">Relatórios</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.reports.*') ? 'show' : '' }}" id="sidebarReport">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.reports.charges') ? 'active' : '' }}">
                            <a href="{{ route('finance.reports.charges') }}"
                            class="side-nav-link {{ request()->routeIs('finance.reports.charges') ? 'active' : '' }}">
                                <span class="menu-text">Relatório de cobranças</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.reports.nfs') ? 'active' : '' }}">
                            <a href="{{ route('finance.reports.nfs') }}"
                            class="side-nav-link {{ request()->routeIs('finance.reports.nfs') ? 'active' : '' }}">
                                <span class="menu-text">Relatório de NFs - Clientes</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Incorp --}}
            <li class="side-nav-item {{ request()->routeIs('finance.incorp.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarIncorp"
                aria-expanded="{{ request()->routeIs('finance.incorp.*') ? 'true' : 'false' }}"
                aria-controls="sidebarIncorp"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="building"></i></span>
                    <span class="menu-text">Incorp</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.incorp.*') ? 'show' : '' }}" id="sidebarIncorp">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.incorp.syncProjectMonday') ? 'active' : '' }}">
                            <a href="{{ route('finance.incorp.syncProjectMonday') }}"
                            class="side-nav-link {{ request()->routeIs('finance.incorp.syncProjectMonday') ? 'active' : '' }}">
                                <span class="menu-text">Sinc - Cobranças</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.incorp.payments') ? 'active' : '' }}">
                            <a href="{{ route('finance.incorp.payments') }}"
                            class="side-nav-link {{ request()->routeIs('finance.incorp.payments') ? 'active' : '' }}">
                                <span class="menu-text">Cobranças Emitidas</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Reembolso --}}
            <li class="side-nav-item {{ request()->routeIs('finance.refunds.index') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarRefund"
                aria-expanded="{{ request()->routeIs('finance.refunds.index') ? 'true' : 'false' }}"
                aria-controls="sidebarRefund"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="rotate-ccw"></i></span>
                    <span class="menu-text">Reembolsos</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.refunds.index') ? 'show' : '' }}" id="sidebarRefund">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.refunds.index') ? 'active' : '' }}">
                            <a href="{{ route('finance.refunds.index') }}"
                            class="side-nav-link {{ request()->routeIs('finance.refunds.index') ? 'active' : '' }}">
                                <span class="menu-text">Colaboradores</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Gestão de NF --}}
            <li class="side-nav-item {{ request()->routeIs('finance.invoices.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarNF"
                aria-expanded="{{ request()->routeIs('finance.invoices.*') ? 'true' : 'false' }}"
                aria-controls="sidebarNF"
                class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="file-text"></i></span>
                    <span class="menu-text">Gestão de NF</span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.invoices.*') ? 'show' : '' }}" id="sidebarNF">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ request()->routeIs('finance.invoices.index') ? 'active' : '' }}">
                            <a href="{{ route('finance.invoices.index') }}"
                            class="side-nav-link {{ request()->routeIs('finance.invoices.index') ? 'active' : '' }}">
                                <span class="menu-text">Painel Inicial</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.invoices.collaborators') ? 'active' : '' }}">
                            <a href="{{ route('finance.invoices.collaborators') }}"
                            class="side-nav-link {{ request()->routeIs('finance.invoices.collaborators') ? 'active' : '' }}">
                                <span class="menu-text">Colaboradores / PJ's</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.invoices.reports') ? 'active' : '' }}">
                            <a href="{{ route('finance.invoices.reports') }}"
                            class="side-nav-link {{ request()->routeIs('finance.invoices.reports') ? 'active' : '' }}">
                                <span class="menu-text">Relatórios</span>
                            </a>
                        </li>
                        <li class="side-nav-item {{ request()->routeIs('finance.invoices.upload') ? 'active' : '' }}">
                            <a href="{{ route('finance.invoices.upload') }}"
                            class="side-nav-link {{ request()->routeIs('finance.invoices.upload') ? 'active' : '' }}">
                                <span class="menu-text">Upload NFs</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li>

            {{-- Pagamentos --}}
            <li class="side-nav-item {{ request()->routeIs('finance.payments.*') ? 'active' : '' }}">
                <a data-bs-toggle="collapse" href="#sidebarPayments" aria-expanded="{{ request()->routeIs('finance.payments.*') ? 'true' : 'false' }}" aria-controls="sidebarPayments" class="side-nav-link">
                    <span class="menu-icon"><i data-lucide="banknote-arrow-up"></i></span>
                    <span class="menu-text"> Pagamentos </span>
                    <span class="menu-arrow"></span>
                </a>
                <div class="collapse {{ request()->routeIs('finance.payments.*') ? 'show' : '' }}" id="sidebarPayments" style="">
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ (request()->routeIs('finance.payments.collaborators.*') || request()->routeIs('finance.payments.view.recurrence.snapshot')) ? 'active' : '' }}">
                            <a data-bs-toggle="collapse" href="#paymentCollab" aria-expanded="{{ (request()->routeIs('finance.payments.collaborators.*') || request()->routeIs('finance.payments.view.recurrence.snapshot')) ? 'true' : 'false' }}" aria-controls="paymentCollab" class="side-nav-link">
                                <span class="menu-text"> Colaboradores </span>
                                <span class="menu-arrow"></span>
                            </a>
                            <div class="collapse {{ (request()->routeIs('finance.payments.collaborators.*') || request()->routeIs('finance.payments.view.recurrence.snapshot')) ? 'show' : '' }}" id="paymentCollab">
                                <ul class="sub-menu">
                                    <li class="side-nav-item {{ request()->routeIs('finance.payments.collaborators.recurrence') ? 'active' : '' }}">
                                        <a href="{{ route('finance.payments.collaborators.recurrence') }}" class="side-nav-link">
                                            <span class="menu-text"> Recorrência </span>
                                        </a>
                                    </li>
                                    <li class="side-nav-item">
                                        <a data-bs-toggle="collapse" href="#paymentsSnap" aria-expanded="{{ (request()->routeIs('finance.payments.view.recurrence.snapshot') || request()->routeIs('finance.payments.collaborators.awards')) ? 'true' : 'false' }}" aria-controls="paymentsSnap" class="side-nav-link">
                                            <span class="menu-text"> Snapshot </span>
                                            <span class="menu-arrow"></span>
                                        </a>
                                        <div class="collapse {{ (request()->routeIs('finance.payments.collaborators.snapshot.*')) ? 'show' : '' }}" id="paymentsSnap">
                                            <ul class="sub-menu">
                                                <li class="side-nav-item {{ request()->routeIs('finance.payments.collaborators.snapshot.recurrence') ? 'active' : '' }}">
                                                    <a href="{{ route('finance.payments.collaborators.snapshot.recurrence') }}"
                                                    class="side-nav-link {{ request()->routeIs('finance.payments.collaborators.snapshot.recurrence') ? 'active' : '' }}">
                                                        <span class="menu-text">Recorrência</span>
                                                    </a>
                                                </li>
                                                <li class="side-nav-item {{ request()->routeIs('finance.payments.collaborators.snapshot.awards') ? 'active' : '' }}">
                                                    <a href="{{ route('finance.payments.collaborators.snapshot.awards') }}" class="side-nav-link {{ request()->routeIs('finance.payments.collaborators.snapshot.awards') ? 'active' : '' }}">
                                                        <span class="menu-text">Prêmio</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                    <ul class="sub-menu">
                        <li class="side-nav-item {{ (request()->routeIs('finance.payments.internal.*')) ? 'active' : '' }}">
                            <a data-bs-toggle="collapse" href="#paymentInstitutional" aria-expanded="{{ (request()->routeIs('finance.payments.internal.*')) ? 'true' : 'false' }}" aria-controls="paymentInstitutional" class="side-nav-link">
                                <span class="menu-text"> Interno </span>
                                <span class="menu-arrow"></span>
                            </a>
                            <div class="collapse {{ (request()->routeIs('finance.payments.internal.*')) ? 'show' : '' }}" id="paymentInstitutional">
                                <ul class="sub-menu">
                                    <li class="side-nav-item {{ request()->routeIs('finance.payments.internal.expenses') ? 'active' : '' }}">
                                        <a href="{{ route('finance.payments.internal.expenses') }}" class="side-nav-link">
                                            <span class="menu-text"> Despesas </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>

            
            {{-- Configurações --}}
            <li class="side-nav-item {{ request()->routeIs('finance.settings') ? 'active' : '' }}">
                <a href="{{ route('finance.settings') }}"
                class="side-nav-link {{ request()->routeIs('finance.settings') ? 'active' : '' }}">
                    <span class="menu-icon"><i data-lucide="cog"></i></span>
                    <span class="menu-text">Configurações</span>
                </a>
            </li>
        </ul>
        
        <div id="cron-update" class="px-3 py-3 border-top">
            <div class="bg-light bg-opacity-50 p-2">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-2">
                        <button id="btn_sync_finance" class="btn btn-icon btn-sm btn-primary" data-bs-toggle="tooltip" title="Sincronizar agora">
                            <span class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
                            <i data-lucide="refresh-cw"></i>
                        </button>
                        <div class="d-flex align-items-center text-muted fs-xs">
                            <small id="cron-counter" class="text-muted">
                                Próxima sinc: <span class="next_sinc">00H • 00h 00m 00s</span><br>
                                Última sinc: <span class="last_sinc">--</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Sincronização -->
<div class="modal inmodal fade" id="syncModal" tabindex="-1" role="dialog" aria-labelledby="syncModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <h4 class="modal-title" id="syncModalLabel">Sincronização de Dados</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <!-- Estado de carregamento -->
                <div id="syncModalLoading" class="d-flex align-items-center gap-2 w-100 justify-content-center">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    <span>Carregando atualizações pendentes...</span>
                </div>

                <!-- Conteúdo com a lista de atualizações -->
                <div id="syncModalContent" class="d-none">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th class="text-muted">Tipo</th>
                                    <th class="text-muted">Categoria</th>
                                    <th class="text-muted">Identificador</th>
                                    <th class="text-muted">Descrição</th>
                                </tr>
                            </thead>
                            <tbody id="syncModalTableBody">
                                <tr>
                                    <td colspan="4" class="text-center text-muted">Nenhuma atualização pendente.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" id="syncApplyBtn" class="btn btn-primary">
                    <span class="apply-text">Sincronizar</span>
                    <span class="apply-loading d-none">
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Processando...
                    </span>
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    // Remove leitura de banco via Blade; usa endpoint backend para status
    window.LAST_SYNC = null;

    function isInCronLockWindow(now) {
        const d = new Date(now);
        const startMorning = new Date(d); startMorning.setHours(7, 55, 0, 0);
        const endMorning   = new Date(d); endMorning.setHours(8, 5, 0, 0);
        const startEvening = new Date(d); startEvening.setHours(19, 55, 0, 0);
        const endEvening   = new Date(d); endEvening.setHours(20, 5, 0, 0);
        return (d >= startMorning && d <= endMorning) || (d >= startEvening && d <= endEvening);
    }

    (function () {
        function pad(n) { return n.toString().padStart(2, '0'); }

        // Janela de proteção: 07:55–08:05 e 19:55–20:05
        const CRON_LOCK_MSG = 'Cron executando atualizações. Tente após 8h05 ou 20h05.';

        function getNextSync(now) {
            const d = new Date(now);
            const eight = new Date(d); eight.setHours(8, 0, 0, 0);
            const twenty = new Date(d); twenty.setHours(20, 0, 0, 0);

            if (now < eight) return eight;
            if (now < twenty) return twenty;

            const nextDay = new Date(d);
            nextDay.setDate(d.getDate() + 1);
            nextDay.setHours(8, 0, 0, 0);
            return nextDay;
        }

        function update() {
            const el = document.getElementById('cron-counter');
            if (!el) return;

            const now = new Date();
            const next = getNextSync(now);
            const diffMs = next - now;
            const totalSec = Math.max(0, Math.floor(diffMs / 1000));
            const h = Math.floor(totalSec / 3600);
            const m = Math.floor((totalSec % 3600) / 60);
            const s = totalSec % 60;

            const nextStr = pad(next.getHours()) + 'H';
            const nextText = `${nextStr} • ${pad(h)}h ${pad(m)}m ${pad(s)}s`;

            const nextEl = el.querySelector('.next_sinc');
            const lastEl = el.querySelector('.last_sinc');

            if (nextEl) nextEl.textContent = nextText;
            if (lastEl && window.LAST_SYNC) lastEl.textContent = window.LAST_SYNC;

            // Bloqueia botão principal na janela do cron e ajusta title via jQuery
            var $syncBtn = $('#btn_sync_finance');
            if ($syncBtn.length) {
                var inLock = isInCronLockWindow(now);
                if (inLock) {
                    $syncBtn.prop('disabled', true).attr('title', CRON_LOCK_MSG);
                }
            }
        }

        update();
        setInterval(update, 1000);

        // Busca o last_sync no backend ao carregar
        $.ajax({
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            type: 'POST',
            url: '{{ route('finance.sync.status') }}',
            processData: false,
            contentType: false
        }).done(function(r) {
            if (r && r.success && r.data && r.data.last_sync) {
                window.LAST_SYNC = r.data.last_sync;
                var lastEl = document.querySelector('#cron-counter .last_sinc');
                if (lastEl) lastEl.textContent = window.LAST_SYNC;
            }
        });
    })();

    $('#btn_sync_finance').on('click', function(e) {		
        e.preventDefault();

        // Impede abrir o modal durante a janela de proteção
        if (isInCronLockWindow(new Date())) {
            return;
        }

        var syncModalEl = document.getElementById('syncModal');
        var syncModal = bootstrap.Modal.getOrCreateInstance(syncModalEl);

        // Estado inicial do modal
        $('#syncModalLoading').removeClass('d-none');
        $('#syncModalContent').addClass('d-none');
        $('#syncModalTableBody').html('<tr><td colspan="3" class="text-center text-muted">Carregando atualizações pendentes...</td></tr>');

        // Resetar estado do botão aplicar
        var $applyBtn = $('#syncApplyBtn');
        $applyBtn.prop('disabled', true);
        $applyBtn.find('.apply-text').removeClass('d-none');
        $applyBtn.find('.apply-loading').addClass('d-none');

        syncModal.show();

        // Buscar informações de sincronização
        $.ajax({
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            type: 'POST',
            url: '{{ route('finance.get.sync.info') }}',
            processData: false,
            contentType: false
        }).done(function(response) {
            $('#syncModalLoading').addClass('d-none');
            $('#syncModalContent').removeClass('d-none');

            if (response && response.success && response.data && Array.isArray(response.data.pending_updates)) {
                var updates = response.data.pending_updates || [];
                var rowsHtml = updates.map(item => `
                    <tr>
                        <td class="text-nowrap">${item.type}</td>
                        <td>${item.category}</td>
                        <td>${item.identifier}</td>
                        <td>${item.description}</td>                            
                    </tr>
                    `).join('');

                $('#syncModalTableBody').html(rowsHtml || `
                    <tr>
                        <td colspan="4" class="text-center text-muted">Nenhuma atualização pendente.</td>
                    </tr>
                `);

                // Controla disponibilidade do botão conforme updates e janela do cron
                var hasUpdates = updates.length > 0;
                var inLock = isInCronLockWindow(new Date());
                $applyBtn.off('click');

                if (hasUpdates && !inLock) {
                    $applyBtn.prop('disabled', false).removeAttr('title');

                    $applyBtn.on('click', function(ev) {
                        ev.preventDefault();

                        var $btn = $(this);
                        $btn.prop('disabled', true);
                        $btn.find('.apply-text').addClass('d-none');
                        $btn.find('.apply-loading').removeClass('d-none');

                        // Aplicar sincronização (backend grava last_sync)
                        $.ajax({
                            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                            type: 'POST',
                            url: '{{ route('finance.sync.apply') }}',
                            processData: false,
                            contentType: false
                        }).done(function(resp) {
                            if (resp && resp.success && resp.data && resp.data.last_sync) {
                                window.LAST_SYNC = resp.data.last_sync;
                            }

                            showAlert("successToast", { text: (resp && resp.message) ? resp.message : "Sistema atualizado com sucesso!" });
                            syncModal.hide();

                            setTimeout(function(){ window.location.reload(); }, 1000);
                        }).fail(function(xhr) {
                            var msg = "Erro ao atualizar o sistema.";
                            if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;

                            showAlert({
                                icon: "error",
                                title: "Erro",
                                text: msg
                            });

                            $btn.prop('disabled', false);
                            $btn.find('.apply-text').removeClass('d-none');
                            $btn.find('.apply-loading').addClass('d-none');
                        });
                    });
                } else {
                    // Bloqueia botão aplicar dentro da janela de proteção (ou sem updates)
                    $applyBtn.prop('disabled', true);
                    if (inLock) {
                        $applyBtn.attr('title', CRON_LOCK_MSG);
                    }
                }
            } else {
                $('#syncModalTableBody').html(`
                    <tr>
                        <td colspan="4" class="text-center text-muted">Nenhuma atualização pendente.</td>
                    </tr>
                `);
                $applyBtn.off('click').prop('disabled', true).removeAttr('title');
            }
        }).fail(function(xhr) {
            $('#syncModalLoading').addClass('d-none');
            $('#syncModalContent').removeClass('d-none');

            var msg = "Falha ao coletar informações de sincronização.";
            if (xhr.responseJSON && xhr.responseJSON.message) msg = xhr.responseJSON.message;

            $('#syncModalTableBody').html(`
                <tr>
                    <td colspan="3" class="text-center text-danger">${msg}</td>
                </tr>
            `);

            $applyBtn.prop('disabled', true).removeAttr('title');

            showAlert({
                icon: "error",
                title: "Erro",
                text: msg
            });
        });
    });
</script>