@extends('template.content')

@section('title', 'Pilih Router Mikrotik')

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Pilih Router</h4>
        </div>
    </div>

    <div class="row">
        @foreach($routers as $router)
            <div class="col-md-4">
                <div class="card shadow-sm">
                    <div class="card-body text-center">
                        <div class="m-b-10">
                            <i class="fas fa-server fa-3x text-info"></i>
                        </div>
                        <h4 class="card-title">{{ $router->nama_router }}</h4>
                        <p class="text-muted">{{ $router->ip_router }}</p>

                        <!-- Status Card Livewire -->
                        @livewire('mikrotik-status-card', ['routerId' => $router->id], key($router->id))

                        <div class="mt-3">
                            <span class="badge {{ $router->status == 'Online' ? 'bg-success' : 'bg-danger' }} m-b-10">
                                {{ $router->status }}
                            </span>
                        </div>
                        <div class="d-grid gap-2 mt-3">
                            <div class="row g-2">
                                <div class="col-6">
                                    <a href="{{ route('mikrotik.profile.index', $router->id) }}"
                                        class="btn btn-info btn-sm w-100 text-white">
                                        <i class="fas fa-wifi"></i> HS Profiles
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{{ route('hotspot.active.index', $router->id) }}"
                                        class="btn btn-outline-info btn-sm w-100">
                                        <i class="fas fa-bolt"></i> HS Active
                                    </a>
                                </div>
                            </div>
                            <div class="row g-2">
                                <div class="col-6">
                                    <a href="{{ route('ppp.profile.index', $router->id) }}"
                                        class="btn btn-primary btn-sm w-100 text-white">
                                        <i class="fas fa-user-cog"></i> PPP Profile
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{{ route('ppp.secret.index', $router->id) }}"
                                        class="btn btn-warning btn-sm w-100 text-white">
                                        <i class="fas fa-user-lock"></i> PPP Secret
                                    </a>
                                </div>
                            </div>
                            <a href="{{ route('ppp.active.index', $router->id) }}" class="btn btn-success btn-sm text-white">
                                <i class="fas fa-ethernet"></i> PPP Active
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach

        @if($routers->isEmpty())
            <div class="col-12 text-center">
                <div class="alert alert-warning">
                    Belum ada router yang terdaftar. <a href="{{ route('router.create') }}">Tambah Router Sekarang</a>
                </div>
            </div>
        @endif
    </div>
@endsection