@extends('layouts.app')

@section('title', 'SNMP Logs - ISP ERP System')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-clipboard-list me-2"></i>
                                SNMP Logs
                            </h3>
                            <p class="mb-0 opacity-75">Manage SNMP monitoring logs</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('snmp-logs.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add Log
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <form method="GET" action="{{ route('snmp-logs.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <div class="input-group">
                                <span class="input-group-text bg-transparent border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" name="search" class="form-control border-start-0" 
                                       placeholder="Search logs..." value="{{ request('search') }}">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select name="switch_id" class="form-select custom-form-control">
                                <option value="">All Switches</option>
                                @foreach($switches as $switch)
                                    <option value="{{ $switch->id }}" {{ request('switch_id') == $switch->id ? 'selected' : '' }}>
                                        {{ $switch->name }} ({{ $switch->ip }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input type="text" name="data_type" class="form-control custom-form-control" 
                                   placeholder="Data Type" value="{{ request('data_type') }}">
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-primary btn-custom w-100">
                                <i class="fas fa-filter me-2"></i>Filter
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- SNMP Logs List -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-list me-2"></i>
                        All SNMP Logs ({{ $snmpLogs->total() }})
                    </h4>
                </div>
                <div class="custom-card-body">
                    @if($snmpLogs->count() > 0)
                        <div class="table-responsive">
                            <table class="table custom-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Switch</th>
                                        <th>Data Type</th>
                                        <th>Data Value</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($snmpLogs as $log)
                                        <tr>
                                            <td>{{ $snmpLogs->firstItem() + $loop->index }}</td>
                                            <td>
                                                <a href="{{ route('switches.show', $log->switch_id) }}" class="text-primary">
                                                    <strong>{{ $log->switch->name }}</strong>
                                                </a>
                                                <br>
                                                <small class="text-muted">{{ $log->switch->ip }}</small>
                                            </td>
                                            <td>
                                                <span class="badge bg-primary custom-badge">{{ $log->data_type }}</span>
                                            </td>
                                            <td>
                                                <div style="max-width: 300px; overflow: hidden; text-overflow: ellipsis;">
                                                    {{ Str::limit($log->data_value, 80) }}
                                                </div>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $log->created_at->format('M d, Y h:i A') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ route('snmp-logs.show', $log->id) }}" 
                                                       class="btn btn-info btn-custom" title="View">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('snmp-logs.edit', $log->id) }}" 
                                                       class="btn btn-warning btn-custom" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <form action="{{ route('snmp-logs.destroy', $log->id) }}" 
                                                          method="POST" class="d-inline"
                                                          onsubmit="return confirm('Are you sure you want to delete this log?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger btn-custom" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-4">
                            {{ $snmpLogs->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No SNMP logs found</h5>
                            <p class="text-muted">Get started by adding your first SNMP log.</p>
                            <a href="{{ route('snmp-logs.create') }}" class="btn btn-primary btn-custom mt-3">
                                <i class="fas fa-plus me-2"></i>Add Log
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection