@extends('layouts.layout_painel',
[
    'icone_titulo'=>'fa fa-home',
    'titulo'=>'Consolidados',
    'breadcrumb'=>[]
])

@section('css')
<link rel="stylesheet" href="{{{ URL::asset('css/master.css') }}}" />
@endsection

@section('scripts')
<script src="{{{ URL::asset('js/DataTables/datatables.min.js') }}}"></script>
<script src="{{{ URL::asset('js/views/gabinete/funcoes.js') }}}"></script>
<script src="{{{ URL::asset('js/bootstrap-select-1.13.2/bootstrap-select.min.js') }}}"></script>
<script src="{{{ URL::asset('js/bootstrap-select-1.13.2/i18n/defaults-pt_BR.min.js') }}}"></script>
@endsection


@section('pagina')

<style>

.card h1{
    font-size: 1.3rem !important;
    text-align: center;
    padding-top:2rem;
}


.card .btn-primary{
    background-color: transparent !important;
    border:transparent;
}

#painel button {
    border: none;
    background-color: transparent;
    cursor: pointer;

}
</style>

<div class="container-fluid" id="painel">

<div class="row">

    <div class="col-12">

        <div class="card alert-warning">
            <div class="card-body">
                <div class="row">
                <div class="col-2">


                    <div class="form-group">
                        <label for="selectAno">Selecione o ano</label>
                        <select class="form-control form-control" id="selectAno">
                            @foreach($comboVigenciaAno as $vigencia)
                            <option>{{$vigencia}}</option>
                            @endforeach
                        </select>
                    </div>



<div id="total">

</div>

                </div>

                <div class="col-10 ">
                    <div class="d-flex justify-content-end mt-4">
                        <div class-="text-right">
                           <h2 class="text-primary" style="font-size:3vw">R$ <span class="money">{{$listaSoma}}</span> </h2>
                        </div>
                    </div>
                </div>
              </div>

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

 </div>


 <div class="row">
    <div class="col-12 col-sm-6 col-md-3">
        <div class="card alert-info">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="text-info"><b>Solicitado </b></h5>
                        <h2 class="text-info fw-bold">R$ <span class="consumo"></span></h2>
                    </div>

                        <button data="1" id="btSolicitado">
                            <i class="fas fa-2x fa-arrow-circle-down text-info"></i>
                        </button>

                </div>
                <div class="progress progress-sm">
                    <div class="progress-bar bg-info w-75" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="80"></div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <p class="text-muted mb-0">Total </p>
                    <p class="text-muted mb-0">80%</p>

                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="card alert-success">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="text-success"><b>Recebidos </b></h5>
                        <h2 class="text-success fw-bold">R$ <span class="repasse"></span></h2>
                    </div>
                    <button data="2" id="btRecebido">
                        <i class="fas fa-2x fa-arrow-circle-down text-success"></i>
                    </button>

                </div>
                <div class="progress progress-sm">
                    <div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="50"></div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <p class="text-muted mb-0">Total </p>
                    <p class="text-muted mb-0">50%</p>

                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="card alert-danger">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="text-danger"><b>Consumo Recebido</b></h5>
                        <h2 class="text-danger fw-bold">R$ <span class="consumo"></span></h2>
                    </div>
                    <button data="3" id="btConsumo">
                        <i class="fas fa-2x fa-arrow-circle-down text-danger"></i>
                    </button>


                </div>
                <div class="progress progress-sm">
                    <div class="progress-bar bg-danger w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <p class="text-muted mb-0">Total </p>
                    <p class="text-muted mb-0">90%</p>

                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3">
        <div class="card alert-secondary">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="text-secondary"><b>Saldo Recebido </b></h5>
                        <h2 class="text-secondary fw-bold">R$ <span class="saldo"></span></h2>
                    </div>


                </div>
                <div class="progress progress-sm">
                    <div class="progress-bar bg-secondary w-75" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="50"></div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <p class="text-muted mb-0">Total </p>
                    <p class="text-muted mb-0">50%</p>

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



<div class="row mt-3">
    <div class="col-lg-12">

        <div id="tabView">

        </div>





        <table class="table datatable table-bordered">
            <tr class="bg-success"><td></td><td>CONTRATO</td><td>CENTRO DE CUSTO</td><td>VALOR GLOBAL</td></tr>
            <tr>
                <td><i data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="fas fa-2x fa-arrow-circle-down text-info"></i></td>
                <td>177/2019</td> <td>UPA VILA LUISÃO</td><td>R$ 109.988,90</td>

            </tr>
            <tr>
                <td><i data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="fas fa-2x fa-arrow-circle-down text-info"></i></td>
                <td>177/2019</td> <td>UPA VILA LUISÃO</td><td>R$ 109.988,90</td>

            </tr>
            <tr>
                <td><i data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="fas fa-2x fa-arrow-circle-down text-info"></i></td>
                <td>177/2019</td> <td>UPA VILA LUISÃO</td><td>R$ 109.988,90</td>

            </tr>
            <tr>
                <td><i data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="fas fa-2x fa-arrow-circle-down text-info"></i></td>
                <td>177/2019</td> <td>UPA VILA LUISÃO</td><td>R$ 109.988,90</td>

            </tr>
         </table>
        <div class="collapse" id="collapseExample">
            <tr class="card card-body"><td collspan="4">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </td>
            </tr>
        </div>



    </div>
</div>




</div><!-- <div class="container-fluid">-->

@endsection