@include('include.header')
<div class="container body-content mt-5">
    <div class="row justify-content-md-center">
        <div class="col-md-9 col-xs-12 mr-10">
            @if(!isset($dadoPendencia))
            <div class="container mt-5">
                <div class="row">
                    <div class="col-12">
                        <div class="text-center">
                            <h1 class="mt-4 fw-light fs-7" style="color:#0d6efd">Consulta Inabilitados VAAT 2024</h1>
                            <h6 class="mb-4 fw-light fs-6">Aqui você pode consultar Inabilitados VAAT 2024 </h6>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-12">
                        <form class="d-flex" role="search" action="buscaVaat" method="POST">
                            @csrf
                            @method('POST')
                            <div class="input-group">
                                <select class="form-select" required id="selectUf" name="uf" aria-label="Default select example">
                                    <option value="" selected>UF</option>
                                    @foreach($dados as $dado)
                                    <option value="{{$dado->uf}}">{{$dado->uf}}</option>
                                    @endforeach
                                </select>
                                <select class="form-select" required id="selectMunicipio" name="municipio" aria-label="Default select example">
                                    <option value="" selected>Municipio</option>
                                    <!-- Os municípios serão preenchidos aqui dinamicamente -->
                                </select>
                                <button class="btn btn-outline-success" type="submit">Pesquisar</button>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-12">
                                <p class="text-center mt-3">Por favor, certifique-se de inserir o municipio corretamente para visualizar as informações.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @if(isset($dadoPendencia))
            @foreach($dadoPendencia as $key => $dado)
            <a href="/" class="btn btn-outline-primary">Voltar</a>
                <h1 class="mt-4 fw-light fs-7" style="text-align:center;color:#0d6efd"> Consulta Inabilitados VAAT 2024 </h1>
                <h6 class="mb-4 fw-light fs-6" style="text-align:center;color:#808080"> Aqui você pode consultar Inabilitados VAAT 2024</h6>

            
            <div class="row">
                <div class="accordion mt-4" id="accordionExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{$key}}" aria-expanded="true" aria-controls="collapseOne">
                                <div class="col-9">
                                {{$dado['nome_municipio']}}
                                </div>
                            </button>
                        </h2>
                        <div id="{{$key}}" class="accordion-collapse collapse {{$key == 0 ? 'show' : ''}}" data-bs-parent="#accordionExample">
                            <div class="row">
                                <div class="col-12 col-md-7">
                                    <div class="row m-2">
                                        <div class="col-12">
                                            <div class="ml-3 col-12">
                                                Possui Problema: <b style="text-align:center;">
                                                {{$dado['problema']}}
                                                </b>
                                            </div>
                                            <div class="col-12">
                                              
                                                Situação: <b style="text-align:center;">
                                                    {{$dado['pendencia']}} 
                                                </b>
                                            </div>

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

                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</div>
<script src="{{asset('js/welcomeJS.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@include('include.footer')