@extends('layout.app')
@section('content')
    <div class="card mx-auto">
        <div class="d-flex justify-content-between align-items-center border p-2">
            <h1 class="card-title float-left mb-0">
                Active Connections — {{ $nas->id }}. {{ $nas->shortname }} ({{ $nas->nasname }})
            </h1>
            <div>
                @if (!$error && !empty($active))
                    <a href="{{ route('mikrotiks.active-connections.export', $nas->id) }}" class="btn btn-success">
                        <span><i class="fa-solid fa-file-excel"></i></span> Download Excel
                    </a>
                @endif
                <a href="{{ route('mikrotiks.index') }}" class="btn border">
                    <span><i class="fa-solid fa-arrow-left"></i></span> Back
                </a>
            </div>
        </div>
        <div class="card-body">
            @if ($error)
                <div class="alert alert-danger text-center mb-0">
                    <i class="fa-solid fa-triangle-exclamation"></i> {{ $error }}
                </div>
            @elseif (empty($active))
                <div class="alert alert-info text-center mb-0">
                    <i class="fa-solid fa-circle-info"></i> No active connections found on this Mikrotik.
                </div>
            @else
                <p class="mb-2"><strong>Total online users:</strong> {{ count($active) }}</p>
                <div class="table-responsive">
                    <table id="dataTable" class="table table-bordered">
                        <thead style="background: #78716C !important;color:#FFFFFF;">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Service</th>
                                <th scope="col">Caller ID</th>
                                <th scope="col">Address</th>
                                <th scope="col">Uptime</th>
                                <th scope="col">Encoding</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($active as $index => $connection)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $connection['name'] ?? '' }}</td>
                                    <td>{{ $connection['service'] ?? '' }}</td>
                                    <td>{{ $connection['caller-id'] ?? '' }}</td>
                                    <td>{{ $connection['address'] ?? '' }}</td>
                                    <td>{{ $connection['uptime'] ?? '' }}</td>
                                    <td>{{ $connection['encoding'] ?? '' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
@endsection