@extends('adminlte::page')

@section('title', 'Custos extras mensais')

@section('content_header')
@stop

@section('content')
@php
    $statusLabels = [
        'ativa' => 'Ativa',
        'inativa' => 'Inativa',
        'manutencao' => 'Manutenção',
        'erro' => 'Erro',
    ];
    $fmtMoney = static fn (float $v): string => 'R$ '.number_format($v, 2, ',', '.');
@endphp

<div class="dashboard-page dashboard-stagger cem-page">
    <section class="dashboard-hero">
        <div class="dashboard-hero__inner">
            <div>
                <p class="dashboard-hero__eyebrow">Billing · Repasse</p>
                <h1 class="dashboard-hero__title">
                    Custos extras <em>mensais</em>
                </h1>
                <p class="dashboard-hero__subtitle">
                    Registe gasto extra com IA e outros custos repassados a cada instalação, por competência.
                    Visão comercial para fecho mensal e cobrança ao cliente.
                </p>
                <p class="dashboard-hero__meta">
                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
                    Competência atual: <strong>{{ ucfirst($competenciaLabel) }}</strong>
                </p>
            </div>
            <div class="dashboard-hero__actions">
                @can('gestao-write')
                    <button type="submit" form="form-custos-extras" class="btn-dashboard-hero btn-dashboard-hero--primary">
                        <i class="fas fa-save" aria-hidden="true"></i>
                        Salvar mês
                    </button>
                @endcan
                <a href="{{ route('instalacoes.billing-overview') }}" class="btn-dashboard-hero btn-dashboard-hero--ghost">
                    <i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
                    Billing
                </a>
                <a href="{{ route('instalacoes.web.index') }}" class="btn-dashboard-hero btn-dashboard-hero--ghost">
                    <i class="fas fa-server" aria-hidden="true"></i>
                    Instalações
                </a>
            </div>
        </div>
    </section>

    @if(session('success'))
        <div class="dashboard-alert-banner dashboard-alert-banner--success mb-4" role="status">
            <i class="fas fa-check-circle" aria-hidden="true"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if($errors->any())
        <div class="dashboard-alert-banner dashboard-alert-banner--danger mb-4" role="alert">
            <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
            <span>
                @foreach($errors->all() as $erro)
                    {{ $erro }}@if(!$loop->last) · @endif
                @endforeach
            </span>
        </div>
    @endif

    <div class="dashboard-kpi-grid mb-4">
        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--info"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--info">
                    <i class="fas fa-robot" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--money" data-kpi="ia">{{ $fmtMoney($totaisMes['valor_ia']) }}</p>
            <p class="dashboard-kpi__label">IA extra (mês)</p>
        </div>

        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--warning"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--warning">
                    <i class="fas fa-receipt" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--money" data-kpi="outros">{{ $fmtMoney($totaisMes['valor_outros']) }}</p>
            <p class="dashboard-kpi__label">Outros custos (mês)</p>
        </div>

        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--success"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--success">
                    <i class="fas fa-hand-holding-usd" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--money" data-kpi="total">{{ $fmtMoney($totaisMes['valor_total']) }}</p>
            <p class="dashboard-kpi__label">Total de repasse</p>
        </div>

        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--purple"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--purple">
                    <i class="fas fa-building" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value" data-kpi="instalacoes">{{ $totaisMes['instalacoes_com_custo'] }}</p>
            <p class="dashboard-kpi__label">Instalações com custo</p>
        </div>
    </div>

    <div class="dashboard-panel mb-4">
        <div class="dashboard-panel__header">
            <h2 class="dashboard-panel__title">
                <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                Competência · {{ ucfirst($competenciaLabel) }}
            </h2>
        </div>
        <div class="dashboard-panel__body">
            <div class="cem-month-nav mb-3" role="navigation" aria-label="Navegação rápida por mês">
                @foreach($mesesNavegacao as $mes)
                    @php $mesStr = $mes->format('Y-m'); @endphp
                    <a href="{{ route('custos-extras-mensais.index', ['competencia' => $mesStr]) }}"
                       class="cem-month-pill {{ $mesStr === $competencia ? 'is-active' : '' }}">
                        {{ $mes->locale('pt_BR')->translatedFormat('M/y') }}
                    </a>
                @endforeach
            </div>

            <form method="GET" action="{{ route('custos-extras-mensais.index') }}" class="cem-competencia-form">
                <div>
                    <label for="cem-competencia">Ir para outro mês</label>
                    <input type="month" name="competencia" id="cem-competencia" class="form-control" value="{{ $competencia }}">
                </div>
                <button type="submit" class="btn-listagem btn-listagem--primary">
                    <i class="fas fa-search" aria-hidden="true"></i>
                    Abrir competência
                </button>
            </form>
        </div>
    </div>

    @if($resumoMeses->isNotEmpty())
        <div class="dashboard-panel mb-4">
            <div class="dashboard-panel__header">
                <h2 class="dashboard-panel__title">
                    <i class="fas fa-chart-line" aria-hidden="true"></i>
                    Histórico recente
                </h2>
                <span class="text-muted small">Últimos {{ $resumoMeses->count() }} mês(es) com registro</span>
            </div>
            <div class="dashboard-panel__body">
                <div class="cem-history-grid">
                    @foreach($resumoMeses as $resumo)
                        @php
                            $mesResumo = $resumo->competencia instanceof \Carbon\Carbon
                                ? $resumo->competencia->format('Y-m')
                                : \Carbon\Carbon::parse($resumo->competencia)->format('Y-m');
                            $totalResumo = (float) $resumo->total_ia + (float) $resumo->total_outros;
                        @endphp
                        <a href="{{ route('custos-extras-mensais.index', ['competencia' => $mesResumo]) }}"
                           class="cem-history-card {{ $mesResumo === $competencia ? 'is-active' : '' }}">
                            <div class="cem-history-card__month">
                                {{ ucfirst(\Carbon\Carbon::parse($resumo->competencia)->locale('pt_BR')->translatedFormat('F Y')) }}
                            </div>
                            <div class="cem-history-card__total">{{ $fmtMoney($totalResumo) }}</div>
                            <div class="cem-history-card__meta">
                                IA {{ $fmtMoney((float) $resumo->total_ia) }}
                                · Outros {{ $fmtMoney((float) $resumo->total_outros) }}
                                · {{ $resumo->registros }} registro(s)
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    <form method="POST" action="{{ route('custos-extras-mensais.store') }}" id="form-custos-extras">
        @csrf
        <input type="hidden" name="competencia" value="{{ $competencia }}">

        <div class="dashboard-panel mb-4">
            <div class="dashboard-panel__header">
                <h2 class="dashboard-panel__title">
                    <i class="fas fa-list" aria-hidden="true"></i>
                    Valores por instalação
                </h2>
                <span class="text-muted small" id="cem-visible-count">{{ $instalacoes->count() }} instalação(ões)</span>
            </div>
            <div class="dashboard-panel__body">
                <div class="cem-hint">
                    <i class="fas fa-info-circle" aria-hidden="true"></i>
                    <span>
                        Preencha <strong>IA extra</strong> e <strong>Outros</strong> por cliente. Linhas a zero sem observação são removidas ao salvar.
                        Use a busca para focar no fecho comercial do mês.
                    </span>
                </div>

                <div class="cem-toolbar mb-3">
                    <div class="cem-toolbar__filters">
                        <div>
                            <label for="cem-busca">Buscar instalação</label>
                            <input type="search" id="cem-busca" class="form-control" placeholder="Nome ou slug…" autocomplete="off">
                        </div>
                        <div>
                            <label for="cem-filtro-status">Status</label>
                            <select id="cem-filtro-status" class="form-control">
                                <option value="">Todos</option>
                                @foreach($statusLabels as $statusKey => $statusLabel)
                                    <option value="{{ $statusKey }}">{{ $statusLabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label for="cem-filtro-custo">Com custo</label>
                            <select id="cem-filtro-custo" class="form-control">
                                <option value="">Todas</option>
                                <option value="com">Só com valor</option>
                                <option value="sem">Só sem valor</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="cem-table-wrap">
                    <table class="cem-table" id="cem-table">
                        <thead>
                            <tr>
                                <th>Instalação</th>
                                <th>Status</th>
                                <th class="text-right">IA extra (R$)</th>
                                <th class="text-right">Outros (R$)</th>
                                <th class="text-right">Total</th>
                                <th>Observações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($instalacoes as $inst)
                                @php
                                    $custo = $custosPorInstalacao->get($inst->id);
                                    $valorIa = old("registros.{$inst->id}.valor_ia", $custo?->valor_ia ?? '');
                                    $valorOutros = old("registros.{$inst->id}.valor_outros", $custo?->valor_outros ?? '');
                                    $obs = old("registros.{$inst->id}.observacoes", $custo?->observacoes ?? '');
                                    $totalLinha = (float) ($valorIa ?: 0) + (float) ($valorOutros ?: 0);
                                    $statusKey = $inst->status ?: 'inativa';
                                    $statusLabel = $statusLabels[$statusKey] ?? $statusKey;
                                @endphp
                                <tr data-nome="{{ Str::lower($inst->nome.' '.$inst->slug) }}"
                                    data-status="{{ $statusKey }}"
                                    data-cem-row
                                    class="{{ $totalLinha > 0 ? 'is-filled' : '' }}">
                                    <td>
                                        <input type="hidden" name="registros[{{ $inst->id }}][instalacao_id]" value="{{ $inst->id }}">
                                        <a href="{{ route('instalacoes.web.show', $inst) }}" class="cem-inst-name">{{ $inst->nome }}</a>
                                        <span class="cem-inst-slug">{{ $inst->slug }}</span>
                                    </td>
                                    <td>
                                        <span class="cem-status cem-status--{{ $statusKey }}">{{ $statusLabel }}</span>
                                    </td>
                                    <td class="text-right">
                                        @can('gestao-write')
                                            <input type="number"
                                                   name="registros[{{ $inst->id }}][valor_ia]"
                                                   class="form-control form-control-sm text-right cem-input-money"
                                                   data-cem-ia
                                                   min="0" step="0.01" placeholder="0,00"
                                                   value="{{ $valorIa !== '' && $valorIa !== null ? number_format((float) $valorIa, 2, '.', '') : '' }}">
                                        @else
                                            {{ $custo ? $fmtMoney((float) $custo->valor_ia) : '—' }}
                                        @endcan
                                    </td>
                                    <td class="text-right">
                                        @can('gestao-write')
                                            <input type="number"
                                                   name="registros[{{ $inst->id }}][valor_outros]"
                                                   class="form-control form-control-sm text-right cem-input-money"
                                                   data-cem-outros
                                                   min="0" step="0.01" placeholder="0,00"
                                                   value="{{ $valorOutros !== '' && $valorOutros !== null ? number_format((float) $valorOutros, 2, '.', '') : '' }}">
                                        @else
                                            {{ $custo ? $fmtMoney((float) $custo->valor_outros) : '—' }}
                                        @endcan
                                    </td>
                                    <td class="text-right">
                                        <span class="cem-row-total {{ $totalLinha > 0 ? '' : 'is-zero' }}" data-cem-total>
                                            @if($totalLinha > 0)
                                                {{ $fmtMoney($totalLinha) }}
                                            @else
                                                —
                                            @endif
                                        </span>
                                    </td>
                                    <td>
                                        @can('gestao-write')
                                            <input type="text"
                                                   name="registros[{{ $inst->id }}][observacoes]"
                                                   class="form-control form-control-sm cem-input-obs"
                                                   maxlength="2000"
                                                   placeholder="Nota interna (opcional)"
                                                   value="{{ $obs }}">
                                        @else
                                            {{ $custo?->observacoes ?: '—' }}
                                        @endcan
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">
                                        <div class="cem-empty">
                                            <i class="fas fa-inbox" aria-hidden="true"></i>
                                            <p class="mb-0">Nenhuma instalação registrada no sistema.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        @if($instalacoes->isNotEmpty())
                            <tfoot>
                                <tr>
                                    <td colspan="2">Total do mês</td>
                                    <td class="text-right" data-foot="ia">{{ $fmtMoney($totaisMes['valor_ia']) }}</td>
                                    <td class="text-right" data-foot="outros">{{ $fmtMoney($totaisMes['valor_outros']) }}</td>
                                    <td class="text-right" data-foot="total">{{ $fmtMoney($totaisMes['valor_total']) }}</td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        @endif
                    </table>
                </div>

                @can('gestao-write')
                    @if($instalacoes->isNotEmpty())
                        <div class="cem-save-bar">
                            <div class="cem-save-bar__meta">
                                Salvando competência <strong>{{ ucfirst($competenciaLabel) }}</strong>
                                · Total atual <strong data-save-total>{{ $fmtMoney($totaisMes['valor_total']) }}</strong>
                            </div>
                            <button type="submit" class="btn-dashboard-hero btn-dashboard-hero--primary">
                                <i class="fas fa-save" aria-hidden="true"></i>
                                Salvar custos de {{ ucfirst($competenciaLabel) }}
                            </button>
                        </div>
                    @endif
                @endcan

                @cannot('gestao-write')
                    <p class="text-muted small mt-3 mb-0">
                        <i class="fas fa-lock" aria-hidden="true"></i>
                        Perfil só leitura: pode consultar valores; alterações requerem permissão de escrita.
                    </p>
                @endcannot
            </div>
        </div>
    </form>
</div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/adminlte-inter.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-colors.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-listagem.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-custos-extras.css') }}">
@stop

@section('js')
<script>
(function () {
    var table = document.getElementById('cem-table');
    if (!table) return;

    var busca = document.getElementById('cem-busca');
    var filtroStatus = document.getElementById('cem-filtro-status');
    var filtroCusto = document.getElementById('cem-filtro-custo');
    var visibleCount = document.getElementById('cem-visible-count');

    function parseMoney(value) {
        var n = parseFloat(String(value || '').replace(',', '.'));
        return isNaN(n) ? 0 : n;
    }

    function formatMoney(value) {
        return 'R$ ' + value.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function rowValues(row) {
        var iaInput = row.querySelector('[data-cem-ia]');
        var outrosInput = row.querySelector('[data-cem-outros]');
        var ia = iaInput ? parseMoney(iaInput.value) : 0;
        var outros = outrosInput ? parseMoney(outrosInput.value) : 0;
        return { ia: ia, outros: outros, total: ia + outros };
    }

    function updateRowTotal(row) {
        var values = rowValues(row);
        var totalEl = row.querySelector('[data-cem-total]');
        if (totalEl) {
            if (values.total > 0) {
                totalEl.textContent = formatMoney(values.total);
                totalEl.classList.remove('is-zero');
            } else {
                totalEl.textContent = '—';
                totalEl.classList.add('is-zero');
            }
        }
        row.classList.toggle('is-filled', values.total > 0);
    }

    function updateAggregates() {
        var rows = table.querySelectorAll('[data-cem-row]');
        var sumIa = 0;
        var sumOutros = 0;
        var comCusto = 0;

        rows.forEach(function (row) {
            var values = rowValues(row);
            sumIa += values.ia;
            sumOutros += values.outros;
            if (values.total > 0) comCusto += 1;
        });

        var sumTotal = sumIa + sumOutros;
        var map = {
            ia: formatMoney(sumIa),
            outros: formatMoney(sumOutros),
            total: formatMoney(sumTotal)
        };

        Object.keys(map).forEach(function (key) {
            var kpi = document.querySelector('[data-kpi="' + key + '"]');
            if (kpi) kpi.textContent = map[key];
            var foot = document.querySelector('[data-foot="' + key + '"]');
            if (foot) foot.textContent = map[key];
        });

        var kpiInst = document.querySelector('[data-kpi="instalacoes"]');
        if (kpiInst) kpiInst.textContent = String(comCusto);

        var saveTotal = document.querySelector('[data-save-total]');
        if (saveTotal) saveTotal.textContent = formatMoney(sumTotal);
    }

    function applyFilters() {
        var q = (busca && busca.value ? busca.value : '').trim().toLowerCase();
        var status = filtroStatus ? filtroStatus.value : '';
        var custo = filtroCusto ? filtroCusto.value : '';
        var rows = table.querySelectorAll('[data-cem-row]');
        var visible = 0;

        rows.forEach(function (row) {
            var nome = row.getAttribute('data-nome') || '';
            var rowStatus = row.getAttribute('data-status') || '';
            var values = rowValues(row);
            var okBusca = !q || nome.indexOf(q) !== -1;
            var okStatus = !status || rowStatus === status;
            var okCusto = true;
            if (custo === 'com') okCusto = values.total > 0;
            if (custo === 'sem') okCusto = values.total <= 0;

            var show = okBusca && okStatus && okCusto;
            row.classList.toggle('is-hidden', !show);
            if (show) visible += 1;
        });

        if (visibleCount) {
            visibleCount.textContent = visible + ' instalação(ões)';
        }
    }

    table.addEventListener('input', function (event) {
        var target = event.target;
        if (!target.classList.contains('cem-input-money') && !target.classList.contains('cem-input-obs')) {
            return;
        }
        var row = target.closest('[data-cem-row]');
        if (!row) return;
        updateRowTotal(row);
        updateAggregates();
        applyFilters();
    });

    [busca, filtroStatus, filtroCusto].forEach(function (el) {
        if (!el) return;
        el.addEventListener('input', applyFilters);
        el.addEventListener('change', applyFilters);
    });

    applyFilters();
})();
</script>
@stop