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

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

@php
$isCallback = false;
@endphp

<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>

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

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

                <div class="col paddingLeftMobile788PxSize">
                    @include($components_path.'.ribeirao.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 pr-0">
                        <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 pr-0">
                <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>
            
            <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>