@extends('layouts.orcamento.default')

@section('content')
    <div id="tabelas-content" class="tabelas">
        <div class="summary">
            <div class="total-amount" id="total-atualizado"></div>
            <div class="total-label">Orçamento Atualizado Total</div>
            <div class="summary-grid">
                <div class="summary-card">
                    <div class="summary-value" id="summary-inicial"></div>
                    <div class="summary-label">Orçamento Inicial</div>
                </div>
                <div class="summary-card">
                    <div class="summary-value" id="summary-empenhado"></div>
                    <div class="summary-label">Empenhado</div>
                    <div class="summary-percent" id="summary-percent-empenhado"></div>
                </div>
                <div class="summary-card">
                    <div class="summary-value" id="summary-liquidado"></div>
                    <div class="summary-label">Liquidado</div>
                    <div class="summary-percent" id="summary-percent-liquidado"></div>
                </div>
                <div class="summary-card">
                    <div class="summary-value" id="summary-pago"></div>
                    <div class="summary-label">Pago</div>
                    <div class="summary-percent" id="summary-percent-pago"></div>
                </div>
            </div>
        </div>

        <div class="card-content">
            <div class="controls">
                <div class="filter-group">
                    <label for="ano">Ano</label>
                    <select id="ano">
                        <option value="2025" selected>2025</option>
                        <option value="2024">2024</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label for="poderes">Poderes</label>
                    <select id="poderes">
                        <option value="legislativo" selected>Legislativo</option>
                        <option value="executivo">Executivo</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label for="cod_ug">Unidade Gestora</label>
                    <select id="cod_ug">
                        <option value="">Todas as UGs</option>
                    </select>
                </div>
    
                {{-- <div class="filter-group">
                    <label for="natureza">Natureza de Despesa</label>
                    <select id="natureza">
                        <option value="">Todas as Naturezas</option>
                    </select>
                </div> --}}
    
                <div class="filter-group">
                    <label for="expandAll">Ações</label>
                    <button id="expandAll">Expandir Todos</button>
                </div>
            </div>
    
            <div class="table-container">
                <div class="loading">
                    <div class="spinner"></div>
                    <p>Carregando dados orçamentários...</p>
                </div>
    
                <table class="budget-table">
                    <thead class="table-header">
                        <tr>
                            <th>Descrição</th>
                            <th>Orçamento Inicial</th>
                            <th>Atualizado</th>
                            <th>Empenhado</th>
                            <th>Liquidado</th>
                            <th>Pago</th>
                            <th>Contingenciado</th>
                            <th>Disponível para Empenho</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <!-- Os dados serão inseridos aqui via JavaScript -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        window.budgetData = @json($dados ?? []);
        window.resumoOrcamento = @json($resumo ?? null); 
        window.appRoute = {
            getNaturezas:"{{ route('site.orcamento.getNaturezas') }}",
            getUgs:"{{ route('site.orcamento.getUgs') }}",
            getDespesas:"{{ route('site.orcamento.getDespesas') }}",
        }
    </script>
    
    <style>
        .summary {
            padding: 20px;
            background: linear-gradient(135deg, #004F89 0%, #021a2b 100%);
            color: white;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .total-amount {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .total-label {
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .summary-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 8px;
            backdrop-filter: blur(10px);
        }

        .summary-card .summary-value {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .summary-card .summary-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .summary-card .summary-percent {
            font-size: 0.85rem;
            opacity: 0.8;
            margin-top: 5px;
            display: block;
        }
    </style>
    
    <script type="text/javascript" src="{{ asset('js/orcamento.min.js') }}"></script>
@endsection