@extends('layouts.app')
@section('title', 'Schedule Log')

@push('scripts')
<script>
function copyLog() {
    const pre = document.getElementById('log-content');
    navigator.clipboard.writeText(pre.innerText).then(() => {
        const btn = document.getElementById('copy-btn');
        btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>Copied';
        setTimeout(() => btn.innerHTML = '<i class="bi bi-clipboard me-1"></i>Copy', 2000);
    });
}
function jumpToBottom() {
    const el = document.getElementById('log-box');
    el.scrollTop = el.scrollHeight;
}
function jumpToTop() {
    const el = document.getElementById('log-box');
    el.scrollTop = 0;
}
// Highlight FAIL lines
document.addEventListener('DOMContentLoaded', function () {
    const pre = document.getElementById('log-content');
    if (!pre) return;
    pre.innerHTML = pre.innerHTML
        .replace(/(✓ OK)/g,   '<span style="color:#4ade80;font-weight:600">$1</span>')
        .replace(/(✗ FAIL)/g,  '<span style="color:#f87171;font-weight:600">$1</span>')
        .replace(/(\[WARN\s*\])/g, '<span style="color:#fbbf24;font-weight:600">$1</span>')
        .replace(/(━━━[^\n]+━━━)/g, '<span style="color:#60a5fa;font-weight:600">$1</span>')
        .replace(/(={3,}[^\n]*={3,})/g, '<span style="color:#334155">$1</span>');
});
</script>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="mb-0 fw-bold"><i class="bi bi-file-text me-2 text-primary"></i>Schedule Log</h5>
    @if($filename)
    <div class="d-flex gap-2">
        <button id="copy-btn" class="btn btn-outline-secondary btn-sm" onclick="copyLog()">
            <i class="bi bi-clipboard me-1"></i>Copy
        </button>
        <a href="{{ route('lis.schedule-log.download') }}?file={{ urlencode($filename) }}"
           class="btn btn-outline-primary btn-sm">
            <i class="bi bi-download me-1"></i>Download
        </a>
    </div>
    @endif
</div>

{{-- Error --}}
@if($error)
<div class="alert alert-danger">{{ $error }}</div>
@endif

{{-- File picker --}}
<div class="card mb-4">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-sm-6 col-md-5">
                <label class="form-label mb-1" style="font-size:.8rem">Log File</label>
                <select name="file" class="form-select form-select-sm" onchange="this.form.submit()">
                    @forelse($files as $f)
                        <option value="{{ $f['name'] }}" {{ $selected === $f['name'] ? 'selected' : '' }}>
                            {{ $f['name'] }} — {{ $f['size'] }} — {{ $f['modified'] }}
                        </option>
                    @empty
                        <option disabled>No log files found</option>
                    @endforelse
                </select>
            </div>
        </form>
    </div>
</div>

{{-- Stats strip --}}
@if($stats)
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card" style="background:#0d1117;border:1px solid #1e2433;">
            <div class="label">Total Sends</div>
            <div class="value">{{ $stats['total'] }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card" style="background:#0d1117;border:1px solid #1e2433;">
            <div class="label">Successful</div>
            <div class="value" style="color:#4ade80">{{ $stats['ok'] }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card" style="background:#0d1117;border:1px solid #1e2433;">
            <div class="label">Failed</div>
            <div class="value" style="color:#f87171">{{ $stats['fail'] }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card" style="background:#0d1117;border:1px solid #1e2433;">
            <div class="label">Success Rate</div>
            <div class="value" style="color:{{ ($stats['rate'] ?? 0) >= 90 ? '#4ade80' : (($stats['rate'] ?? 0) >= 70 ? '#fbbf24' : '#f87171') }}">
                {{ $stats['rate'] !== null ? $stats['rate'].'%' : '—' }}
            </div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body py-2 px-3" style="font-size:.8rem;color:#94a3b8;">
        <span class="me-4"><i class="bi bi-display me-1"></i>{{ $stats['screen'] }}</span>
        <span class="me-4"><i class="bi bi-cpu me-1"></i>{{ $stats['device'] }}</span>
        <span class="me-4"><i class="bi bi-signpost-split me-1"></i>{{ $stats['highway'] }}</span>
        <span><i class="bi bi-calendar-range me-1"></i>{{ $stats['period'] }}</span>
    </div>
</div>
@endif

{{-- Log viewer --}}
@if($content !== null)
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center py-2 px-3">
        <span style="font-size:.8rem;color:#94a3b8;">
            <i class="bi bi-terminal me-1"></i>{{ $filename }}
        </span>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary btn-sm py-0" style="font-size:.75rem" onclick="jumpToTop()">
                <i class="bi bi-arrow-up"></i> Top
            </button>
            <button class="btn btn-outline-secondary btn-sm py-0" style="font-size:.75rem" onclick="jumpToBottom()">
                <i class="bi bi-arrow-down"></i> Bottom
            </button>
        </div>
    </div>
    <div id="log-box" style="max-height:65vh;overflow-y:auto;background:#080b10;border-radius:0 0 10px 10px;">
        <pre id="log-content" style="margin:0;padding:18px 20px;font-family:'Cascadia Code','Fira Code','Consolas',monospace;font-size:.78rem;line-height:1.65;color:#c9d1d9;white-space:pre-wrap;word-break:break-word;">{{ $content }}</pre>
    </div>
</div>
@elseif(!$error)
<div class="card">
    <div class="card-body text-center text-secondary py-5">
        <i class="bi bi-file-earmark-text display-6 d-block mb-2 opacity-25"></i>
        No log files found in <code>storage/logs/</code>.
    </div>
</div>
@endif
@endsection