@component('components.portlets', [
    'title' => 'Detalhamento SLA/Penalizações',
    'initial_col' => false,
    'data_parent' => 'accordion-rel-cart',
    'id_panel_collapse' => 'collapseDetalhamentoSla',
    'bg' => 'bg-danger',
    'open_close' => false,
])

    <table class="table table-hover table-sm">
        <tbody>
            <tr class="text-light bg-secondary bg-gradient">
                <td class="text-center">TMO Real</td>
                <td class="text-center">-</td>
            </tr>
        </tbody>
    </table>

    <div class="row m-0">
        <div class="col-md-6 card">
            <table class="table table-hover table-sm m-b-0">
                <thead>
                    <tr>
                        <th colspan="3" class="text-center">Expurgo</th>
                    </tr>
                    <tr>
                        <th class="text-center">Chamadas</th>
                        <th class="text-center">Short Call</th>
                        <th class="text-center">Recontato Acima da Média</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-md-6 card">
            <table class="table table-hover table-sm m-b-0">
                <thead>
                    <tr>
                        <th colspan="3" class="text-center">Recontato</th>
                    </tr>
                    <tr>
                        <th class="text-center">Meta</th>
                        <th class="text-center">Real</th>
                        <th class="text-center">Diferença</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row m-0">
        <div class="col-md-12 card">
            <table class="table table-hover table-sm m-b-0">
                <thead>
                    <tr>
                        <th></th>
                        <th class="text-center">Qtde</th>
                        <th class="text-center">Valor</th>
                        <th class="text-center">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Diferença Protocolos x Chamadas</td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                    </tr>
                    <tr>
                        <td>Garantia</td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    @component('components.portlets', [
        'title' => 'Projeção',
        'initial_col' => false,
        'class_portlet' => 'm-b-0',
        'bg' => 'bg-primary',
        // 'bg' => 'bg-deg-1',
    ])
        @slot('content_complement_title')
            <div class="float-right" style="margin-bottom: -5px;">
                {{-- <span class="text-muted m-r-5">Realizado:</span> --}}
                <span class="text-muted" data-name="value566">dd a dd/mm</span>
            </div>
        @endslot

        <div class="card-box m-b-0 p-b-0">
            <table class="table table-hover table-sm m-b-0">
                <thead>
                    <tr>
                        <th></th>
                        <th class="text-center">Volume</th>
                        <th class="text-center">Percentual</th>
                        <th class="text-center">Valor 1</th>
                        <th class="text-center">Valor 2</th>
                        <th class="text-center">Valor 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Chamadas (Forecast)</td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                        <td class="text-center"><span data-name="">-</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    @endcomponent

@endcomponent