@extends('layout.app')

@section('title', 'Mikrotik Users')

@section('content')
<x-material-page-header 
    title="Mikrotik Users" 
    :breadcrumbs="[
        ['name' => 'Mikrotik', 'url' => route('mikrotik.index')],
        ['name' => 'Users']
    ]"
    :secondaryAction="'syncUsers()'"
    secondaryActionLabel="Sync Users"
    secondaryActionIcon="refresh"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Daftar Mikrotik Users</h6>
                </div>
                <div class="card-body pt-0">
                    @if(isset($error))
                        <div class="alert alert-danger">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i>{{ $error }}
                        </div>
                    @else
                        <!-- PPPoE Users -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h5><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">router</i>PPPoE Users</h5>
                                <div class="table-responsive">
                                    <table class="table align-items-center mb-0">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Password</th>
                                                <th>Profile</th>
                                                <th>Service</th>
                                                <th>Disabled</th>
                                                <th>Comment</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($pppoeUsers ?? [] as $user)
                                                <tr>
                                                    <td>{{ $user['name'] ?? '-' }}</td>
                                                    <td>{{ $user['password'] ?? '-' }}</td>
                                                    <td>{{ $user['profile'] ?? '-' }}</td>
                                                    <td>{{ $user['service'] ?? '-' }}</td>
                                                    <td>
                                                        <span class="badge badge-sm bg-gradient-{{ ($user['disabled'] ?? 'yes') === 'no' ? 'success' : 'danger' }}">
                                                            {{ ($user['disabled'] ?? 'yes') === 'no' ? 'Active' : 'Disabled' }}
                                                        </span>
                                                    </td>
                                                    <td>{{ $user['comment'] ?? '-' }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="6" class="text-center">No PPPoE users found</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Hotspot Users -->
                        <div class="row">
                            <div class="col-12">
                                <h5><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">wifi</i>Hotspot Users</h5>
                                <div class="table-responsive">
                                    <table class="table align-items-center mb-0">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Password</th>
                                                <th>Profile</th>
                                                <th>Disabled</th>
                                                <th>Comment</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($hotspotUsers ?? [] as $user)
                                                <tr>
                                                    <td>{{ $user['name'] ?? '-' }}</td>
                                                    <td>{{ $user['password'] ?? '-' }}</td>
                                                    <td>{{ $user['profile'] ?? '-' }}</td>
                                                    <td>
                                                        <span class="badge badge-sm bg-gradient-{{ ($user['disabled'] ?? 'yes') === 'no' ? 'success' : 'danger' }}">
                                                            {{ ($user['disabled'] ?? 'yes') === 'no' ? 'Active' : 'Disabled' }}
                                                        </span>
                                                    </td>
                                                    <td>{{ $user['comment'] ?? '-' }}</td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="5" class="text-center">No Hotspot users found</td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>
function syncUsers() {
    if (confirm('Are you sure you want to sync users from Mikrotik?')) {
        fetch('{{ route("mikrotik.sync-users") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Success: ' + data.message + ' (Count: ' + data.count + ')');
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while syncing users');
        });
    }
}
</script>
@endsection