@extends('layouts.dashboard')
@section('pg-body')

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>
<style>
.rel-tab-nav { display: flex; gap: 4px; }
.rel-tab-link { display: inline-block; font-weight: 600; padding: 8px 18px; border-radius: 4px 4px 0 0; border: 1px solid #ddd; border-bottom: none; background: #f7f7f7; color: #555; text-decoration: none; cursor: pointer; }
.rel-tab-link:hover { background: #eee; color: #333; text-decoration: none; }
.rel-tab-nav li.active .rel-tab-link { background: var(--background-color6, #c87941); color: #fff !important; border-color: var(--background-color6, #c87941); text-decoration: none; }
.rel-section-title { font-size: 15px; font-weight: 700; margin: 12px 0 8px; padding-top: 14px; border-left: 4px solid var(--background-color6, #c87941); padding-left: 10px; }
.rel-section-title:first-child { margin-top: 0; }
.rel-total { font-size: 13px; color: #444; margin: 4px 0 10px; }
.dt-buttons .btn, .dt-buttons button { background: var(--background-color6, #c87941) !important; border-color: var(--background-color6, #c87941) !important; color: #fff !important; font-size: 12px; margin-right: 3px; border-radius: 4px; padding: 4px 10px; }
.dt-buttons .btn:hover, .dt-buttons button:hover { opacity: 0.85; }
table.dataTable thead th { background: #f0f0f0; color: #000 !important; }
table.dataTable tbody td { color: #000 !important; }
table.dataTable tfoot td { color: #000 !important; }
.rel-btn-filtrar { color: #fff !important; }
.rel-export-btn { background: var(--background-color6, #c87941) !important; border-color: var(--background-color6, #c87941) !important; color: #fff !important; margin-right: 4px; }
.city-updates ul li { padding: 0px !important;}
.city-updates ul { border-radius: 0 !important; overflow: hidden; border: none !important; box-shadow: none !important;}
#painelTabelas {
    margin-top: 30px;
}
#tbl_status, #tbl_escolaridade{
    text-transform: uppercase;
}
</style>

<section class="wf100 subheader">
    <div class="container">
        <h2>Relatório Estatístico</h2>
        <ul>
            <li><a href="{{url('home')}}">Home</a></li>
            <li><a href="{{url('portal-transparencia')}}">Transparência</a></li>
            <li>Relatório Estatístico</li>
        </ul>
    </div>
</section>

<div class="main-content p60">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="city-updates">
                    <h3>Relatório Estatístico</h3>

                    {{-- FILTROS --}}
                    <div class="well" style="margin-bottom:12px;">
                        <form action="{{url('relatorio-estatistico')}}" method="POST">
                            {{ csrf_field() }}
                            <div style="display:flex; gap:10px; align-items:flex-end;">
                                <div style="width:140px; flex-shrink:0;">
                                    <label>Ano</label>
                                    <select name="filtro_ano" class="form-control">
                                        <option value="">Todos</option>
                                        @foreach($anos_disponiveis as $ano)
                                        <option value="{{$ano}}" {{($filtro_ano ?? '') == $ano ? 'selected' : ''}}>{{$ano}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div style="flex-shrink:0; padding-bottom:1px;">
                                    <button class="btn btn-primary btn-up rel-btn-filtrar" type="submit"><i class="fa fa-search"></i> Buscar</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    {{-- ABAS --}}
                    <ul class="nav rel-tab-nav" id="relTabs" role="tablist" style="margin-bottom:0; padding:0; list-style:none; gap: 0;">
                        <li class="active">
                            <a class="rel-tab-link" id="tab-tabelas" data-toggle="tab" href="#painelTabelas" role="tab">
                                <i class="fa fa-table"></i> Tabelas
                            </a>
                        </li>
                        <li>
                            <a class="rel-tab-link" id="tab-graficos" data-toggle="tab" href="#painelGraficos" role="tab">
                                <i class="fa fa-chart-pie"></i> Gráficos
                            </a>
                        </li>
                    </ul>

                    {{-- CONTEÚDO --}}
                    <div class="tab-content" style="border:1px solid #ddd; border-top:none; padding:16px; background:#fff; border-radius:0 4px 4px 4px;">

                        {{-- ABA GRÁFICOS --}}
                        <div class="tab-pane fade" id="painelGraficos" role="tabpanel">
                            <div style="padding-top:10px; margin-bottom:10px; text-align:right;">
                                <button class="btn btn-sm rel-export-btn" onclick="exportarGraficosPDF(this)"><i class="fa fa-file-pdf"></i> PDF</button>
                                <button class="btn btn-sm rel-export-btn" onclick="imprimirGraficos(this)"><i class="fa fa-print"></i> Imprimir</button>
                            </div>
                            <div id="area-graficos">
                            <div class="row">
                                <div class="col-md-6" id="graph">