@extends('layouts.app')

@section('title', 'Faturamento Geral | OPME')
@section('topbar_title', '📈 ' . ($titulo ?? 'Faturamento Geral da Empresa'))

@section('topbar_extra_actions')
    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
        <a href="{{ route('opme.divergencia-geral.index') }}" class="btn-ghost-action" title="Ir para Faturamento Retido">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M16 8H8"/><path d="M16 12H8"/><path d="M12 16H8"/></svg>
            <span>Faturamento Retido</span>
        </a>

        <a href="{{ route('opme.faturamento-geral.index', array_merge(request()->query(), ['atualizar' => 1])) }}" class="btn-ghost-action" title="Atualizar dados">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
            <span>Atualizar</span>
        </a>

        <button type="button" class="btn-primary-action" onclick="abrirModalExportacao('{{ route('opme.faturamento-geral.download') }}', {{ json_encode(request()->except(['page'])) }}, { titulo: 'Exportar Faturamento Geral', subtitulo: 'Selecione o escopo e o período para download em Excel', opcoesFaturamento: true })" title="Exportar dados para planilha Excel">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            <span>Download Excel</span>
        </button>
    </div>
@endsection

@section('styles')
<style>
    /* BOTOES TOPBAR ACTIONS */
    .btn-ghost-action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 13px;
        border-radius: 8px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--text-main);
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: var(--shadow-card);
    }
    .btn-ghost-action:hover {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }

    .btn-primary-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 8px;
        background: #16a34a;
        color: #ffffff !important;
        font-size: 0.84rem;
        font-weight: 700;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
    }
    .btn-primary-action:hover {
        background: #15803d;
        transform: translateY(-1px);
    }

    /* CABECALHO DA PAGINA */
    .page-header-card {
        margin-bottom: 20px;
    }
    .page-header-title {
        font-size: 1.45rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .page-header-desc {
        color: var(--text-muted);
        font-size: 0.88rem;
        margin-top: 4px;
    }
    .callout-badge {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        background: rgba(14, 165, 233, 0.08);
        border: 1px solid rgba(14, 165, 233, 0.25);
        padding: 5px 12px;
        border-radius: 8px;
        font-size: 0.80rem;
    }

    /* GRID DE CARDS KPI */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        margin-bottom: 22px;
    }
    .kpi-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 16px 18px;
        box-shadow: var(--shadow-card);
        position: relative;
        overflow: hidden;
        transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .kpi-card:hover {
        transform: translateY(-2px);
        border-color: rgba(0, 0, 0, 0.15);
    }
    .kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--card-accent, #94a3b8);
    }
    .kpi-card.accent-emerald { --card-accent: #10b981; }
    .kpi-card.accent-blue { --card-accent: #3b82f6; }
    .kpi-card.accent-rose { --card-accent: #f43f5e; }
    .kpi-card.accent-amber { --card-accent: #f59e0b; }
    .kpi-card.accent-purple { --card-accent: #8b5cf6; }

    .kpi-label {
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .kpi-value {
        font-size: 1.45rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text-main);
        margin: 6px 0 2px 0;
    }
    .kpi-sub {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    /* CARD DE FILTROS */
    .filter-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 18px 20px;
        box-shadow: var(--shadow-card);
        margin-bottom: 22px;
    }
    .filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }
    .filter-header-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .quick-date-presets {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .btn-preset {
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid var(--border-color);
        padding: 4px 9px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-main);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .btn-preset:hover {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px 14px;
    }
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .form-group label {
        font-size: 0.77rem;
        font-weight: 600;
        color: var(--text-muted);
    }
    .form-control {
        width: 100%;
        padding: 7px 11px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--bg-main);
        color: var(--text-main);
        font-size: 0.83rem;
        transition: border-color 0.2s;
    }
    .form-control:focus {
        border-color: var(--brand-primary);
        outline: none;
    }

    .filter-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
        justify-content: flex-end;
    }
    .btn-submit-filter {
        background: var(--brand-primary);
        color: #ffffff;
        font-weight: 700;
        border: none;
        padding: 8px 18px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.84rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background 0.2s ease;
    }
    .btn-submit-filter:hover {
        background: var(--brand-primary-hover);
    }
    .btn-clear-filter {
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .btn-clear-filter:hover {
        color: var(--text-main);
        border-color: var(--text-muted);
    }

    /* TABELA PRINCIPAL */
    .table-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow-card);
    }
    .table-container {
        width: 100%;
        overflow-x: auto;
    }
    .erp-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.81rem;
        white-space: nowrap;
    }
    .erp-table thead th {
        background: rgba(0, 0, 0, 0.025);
        color: var(--text-muted);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 0.72rem;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
    }
    .erp-table tbody td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-main);
        vertical-align: middle;
    }
    .erp-table tbody tr:hover {
        background: rgba(0, 0, 0, 0.018);
    }

    /* BADGES */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
    .badge-filial-01 { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.25); }
    .badge-filial-06 { background: rgba(168, 85, 247, 0.12); color: #7e22ce; border: 1px solid rgba(168, 85, 247, 0.25); }
    .badge-filial-07 { background: rgba(245, 158, 11, 0.12); color: #b45309; border: 1px solid rgba(245, 158, 11, 0.25); }
    .badge-filial-08 { background: rgba(6, 182, 212, 0.12); color: #0e7490; border: 1px solid rgba(6, 182, 212, 0.25); }

    .badge-op-venda { background: rgba(16, 185, 129, 0.12); color: #047857; border: 1px solid rgba(16, 185, 129, 0.25); }
    .badge-op-devolucao { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.25); }
    .badge-op-servico { background: rgba(14, 165, 233, 0.12); color: #0369a1; border: 1px solid rgba(14, 165, 233, 0.25); }
    .badge-op-remessa { background: rgba(100, 116, 139, 0.12); color: #475569; border: 1px solid rgba(100, 116, 139, 0.25); }
    .badge-op-outros { background: rgba(148, 163, 184, 0.12); color: #475569; border: 1px solid rgba(148, 163, 184, 0.25); }

    /* PAGINACAO */
    .pagination-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        font-size: 0.81rem;
        flex-wrap: wrap;
        gap: 10px;
    }
    .pagination-pages {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .btn-page {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        background: var(--bg-card);
        color: var(--text-main);
        font-weight: 600;
        text-decoration: none;
        font-size: 0.8rem;
    }
    .btn-page:hover {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }
    .btn-page.active {
        background: var(--brand-primary);
        color: #fff;
        border-color: var(--brand-primary);
    }
    .btn-page.disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* ALERTA DE ERRO */
    .alert-error-box {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.25);
        color: #b91c1c;
        padding: 14px 18px;
        border-radius: 10px;
        margin-bottom: 20px;
        font-size: 0.85rem;
    }
</style>
@endsection

@section('content')
<div class="container-fluid" style="padding: 20px 24px;">

    <!-- CABECALHO DA TELA -->
    <div class="page-header-card">
        <div class="page-header-title">
            <span>Faturamento Geral da Empresa</span>
        </div>
        <div class="page-header-desc">
            Consulta analítica das operações de faturamento, vendas e devoluções para conciliação contábil e conferência com o relatório TE070.
        </div>
        <div class="callout-badge">
            <strong>Filiais Físicas Avaliadas:</strong>
            <span class="badge badge-filial-01">01 - ES (Matriz)</span>
            <span class="badge badge-filial-06">06 - SP (Filial)</span>
            <span class="badge badge-filial-07">07 - MG (Filial)</span>
            <span class="badge badge-filial-08">08 - RJ (Filial)</span>
            <span style="color: var(--text-muted); font-size: 0.76rem; margin-left: 6px;">• Tabelas VETENT / VETENI no ERP VIMAN</span>
        </div>
    </div>

    @if ($erroConsulta)
        <div class="alert-error-box">
            <strong>Aviso de Conexão:</strong> {{ $erroConsulta }}
        </div>
    @endif

    <!-- CARDS DE KPIS ANALITICOS -->
    <div class="kpi-grid">
        <!-- KPI 1: Faturamento Líquido -->
        <div class="kpi-card accent-emerald">
            <div class="kpi-label">
                <span>Faturamento Líquido</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
            </div>
            <div class="kpi-value" style="color: #059669;">
                R$ {{ number_format($kpis['total_faturado'], 2, ',', '.') }}
            </div>
            <div class="kpi-sub">
                Receita líquida com deduções
            </div>
        </div>

        <!-- KPI 2: Faturamento Bruto -->
        <div class="kpi-card accent-blue">
            <div class="kpi-label">
                <span>Faturamento Bruto</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
            </div>
            <div class="kpi-value">
                R$ {{ number_format($kpis['total_bruto'], 2, ',', '.') }}
            </div>
            <div class="kpi-sub">
                Total bruto de mercadorias e serviços
            </div>
        </div>

        <!-- KPI 3: Devoluções de Vendas -->
        <div class="kpi-card accent-rose">
            <div class="kpi-label">
                <span>Devoluções de Venda</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div class="kpi-value" style="color: #e11d48;">
                R$ {{ number_format($kpis['total_devolucoes'], 2, ',', '.') }}
            </div>
            <div class="kpi-sub">
                Deduções e retornos abatidos
            </div>
        </div>

        <!-- KPI 4: Total de Notas e Itens -->
        <div class="kpi-card accent-purple">
            <div class="kpi-label">
                <span>Notas / Itens Faturados</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            </div>
            <div class="kpi-value">
                {{ number_format($kpis['total_notas'], 0, ',', '.') }} <span style="font-size: 0.9rem; font-weight: 500; color: var(--text-muted);">NFs</span>
            </div>
            <div class="kpi-sub">
                {{ number_format($kpis['total_itens'], 0, ',', '.') }} produtos movimentados
            </div>
        </div>

        <!-- KPI 5: Ticket Médio -->
        <div class="kpi-card accent-amber">
            <div class="kpi-label">
                <span>Ticket Médio por NF</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>
            </div>
            <div class="kpi-value">
                R$ {{ number_format($kpis['ticket_medio'], 2, ',', '.') }}
            </div>
            <div class="kpi-sub">
                Média por nota emitida
            </div>
        </div>
    </div>

    <!-- CARD DE FILTROS AVANCADOS -->
    <div class="filter-card">
        <div class="filter-header">
            <div class="filter-header-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                <span>Filtros de Pesquisa & Período</span>
            </div>
            <div class="quick-date-presets">
                <button type="button" class="btn-preset" onclick="setPresetDate('mes_atual')">Mês Atual</button>
                <button type="button" class="btn-preset" onclick="setPresetDate('mes_anterior')">Mês Anterior</button>
                <button type="button" class="btn-preset" onclick="setPresetDate('ano_atual')">Ano Atual</button>
            </div>
        </div>

        <form method="GET" action="{{ route('opme.faturamento-geral.index') }}" id="filterForm">
            <div class="filter-grid">
                <!-- Data De -->
                <div class="form-group">
                    <label for="data_de">Data Emissão De:</label>
                    <input type="date" id="data_de" name="data_de" class="form-control" value="{{ $dataDe }}">
                </div>

                <!-- Data Ate -->
                <div class="form-group">
                    <label for="data_ate">Data Emissão Até:</label>
                    <input type="date" id="data_ate" name="data_ate" class="form-control" value="{{ $dataAte }}">
                </div>

                <!-- Filial -->
                <div class="form-group">
                    <label for="filial">Filial Operacional:</label>
                    <select id="filial" name="filial" class="form-control">
                        <option value="">Todas as Filiais (01, 06, 07, 08)</option>
                        @foreach ($filiaisOpme as $cod => $sigla)
                            <option value="{{ $cod }}" {{ $filial === $cod ? 'selected' : '' }}>
                                {{ $cod }} - {{ $sigla }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Categoria de Operação -->
                <div class="form-group">
                    <label for="categoria">Categoria da Operação:</label>
                    <select id="categoria" name="categoria" class="form-control">
                        <option value="faturamento" {{ $categoria === 'faturamento' ? 'selected' : '' }}>Faturamento Geral (Vendas, Devoluções, Serviços, Ativo)</option>
                        <option value="todas" {{ $categoria === 'todas' ? 'selected' : '' }}>Todas as Saídas (Inclui Remessas)</option>
                        <option value="venda" {{ $categoria === 'venda' ? 'selected' : '' }}>1 - Venda de Mercadoria</option>
                        <option value="devolucao" {{ $categoria === 'devolucao' ? 'selected' : '' }}>2 - Devolução de Venda</option>
                        <option value="servico" {{ $categoria === 'servico' ? 'selected' : '' }}>3 - Prestação de Serviço</option>
                        <option value="ativo" {{ $categoria === 'ativo' ? 'selected' : '' }}>4 - Venda de Ativo / Simples Fat</option>
                        <option value="remessa" {{ $categoria === 'remessa' ? 'selected' : '' }}>5 - Remessa / Não Faturamento</option>
                    </select>
                </div>

                <!-- Número da Nota -->
                <div class="form-group">
                    <label for="numero_nota">Número da NF:</label>
                    <input type="text" id="numero_nota" name="numero_nota" class="form-control" placeholder="Ex: 123456" value="{{ $numeroNota }}">
                </div>

                <!-- CFOP -->
                <div class="form-group">
                    <label for="cfop">CFOP:</label>
                    <input type="text" id="cfop" name="cfop" class="form-control" placeholder="Ex: 5102, 6102, 1202" value="{{ $cfop }}">
                </div>

                <!-- Cliente / CNPJ -->
                <div class="form-group">
                    <label for="cliente">Cliente / Hospital / CNPJ:</label>
                    <input type="text" id="cliente" name="cliente" class="form-control" placeholder="Razão social, fantasia ou CNPJ" value="{{ $cliente }}">
                </div>

                <!-- Produto / Referência -->
                <div class="form-group">
                    <label for="produto">Produto / Código / Ref:</label>
                    <input type="text" id="produto" name="produto" class="form-control" placeholder="Código, descrição ou ref." value="{{ $produto }}">
                </div>

                <!-- Vendedor -->
                <div class="form-group">
                    <label for="vendedor">Vendedor / Representante:</label>
                    <input type="text" id="vendedor" name="vendedor" class="form-control" placeholder="Nome ou código do vendedor" value="{{ $vendedor }}">
                </div>

                <!-- Lote Interno -->
                <div class="form-group">
                    <label for="lote">Lote Interno:</label>
                    <input type="text" id="lote" name="lote" class="form-control" placeholder="Ex: 4505930" value="{{ $lote }}">
                </div>
            </div>

            <div class="filter-actions">
                <a href="{{ route('opme.faturamento-geral.index') }}" class="btn-clear-filter">
                    Limpar Filtros
                </a>
                <button type="submit" class="btn-submit-filter">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                    <span>Filtrar Resultados</span>
                </button>
            </div>
        </form>
    </div>

    <!-- TABELA DE RESULTADOS -->
    <div class="table-card">
        <div class="table-container">
            <table class="erp-table">
                <thead>
                    <tr>
                        <th>Filial</th>
                        <th>NF / Série</th>
                        <th>Emissão</th>
                        <th>Categoria</th>
                        <th>CFOP</th>
                        <th>Cliente / Destinatário</th>
                        <th>UF</th>
                        <th>Vendedor</th>
                        <th>Cód. / Ref. Produto</th>
                        <th>Descrição do Produto</th>
                        <th>Lote Interno</th>
                        <th style="text-align: right;">Qtd</th>
                        <th style="text-align: right;">Vlr Unitário</th>
                        <th style="text-align: right;">Vlr Bruto</th>
                        <th style="text-align: right;">Desconto</th>
                        <th style="text-align: right;">Total Item</th>
                        <th style="text-align: right; background: rgba(16, 185, 129, 0.08);">Fat. Líquido</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($faturamento as $item)
                        @php
                            $row = (array) $item;
                            $codEmp = (string) ($row['cod_empresa'] ?? $row['COD_EMPRESA'] ?? '');
                            $filialNome = (string) ($row['filial'] ?? $row['FILIAL'] ?? '');
                            $numNf = (string) ($row['num_nota_fiscal'] ?? $row['NUM_NOTA_FISCAL'] ?? '');
                            $serie = (string) ($row['serie'] ?? $row['SERIE'] ?? '');
                            $dtEmissao = (string) ($row['dt_emissao'] ?? $row['DT_EMISSAO'] ?? '');
                            $grupoFat = (string) ($row['grupo_faturamento'] ?? $row['GRUPO_FATURAMENTO'] ?? '');
                            $cfopItem = (string) ($row['cfop'] ?? $row['CFOP'] ?? '');
                            $nomeCli = (string) ($row['nome_cliente'] ?? $row['NOME_CLIENTE'] ?? '');
                            $ufCli = (string) ($row['uf_cliente'] ?? $row['UF_CLIENTE'] ?? '');
                            $nomeVend = (string) ($row['nome_vendedor'] ?? $row['NOME_VENDEDOR'] ?? '');
                            $codProd = (string) ($row['cod_produto'] ?? $row['COD_PRODUTO'] ?? '');
                            $refProd = (string) ($row['referencia_produto'] ?? $row['REFERENCIA_PRODUTO'] ?? '');
                            $descProd = (string) ($row['descricao_produto'] ?? $row['DESCRICAO_PRODUTO'] ?? '');
                            $loteInterno = (string) ($row['lote_interno'] ?? $row['LOTE_INTERNO'] ?? '');
                            $qtdFat = (float) ($row['qtd_faturada'] ?? $row['QTD_FATURADA'] ?? 0);
                            $vlrUnit = (float) ($row['valor_unitario_bruto'] ?? $row['VALOR_UNITARIO_BRUTO'] ?? 0);
                            $vlrBruto = (float) ($row['valor_bruto'] ?? $row['VALOR_BRUTO'] ?? 0);
                            $vlrDesc = (float) ($row['valor_desconto'] ?? $row['VALOR_DESCONTO'] ?? 0);
                            $vlrTotal = (float) ($row['valor_total_item'] ?? $row['VALOR_TOTAL_ITEM'] ?? 0);
                            $vlrFatLiq = (float) ($row['valor_faturamento_liquido'] ?? $row['VALOR_FATURAMENTO_LIQUIDO'] ?? 0);

                            // Badge de Filial
                            $badgeFilialClass = match ($codEmp) {
                                '1' => 'badge-filial-01',
                                '6' => 'badge-filial-06',
                                '7' => 'badge-filial-07',
                                '8' => 'badge-filial-08',
                                default => 'badge-op-outros',
                            };

                            // Badge de Categoria de Operação
                            $badgeOpClass = match (true) {
                                str_contains($grupoFat, 'DEVOLUÇÃO') => 'badge-op-devolucao',
                                str_contains($grupoFat, 'SERVIÇO') => 'badge-op-servico',
                                str_contains($grupoFat, 'REMESSA') => 'badge-op-remessa',
                                str_contains($grupoFat, 'VENDA') => 'badge-op-venda',
                                default => 'badge-op-outros',
                            };
                        @endphp
                        <tr>
                            <td>
                                <span class="badge {{ $badgeFilialClass }}">
                                    {{ $filialNome }}
                                </span>
                            </td>
                            <td>
                                <strong>{{ $numNf }}</strong>
                                @if ($serie !== '')
                                    <span style="color: var(--text-muted); font-size: 0.74rem;">/ {{ $serie }}</span>
                                @endif
                            </td>
                            <td>{{ $dtEmissao }}</td>
                            <td>
                                <span class="badge {{ $badgeOpClass }}">
                                    {{ $grupoFat }}
                                </span>
                            </td>
                            <td><code>{{ $cfopItem }}</code></td>
                            <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;" title="{{ $nomeCli }}">
                                {{ $nomeCli }}
                            </td>
                            <td><strong>{{ $ufCli }}</strong></td>
                            <td style="max-width: 140px; overflow: hidden; text-overflow: ellipsis;" title="{{ $nomeVend }}">
                                {{ $nomeVend }}
                            </td>
                            <td>
                                <code>{{ $codProd }}</code>
                                @if ($refProd !== '')
                                    <span style="color: var(--text-muted); font-size: 0.74rem; display: block;">{{ $refProd }}</span>
                                @endif
                            </td>
                            <td style="max-width: 220px; overflow: hidden; text-overflow: ellipsis;" title="{{ $descProd }}">
                                {{ $descProd }}
                            </td>
                            <td>
                                @if ($loteInterno !== '')
                                    <span style="font-family: monospace; font-size: 0.78rem; font-weight: 600; color: #1e40af; background: rgba(59, 130, 246, 0.08); padding: 2px 6px; border-radius: 4px;" title="{{ $loteInterno }}">
                                        {{ Str::limit($loteInterno, 20) }}
                                    </span>
                                @else
                                    <span style="color: var(--text-muted); font-size: 0.75rem;">-</span>
                                @endif
                            </td>
                            <td style="text-align: right; font-weight: 600;">
                                {{ number_format($qtdFat, 2, ',', '.') }}
                            </td>
                            <td style="text-align: right;">
                                R$ {{ number_format($vlrUnit, 2, ',', '.') }}
                            </td>
                            <td style="text-align: right;">
                                R$ {{ number_format($vlrBruto, 2, ',', '.') }}
                            </td>
                            <td style="text-align: right; color: #b45309;">
                                {{ $vlrDesc > 0 ? 'R$ ' . number_format($vlrDesc, 2, ',', '.') : '-' }}
                            </td>
                            <td style="text-align: right; font-weight: 600;">
                                R$ {{ number_format($vlrTotal, 2, ',', '.') }}
                            </td>
                            <td style="text-align: right; font-weight: 800; background: rgba(16, 185, 129, 0.04); color: {{ $vlrFatLiq < 0 ? '#b91c1c' : '#059669' }};">
                                R$ {{ number_format($vlrFatLiq, 2, ',', '.') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="17" style="text-align: center; padding: 40px 20px; color: var(--text-muted);">
                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 8px; opacity: 0.5;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                                <div style="font-weight: 700; font-size: 0.95rem; color: var(--text-main);">Nenhum registro de faturamento encontrado</div>
                                <div style="font-size: 0.82rem; margin-top: 4px;">Tente ajustar os filtros de período ou selecionar outra filial operacional.</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- BARRA DE PAGINACAO -->
        @if ($faturamento->total() > 0)
            <div class="pagination-bar">
                <div>
                    Mostrando <strong>{{ $faturamento->firstItem() ?? 0 }}</strong> a <strong>{{ $faturamento->lastItem() ?? 0 }}</strong> de <strong>{{ number_format($faturamento->total(), 0, ',', '.') }}</strong> registros
                </div>
                <div class="pagination-pages">
                    {{-- Botão Anterior --}}
                    @if ($faturamento->onFirstPage())
                        <span class="btn-page disabled">&laquo; Anterior</span>
                    @else
                        <a href="{{ $faturamento->previousPageUrl() }}" class="btn-page">&laquo; Anterior</a>
                    @endif

                    {{-- Página atual / total --}}
                    <span class="btn-page active">
                        Página {{ $faturamento->currentPage() }} de {{ $faturamento->lastPage() }}
                    </span>

                    {{-- Botão Próximo --}}
                    @if ($faturamento->hasMorePages())
                        <a href="{{ $faturamento->nextPageUrl() }}" class="btn-page">Próximo &raquo;</a>
                    @else
                        <span class="btn-page disabled">Próximo &raquo;</span>
                    @endif
                </div>
            </div>
        @endif
    </div>

</div>

<script>
    function setPresetDate(tipo) {
        const inputDe = document.getElementById('data_de');
        const inputAte = document.getElementById('data_ate');
        const now = new Date();

        if (tipo === 'mes_atual') {
            const y = now.getFullYear();
            const m = String(now.getMonth() + 1).padStart(2, '0');
            const lastDay = new Date(y, now.getMonth() + 1, 0).getDate();
            inputDe.value = `${y}-${m}-01`;
            inputAte.value = `${y}-${m}-${String(lastDay).padStart(2, '0')}`;
        } else if (tipo === 'mes_anterior') {
            const prev = new Date(now.getFullYear(), now.getMonth() - 1, 1);
            const y = prev.getFullYear();
            const m = String(prev.getMonth() + 1).padStart(2, '0');
            const lastDay = new Date(y, prev.getMonth() + 1, 0).getDate();
            inputDe.value = `${y}-${m}-01`;
            inputAte.value = `${y}-${m}-${String(lastDay).padStart(2, '0')}`;
        } else if (tipo === 'ano_atual') {
            const y = now.getFullYear();
            inputDe.value = `${y}-01-01`;
            inputAte.value = `${y}-12-31`;
        }
    }
</script>
@endsection