{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content.extended')

{{-- User Center --}}


<div class="row">
    <div class="col">
        <div class="card card-custom bg-white {{ @$class }} shadow-none">

            {{-- Header --}}
            <div class="card-header border-0 pr-0">
                <div class="row align-items-center w-100">
                    <div class="col">
                        <div class="row align-items-center">

                            <div class="col-auto mt-3">
                                <div class="d-flex align-items-center">
                                    <label class="mr-3 mb-0 d-none d-md-block">De:</label>

                                    <div class="row">
                                        <div class="col">
                                            <div class="input-group date" id="kt_datetimepicker_7_1" data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input" placeholder="Start date" data-target="#kt_datetimepicker_7_1" />
                                                <div class="input-group-append" data-target="#kt_datetimepicker_7_1" data-toggle="datetimepicker">
                                                    <span class="input-group-text cursor-pointer">
                                                        <i class="la la-calendar"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <label class="mb-0 d-none d-md-block my-auto">Até:</label>

                                        <div class="col">
                                            <div class="input-group date" id="kt_datetimepicker_7_2" data-target-input="nearest">
                                                <input type="text" class="form-control datetimepicker-input" placeholder="End date" data-target="#kt_datetimepicker_7_2" />
                                                <div class="input-group-append" data-target="#kt_datetimepicker_7_2" data-toggle="datetimepicker">
                                                    <span class="input-group-text cursor-pointer">
                                                        <i class="la la-calendar-check-o"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>

                            <div class="col mt-3">
                                <div class="d-flex align-items-center">

                                    <label class="mr-3 mb-0 d-none d-md-block">Fila:</label>

                                    <select class="form-control selectpicker" id="filter--queues">

                                        <option value="all">Todas</option>

                                        @foreach($queues as $key=> $queue)
                                        <option value="{{$queue->name}}">{{$queue->name}}</option>
                                        @endforeach

                                    </select>

                                    <div class="dropdown-menu">
                                        <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1">
                                            <ul class="dropdown-menu inner show" role="presentation"></ul>
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <div class="col mt-3">
                                <div class="d-flex align-items-center">

                                    <label class="mr-3 mb-0 d-none d-md-block">Agente:</label>

                                    <select class="form-control selectpicker" id="filter--agent">

                                        <option value="all">Todos</option>

                                        @foreach($agents as $key=> $agent)
                                        <option value="{{$agent->agent_id}}">{{$agent->agent}}</option>
                                        @endforeach

                                    </select>

                                </div>
                            </div>

                            <div class="col-auto col-form-label mt-3">
                                <div class="radio-inline">
                                    <label class="radio">
                                        <input type="radio" name="reportType" value="" checked="checked" />
                                        <span></span>
                                        Resumo
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="reportType" value="day" />
                                        <span></span>
                                        Por dia
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="reportType" value="hour" />
                                        <span></span>
                                        Por hora
                                    </label>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-auto mt-3">
                        <a href="#" id="download--csv" class="btn btn-light-primary pl-6 pr-4 font-weight-bold" data-toggle="tooltip" title="Gerar CSV"><i class="fas fa-download"></i></a>
                        <a href="#" id="filter--apply" class="btn btn-primary px-6 font-weight-bold">Pesquisar</a>
                    </div>
                </div>



            </div>

            {{-- Body --}}
            <div class="card-body d-flex flex-column align-items-center p-6 content-box">
                <div id="filter--warning" class="w-100">
                    <div class="flex-column d-flex align-items-center justify-content-center w-100 bg-light-primary py-5 rounded">
                        <i class="fas fa-chevron-up text-primary"></i>
                        <span class="text-primary mt-2"><span class="font-weight-bold">Atenção!</span> Entre com os parâmetros para pesquisa! </span>
                    </div>
                </div>
                <div id="chart_analyticReport"></div>

                <config data-RbProtocol="" data-RbIp=""></config>

                <table class="table table-striped w-100" id="kt_datatable">

                    <thead>
                    </thead>

                    <tbody>
                    </tbody>
                </table>

                <div class="loading-table row p-5">
                    <div class="spinner spinner-primary py-3 pl-4 pr-5"></div>
                    Carregando...
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom CSS for Tooltip -->
<style>
    .tooltip .tooltip-inner {
        background: #fff;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
        color: #000;
        font-size: 12px;
        font-family: "Montserrat", Arial;
        font-weight: 500;
    }

    .tooltip .arrow::before {
        border-bottom-color: #fff;
    }
</style>


@endsection

{{-- Scripts Section --}}
@section('scripts')

<script src="{{ asset('js/custom/gestor/timeAgentReport/index.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/pages/widgets.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/custom/includes/headerDashAgent.js') }}" type="text/javascript"></script>

@endsection