@extends('layouts.app')

@section('title', 'Log Aktivitas Mikrotik')

@section('content')
<div class="container-fluid">
    <div class="corporate-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-clipboard-list text-primary me-2"></i>
                    Log Aktivitas Mikrotik
                </h1>
                <p class="text-muted small mb-0">Riwayat lengkap aktivitas dan monitoring router Mikrotik</p>
            </div>
            <div class="col-md-4 text-end">
                <a href="{{ route('mikrotiks.index') }}" class="btn btn-outline-secondary btn-sm me-2">
                    <i class="fas fa-arrow-left me-1"></i>
                    Kembali
                </a>
                <button type="button" class="btn btn-primary btn-sm" onclick="refreshLogs()">
                    <i class="fas fa-sync-alt me-1"></i>
                    Refresh
                </button>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-2 col-md-4 mb-3">
            <div class="stat-card stat-card-primary">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                    <div class="stat-number">{{ number_format($stats['total']) }}</div>
                    <div class="stat-label">Total Log</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 mb-3">
            <div class="stat-card stat-card-info">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-calendar-day"></i>
                    </div>
                    <div class="stat-number">{{ $stats['today'] }}</div>
                    <div class="stat-label">Hari Ini</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 mb-3">
            <div class="stat-card stat-card-success">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-number">{{ $stats['success_today'] }}</div>
                    <div class="stat-label">Berhasil Hari Ini</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 mb-3">
            <div class="stat-card stat-card-danger">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-times-circle"></i>
                    </div>
                    <div class="stat-number">{{ $stats['failed_today'] }}</div>
                    <div class="stat-label">Gagal Hari Ini</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 mb-3">
            <div class="stat-card stat-card-warning">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-calendar-week"></i>
                    </div>
                    <div class="stat-number">{{ $stats['this_week'] }}</div>
                    <div class="stat-label">Minggu Ini</div>
                </div>
            </div>
        </div>
        <div class="col-xl-2 col-md-4 mb-3">
            <div class="stat-card stat-card-secondary">
                <div class="card-body">
                    <div class="stat-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="stat-number">{{ $stats['this_month'] }}</div>
                    <div class="stat-label">Bulan Ini</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Statistics -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Statistik Aksi
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($actionStats as $stat)
                        <div class="col-md-3 col-sm-6 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="stat-mini-icon bg-primary text-white">
                                        <i class="{{ \App\Models\MikrotikLog::where('action', $stat->action)->first()->getActionIcon() ?? 'fas fa-info' }}"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="stat-mini-number">{{ number_format($stat->count) }}</div>
                                    <div class="stat-mini-label">{{ \App\Models\MikrotikLog::where('action', $stat->action)->first()->getFormattedAction() ?? ucfirst(str_replace('_', ' ', $stat->action)) }}</div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Form -->
    <div class="card mb-4">
        <div class="card-header">
            <h6 class="card-title mb-0">
                <i class="fas fa-filter me-2"></i>
                Filter Log
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('mikrotiks.logs') }}" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Router</label>
                    <select name="mikrotik_id" class="form-select">
                        <option value="">Semua Router</option>
                        @foreach($mikrotiks as $mikrotik)
                            <option value="{{ $mikrotik->id }}" {{ request('mikrotik_id') == $mikrotik->id ? 'selected' : '' }}>
                                {{ $mikrotik->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Aksi</label>
                    <select name="action" class="form-select">
                        <option value="">Semua Aksi</option>
                        <option value="test_connection" {{ request('action') == 'test_connection' ? 'selected' : '' }}>Test Koneksi</option>
                        <option value="status_change" {{ request('action') == 'status_change' ? 'selected' : '' }}>Perubahan Status</option>
                        <option value="toggle_active" {{ request('action') == 'toggle_active' ? 'selected' : '' }}>Toggle Aktif</option>
                        <option value="backup" {{ request('action') == 'backup' ? 'selected' : '' }}>Backup</option>
                        <option value="reboot" {{ request('action') == 'reboot' ? 'selected' : '' }}>Reboot</option>
                        <option value="check_all" {{ request('action') == 'check_all' ? 'selected' : '' }}>Cek Semua</option>
                        <option value="create" {{ request('action') == 'create' ? 'selected' : '' }}>Tambah Router</option>
                        <option value="update" {{ request('action') == 'update' ? 'selected' : '' }}>Update Router</option>
                        <option value="delete" {{ request('action') == 'delete' ? 'selected' : '' }}>Hapus Router</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select name="success" class="form-select">
                        <option value="">Semua Status</option>
                        <option value="1" {{ request('success') === '1' ? 'selected' : '' }}>Berhasil</option>
                        <option value="0" {{ request('success') === '0' ? 'selected' : '' }}>Gagal</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Dari Tanggal</label>
                    <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Sampai Tanggal</label>
                    <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                </div>
                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-1"></i>
                        Filter
                    </button>
                    <a href="{{ route('mikrotiks.logs') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-1"></i>
                        Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Logs Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="card-title mb-0">
                <i class="fas fa-list me-2"></i>
                Daftar Log ({{ $logs->total() }} entries)
            </h6>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-danger btn-sm" onclick="clearOldLogs()">
                    <i class="fas fa-trash me-1"></i>
                    Hapus Log Lama
                </button>
                <button type="button" class="btn btn-outline-success btn-sm" onclick="exportLogs()">
                    <i class="fas fa-download me-1"></i>
                    Export
                </button>
            </div>
        </div>
        <div class="card-body">
            @if($logs->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th width="140">Waktu</th>
                                <th width="120">Router</th>
                                <th width="140">Aksi</th>
                                <th>Pesan</th>
                                <th width="100">Status</th>
                                <th width="80">Response</th>
                                <th width="120">IP Address</th>
                                <th width="60">Detail</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($logs as $log)
                            <tr>
                                <td>
                                    <div class="text-dark fw-bold">{{ $log->created_at->format('H:i:s') }}</div>
                                    <small class="text-muted">{{ $log->created_at->format('d/m/Y') }}</small>
                                </td>
                                <td>
                                    @if($log->mikrotik)
                                        <span class="badge bg-secondary">{{ $log->mikrotik->name }}</span>
                                        <br><small class="text-muted">{{ $log->mikrotik->host }}</small>
                                    @else
                                        <span class="badge bg-info">System</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $log->getActionBadgeClass() }}">
                                        <i class="{{ $log->getActionIcon() }} me-1"></i>
                                        {{ $log->getFormattedAction() }}
                                    </span>
                                </td>
                                <td>
                                    <div>{{ Str::limit($log->message, 80) }}</div>
                                    @if($log->old_status && $log->new_status && $log->old_status !== $log->new_status)
                                        <small class="text-muted">
                                            <i class="fas fa-arrow-right me-1"></i>
                                            {{ $log->old_status }} → {{ $log->new_status }}
                                        </small>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge {{ $log->getStatusBadgeClass() }}">
                                        <i class="fas fa-{{ $log->success ? 'check' : 'times' }} me-1"></i>
                                        {{ $log->success ? 'Berhasil' : 'Gagal' }}
                                    </span>
                                </td>
                                <td>
                                    <span class="text-muted">{{ $log->getFormattedResponseTime() }}</span>
                                </td>
                                <td>
                                    <small class="text-muted">{{ $log->ip_address ?? '-' }}</small>
                                </td>
                                <td>
                                    @if($log->details)
                                        <button type="button" class="btn btn-outline-info btn-sm" 
                                                onclick="showLogDetail({{ $log->id }})" 
                                                title="Lihat Detail">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div class="text-muted">
                        Menampilkan {{ $logs->firstItem() }} - {{ $logs->lastItem() }} dari {{ $logs->total() }} entries
                    </div>
                    {{ $logs->appends(request()->query())->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">Tidak Ada Log</h5>
                    <p class="text-muted">Belum ada aktivitas yang tercatat atau sesuai dengan filter</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal untuk Detail Log -->
<div class="modal fade" id="logDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle me-2"></i>
                    Detail Log
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="logDetailContent">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.stat-mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.stat-mini-number {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
}

.stat-mini-label {
    font-size: 12px;
    color: #6b7280;
}
</style>

<script>
function refreshLogs() {
    showLoading('Memuat log terbaru...');
    window.location.reload();
}

function showLogDetail(logId) {
    const modal = new bootstrap.Modal(document.getElementById('logDetailModal'));
    modal.show();
    
    // Fetch log detail via AJAX
    fetch(`/api/mikrotik-logs/${logId}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('logDetailContent').innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <h6>Informasi Dasar</h6>
                        <table class="table table-sm">
                            <tr><td><strong>ID:</strong></td><td>${data.id}</td></tr>
                            <tr><td><strong>Router:</strong></td><td>${data.mikrotik ? data.mikrotik.name : 'System'}</td></tr>
                            <tr><td><strong>Aksi:</strong></td><td>${data.formatted_action}</td></tr>
                            <tr><td><strong>Status:</strong></td><td><span class="badge ${data.success ? 'bg-success' : 'bg-danger'}">${data.success ? 'Berhasil' : 'Gagal'}</span></td></tr>
                            <tr><td><strong>Waktu:</strong></td><td>${new Date(data.created_at).toLocaleString('id-ID')}</td></tr>
                            <tr><td><strong>Response Time:</strong></td><td>${data.formatted_response_time}</td></tr>
                            <tr><td><strong>IP Address:</strong></td><td>${data.ip_address || '-'}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6>Pesan</h6>
                        <div class="alert alert-info">${data.message}</div>
                        
                        ${data.old_status && data.new_status ? `
                        <h6>Perubahan Status</h6>
                        <div class="alert alert-warning">
                            ${data.old_status} → ${data.new_status}
                        </div>
                        ` : ''}
                    </div>
                </div>
                
                ${data.details ? `
                <div class="mt-3">
                    <h6>Detail Teknis</h6>
                    <pre class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">${JSON.stringify(data.details, null, 2)}</pre>
                </div>
                ` : ''}
                
                ${data.user_agent ? `
                <div class="mt-3">
                    <h6>User Agent</h6>
                    <small class="text-muted">${data.user_agent}</small>
                </div>
                ` : ''}
            `;
        })
        .catch(error => {
            document.getElementById('logDetailContent').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Gagal memuat detail log: ${error.message}
                </div>
            `;
        });
}

function clearOldLogs() {
    if (confirm('Hapus log yang lebih dari 30 hari? Aksi ini tidak dapat dibatalkan.')) {
        showLoading('Menghapus log lama...');
        
        fetch('/api/mikrotik-logs/clear-old', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            hideLoading();
            if (data.success) {
                showSuccess(data.message);
                setTimeout(() => window.location.reload(), 1500);
            } else {
                showError(data.message);
            }
        })
        .catch(error => {
            hideLoading();
            showError('Gagal menghapus log lama');
        });
    }
}

function exportLogs() {
    showLoading('Menyiapkan export...');
    
    // Build export URL with current filters
    const params = new URLSearchParams(window.location.search);
    params.set('export', '1');
    
    window.location.href = '{{ route("mikrotiks.logs") }}?' + params.toString();
    
    setTimeout(() => hideLoading(), 2000);
}
</script>
@endsection