@push('styles')
    <link href="{{ asset('assets/css/textdrip-power-dialer.css') }}" rel="stylesheet">
@endpush
<div class="row">
    <div class="col-xxl-8">
        <div class="card shadow">
            @if(session()->has('message'))
                <div id="import_message" class="pt-8 px-8">
                    {!! session()->get('message') !!}
                </div>
            @endif
            <div class="card-header">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1"> 
                        <i class="fa fa-magnifying-glass position-absolute ms-6"></i>
                        <input type="text" class="form-control w-400px ps-14 me-2" placeholder="Search contacts in all power dialer pipeline" id="globalSearchContact" />
                    </div>
                    <button type="button" id="globalSearchContactBtn" class="btn btn-sm btn-primary me-2">Search</button>
                    <a href="{{ route('power-dialer-pipelines.index') }}" class="btn btn-sm btn-secondary clearbtn">Clear</a>
                </div>
                <div class="card-toolbar">
                    <a href="javascript:void(0);" onclick="td_modal.smallModal('{{ route('power-dialer-pipelines.create') }}','{{__('Add Power Dialer Pipeline')}}');" class="btn btn-sm btn-primary me-2 {{ !$allowNewPowerdialerPipeline ? 'd-none' : '' }}"><i class="fa fa-plus fa-lg"></i>Power Dialer Pipeline</a>
                </div>
            </div>
            <div class="card-body">
                <div id="searchContact" class="d-flex m-2 px-1 py-0 d-none">
                    <input class="form-control form-control-sm w-100 searchContact" placeholder="Search contact by name">
                    <button type="button" class="btn btn-sm btn-bg-secondary btn-color-gray-800 p-3 lh-0 ms-2 searchContactBtn" disabled><i class="fa fa-search p-0 fs-8"></i></button>
                    <button class="btn btn-sm btn-bg-secondary btn-color-gray-800 p-3 lh-0 ms-2 show-select-contact-btn"><i class="fa fa-plus p-0 fs-8"></i></button>
                    <button class="btn btn-sm btn-bg-secondary btn-color-gray-800 p-3 lh-0 ms-2 hide-select-contact-btn d-none"><i class="fa fa-close p-0 fs-8"></i></button>
                </div>
                <div id="contactSelect" class="d-flex m-2 px-1 py-0 d-none">
                    <select class="form-select form-select-sm w-100" data-placeholder="Select contact"></select>
                </div>
                <div class="alert alert-dismissible bg-light-warning border border-warning border-dashed d-flex flex-column flex-sm-row w-100 p-3 d-none" id="boardWarning">
                    <div class="flex-column pe-0 pe-sm-10 pt-2" id="boardWarningMessage"></div>
                </div>
                @if($pipelines->count() <= 0)
                    <div class="d-flex justify-content-center">
                        No data found.
                    </div>
                @else
                    <div id="docs_jkanban_fixed_height" class="kanban-fixed-height" data-jkanban-height="300"></div>
                @endif
            </div>
        </div>
    </div>
    <div class="col-xxl-4">
        <div class="card shadow" style="top:85px;position:sticky">
            <div class="card-body p-0">
                <div class="accordion" id="kt_accordion_1">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="dialerAccordionHeader">
                            <button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#dialerAccordionbody" aria-expanded="true" aria-controls="dialerAccordionbody">Dialer</button>
                        </h2>
                        <div id="dialerAccordionbody" class="accordion-collapse collapse show" aria-labelledby="dialerAccordionHeader" data-bs-parent="#kt_accordion_1">
                            <div class="accordion-body">
                                <div class="card card-flush shadow" id="automationTasks" style="display:none;">
                                    <div class="card-header min-h-unset pt-2">
                                        <div class="card-title flex-column">
                                            <h4 class="fw-bold">Perform Automation Task</h4>
                                        </div>
                                        <div class="card-toolbar">
                                            <button class="btn btn-sm btn-primary" id="skip">Skip &amp; Call next</button>
                                        </div>
                                    </div>
                                    <div class="card-body pt-3">
                                        @php
                                            $bColor = ["secondary","success","warning","danger","dark"];
                                        @endphp
                                        @foreach ($automationTasks as $t)
                                            <a href="javascript:void(0);" data-task-id="{{ $t->id }}" id="performTask"><span class="badge me-2 mt-2 badge-{{ $bColor[array_rand($bColor)] }}">{{ $t->title }}</span></a>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="alert alert-primary d-flex flex-column flex-sm-row" id="nextCall" style="display:none !important;">
                                    <div class="d-flex flex-column">
                                        <span>Please wait next call wil be start in <span id="nextCallTimer">10</span> seconds.</span>
                                    </div>
                                </div>
                                <input type="hidden" id="user" value="{{ $auth_user->id }}" />
                                <input type="hidden" id="api" value="{{ $defaultNumber['messaging_api'] }}" />
                                <input type="hidden" id="ownerNumber" value="{{ str_replace('+',"",$defaultNumber['phone']) }}" />
                                <input type="hidden" id="recording" value="" />
                                <div class="spinner-backdrop">
                                    <div class="sk-chase">
                                        <div class="sk-chase-dot"></div>
                                        <div class="sk-chase-dot"></div>
                                        <div class="sk-chase-dot"></div>
                                        <div class="sk-chase-dot"></div>
                                        <div class="sk-chase-dot"></div>
                                        <div class="sk-chase-dot"></div>
                                    </div>
                                </div>
                                <input type="text" class="des-address" id="dailerNumber" autocomplete="off" onfocus="var temp_value=this.value;this.value='';this.value=temp_value;" />
                                <div class="after-ui" style="display:none;">
                                    <h6 id="callTime" class="calltime mt-5">00:00</h6>
                                    <audio id="callAudio" autoplay></audio>
                                    <div class="number_wrap">
                                        <div class="number_list digit">1</div>
                                        <div class="number_list digit">2</div>
                                        <div class="number_list digit">3</div>
                                        <div class="number_list digit">4</div>
                                        <div class="number_list digit">5</div>
                                        <div class="number_list digit">6</div>
                                        <div class="number_list digit">7</div>
                                        <div class="number_list digit">8</div>
                                        <div class="number_list digit">9</div>
                                        <div class="number_list digit">*</div>
                                        <div class="number_list digit">0</div>
                                        <div class="number_list digit">#</div>
                                    </div>
                                    <div class="number_wrap_action">
                                        <div class="number_list blank"></div>
                                        <div class="number_list recordCall" id="recordCall" style="display:none;" data-bs-toggle="tooltip" title="Record"><i class="fa fa-record-vinyl"></i></div>
                                        <div class="number_list stopRecordCall" id="stopRecordCall" style="display:none;" data-bs-toggle="tooltip" title="Stop recording"><i class="fa fa-stop"></i></div>
                                        <div class="number_list call" id="call" data-bs-toggle="tooltip" title="Call"><i class="fa fa-phone"></i></div>
                                        <div class="number_list hangUpCall" id="hangUpCall" style="display:none;" data-bs-toggle="tooltip" title="Hangup"><i class="fa fa-phone"></i></div>
                                        <div class="number_list blank"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="dialerHistoryAccordionHeader">
                            <button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#dialerHistoryAccordionBody" aria-expanded="false" aria-controls="dialerHistoryAccordionBody">Call History</button>
                        </h2>
                        <div id="dialerHistoryAccordionBody" class="accordion-collapse collapse" aria-labelledby="dialerHistoryAccordionHeader" data-bs-parent="#kt_accordion_1">
                            <div class="accordion-body scroll-y" style="height: 620px;">
                                @foreach ($callHistory as $c)
                                    @php
                                        $duration = $c->duration ? ($c->duration < 60 ? $c->duration." seconds" : number_format($c->duration / 60, 2)."minute") : '0 seconds';
                                    @endphp
                                    <div class="card mb-5 shadow">
                                        <div class="card-body p-5">
                                            <div class="position-absolute start-0 top-0 w-4px h-100 rounded-2 bg-info"></div>
                                            <div class="d-flex flex-row justify-content-between">
                                                <div class="d-flex flex-column flex-start">
                                                    <div class="mb-2 fs-7 fw-bold">{{ $c->name." ".($c->last_name) ? $c->last_name : "" }}</div>
                                                    <div class="mb-2 fs-7 fw-bold">From:&nbsp;<span class="text-muted">{{ $c->from_number }}</span></div>
                                                    <div class="mb-2 fs-7 fw-bold">To:&nbsp;<span class="text-muted">{{ $c->to_number }}</span></div>
                                                </div>
                                                <div class="d-flex flex-column flex-end">
                                                    <div class="mb-2 fs-7 badge badge-light-success">{{ $duration }}</div>
                                                    <div class="mb-2 fs-7 fw-bold">{{ formatDate($c->created_at) }}</div>
                                                    <div class="mb-2">
                                                        <button class="btn btn-link btn-color-primary p-0 me-2 power-dialer-contacts-notes-drawer" data-bs-toggle="tooltip" title="Notes" data-id="{{ encryptStr($c->contact_id) }}" data-name="{{ ($c->name == "" && $c->last_name == "")? $c->to_number : $c->name." ".$c->last_name }}"><i class="fa fa-comment fa-lg"></i></button>
                                                        <button class="btn btn-link btn-color-primary p-0 me-2" data-bs-toggle="tooltip" title="Tags" onclick="td_modal.smallModal('{{ route('contacts.contactTag').'/'.encryptStr($c->contact_id) }}','{{ __('Add Tags') }}');"><i class="fa fa-tag fa-lg"></i></button>
                                                        <button class="btn btn-link btn-color-primary p-0 me-2" data-bs-toggle="tooltip" title="Pipelines" onclick="td_modal.smallModal('{{route('contacts.contactPowerDialerPipeline', encryptStr($c->contact_id))}}','{{ __('Power Dialer Pipeline') }}');"><i class="fa fa-chart-simple fa-lg"></i></button>
                                                        <a href="{{ route('power-dialer-pipelines.power-dialer-download-file',$c->id) }}" class="btn btn-link btn-color-primary p-0 me-2" data-bs-toggle="tooltip" title="Download"><i class="fa fa-download fa-lg"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script type="text/javascript">
        var string = '{!! addcslashes(json_encode($boardData), "'") !!}';
    </script>
    @if($defaultNumber['messaging_api'] == 5)
        <script type="text/javascript" src="//rtc.cdn.infobip.com/2.0.0/infobip.rtc.js"></script>
    @endif
    @if($defaultNumber['messaging_api'] == 3)
        <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script type="text/javascript" src="https://unpkg.com/@signalwire/js@^1"></script>
    @endif
    <script type="text/javascript" src="{{asset('assets/js/pages/power-dialer-pipeline.js')}}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/contact-drawer.js')}}"></script>    
    @include('pages.pipeline.power-dialer-pipeline.notesDrawer')
@endpush