@extends('adminlte.app')

@section('content')
<div class="content-wrapper tfcv-root">
    @if ($message = Session::get('success'))
        <div class="tfcv-alert ok"><i class="fas fa-check-circle" aria-hidden="true"></i> <span>{!! $message !!}</span></div>
    @endif
    @if ($message = Session::get('error'))
        <div class="tfcv-alert danger"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> <span>{{ $message }}</span></div>
    @endif

    <div class="tfcv-header-row">
        <div>
            <h1 class="tfcv-h1">{{ !$validar ? 'Folha de Caixa' : 'Validação Folha de Caixa' }}</h1>
            <p class="tfcv-sub">Agrupado por posto e atualizado conforme os filtros aplicados.</p>
        </div>
        <div class="tfcv-actions d-print-none">
            @if(!$validar)
                <a href="{{ route('folha_de_caixa_create') }}" class="tfcv-btn-primary">
                    <i class="fas fa-plus" aria-hidden="true"></i> Adicionar Folha de Caixa
                </a>
            @endif
        </div>
    </div>

    <div class="tfcv-card d-print-none">
        <x-folha_caixa.filtros :filtros="$filtros" :turnos="$turnos" :operadores="$operadores" :permissao="$permissao" :postos="$postos" :validar="$validar" />
    </div>

    <div class="tfcv-grid-4">
        <div class="tfcv-stat">
            <i class="fas fa-gas-pump accent" aria-hidden="true"></i>
            <div class="lbl">Litros Totais</div>
            <div class="num" id="kpi-litros-total">0</div>
            <div class="delta">L acumulados no período</div>
        </div>
        <div class="tfcv-stat">
            <i class="fas fa-coins accent" aria-hidden="true"></i>
            <div class="lbl">Venda Euros Totais</div>
            <div class="num" id="kpi-venda-total">EUR 0,00</div>
            <div class="delta">Soma de vendas por folha</div>
        </div>
        <div class="tfcv-stat">
            <i class="fas fa-university accent" aria-hidden="true"></i>
            <div class="lbl">Depósitos por Realizar</div>
            <div class="num" id="kpi-depositos-pendentes">0</div>
            <div class="delta" id="kpi-depositos-pendentes-valor">EUR 0,00 previstos</div>
        </div>
        <div class="tfcv-stat">
            <i class="fas fa-balance-scale accent" aria-hidden="true"></i>
            <div class="lbl">Falhas / Sobras de Caixa</div>
            <div class="num" id="kpi-falhas-sobras">EUR 0,00</div>
            <div class="delta" id="kpi-falhas-sobras-count">0 ocorrências</div>
        </div>
    </div>

    <div class="tfcv-card" style="margin-top: 14px;">
        <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:12px; flex-wrap:wrap;">
            <div>
                <p class="tfcv-section-title" style="margin:0;">Folhas de caixa por posto</p>
                <p class="tfcv-sub" style="margin-top:4px;">Mesmo padrão visual dos agrupamentos do relatório, com detalhe por posto.</p>
            </div>
            <span class="tfcv-pill teal" id="kpi-folhas-total">0 folhas</span>
        </div>

        <div id="div-depositos-por-posto"></div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.btn-validar-ia').on('click', function(e) {
            e.preventDefault();
            $('#div-aguarde').removeClass('d-none');
            //desabilita Todos os botões para evitar múltiplos cliques
            $('.btn-validar-ia').prop('disabled', true);

            window.location.href = $(this).attr('href');
        });
    });
  
</script>

<script>
    let todosPostos = @json($postos);

    function formatNumberPt(valor, casas = 0) {
        const numero = Number(valor || 0);
        return numero.toLocaleString('pt-PT', {
            minimumFractionDigits: casas,
            maximumFractionDigits: casas
        });
    }

    function formatEuro(valor) {
        return 'EUR ' + formatNumberPt(valor, 2);
    }

    function pluralize(valor, singular, plural) {
        return valor === 1 ? singular : plural;
    }

    function renderTopTotals(totais) {
        $('#kpi-litros-total').text(formatNumberPt(totais.litros, 0));
        $('#kpi-venda-total').text(formatEuro(totais.vendas));
        $('#kpi-depositos-pendentes').text(formatNumberPt(totais.depositosPendentes, 0));
        $('#kpi-depositos-pendentes-valor').text(formatEuro(totais.depositosPendentesValor) + ' previstos');
        $('#kpi-falhas-sobras').text(formatEuro(totais.falhasSobrasValor));
        $('#kpi-falhas-sobras-count').text(
            formatNumberPt(totais.falhasSobrasCount, 0) + ' ' + pluralize(totais.falhasSobrasCount, 'ocorrência', 'ocorrências')
        );
        $('#kpi-folhas-total').text(
            formatNumberPt(totais.qtdFolhas, 0) + ' ' + pluralize(totais.qtdFolhas, 'folha', 'folhas')
        );
    }

    $(document).ready(function () {
            let totaisGerais = {
                litros: 0,
                vendas: 0,
                depositosPendentes: 0,
                depositosPendentesValor: 0,
                falhasSobrasCount: 0,
                falhasSobrasValor: 0,
                qtdFolhas: 0
            };

            renderTopTotals(totaisGerais);

            const dataForm = '';
            const postoSelecionado = $('#posto_id').val();
            const data_inicio = $('#data_inicio').val();
            const data_fim = $('#data_fim').val();
            const turno = $('#turno').val();
            const operador_id = $('#operador_id').val();
            const validar = '{{ $validar}}';
            const validado = $('#validado').val();

            // Limpa antes de carregar
            $('#div-depositos-por-posto').empty();

            let postosParaConsultar = [];

          if (
                postoSelecionado === 'Todos' ||
                postoSelecionado === '' ||
                postoSelecionado === null ||
                postoSelecionado === undefined
            ) {
                postosParaConsultar = todosPostos;
            } else {
                const encontrado = todosPostos.find(p => p.id == postoSelecionado);
                if (encontrado) {
                    postosParaConsultar.push(encontrado);
                }
            }

            if (postosParaConsultar.length === 0) {
                $('#div-depositos-por-posto').html('<div class="tfcv-empty">Nenhum posto encontrado para os filtros atuais.</div>');
                return;
            }

            postosParaConsultar.forEach((posto, index) => {
                // Cria um container para o posto
                const divId = `posto-${posto.id}`;
                    $('#div-depositos-por-posto').append(`
                        <div id="${divId}" class="tfcv-acc-item ${index === 0 ? 'open' : ''}">
                                <div class="tfcv-acc-head posto-toggle" data-target="#body-${posto.id}">
                                    <span class="tfcv-caret" style="color:#888780;"></span>
                                    <div>
                                        <div class="tfcv-mes">${posto.nome_posto}</div>
                                        <div class="tfcv-mes-sub resumo">A carregar folhas do posto...</div>
                                    </div>
                                    <div class="tfcv-mes-mini-totais">
                                        <span><b class="qtd-resumo">0</b> folhas</span>
                                        <span><b class="litros-resumo">0</b> L</span>
                                        <span><b class="depositos-resumo">0</b> depósitos</span>
                                    </div>
                                    <span class="tfcv-pill amber status-resumo">a carregar</span>
                                    <span class="tfcv-amount teal total-resumo">EUR 0,00</span>
                                </div>

                                <div id="body-${posto.id}" class="tfcv-acc-body">
                                    <div class="conteudo">
                                        <div class="tfcv-empty">
                                            <i class="fas fa-spinner fa-spin"></i> Buscando folhas...
                                        </div>
                                    </div>
                                </div>
                        </div>
                    `);

                const container = $(`#${divId} .conteudo`);

                $.ajax({
                    url: "{{ route('consultar_folhas_posto') }}",
                    method: 'GET',
                    data: dataForm + '&posto_id=' + posto.id + '&data_inicio=' + data_inicio + '&data_fim=' + data_fim + '&turno=' + turno + '&operador_id=' + operador_id + '&validar=' + validar + '&validado=' + validado,
                    success: function (response) {
                        container.html(response);

                        const resumoBox = container.find('.dados-resumo');
                        const total = parseFloat(resumoBox.data('total')) || 0;
                        const qtd = parseInt(resumoBox.data('qtd'), 10) || 0;
                        const litros = parseFloat(resumoBox.data('litros')) || 0;
                        const depositosPendentes = parseInt(resumoBox.data('depositos-pendentes'), 10) || 0;
                        const depositosPendentesValor = parseFloat(resumoBox.data('depositos-pendentes-valor')) || 0;
                        const falhasSobrasCount = parseInt(resumoBox.data('falhas-sobras-count'), 10) || 0;
                        const falhasSobrasValor = parseFloat(resumoBox.data('falhas-sobras-valor')) || 0;

                        totaisGerais.vendas += total;
                        totaisGerais.qtdFolhas += qtd;
                        totaisGerais.litros += litros;
                        totaisGerais.depositosPendentes += depositosPendentes;
                        totaisGerais.depositosPendentesValor += depositosPendentesValor;
                        totaisGerais.falhasSobrasCount += falhasSobrasCount;
                        totaisGerais.falhasSobrasValor += falhasSobrasValor;
                        renderTopTotals(totaisGerais);

                        const card = container.closest('.tfcv-acc-item');
                        card.find('.total-resumo').text(formatEuro(total));
                        card.find('.resumo').text(qtd + ' ' + pluralize(qtd, 'folha encontrada', 'folhas encontradas'));
                        card.find('.qtd-resumo').text(formatNumberPt(qtd));
                        card.find('.litros-resumo').text(formatNumberPt(litros));
                        card.find('.depositos-resumo').text(formatNumberPt(depositosPendentes));

                        const statusEl = card.find('.status-resumo');
                        if (falhasSobrasCount > 0) {
                            statusEl.removeClass('teal amber').addClass('coral').text(falhasSobrasCount + ' falhas/sobras');
                        } else if (depositosPendentes > 0) {
                            statusEl.removeClass('teal coral').addClass('amber').text(depositosPendentes + ' dep. por realizar');
                        } else {
                            statusEl.removeClass('amber coral').addClass('teal').text('depósitos em dia');
                        }
                    },
                    error: function () {
                        container.html('<div class="tfcv-alert danger" style="margin:10px;"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i><span>Erro ao buscar dados para o posto ' + posto.nome_posto + '.</span></div>');
                    }
                });
            });

    });

    $(document).on('click', '.posto-toggle', function () {
        let target = $($(this).data('target'));
        let card = $(this).closest('.tfcv-acc-item');

        target.slideToggle(150);
        card.toggleClass('open');
    });

</script>
@endsection