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

@section("content")

    <div class="col">
        <div class="card shadow-sm">
            
            <div class="card-header border-0">
                @can('gerenciarIpAcesso.create')
                @if(count($ips) == 0)
                <a class="btn bg-{{ session("template")->nome }} float-right" href="{{route(getenv("THEME") . ".gerenciarIp.create")}}">Adicionar IP</a>
                @endif
                @endcan
                <h1 class="mb-0 float-left">Gerenciar IPs Acesso </h1>
            </div>
            
            <div class="card-body py-3">
                <p >Aqui você pode adicionar IPs que serão permitidos parealizarem login no PABX (acesso administrativo).</p>
                <p>Quando é realizado a limitação por IPs de acesso, solicitamos que seja adicionado os IPs da BRDSoft para que possamos acessar e realizar o suporte:</p>

                <strong>IPs:</strong>
                <ul style="list-style: none; padding-left: 30px; margin-top: 5px;">
                    <li>177.11.143.135</li>
                    <li>187.109.40.212</li>
                    <li>187.76.205.130</li>
                </ul>
            </div>
        </div>

        <div class="card shadow-sm mt-3">
            <div class="table-responsive">
                {{-- Reduzi a largura total máxima da tabela para aproximar as colunas --}}
                <table class="table align-items-center table-sm table-flush" style="border-collapse: collapse; width: 100%; margin: 0 auto;">
                    <thead class="thead-light">
                        <tr>
                            {{-- Larguras ajustadas para "puxar" os dados para o centro --}}
                            <th style="width: 5%; padding: 10px 5px; text-align: center;">Id</th>
                            <th class="text-center" style="padding: 10px 5px;">IPs Liberados</th>
                            <th class="text-center" style="width: 10%; padding: 10px 5px;">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($ips as $ip)
                        <tr>
                            <td class="text-center" style="padding: 8px 5px;"><b>#{{$ip->id}}</b></td>
                            <td class="text-center" style="padding: 8px 5px;">
                                @php
                                    $lista = is_string($ip->ips) ? json_decode($ip->ips, true) : $ip->ips;
                                    $lista = is_array($lista) ? $lista : [];
                                    $limite = 6; // Aumentado para 6 ips por linha
                                @endphp

                                {{-- Grid configurado para 6 colunas --}}
                                <div style="display: inline-grid; grid-template-columns: repeat(6, 1fr); gap: 4px; justify-content: center; align-items: center;">
                                    
                                    @foreach(array_slice($lista, 0, $limite) as $ipValor)
                                        <span style="background: #e2e8f0; color: #2d3748; padding: 2px 4px; border-radius: 3px; border: 1px solid #cbd5e0; font-size: 10px; font-family: monospace; min-width: 85px; text-align: center;">
                                            {{ $ipValor }}
                                        </span>
                                    @endforeach

                                    @if(count($lista) > $limite)
                                        {{-- Expansão também mantendo 6 colunas --}}
                                        <div id="extra-ips-{{ $ip->id }}" style="display: none; grid-column: 1 / span 6; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 4px;">
                                            @foreach(array_slice($lista, $limite) as $ipValor)
                                                <span style="background: #e2e8f0; color: #2d3748; padding: 2px 4px; border-radius: 3px; border: 1px solid #cbd5e0; font-size: 10px; font-family: monospace; min-width: 85px; text-align: center;">
                                                    {{ $ipValor }}
                                                </span>
                                            @endforeach
                                        </div>
                                        
                                        <div style="grid-column: 1 / span 6; margin-top: 5px;">
                                            <button type="button" 
                                                    onclick="toggleTableIps('{{ $ip->id }}')" 
                                                    id="btn-toggle-{{ $ip->id }}"
                                                    style="background: #f7fafc; border: 1px solid #d1d9e6; color: #5e72e4; cursor: pointer; font-size: 9px; font-weight: bold; border-radius: 10px; padding: 1px 8px;">
                                                +{{ count($lista) - $limite }} mais
                                                
                                            </button>
                                        </div>
                                    @endif

                                    @if(empty($lista))
                                        <span style="grid-column: 1 / span 6; color: #adb5bd; font-size: 11px;">Nenhum IP</span>
                                    @endif
                                </div>
                            </td>
                            <td class="text-center" style="padding: 8px 5px;">
                                @can('gerenciarIpAcesso.edit')
                                <a class="btn btn-primary btn-sm" href="{{route(getenv("THEME") . '.gerenciarIp.edit', $ip->id)}}" style="padding: 2px 6px;">
                                    <i class="fas fa-edit" style="font-size: 10px;"></i>
                                </a> 
                                @endcan 
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        function toggleTableIps(id) {
            const container = document.getElementById('extra-ips-' + id);
            const btn = document.getElementById('btn-toggle-' + id);

            if (container.style.display === 'none' || container.style.display === '') {
                container.style.display = 'grid'; 
                btn.innerText = 'recolher';
            } else {
                container.style.display = 'none';
                const totalExtras = container.querySelectorAll('span').length;
                btn.innerText = '+' + totalExtras + ' mais';
            }
        }
    </script>

@endsection