{{-- Overlay Call Ended --}}
@include('pages.components.cards.atendimento.overlay-chamada-desconectada')

{{-- Em Atendimento Subheader --}}
@include('layout.partials.subheader._subheader-v1')

@php
    $isCallback = $_GET['isCallback'];
@endphp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="row flex-xxl-row w-100 in-call">
    <div class="d-flex col-sm-12 col-lg-11 p-0">
        <div class="{{ Metronic::printClasses('content-container', false) }}">

            @if ($isCallback == 'true')
                {{-- Atendimento Callback --}}
                <div class="row callBack">
                    <div class="col">
                        <div class="row px-5 align-content-start flex-column">
                            <div class="card-button col">
                                <span class="font-size-h2 font-weight-bold ml-1">Ações</span>
                                @include($components_path . '.btn_finalChamada', [
                                    'class' => 'card-stretch gutter-b scale-anim mt-2',
                                ])
                            </div>

                            <!-- btn: Transfer Call -->
                            <div class="card-button col">
                                @include($components_path . '.btn_transferChamada', [
                                    'class' => 'card-stretch gutter-b scale-anim',
                                ])
                            </div>

                            <div class="card-button col">
                                @include($components_path . '.btn_finalPausando', [
                                    'class' => 'card-stretch gutter-b scale-anim',
                                ])
                            </div>

                            <!-- <div class="card-button col">
                        <span class="font-size-h2 font-weight-bold mb-5">&nbsp;</span>
                        @include($components_path . '.btn_retencao', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div> -->
                        </div>
                    </div>

                    <div class="col">
                        @include($components_path . '.filasTempoReal', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div>

                    <div class="col">
                        @include($components_path . '.ribeirao.infoCall', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div>
                </div>
            @else
                {{-- Atendimento Inbound --}}
                <div class="row p-0">
                    <div class="col paddingLeft992PxSize">
                        @include($components_path . '.franca.infoUser', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div>

                    <div class="col paddingLeftEnderecoBox500PxSize">
                        @include($components_path . '.franca.infoPlano', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div>

                    <div class="col paddingLeftMobile788PxSize">
                        @include($components_path . '.franca.infoCall', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div>
                </div>

                <div class="buttonRender d-lg-none">
                    <div class="row align-content-start paddingLeft992PxSize">
                        <div class="card-button col flex-fill">
                            <span class="font-size-h2 font-weight-bold ml-1">Ações</span>
                        </div>

                        <div class="card-button col-6 col-sm-3 paddingLeftRemove992PxSize addPaddingRightCall">
                            @include($components_path . '.btn_finalChamada', [
                                'class' => 'card-stretch gutter-b scale-anim',
                            ])
                        </div>

                        <div class="card-button col-6 col-sm-3">
                            @include($components_path . '.btn_finalPausando', [
                                'class' => 'card-stretch gutter-b scale-anim',
                            ])
                        </div>
                        <!-- btn: Transfer Call -->
                        <div class="card-button col-6 col-sm-3 removePaddingLeftCall addPaddingRightCall">
                            @include($components_path . '.btn_transferChamada', [
                                'class' => 'card-stretch gutter-b scale-anim',
                            ])
                        </div>
                        <div class="card-button col-6 col-sm-3">
                            @include($components_path . '.btn_transferChamadaCegas', [
                                'class' => 'card-stretch gutter-b scale-anim',
                            ])
                        </div>



                        <!-- <div class="card-button col">
                        <span class="font-size-h2 font-weight-bold mb-5">&nbsp;</span>
                        @include($components_path . '.btn_retencao', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div> -->
                    </div>
                </div>

                <div class="row callBackThrown paddingLeft992PxSize">
                    <div class="col-12 col-sm-6 paddingLeftRemove992PxSize">
                        @include($components_path . '.filasTempoReal', [
                            'class' => 'card-stretch gutter-b scale-anim',
                        ])
                    </div>
                    <div class="{{ Metronic::printClasses('content-container', false) }} p-lg-0 pl-0 col-12 col-sm-6">
                        {{-- Atendimento Agente -> Protocolos --}}

                        <div>
                            <div class="col paddingLeftRemove992PxSize paddingRightRemove992PxSize">
                                @include($components_path . '.protocolosAgent', [
                                    'class' => 'card-stretch gutter-b scale-anim',
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>



    <div class="col-lg-1 p-0 d-none d-lg-block">
        <div class="row align-content-start" style="margin-right: -23px">
            <div class="card-button col flex-fill">
                <span class="font-size-h2 font-weight-bold ml-1">Ações</span>
            </div>

            <div class="card-button col-12 pr-0">
                @include($components_path . '.btn_finalChamada', [
                    'class' => 'card-stretch gutter-b scale-anim',
                ])
            </div>

            <div class="card-button col-12 pr-0">
                @include($components_path . '.btn_finalPausando', [
                    'class' => 'card-stretch gutter-b scale-anim',
                ])
            </div>
            <!-- btn: Transfer Call -->
            <div class="card-button col-12 pr-0">
                @include($components_path . '.btn_transferChamada', [
                    'class' => 'card-stretch gutter-b scale-anim',
                ])
            </div>
            <div class="card-button col-12 pr-0">
                @include($components_path . '.btn_transferChamadaCegas', [
                    'class' => 'card-stretch gutter-b scale-anim',
                ])
            </div>



            <!-- <div class="card-button col">
            <span class="font-size-h2 font-weight-bold mb-5">&nbsp;</span>
            @include($components_path . '.btn_retencao', [
                'class' => 'card-stretch gutter-b scale-anim',
            ])
        </div> -->
        </div>

    </div>
</div>

<style>
    /* Adiciona Borda as Box de Calls */
    .borderRadius {
        border-radius: 15px !important;
    }

    /* Retira Padding e Adiciona a determinada Box */
    @media screen and (max-width: 992px) {
        .paddingLeft992PxSize {
            padding-left: 30px !important;
        }

        .paddingLeftRemove992PxSize {
            padding-left: 0px !important;
        }

        .paddingRightRemove992PxSize {
            padding-right: 0px !important;
        }
    }

    /* Retira Padding e Adiciona a determinada Box */
    @media screen and (max-width: 788px) {
        .paddingLeftMobile788PxSize {
            padding-left: 30px !important;
        }

    }

    /* Retira Padding e Adiciona a determinada Box */
    @media screen and (max-width: 575px) {
        .addPaddingRightCall {
            padding-right: 25px !important;
        }

        .removePaddingLeftCall {
            padding-left: 0px !important;
        }

    }

    /* Retira Padding e Adiciona a determinada Box */
    @media screen and (max-width: 500px) {
        .paddingLeftEnderecoBox500PxSize {
            padding-left: 30px !important;
        }

    }

    /* Adiciona Borda as Box de Calls */
    @media screen and (min-width: 992px) {
        .borderRadius {
            border-radius: 15px 0px 0px 15px !important;
        }

    }
</style>