@extends('layout.layout')

@section('section')

    <link rel='stylesheet' href='/css/pnld/listar_pnld.css?v=2'>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                {{-- <div class="table-responsive">--}}
                <h4 class="titulo_tabela">
                    PNLD 2021
                </h4>
                <div class="col-md-12 col-sm-12 div-maior-select-uf">
                    <label for="select-uf" class="mb-0">Selecione o estado: </label>
                    <div class="form-group mt-0 col-md-8 div-select-uf">
                        <select id="select-uf" class="form-control" name="uf"
                                style="display: block;">
                            <option selected disabled>Selecione um estado</option>
                            @foreach($ufs as $uf)
                                <option value="{{$uf->uf}}">{{$uf->uf}}</option>
                            @endforeach
                        </select>
{{--                        <button class="btn btn-info" id="gerar_pnld">Gerar</button>--}}
                    </div>
                </div>

                <div class="col-md-12 col-sm-12 div-maior-select-cidade">
                    <label for="select-cidade" class="mb-0">Selecione as cidades: </label>
                    <div class="form-group mt-0 col-md-8 div-select-cidade">
                        <select id="select-cidade" class="form-control"
                                name="cidade[]"
                                style="display: block;"
                                multiple>

                        </select>
{{--                        <button class="btn btn-info dis-none" id="gerar_pnld">Gerar</button>--}}
                    </div>
                </div>

                <div class="col-md-12 col-sm-12 div-maior-select-planilha">
                    <label for="select-planilha" class="mb-0">Selecione a planilha: </label>
                    <div class="form-group mt-0 col-md-8 div-select-planilha">
                        <select id="select-planilha" class="form-control" name="planilha"
                                style="display: block;">

                        </select>
                        <button class="btn btn-info dis-none" id="gerar_pnld">Gerar</button>
                    </div>
                </div>
            </div>

            <div class="col-sm-12">
                <div align="center" id="loading-class"
                     class="lds-css ng-scope"
                     style="display: none;">
                    <div class="lds-spinner" style="width:100%;height:100%">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src='/js/pnld/listar_pnld.js?v=2'></script>
@endsection