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

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

{{-- User Center --}}


<script>
    enable_reason = "{{env('ENABLE_REASON')}}"
    console.log("Motivo está ativo?", enable_reason);
</script>

<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">Pesquisa N°:</label>

                                    <select class="selectMaxWidth form-control selectpicker" id="filter--surveyId" multiple>

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

                                        @foreach($survey as $key=> $survey)
                                        <option value="{{$survey->id}}">{{$survey->id}} - {{$survey->survey_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-auto col-form-label mt-3">
                                <div class="radio-inline inputsCheck">
                                    <label class="radio">
                                        <input type="radio" name="ramalOrAgent" value="transfersurvey" />
                                        <span></span>
                                        Transferidas ou Ramais
                                    </label>
                                    <label class="radio">
                                        <input type="radio" name="ramalOrAgent" value="queuedial" checked="checked" />
                                        <span></span>
                                        Agentes
                                    </label>
                                </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/Ramais:</label>

                                    <script>
                                        var options = {
                                            transfersurvey: [
                                                                                            ],
                                            queuedial: [
                                                                                            ]
                                        }
                                    </script>

                                    <select class="form-control selectpicker" id="filter--agent">
                                    </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-2 mt-3">
                                <div class="d-flex align-items-center">

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

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

                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5 </option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>


                                    </select>

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

                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5 </option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10" selected>10</option>

                                    </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-auto mt-3">
                                <div class="d-flex align-items-center">

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

                                    <div class="radio-inline">
                                        <label class="radio">
                                            <input type="radio" name="type" value="rmvnull" />
                                            <span></span>
                                            Remover Vazios
                                        </label>
                                        <label class="radio">
                                            <input type="radio" name="type" value="all" checked="" />
                                            <span></span>
                                            Mostrar Todos
                                        </label>
                                    </div>

                                </div>
                            </div>

                            <div class="col mt-3 InputHidden" style="max-width: 275px;">
                                <div class="d-flex align-items-center">

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

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

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

                            @if (env('ENABLE_REASON') == 'true')
                            <div class="col mt-3 InputHidden">
                                <div class="d-flex align-items-center">

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

                                    <select class="selectMaxWidth form-control selectpicker" id="filter--reason" multiple>

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

                                        @foreach($reasons as $key=> $reason)
                                        <option value="{{$reason->id}}">{{$reason->reason}}</option>
                                        @endforeach

                                    </select>

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

                                </div>
                            </div>
                            @endif

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

                @if (env('EXTERNAL_REC') == TRUE)
                <config data-RbProtocol="" data-RbIp=""></config>
                @endif

                <table class="table table-striped w-100" id="kt_datatable">
                </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;
    }

    .rating-label.checked i {
        color: var(--yellow);
    }

    .survey:last-child {
        margin-bottom: 0 !important;
    }

    .selectMaxWidth button, .selectMaxWidth {
        max-width: 200px !important;
    }
</style>


@endsection

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

<script type="module" src="{{ asset('js/custom/gestor/surveyReport/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