@extends('layout.app')

@section('title', 'NetXMS - Network Monitoring')

@section('content')
<x-material-page-header 
    title="NetXMS Monitoring" 
    description="Network Monitoring & Management System"
    :breadcrumbs="[
        ['name' => 'Dashboard', 'url' => route('dashboard')],
        ['name' => 'NetXMS']
    ]"
    :action="route('netxms.edit')" 
    actionLabel="Edit Konfigurasi" 
    actionIcon="settings"
    :secondaryAction="isset($enabled) && $enabled ? 'testConnection()' : null"
    secondaryActionLabel="Test Connection"
    secondaryActionIcon="check_circle"
/>

<div class="container-fluid py-4">
    @if(session('success'))
    <div class="row">
        <div class="col">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">check_circle</i></span>
                <span class="alert-text">{{ session('success') }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>
    @endif

    @if(session('error'))
    <div class="row">
        <div class="col">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                <span class="alert-text">{{ session('error') }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>
    @endif

    @if(isset($enabled) && !$enabled)
    <div class="row">
        <div class="col">
            <div class="card my-4">
                <div class="card-body text-center py-5">
                    <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">settings</i>
                    <h4 class="text-muted">NetXMS Tidak Diaktifkan</h4>
                    <p class="text-muted">{{ $message ?? 'Silakan konfigurasi NetXMS di file config/netxms.php atau .env' }}</p>
                    <div class="mt-4">
                        <h6>Konfigurasi yang diperlukan:</h6>
                        <code class="text-sm">
                            NETXMS_ENABLED=true<br>
                            NETXMS_URL=http://your-netxms-server:4701<br>
                            NETXMS_USERNAME=admin<br>
                            NETXMS_PASSWORD=your_password
                        </code>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @elseif(isset($error))
    <div class="row">
        <div class="col">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                <span class="alert-text"><strong>Error:</strong> {{ $error }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>
    @endif

    @if(isset($enabled) && $enabled)
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Total Nodes"
                :value="'<div class=\"spinner-border spinner-border-sm\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div>'"
                id="total-nodes"
                icon="devices"
                color="primary"
            />
        </div>
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Active Alarms"
                :value="'<div class=\"spinner-border spinner-border-sm\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div>'"
                id="active-alarms"
                icon="warning"
                color="danger"
            />
        </div>
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Online Nodes"
                :value="'<div class=\"spinner-border spinner-border-sm\" role=\"status\"><span class=\"visually-hidden\">Loading...</span></div>'"
                id="online-nodes"
                icon="check_circle"
                color="success"
            />
        </div>
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Status"
                :value="'<span class=\"badge badge-sm bg-gradient-success\" id=\"connection-status\">Connected</span>'"
                icon="public"
                color="info"
            />
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <div class="col-xl-8">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded me-2 text-primary" style="font-size: 20px; vertical-align: middle;">devices</i> Network Nodes
                    </h6>
                </div>
                <div class="card-body pt-0">
                    <div id="nodes-container">
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-3 text-muted">Memuat data nodes...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded me-2 text-danger" style="font-size: 20px; vertical-align: middle;">warning</i> Active Alarms
                    </h6>
                </div>
                <div class="card-body pt-0">
                    <div id="alarms-container">
                        <div class="text-center py-5">
                            <div class="spinner-border text-danger" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-3 text-muted">Memuat data alarms...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
function testConnection() {
    $.ajax({
        url: '{{ route("netxms.test-connection") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                alert('Koneksi berhasil!\n\n' + response.message);
            } else {
                alert('Koneksi gagal!\n\n' + response.message);
            }
        },
        error: function(xhr) {
            alert('Terjadi kesalahan saat menguji koneksi');
        }
    });
}

// Load nodes
function loadNodes() {
    $.ajax({
        url: '{{ route("netxms.nodes") }}',
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                const container = $('#nodes-container');
                if (response.data.length > 0) {
                    let html = '<div class="table-responsive"><table class="table align-items-center table-flush"><thead class="thead-light"><tr><th>Node</th><th>Status</th><th>IP Address</th></tr></thead><tbody>';
                    response.data.forEach(function(node) {
                        html += '<tr><td>' + (node.name || node.hostname || 'N/A') + '</td>';
                        html += '<td><span class="badge badge-' + (node.status === 'online' ? 'success' : 'danger') + '">' + (node.status || 'Unknown') + '</span></td>';
                        html += '<td>' + (node.ip_address || 'N/A') + '</td></tr>';
                    });
                    html += '</tbody></table></div>';
                    container.html(html);
                } else {
                    container.html('<p class="text-center text-muted">Tidak ada nodes</p>');
                }
            } else {
                $('#nodes-container').html('<p class="text-center text-danger">Gagal memuat data nodes</p>');
            }
        },
        error: function() {
            $('#nodes-container').html('<p class="text-center text-danger">Terjadi kesalahan saat memuat nodes</p>');
        }
    });
}

// Load alarms
function loadAlarms() {
    $.ajax({
        url: '{{ route("netxms.alarms") }}',
        method: 'GET',
        success: function(response) {
            if (response.success && response.data) {
                const container = $('#alarms-container');
                if (response.data.length > 0) {
                    let html = '<ul class="list-unstyled">';
                    response.data.slice(0, 10).forEach(function(alarm) {
                        html += '<li class="mb-3"><div class="d-flex align-items-center"><div class="icon icon-shape bg-gradient-danger text-white rounded-circle shadow mr-3"><i class="ni ni-notification-70"></i></div><div><h6 class="mb-0">' + (alarm.message || 'Alarm') + '</h6><small class="text-muted">' + (alarm.timestamp || '') + '</small></div></div></li>';
                    });
                    html += '</ul>';
                    container.html(html);
                } else {
                    container.html('<p class="text-center text-muted">Tidak ada alarms aktif</p>');
                }
            } else {
                $('#alarms-container').html('<p class="text-center text-danger">Gagal memuat data alarms</p>');
            }
        },
        error: function() {
            $('#alarms-container').html('<p class="text-center text-danger">Terjadi kesalahan saat memuat alarms</p>');
        }
    });
}

// Initialize on page load
$(document).ready(function() {
    @if(isset($enabled) && $enabled)
    loadNodes();
    loadAlarms();
    
    // Refresh every 30 seconds
    setInterval(function() {
        loadNodes();
        loadAlarms();
    }, 30000);
    @endif
});
</script>
@endsection