@extends('admin.layouts.app')

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

@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="container-fluid py-4">

                                <div class="d-flex align-items-center justify-content-between mb-4">
                                    <h2 class="mb-0">System Logs</h2>
                                    <form method="POST" action="{{ route('admin.logs.clear') }}"
                                        onsubmit="return confirm('Clear the entire log file? This cannot be undone.')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-sm btn-outline-danger">Clear Log</button>
                                    </form>
                                </div>

                                @if (session('success'))
                                    <div class="alert alert-success">{{ session('success') }}</div>
                                @endif

                                {{-- Filters  --}}
                                <form method="GET" action="{{ route('admin.logs.index') }}" class="row g-2 mb-4">
                                    <div class="col-auto">
                                        <select name="level" class="form-select form-select-sm"
                                            onchange="this.form.submit()">
                                            <option value="all" @selected($level === 'all')>All Levels</option>
                                            @foreach (['ERROR', 'WARNING', 'INFO', 'DEBUG', 'CRITICAL'] as $opt)
                                                <option value="{{ strtolower($opt) }}" @selected(strtoupper($level) === $opt)>
                                                    {{ $opt }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col">
                                        <input type="text" name="search" value="{{ $search }}"
                                            class="form-control form-control-sm" placeholder="Search logs…">
                                    </div>
                                    <div class="col-auto">
                                        <button class="btn btn-sm btn-primary">Search</button>
                                        <a href="{{ route('admin.logs.index') }}" class="btn btn-sm btn-secondary">Reset</a>
                                    </div>
                                </form>

                                {{-- Results --}}
                                <p class="text-muted small mb-3">Showing {{ count($logs) }}
                                    entr{{ count($logs) === 1 ? 'y' : 'ies' }}</p>

                                @forelse($logs as $log)
                                    <div class="card mb-2 border-{{ $log['color'] }}">
                                        <div class="card-header d-flex align-items-center gap-3 py-2 bg-transparent">
                                            <span class="badge bg-{{ $log['color'] }}">{{ $log['level'] }}</span>
                                            <span class="text-muted small">{{ $log['timestamp'] }}</span>
                                            <span class="text-truncate">{{ $log['message'] }}</span>
                                            <button class="btn btn-sm btn-link ms-auto p-0" data-bs-toggle="collapse"
                                                data-bs-target="#log-{{ $loop->index }}">
                                                Full ▾
                                            </button>
                                        </div>
                                        <div class="collapse" id="log-{{ $loop->index }}">
                                            <div class="card-body p-0">
                                                <pre class="bg-dark text-light p-3 mb-0 rounded-bottom"
                                                    style="white-space:pre-wrap;font-size:.8rem;max-height:400px;overflow-y:auto;">{{ $log['raw'] }}</pre>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="alert alert-info">No log entries found.</div>
                                @endforelse

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection