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

@section("content")
    
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h1 class="text-center">Painel de Ramais</h1>
            </div>

            <div id="box_main" class="d-flex justify-content-center card-body">
                
            </div>
            <div class="card">
                <div class="card-body d-flex justify-content-around text-center">
                    <div>
                        <h3>Total de Ramais</h3>
                        <p id="totalQueues" class="form-label badge badge-md bg-danger m-r-10" style="font-size: 13px; padding: 10px 15px; background-color:#404E67 !important; color:white;">{{count($extensions)}}</p>
                    </div>

                    <div>
                        <h3>Ramais Disponíveis</h3>
                        <p id="up" class="form-label badge badge-md bg-success m-r-10" style="font-size: 13px; padding: 10px 15px; color:white;">{{$count_ativo}}</p>
                    </div>
                    <div>
                        <h3>Ramais Inativos</h3>
                        <p id="down" class="form-label badge badge-md bg-light m-r-10" style="font-size: 13px; padding: 10px 15px; color:white;">{{$count_inativo}}</p>
                       
                    </div>

                    <div>
                        <h3>Ramais Ocupados</h3>
                        <p id="busy" class="form-label badge badge-md bg-danger m-r-10"  style="font-size: 13px; padding: 10px 15px;   !important; color:white;">{{$conta_busy}}
                        </p>
                    </div>

                </div>
            </div>

            @if(isset($extensions))
                <div class="card">

                    <div class="col-12 col-md-12">
                        <div class="card mb-3">
                            <div class="card-body">
                                <div class="card-header">
                                    <h2 class="text-center">Chamadas Ativas</h2>
                                </div>
                                <div class="card-body"> 
                                    <table class="table font-weight-bold align-middle"> 
                                        <thead class="thead-light">
                                            <tr>
                                                <th >Origem</th> 
                                                <th >Destino</th>
                                                <th >Duração</th>
                                                <th >Caller ID Name</th>
                                                <th >Contexto</th>
                                                <th >Unique Id</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($legs as $key => $call)
                                                <tr> <td>{{$call['calleridnum']}}</td>
                                                    <td>{{$call['exten']}}</td>
                                                    <td>{{$call['durationRaw']}}</td>
                                                    <td>{{$call['calleridname']}}</td>
                                                    @if ($call['context'] == 'queue')
                                                        <td>{{$call['context']}}</td>
                                                    @else
                                                        <td>--</td>
                                                    @endif
                                                    <td>{{$call['uniqueid']}}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
    
                    <div class="col-12 col-md-12">
                        
                        <div class="card mb-3"> 
                            <div class="card-body">
                                <div class="card-header">
                                    <h2 class="text-center">Status dos Ramais</h2>
                                </div>
                                
                                <div id="ext_register_table" style="max-height:430.5px; overflow-y:scroll;"> 
                                    <ul class="summary-list" id="ext_data" style="display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;">
                                        
                                        @foreach ($extensions as $extension)
                                        
                                            @if(isset($status[$extension->name]) && $status[$extension->name]["status"] == "OK" )

                                                <li id="{{$extension->name}}" style="width: 5%; text-align: center; box-sizing: border-box; padding: 5px; margin: 5px 0; border-bottom: 1px solid rgb(129, 117, 199);">
                                                    <a href="javascript:;" id="{{$extension->name}}" style="font-size:10px; font-weight:500; color:#78CD51; cursor:text; display: flex; flex-direction: column; align-items: center; text-decoration: none;">
                                                        <i class="fas fa-phone-square" style="font-size:25px; color:#78CD51;"></i>
                                                       {{$extension->alias}}
                                                    </a>
                                                </li>
                                            @elseif(isset($status[$extension->name]) && $status[$extension->name]["status"] == "BUSY")

                                                <li id="{{$extension->name}}" style="width: 5%; text-align: center; box-sizing: border-box; padding: 5px; margin: 5px 0; border-bottom: 1px solid rgb(129, 117, 199);">
                                                    <a href="javascript:;" id="{{$extension->name}}" style="font-size:10px; font-weight:500; color:#FF6347; cursor:text; display: flex; flex-direction: column; align-items: center; text-decoration: none;">
                                                        <i class="fas fa-phone-square" style="font-size:25px; color:#FF6347;"></i>
                                                       {{$extension->alias}}
                                                    </a>
                                                </li>
                                            @else
                                                <li id="{{$extension->alias}}" style="width: 5%; text-align: center; box-sizing: border-box; padding: 5px; margin: 5px 0; border-bottom: 1px solid rgb(129, 117, 199);">
                                                    <a href="javascript:;" id="{{$extension->alias}}" style="font-size:10px; font-weight:500; color:gray; cursor:text; display: flex; flex-direction: column; align-items: center; text-decoration: none;">
                                                        <i class="fas fa-phone-square" style="font-size:25px; color:gray;"></i>
                                                        {{$extension->alias}}
                                                    </a>
                                                </li>
                                            @endif
                                        @endforeach
 
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
    <script>
        // 5000 milissegundos = 5 segundos
        const intervaloRecarga = 5000; 

        // Define uma função que será chamada a cada 'intervaloRecarga'
        setInterval(function() {
            // window.location.reload() força o navegador a recarregar a página atual
            window.location.reload(); 
        }, intervaloRecarga);
    </script>
@endsection