@extends('layouts.app')

@section('title', 'System Logs')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">System Logs</h1>
                    <p class="text-muted">Monitor dan analisis aktivitas sistem</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('syslog.log-files') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-folder-open"></i> Laravel Logs
                    </a>
                    <button type="button" class="btn btn-outline-primary" onclick="refreshLogs()">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                    <button type="button" class="btn btn-success" onclick="exportLogs()">
                        <i class="fas fa-download"></i> Export CSV
                    </button>
                    <button type="button" class="btn btn-warning" onclick="showCleanupModal()">
                        <i class="fas fa-trash"></i> Cleanup
                    </button>
                    <button type="button" class="btn btn-info" onclick="testLogging()">
                        <i class="fas fa-vial"></i> Test Logs
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Laravel Log Files Card -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-info">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title text-info mb-1">
                                <i class="fas fa-folder-open me-2"></i>Laravel Log Files
                            </h6>
                            <p class="text-muted mb-0">Kelola file log Laravel dari storage/logs - View, Download, Import, dan Clear log files</p>
                        </div>
                        <div>
                            <a href="{{ route('syslog.log-files') }}" class="btn btn-info">
                                <i class="fas fa-external-link-alt me-2"></i>Buka Laravel Logs
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Total Logs</h6>
                            <h4 class="mb-0">{{ number_format($stats['total']) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-list fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Hari Ini</h6>
                            <h4 class="mb-0">{{ number_format($stats['today']) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-calendar-day fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">1 Jam Terakhir</h6>
                            <h4 class="mb-0">{{ number_format($stats['last_hour']) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-clock fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Errors</h6>
                            <h4 class="mb-0">{{ number_format($stats['errors']) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation-triangle fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Warnings</h6>
                            <h4 class="mb-0">{{ number_format($stats['warnings']) }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-exclamation fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h6 class="card-title">Avg Response</h6>
                            <h4 class="mb-0">{{ $stats['avg_response_time'] ? round($stats['avg_response_time']) . 'ms' : '-' }}</h4>
                        </div>
                        <div class="align-self-center">
                            <i class="fas fa-tachometer-alt fa-2x opacity-75"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">Filter & Pencarian</h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('syslog.index') }}" id="filterForm">
                <div class="row">
                    <div class="col-md-2">
                        <label class="form-label">Level</label>
                        <select name="level" class="form-select">
                            <option value="">Semua Level</option>
                            @foreach(\App\Models\Syslog::getLogLevels() as $key => $value)
                                <option value="{{ $key }}" {{ request('level') == $key ? 'selected' : '' }}>
                                    {{ $value }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Kategori</label>
                        <select name="category" class="form-select">
                            <option value="">Semua Kategori</option>
                            @foreach(\App\Models\Syslog::getCategories() as $key => $value)
                                <option value="{{ $key }}" {{ request('category') == $key ? 'selected' : '' }}>
                                    {{ $value }}
                                </option>
                            @endforeach
                        </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-3">
                        <label class="form-label">Pencarian</label>
                        <input type="text" name="search" class="form-control" placeholder="Cari pesan, aksi, IP..." value="{{ request('search') }}">
                    </div>
                    <div class="col-md-1">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary d-block w-100">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <div class="btn-group" role="group">
                            <input type="radio" class="btn-check" name="quick_filter" id="all" value="" {{ !request('quick_filter') ? 'checked' : '' }}>
                            <label class="btn btn-outline-secondary" for="all">Semua</label>

                            <input type="radio" class="btn-check" name="quick_filter" id="today" value="today" {{ request('quick_filter') == 'today' ? 'checked' : '' }}>
                            <label class="btn btn-outline-info" for="today">Hari Ini</label>

                            <input type="radio" class="btn-check" name="quick_filter" id="last_hour" value="last_hour" {{ request('quick_filter') == 'last_hour' ? 'checked' : '' }}>
                            <label class="btn btn-outline-success" for="last_hour">1 Jam Terakhir</label>

                            <input type="radio" class="btn-check" name="quick_filter" id="errors" value="errors" {{ request('quick_filter') == 'errors' ? 'checked' : '' }}>
                            <label class="btn btn-outline-danger" for="errors">Errors</label>

                            <input type="radio" class="btn-check" name="quick_filter" id="warnings" value="warnings" {{ request('quick_filter') == 'warnings' ? 'checked' : '' }}>
                            <label class="btn btn-outline-warning" for="warnings">Warnings</label>

                            <input type="radio" class="btn-check" name="quick_filter" id="recent" value="recent" {{ request('quick_filter') == 'recent' ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="recent">Recent (1h)</label>
                        </div>
                        <a href="{{ route('syslog.index') }}" class="btn btn-outline-secondary ms-2">
                            <i class="fas fa-times"></i> Reset Filter
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Logs Table -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">System Logs ({{ $logs->total() }} entries)</h5>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="autoRefresh">
                <label class="form-check-label" for="autoRefresh">
                    Auto Refresh (30s)
                </label>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="120">Timestamp</th>
                            <th width="80">Level</th>
                            <th width="120">Kategori</th>
                            <th width="120">Aksi</th>
                            <th>Pesan</th>
                            <th width="100">User</th>
                            <th width="100">IP Address</th>
                            <th width="80">Response</th>
                            <th width="60">Detail</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($logs as $log)
                            <tr>
                                <td>
                                    <small class="text-muted">
                                        {{ $log->created_at->format('d/m H:i:s') }}
                                    </small>
                                </td>
                                <td>{!! $log->level_badge !!}</td>
                                <td>{!! $log->category_badge !!}</td>
                                <td>
                                    <code class="small">{{ $log->action }}</code>
                                </td>
                                <td>
                                    <span class="text-truncate d-inline-block" style="max-width: 300px;" title="{{ $log->message }}">
                                        {{ $log->truncated_message }}
                                    </span>
                                </td>
                                <td>
                                    @if($log->user)
                                        <small class="text-primary">{{ $log->user->name }}</small>
                                    @else
                                        <small class="text-muted">System</small>
                                    @endif
                                </td>
                                <td>
                                    <small class="text-muted">{{ $log->ip_address ?: '-' }}</small>
                                </td>
                                <td>
                                    <small class="text-muted">{{ $log->formatted_response_time }}</small>
                                </td>
                                <td>
                                    <a href="{{ route('syslog.show', $log) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="fas fa-inbox fa-3x mb-3"></i>
                                        <p>Tidak ada log yang ditemukan</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($logs->hasPages())
            <div class="card-footer">
                {{ $logs->appends(request()->query())->links() }}
            </div>
        @endif
    </div>
</div>

<!-- Cleanup Modal -->
<div class="modal fade" id="cleanupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Cleanup Old Logs</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="cleanupForm">
                    <div class="mb-3">
                        <label for="days" class="form-label">Hapus log yang lebih lama dari:</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="days" name="days" min="1" max="365" value="30" required>
                            <span class="input-group-text">hari</span>
                        </div>
                        <div class="form-text">Log yang lebih lama dari jumlah hari ini akan dihapus permanen.</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" onclick="performCleanup()">
                    <i class="fas fa-trash"></i> Hapus Log Lama
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let autoRefreshInterval;

// Auto refresh functionality
document.getElementById('autoRefresh').addEventListener('change', function() {
    if (this.checked) {
        autoRefreshInterval = setInterval(function() {
            window.location.reload();
        }, 30000); // 30 seconds
        
        showToast('Auto refresh diaktifkan (30 detik)', 'success');
    } else {
        clearInterval(autoRefreshInterval);
        showToast('Auto refresh dinonaktifkan', 'info');
    }
});

// Quick filter change
document.querySelectorAll('input[name="quick_filter"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        document.getElementById('filterForm').submit();
    });
});

// Refresh logs
function refreshLogs() {
    window.location.reload();
}

// Export logs
function exportLogs() {
    const params = new URLSearchParams(window.location.search);
    const exportUrl = '{{ route("syslog.export") }}?' + params.toString();
    window.open(exportUrl, '_blank');
    showToast('Export dimulai...', 'info');
}

// Show cleanup modal
function showCleanupModal() {
    const modal = new bootstrap.Modal(document.getElementById('cleanupModal'));
    modal.show();
}

// Perform cleanup
function performCleanup() {
    const days = document.getElementById('days').value;
    
    if (!days || days < 1) {
        showToast('Masukkan jumlah hari yang valid', 'error');
        return;
    }
    
    if (!confirm(`Apakah Anda yakin ingin menghapus log yang lebih lama dari ${days} hari?`)) {
        return;
    }
    
    fetch('{{ route("syslog.cleanup") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ days: parseInt(days) })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            bootstrap.Modal.getInstance(document.getElementById('cleanupModal')).hide();
            setTimeout(() => window.location.reload(), 1500);
        } else {
            showToast(data.message || 'Terjadi kesalahan', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Terjadi kesalahan saat cleanup', 'error');
    });
}

// Test logging
function testLogging() {
    fetch('{{ route("syslog.test") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            setTimeout(() => window.location.reload(), 1500);
        } else {
            showToast(data.message || 'Terjadi kesalahan', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Terjadi kesalahan saat test logging', 'error');
    });
}

// Toast notification function
function showToast(message, type = 'info') {
    // Create toast element
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type === 'error' ? 'danger' : type} border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body">
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;
    
    // Add to toast container
    let toastContainer = document.querySelector('.toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(toastContainer);
    }
    
    toastContainer.insertAdjacentHTML('beforeend', toastHtml);
    
    // Show toast
    const toastElement = toastContainer.lastElementChild;
    const toast = new bootstrap.Toast(toastElement);
    toast.show();
    
    // Remove from DOM after hidden
    toastElement.addEventListener('hidden.bs.toast', function() {
        toastElement.remove();
    });
}
</script>
@endpush