@extends('reports.hora-a-hora.ativo.layouts.operacional')

<script>
    window.blade = window.blade || {};
    window.blade.chartData = {};
    window.blade.chartData.title = 'Contato Efetivo / Promessa de Pagamento';
    window.blade.chartData.categories = @json($horas);
    window.blade.chartData.lineDataset = {
        label        : '% Acordo/Contato Efetivo',
        data         : @json($perc_acordo_contato),
        isPercentage : true
    };
    window.blade.chartData.barsDatasets = [
        {
            label : 'Repasse',
            data  : @json($repasse)
        }
    ];
    window.blade.chartData.barsDatasets2 = [
        {
            label : 'Acordo Verbal',
            data  : @json($acordo_verbal)
        }
    ];

    window.blade.rosquinhas = [
        @json($capacitylog),
        @json($discagemcomp),

    ];
</script>

<div class="row">
<div class="col-xs-12 col-lg-5">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title text-center" v-text="blade.chartData.title"></h4>
        </div>
        <div class="panel-body no-padding">
            <chart-bars-line
                    style="height: 250px; margin: 15px 0; background-color: white;"
                    :categories="blade.chartData.categories"
                    :line-dataset="blade.chartData.lineDataset"
                    :bars-datasets="blade.chartData.barsDatasets"
                    :bars-datasets2="blade.chartData.barsDatasets">

            </chart-bars-line>
        </div>
    </div>
</div>

<div class="col-lg-4">
<div class="row">
    <div class="col-lg-6">
        <chart-doughnut
                style="height: 150px;"
                title="Capacity X Logados"
                :dataset="blade.rosquinhas[1]"
        ></chart-doughnut>
    </div>

    <div class="col-lg-6">
        <chart-doughnut
                style="height: 150px;"
                title="Discagem X Completadas"
                :dataset="blade.rosquinhas[2]"
        ></chart-doughnut>
    </div>
</div>

<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                Mailing Recebido
                <i class="fa fa-fw fa-users pull-right"></i>
            </h4>
        </div>
        <div class="panel-body">
            <p class="lead text-center no-margin" style="line-height: 43px;">
                {{number_format($recebido->Mailing,0,',','.')}}
            </p>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                Contato Efetivo
                <i class="fa fa-fw fa-signal pull-right"></i>
            </h4>
        </div>
        <div class="panel-body">
            <p class="lead text-center no-margin" style="line-height: 43px;">
                {{number_format($contatof->Contato_Efetivo,0,',','.')}}
            </p>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                Acordo/Mailing
                <i class="fa fa-sort-amount-asc pull-right"></i>
            </h4>
        </div>
        <div class="panel-body">
            <p class="lead text-center no-margin" style="line-height: 43px;">
                {{number_format($acordoM->Acordo,1,',','.')}}%
            </p>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-2">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                Comparativo Contato efetivo
                <i class="fa fa-fw fa-bar-chart pull-right"></i>
            </h4>
        </div>
        <table class="table table-condensend">
            {{--@foreach($cincosegundos as $dado)--}}
                <tr>
                    <th>Valor</th>
                    <td class="text-right">
                        Valor1
                        Valor2
                    </td>
                </tr>
            {{--@endforeach--}}
        </table>
    </div>
</div>