@extends(getenv("THEME") . ".layouts.argo")

@section("content")
    
    <div class="container-fluid">

        <div class="card">

            <div class="card-header">

                <h1 class="text-center">Painel das Filas</h1>

            </div>

            <div id="box_main" class="d-flex justify-content-center card-body">
                
                <form action={{route(getenv("THEME") . ".dash_queue.search")}} method="POST" class="w-25">
                    
                    @csrf

                    <input type="hidden" name="method" value="first">
                    
                    <div>
                        
                        <div class="d-flex flex-row justify-content-center rounded">
                            
                            <div class="d-flex align-items-center border rounded-left m-0 px-2 py-1" style="font-size: 14px;">Filas</div>
                            
                            <div id="box_items" class="d-flex flex-row border border-secondary text-nowrap" style="min-width: 280px; height: auto;">

                                <div id="item_confirmed" class="d-flex flex-row flex-wrap justify-content-center"></div>
                            
                            </div>
                            
                            <div id="button_select" class="d-flex align-items-center border rounded-right p-3" style="cursor: pointer;">
                                
                                <i id="icon" class="fas fa-chevron-down fa-fw"></i>
                                
                            </div>
                            
                        </div>
                        
                        <div id="content_select" class="d-none justify-content-center position-absolute border rounded bg-white" style="min-width:380px ;height: 250px; z-index: 1000; overflow-y: scroll;">
                            
                            <div class="d-flex flex-column px-4 py-3">
                                
                                @forelse ($queues as $queue)

                                    @php

                                        $checked = false;

                                    @endphp

                                    @if(isset($queuesQuery))

                                        @foreach($queuesQuery as $queueQuery)

                                            @if($queue->id == $queueQuery->id)

                                                @php

                                                    $checked = true;

                                                @endphp

                                            @endif

                                        @endforeach

                                    @endif
                                
                                    <div>
                                        
                                        <input class="items_select" type="checkbox" name="queue[{{$queue->id}}]" id="{{$queue->id}}" {{ $checked ? "checked" : "" }}>
                                        
                                        <label for="{{$queue->id}}">{{$queue->descricao}}</label>
                                        
                                    </div>
                                
                                @empty
                                
                                    <p> Não há filas cadastradas</p>
                                
                                @endforelse
                                
                            </div>
                            
                        </div>
                        
                    </div>
                    
                    <div class="d-flex flex-column justify-content-center align-items-center mt-3 ml-4">
                        
                        <button id="button_filter" type="submit" class="btn btn-primary">Filtrar</button>
                        
                    </div>
                    
                </form>
                
            </div>
            
            <div class="card">

                <div class="card-body d-flex justify-content-around text-center">

                    <div>

                        <h3>Total de Filas</h3>

                        <p id="totalQueues">{{isset($totalQueues) ? $totalQueues : 0}}</p>

                    </div>

                    <div>

                        <h3>Agentes(únicos)</h3>

                        <p id="totalAgentUnique">{{isset($totalAgentUnique) ? $totalAgentUnique : 0}}</p>

                    </div>

                    <div>

                        <h3>Chamadas em espera</h3>

                        <p id="waitingCalls">{{isset($waitingCalls) ? $waitingCalls : 0}}</p>

                    </div>

                </div>

            </div>

            @if(isset($allQueues))

                <div class="card d-flex flex-row align-items-center">

                    <div class="card-body">


                        <div class="card mx-auto" style="width: 550px;">

                            <div class="card-body">

                                <div class="card-header">

                                    <h2 class="text-center">Status por Agente</h2>

                                </div>

                                <div>

                                    <canvas width="500px" height="500px" id="graficoAgentes"></canvas>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="card-body">

                        <div class="card mx-auto" style="width: 550px;">

                            <div class="card-body">

                                <div class="card-header">

                                    <h2 class="text-center">Totais (Chamadas/Completadas/Abandonadas)</h2>

                                </div>

                                <div>

                                    <canvas width="500px" height="500px" id="graficoTotais"></canvas>

                                </div>

                            </div>

                        </div>
                        
                    </div>

                </div>

                @php

                    $showMember = false;

                    foreach($allQueues as $queuesMembers) {

                        if(!empty($queuesMembers["members"])) {

                            $showMember = true;

                        }

                    }

                @endphp

                @if(($showMember))

                    <div class="card">

                        <div class="card-header">

                            <h2 class="text-center">Agentes</h2>

                        </div>

                        <div class="card-body">

                            <div class="card">

                                <div id="card_main_members" class="card-body">

                                    @foreach ($allQueues as $key => $members)

                                        @if(isset($members["members"]) && count($members["members"]) >= 1)
                                        
                                            <div class="card">

                                                <div class="card-header">

                                                    <h2 class="text-center">Agentes da Fila {{$members["queue"]}}</h2>

                                                </div>

                                                <div class="card-body">

                                                    <table class="table text-center font-weight-bold align-middle">

                                                        <thead class="thead-light">

                                                            <tr>

                                                                <th>Fila</th>
                                                                <th>Nome</th>
                                                                <th>Interface</th>
                                                                <th>Status</th>
                                                                <th>CallsTaken</th>

                                                            </tr>

                                                        </thead>

                                                        <tbody>

                                                            @foreach ($members["members"] as $membro)

                                                                @php

                                                                    switch($membro["status"]) {

                                                                        case "Livre":

                                                                            $status = "table-success";

                                                                            break;

                                                                        case "Em uso":

                                                                        case "Chamando":

                                                                        case "Chamando/Em uso":

                                                                        case "Em espera (hold)":

                                                                        case "Ocupado":

                                                                            $status = "table-warning";

                                                                            break;

                                                                        case "Indisponível":

                                                                        case "Inválido":

                                                                            $status = "table-danger";

                                                                            break;

                                                                        case "Desconhecido":

                                                                        default:

                                                                            $status = "table-secondary";

                                                                            break;

                                                                    }

                                                                @endphp

                                                                <tr class="{{ $status }}">

                                                                    <td>{{ $membro["queue"] }}</td>
                                                                    <td>{{ $membro["name"] }}</td>
                                                                    <td>{{ $membro["interface"] }}</td>
                                                                    <td>{{$membro["status"]}}</td>
                                                                    <td>{{ $membro["callsTaken"] }}</td>

                                                                </tr>

                                                            @endforeach
                                                                
                                                        </tbody>

                                                    </table>

                                                </div>

                                            </div>

                                        @else

                                            <div class="card">

                                                <div class="card-body">

                                                    <h2 class="text-center m-5">Sem agentes na Fila de Atendimento {{ $members["queue"] }}...</h2>

                                                </div>

                                            </div>

                                        @endif
                                    
                                    @endforeach

                                </div>

                            </div>

                        </div>

                    </div>

                @else

                    <div class="card">

                        <div class="card-body">

                            <h2 class="text-center m-5">Não há agentes em nenhuma fila de atendimento...</h2>

                        </div>

                    </div>

                @endif

                @php

                    $showEntrie = false;

                    foreach($allQueues as $queuesEntries) {

                        if(!empty($queuesMembers["entries"])) {

                            $showEntrie = true;

                        }

                    }

                @endphp

                @if($showEntrie)

                    <div class="card">

                        <div class="card-header">

                            <h2 class="text-center">Entradas</h2>

                        </div>

                        <div id="card_main_entries" class="card-body">

                            @foreach ($allQueues as $key => $entries)

                                @if(isset($entries["entries"]) && count($entries["entries"]) >= 1)

                                    <div class="card">

                                        <div class="card-header">
                                            
                                            <h2 class="text-center">Entradas(espera) da Fila {{$entries["queue"]}} </h2>

                                        </div>

                                        <div class="card-body">

                                            <table class="table text-center align-middle">

                                                <thead class="thead-light">

                                                    <tr>

                                                        <th>Fila</th>
                                                        <th>Posição</th>
                                                        <th>Calleridnum</th>
                                                        <th>callleridname</th>
                                                        <th>Espera</th>
                                                        <th>Canal</th>
                                                        <th>Uniqueid</th>

                                                    </tr>

                                                </thead>

                                                <tbody>

                                                    @foreach ($entries["entries"] as $entrie)

                                                        <tr>

                                                            <td>{{$entrie["queue"]}}</td>
                                                            <td>{{$entrie["position"]}}</td>
                                                            <td>{{$entrie["calleridnum"]}}</td>
                                                            <td>{{$entrie["calleridname"]}}</td>
                                                            <td>{{$entrie["wait"]}}</td>
                                                            <td>{{$entrie["channel"]}}</td>
                                                            <td>{{$entrie["uniqueid"]}}</td>

                                                        </tr>

                                                    @endforeach

                                                </tbody>

                                            </table>

                                        </div>

                                    </div>

                                    @else

                                        <div class="card">

                                            <div class="card-body">

                                                <h2 class="text-center m-5">Sem entradas na Fila de Atendimento {{ $entries["queue"] }}...</h2>

                                            </div>

                                        </div>

                                @endif

                            @endforeach

                        </div>

                    </div>

                @else

                    <div class="card">

                        <div class="card-body">

                            <h2 class="text-center m-5">Não há entradas em nenhuma fila de atendimento...</h2>

                        </div>

                    </div>

                @endif
            
            @endif

        </div>

    </div>

    <script>

        window.queuesQuery = @json($queuesQuery ?? [])
        
        window.requestPayload = @json($requestPayload ?? [])

    </script>

@endsection