@extends('admin.app')

@section('content')
    <div id="alert-container">
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
    </div>

    <div class="row g-3">
        <div class="col-12 col-lg-6">
            <h5 class="section-title">Grupo</h5>
            <div class="glass-divider mb-3"></div>

            <div class="group-info mb-2">
                <span class="text">Nome:</span>
                <span class="text-light ms-2">{{ $companyName }}</span>
            </div>

            <div class="group-info mb-2">
                <span class="text">Total de Concessionárias:</span>
                <span class="text-light ms-2">{{ $grupo->count() }}</span>
            </div>
        </div>

        <div class="col-12 col-lg-6">
            <h5 class="section-title">Programa</h5>
            <div class="glass-divider mb-3"></div>

            <div class="group-info mb-2">
                <span class="text">Patch:</span>
                <span class="text-light ms-2">—</span>
            </div>

            <div class="row col-lg-12" style="margin: 5px;">
                <button class="btn btn-glass">Gerenciar</button>
            </div>
        </div>
    </div>

    <div class="glass-card mt-4 groups-card">
        <div class="d-flex align-items-center gap-2 mb-3">
            <i class="bi bi-people"></i>
            <p class="label mb-0">Concessionárias</p>
        </div>

        @foreach ($grupo as $dealer)
            @php $slugDN = Str::slug($dealer->dn); @endphp
            <div class="group-item-v2 mb-2" id="dealer-{{ $dealer->id }}">
                <div class="group-main">
                    <div class="d-flex align-items-center gap-2">
                        <span class="group-title">Terminal - {{ $dealer->name }}</span>
                        <span class="badge bg-primary">DN: {{ $dealer->dn }}</span>
                    </div>

                    <div class="group-subtitle mt-1">
                        Velocidade da conexão: <span id="speed-{{ $slugDN }}">0</span> Mbps |
                        <span id="status-{{ $slugDN }}" class="status-dot bg-danger"></span>
                        <span class="badge bg-danger">Inativo</span>
                    </div>
                </div>

                <span
                    class="group-title
                text-{{ $dealer->authorization_status == 'authorized' ? 'success' : ($dealer->authorization_status == 'pending' ? 'warning' : 'danger') }}">
                    @if ($dealer->authorization_status == 'authorized')
                        Autorizado - Sim
                    @elseif ($dealer->authorization_status == 'pending')
                        Pendente
                    @else
                        Não autorizado
                    @endif
                </span>
                <form action="{{ route('patch.authorize', $dealer->dn) }}" method="POST">
                    @csrf
                    <label for="version-{{ $dealer->id }}">Escolha a versão:</label>
                    <select name="version" id="version-{{ $dealer->id }}" required>
                        <option value="12">Liberar versão</option>
                    </select>
                    <button type="submit">Autorizar</button>
                </form>

                <form
                    action="{{ $dealer->authorization_status == 'authorized' ? route('toyota-dealer.revoke', $dealer->dn) : route('toyota-dealer.authorize', $dealer->dn) }}"
                    method="POST" style="display: inline;">
                    @csrf
                    <button type="submit"
                        class="btn btn-sm {{ $dealer->authorization_status == 'authorized' ? 'btn-danger' : 'btn-success' }}">
                        {{ $dealer->authorization_status == 'authorized' ? 'Revogar' : 'Autorizar' }}
                    </button>
                </form>
            </div>
        @endforeach
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            @foreach ($grupo as $dealer)
                (function() {
                    const slugDN = "{{ Str::slug($dealer->dn) }}";
                    setInterval(function() {
                        fetch('/public/api/toyota-dealer/speed/{{ $dealer->dn }}')
                            .then(res => res.json())
                            .then(data => {
                                const speedEl = document.getElementById('speed-' + slugDN);
                                const statusDot = document.getElementById('status-' + slugDN);
                                if (!speedEl || !statusDot) return;

                                speedEl.innerText = data.speed;

                                const statusBadge = statusDot.nextElementSibling;
                                if (data.speed > 0) {
                                    // Se há velocidade, considera online
                                    statusDot.classList.remove('bg-danger');
                                    statusDot.classList.add('bg-success');
                                    statusBadge.classList.remove('bg-danger');
                                    statusBadge.classList.add('bg-success');
                                    statusBadge.innerText = 'Online';
                                } else {
                                    // Sem velocidade ou offline
                                    statusDot.classList.remove('bg-success');
                                    statusDot.classList.add('bg-danger');
                                    statusBadge.classList.remove('bg-success');
                                    statusBadge.classList.add('bg-danger');
                                    statusBadge.innerText = 'Inativo';
                                }
                            })
                            .catch(() => {
                                // Em caso de erro na fetch, marca como offline
                                const speedEl = document.getElementById('speed-' + slugDN);
                                const statusDot = document.getElementById('status-' + slugDN);
                                if (!speedEl || !statusDot) return;

                                speedEl.innerText = 0;

                                const statusBadge = statusDot.nextElementSibling;
                                statusDot.classList.remove('bg-success');
                                statusDot.classList.add('bg-danger');
                                statusBadge.classList.remove('bg-success');
                                statusBadge.classList.add('bg-danger');
                                statusBadge.innerText = 'Inativo';
                            });
                    }, 2000);
                })();
            @endforeach
        });
    </script>
@endsection