@extends('layouts.app')

@section('title', 'View Log File: ' . $filename)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">View Log File</h1>
                    <p class="text-muted">{{ $filename }}</p>
                </div>
                <div>
                    <a href="{{ route('syslog.log-files') }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-arrow-left me-2"></i>Kembali ke Log Files
                    </a>
                    <a href="{{ route('syslog.download-log-file', $filename) }}" class="btn btn-success">
                        <i class="fas fa-download me-2"></i>Download
                    </a>
                </div>
            </div>

            <!-- Filter Controls -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="GET" action="{{ route('syslog.view-log-file', $filename) }}" class="row g-3">
                        <div class="col-md-3">
                            <label for="lines" class="form-label">Jumlah Baris</label>
                            <select name="lines" id="lines" class="form-select">
                                <option value="50" {{ $lines == 50 ? 'selected' : '' }}>50 baris terakhir</option>
                                <option value="100" {{ $lines == 100 ? 'selected' : '' }}>100 baris terakhir</option>
                                <option value="200" {{ $lines == 200 ? 'selected' : '' }}>200 baris terakhir</option>
                                <option value="500" {{ $lines == 500 ? 'selected' : '' }}>500 baris terakhir</option>
                                <option value="1000" {{ $lines == 1000 ? 'selected' : '' }}>1000 baris terakhir</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="search" class="form-label">Cari dalam Log</label>
                            <input type="text" name="search" id="search" class="form-control" 
                                   value="{{ $search }}" placeholder="Masukkan kata kunci...">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-2"></i>Filter
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Log Content -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-file-alt me-2"></i>Log Content
                        @if($search)
                            <span class="badge bg-info ms-2">Filtered: "{{ $search }}"</span>
                        @endif
                    </h5>
                    <div>
                        <span class="badge bg-secondary">{{ count($content) }} lines</span>
                        <button class="btn btn-sm btn-outline-secondary ms-2" onclick="copyToClipboard()">
                            <i class="fas fa-copy me-1"></i>Copy All
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    @if(count($content) > 0)
                        <div class="log-viewer" style="max-height: 600px; overflow-y: auto;">
                            <pre class="mb-0 p-3" style="background-color: #1e1e1e; color: #d4d4d4; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.4;" id="logContent">@foreach($content as $index => $line){{ $line }}
@endforeach</pre>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Log file kosong atau tidak ada hasil</h5>
                            @if($search)
                                <p class="text-muted">Tidak ada baris yang cocok dengan pencarian "{{ $search }}"</p>
                                <a href="{{ route('syslog.view-log-file', $filename) }}" class="btn btn-outline-primary">
                                    <i class="fas fa-times me-2"></i>Hapus Filter
                                </a>
                            @else
                                <p class="text-muted">File log tidak memiliki konten atau belum dapat dibaca.</p>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            <!-- Log Analysis -->
            @if(count($content) > 0)
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-chart-bar me-2"></i>Log Analysis
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-primary">{{ count($content) }}</h4>
                                <small class="text-muted">Total Lines</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-danger">{{ count(array_filter($content, function($line) { return stripos($line, 'error') !== false; })) }}</h4>
                                <small class="text-muted">Error Lines</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-warning">{{ count(array_filter($content, function($line) { return stripos($line, 'warning') !== false; })) }}</h4>
                                <small class="text-muted">Warning Lines</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-info">{{ count(array_filter($content, function($line) { return stripos($line, 'info') !== false; })) }}</h4>
                                <small class="text-muted">Info Lines</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Quick Actions -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-tools me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>File Actions</h6>
                            <div class="d-grid gap-2">
                                <button class="btn btn-outline-info" onclick="importLogFile()">
                                    <i class="fas fa-upload me-2"></i>Import to Syslog Database
                                </button>
                                <button class="btn btn-outline-warning" onclick="clearLogFile()">
                                    <i class="fas fa-eraser me-2"></i>Clear File Content
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6>View Options</h6>
                            <div class="d-grid gap-2">
                                <a href="{{ route('syslog.view-log-file', [$filename, 'search' => 'error']) }}" class="btn btn-outline-danger">
                                    <i class="fas fa-exclamation-triangle me-2"></i>Show Only Errors
                                </a>
                                <a href="{{ route('syslog.view-log-file', [$filename, 'search' => 'warning']) }}" class="btn btn-outline-warning">
                                    <i class="fas fa-exclamation-circle me-2"></i>Show Only Warnings
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function copyToClipboard() {
    const logContent = document.getElementById('logContent');
    const textArea = document.createElement('textarea');
    textArea.value = logContent.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    
    // Show feedback
    const button = event.target.closest('button');
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
    button.classList.add('btn-success');
    button.classList.remove('btn-outline-secondary');
    
    setTimeout(() => {
        button.innerHTML = originalText;
        button.classList.remove('btn-success');
        button.classList.add('btn-outline-secondary');
    }, 2000);
}

function importLogFile() {
    if (confirm(`Apakah Anda yakin ingin mengimpor log file "{{ $filename }}" ke database syslog?`)) {
        $.ajax({
            url: `/syslog/log-files/{{ $filename }}/import`,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    alert(response.message);
                } else {
                    alert('Gagal mengimpor log file');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                alert(response.error || 'Terjadi kesalahan saat mengimpor log file');
            }
        });
    }
}

function clearLogFile() {
    if (confirm(`Apakah Anda yakin ingin mengosongkan log file "{{ $filename }}"? Semua isi file akan dihapus!`)) {
        $.ajax({
            url: `/syslog/log-files/{{ $filename }}/clear`,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    alert(response.message);
                    location.reload();
                } else {
                    alert('Gagal mengosongkan log file');
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                alert(response.error || 'Terjadi kesalahan saat mengosongkan log file');
            }
        });
    }
}

// Auto-scroll to bottom on page load
$(document).ready(function() {
    const logViewer = $('.log-viewer');
    if (logViewer.length) {
        logViewer.scrollTop(logViewer[0].scrollHeight);
    }
});
</script>
@endpush
@endsection