@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">Depósitos Folha de Caixa</h1>
            <p class="tfcv-sub">Acompanhamento de depósitos por posto.</p>
        </div>
    </div>

    <div class="tfcv-card d-print-none">
        <form method="GET" action="{{ route('validar_depositos_index') }}" id="tfcv-form-depositos">
            <p class="tfcv-section-title" style="margin:0 0 10px 0;">Filtros</p>
             <div class="row form-group align-items-end">
                <div class="col-sm-2">
                    <select name="posto_id" id="posto_id" class="tfcv-select" style="min-width:100%;">
                        <option value="">Posto: Todos</option>
                        @foreach($postos as $posto)
                            <option value="{{ $posto->id }}" {{ request('posto_id') == $posto->id ? 'selected' : '' }}>{{ $posto->nome_posto }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-sm-2">
                    <input type="date" name="data_folha_caixa" id="data_folha_caixa" class="tfcv-select" style="min-width:100%; background-image:none;" value="{{ request('data_folha_caixa') }}">
                </div>

                <div class="col-sm-2">
                    <select name="status_deposito" id="status_deposito" class="tfcv-select" style="min-width:100%;">
                        <option value="">Status: Todos</option>
                        <option value="pendente" {{ request('status_deposito') == 'pendente' ? 'selected' : '' }}>Pendente</option>
                        <option value="confirmado" {{ request('status_deposito') == 'confirmado' ? 'selected' : '' }}>Confirmado</option>
                        <option value="em_falta" {{ request('status_deposito') == 'em_falta' ? 'selected' : '' }}>Em Falta</option>
                        <option value="valor_divergente" {{ request('status_deposito') == 'valor_divergente' ? 'selected' : '' }}>Valor Divergente</option>
                    </select>
                </div>

                <div class="col-sm-2">
                    <button type="submit" class="tfcv-btn-primary">
                        <i class="fas fa-sync-alt" aria-hidden="true"></i> Filtrar
                    </button>
                </div>  
            </div>
        </form>
    </div>

    <div class="tfcv-grid-4">
        <div class="tfcv-stat">
            <i class="fas fa-university accent" aria-hidden="true"></i>
            <div class="lbl">Depósitos Totais</div>
            <div class="num" id="kpi-depositos-total">0</div>
            <div class="delta" id="kpi-depositos-total-valor">EUR 0,00 no período</div>
        </div>
        <div class="tfcv-stat">
            <i class="fas fa-check-circle accent" style="color:#0F6E56;" aria-hidden="true"></i>
            <div class="lbl">Confirmados</div>
            <div class="num" id="kpi-confirmados-count">0</div>
            <div class="delta" id="kpi-confirmados-valor">EUR 0,00 confirmados</div>
        </div>
        <div class="tfcv-stat">
            <i class="fas fa-hourglass-half accent" style="color:#BA7517;" aria-hidden="true"></i>
            <div class="lbl">Pendentes</div>
            <div class="num" id="kpi-pendentes-count">0</div>
            <div class="delta" id="kpi-pendentes-valor">EUR 0,00 por validar</div>
        </div>
        <div class="tfcv-stat">
            <i class="fas fa-exclamation-triangle accent" style="color:#993C1D;" aria-hidden="true"></i>
            <div class="lbl">Ocorrências</div>
            <div class="num" id="kpi-ocorrencias-count">0</div>
            <div class="delta" id="kpi-ocorrencias-valor">EUR 0,00 divergentes</div>
        </div>
    </div>

    <div class="tfcv-card" style="margin-top: 14px;">
        <p class="tfcv-section-title">Resumo semanal de depósitos</p>
        @if(($depositosPorDia ?? []) === [])
            <div class="tfcv-empty">Sem depósitos programados na semana atual.</div>
        @else
            <table class="tfcv-tbl">
                <thead>
                    <tr>
                        <th>Dia da Semana</th>
                        <th class="r">Valor</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($depositosPorDia as $item)
                        <tr>
                            <td>{{ $item['dia_semana'] }}</td>
                            <td class="r">EUR {{ number_format($item['valor'], 2, ',', ' ') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </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;">Depósitos por posto</p>
            </div>
            <span class="tfcv-pill teal" id="kpi-postos-resumo">0 postos carregados</span>
        </div>

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

<!-- Modal Valor Divergente -->
<div class="modal fade" id="modalValorDivergente" tabindex="-1" role="dialog" aria-labelledby="modalValorDivergenteLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content tfcv-modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalValorDivergenteLabel">Informar Valor Divergente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="GET" action="{{ route('validar_depositos_valor_divergente') }}">
                <div class="modal-body">
                    <input type="hidden" name="id" id="formaPagamentoId" value="">
                    <div class="form-group">
                        <label for="valorDivergente">Valor Divergente</label>
                        <input type="number" step="0.01" class="form-control" name="valor_divergente" id="valorDivergente" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    <button type="submit" class="btn btn-primary">Salvar</button>

                </div>
            </form>
        </div>
    </div>
</div>

<script>

    function passaId(id){
        document.getElementById('formaPagamentoId').value = id;
    }
</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-depositos-total').text(formatNumberPt(totais.depositos, 0));
        $('#kpi-depositos-total-valor').text(formatEuro(totais.totalValor) + ' no período');
        $('#kpi-confirmados-count').text(formatNumberPt(totais.confirmadosCount, 0));
        $('#kpi-confirmados-valor').text(formatEuro(totais.confirmadosValor) + ' confirmados');
        $('#kpi-pendentes-count').text(formatNumberPt(totais.pendentesCount, 0));
        $('#kpi-pendentes-valor').text(formatEuro(totais.pendentesValor) + ' por validar');
        $('#kpi-ocorrencias-count').text(formatNumberPt(totais.ocorrenciasCount, 0));
        $('#kpi-ocorrencias-valor').text(formatEuro(totais.divergentesValor) + ' divergentes');
        $('#kpi-postos-resumo').text(formatNumberPt(totais.postosCarregados, 0) + ' ' + pluralize(totais.postosCarregados, 'posto carregado', 'postos carregados'));
    }

    $(document).ready(function () {
            let totaisGerais = {
                depositos: 0,
                totalValor: 0,
                confirmadosCount: 0,
                confirmadosValor: 0,
                pendentesCount: 0,
                pendentesValor: 0,
                ocorrenciasCount: 0,
                divergentesValor: 0,
                postosCarregados: 0
            };

            renderTopTotals(totaisGerais);

            const dataForm = '';
            const postoSelecionado = $('#posto_id').val();
            const statusDepositoSelecionado = $('#status_deposito').val();
            const dataFolhaCaixaSelecionado = $('#data_folha_caixa').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 depósitos do posto...</div>
                            </div>
                            <div class="tfcv-mes-mini-totais">
                                <span><b class="qtd-resumo">0</b> depósitos</span>
                                <span><b class="confirmados-resumo">0</b> confirmados</span>
                                <span><b class="pendentes-resumo">0</b> pendentes</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 depósitos...
                                </div>
                            </div>
                        </div>
                    </div>
                    `);


                 

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

                $.ajax({
                    url: "{{ route('consultar_depositos_posto') }}",
                    method: 'GET',
                    data: dataForm + '&posto_id=' + posto.id + '&status_deposito=' + statusDepositoSelecionado + '&data_folha_caixa=' + dataFolhaCaixaSelecionado,
                    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 confirmadosCount = parseInt(resumoBox.data('confirmados-count'), 10) || 0;
                        const confirmadosTotal = parseFloat(resumoBox.data('confirmados-total')) || 0;
                        const pendentesCount = parseInt(resumoBox.data('pendentes-count'), 10) || 0;
                        const pendentesTotal = parseFloat(resumoBox.data('pendentes-total')) || 0;
                        const emFaltaCount = parseInt(resumoBox.data('em-falta-count'), 10) || 0;
                        const divergentesCount = parseInt(resumoBox.data('divergentes-count'), 10) || 0;
                        const divergentesValor = parseFloat(resumoBox.data('divergentes-valor')) || 0;

                        totaisGerais.depositos += qtd;
                        totaisGerais.totalValor += total;
                        totaisGerais.confirmadosCount += confirmadosCount;
                        totaisGerais.confirmadosValor += confirmadosTotal;
                        totaisGerais.pendentesCount += pendentesCount;
                        totaisGerais.pendentesValor += pendentesTotal;
                        totaisGerais.ocorrenciasCount += emFaltaCount + divergentesCount;
                        totaisGerais.divergentesValor += divergentesValor;
                        totaisGerais.postosCarregados += 1;
                        renderTopTotals(totaisGerais);

                        const card = container.closest('.tfcv-acc-item');
                        card.find('.total-resumo').text(formatEuro(total));
                        card.find('.resumo').text(qtd + ' ' + pluralize(qtd, 'depósito encontrado', 'depósitos encontrados'));
                        card.find('.qtd-resumo').text(formatNumberPt(qtd));
                        card.find('.confirmados-resumo').text(formatNumberPt(confirmadosCount));
                        card.find('.pendentes-resumo').text(formatNumberPt(pendentesCount));
                        console.log(confirmadosCount);
                        const statusEl = card.find('.status-resumo');
                        if ((emFaltaCount + divergentesCount) > 0) {
                            statusEl.removeClass('teal amber').addClass('coral').text((emFaltaCount + divergentesCount) + ' ocorrências');
                        } else if (pendentesCount > 0) {
                            statusEl.removeClass('teal coral').addClass('amber').text(pendentesCount + ' pendentes');
                        } 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