@extends('layouts.app')
@section('title', 'Health Check')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="mb-0 fw-bold">Device Health Report</h5>
    <div class="d-flex align-items-center gap-3">
        <div>
            <span class="badge bg-success">{{ $online }} Online</span>
            <span class="badge bg-danger ms-1">{{ $offline }} Offline</span>
        </div>
        <a href="{{ route('lis.health.index') }}" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-arrow-clockwise me-1"></i>Refresh All
        </a>
    </div>
</div>

<div class="row g-3 mb-4">
    @foreach($results as $r)
    @php $device = $r['device']; @endphp
    <div class="col-md-6 col-xl-4">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-start justify-content-between mb-3">
                    <div>
                        <div class="fw-semibold">{{ $device->name }}</div>
                        <code style="font-size:.8rem;color:#7dd3fc">{{ $device->ip_address }}:{{ $device->port }}</code>
                        @if($device->location)
                        <div class="text-secondary" style="font-size:.75rem">{{ $device->location }}</div>
                        @endif
                    </div>
                    <div class="text-end">
                        @if($r['online'])
                            <span class="badge bg-success"><i class="bi bi-circle-fill me-1" style="font-size:.5rem"></i>ONLINE</span>
                        @else
                            <span class="badge bg-danger"><i class="bi bi-circle-fill me-1" style="font-size:.5rem"></i>OFFLINE</span>
                        @endif
                    </div>
                </div>

                <div class="row g-2 text-center">
                    <div class="col-6">
                        <div style="background:#0d1117;border-radius:6px;padding:10px">
                            <div class="text-secondary" style="font-size:.7rem">Latency</div>
                            <div class="fw-bold mt-1 {{ $r['online'] ? 'text-success' : 'text-secondary' }}">
                                {{ $r['latency_ms'] !== null ? $r['latency_ms'].' ms' : '—' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div style="background:#0d1117;border-radius:6px;padding:10px">
                            <div class="text-secondary" style="font-size:.7rem">Last Mode</div>
                            <div class="fw-bold mt-1">
                                @if($device->last_sent_mode)
                                    <span class="badge badge-{{ $device->last_sent_mode }}">{{ strtoupper($device->last_sent_mode) }}</span>
                                @else
                                    <span class="text-secondary">—</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-2 text-secondary" style="font-size:.75rem">
                    <i class="bi bi-info-circle me-1"></i>{{ $r['message'] }}
                </div>
                @if($device->last_seen_at)
                <div class="text-secondary mt-1" style="font-size:.72rem">
                    Last seen: {{ $device->last_seen_at->diffForHumans() }}
                </div>
                @endif

                <div class="d-flex gap-2 mt-3">
                    <button class="btn btn-outline-secondary btn-sm ping-btn" data-id="{{ $device->id }}" data-name="{{ $device->name }}">
                        <i class="bi bi-broadcast me-1"></i>Ping
                    </button>
                    <a href="{{ route('lis.send.index') }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-send me-1"></i>Send
                    </a>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Summary table --}}
<div class="card">
    <div class="card-header fw-semibold"><i class="bi bi-table me-2"></i>Summary</div>
    <div class="card-body p-0">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Device</th><th>IP</th><th>Status</th><th>Latency</th><th>Message</th><th>Last Seen</th><th>Last Sent</th>
                </tr>
            </thead>
            <tbody>
            @foreach($results as $r)
            @php $d = $r['device']; @endphp
            <tr>
                <td class="fw-semibold">{{ $d->name }}</td>
                <td><code style="color:#7dd3fc">{{ $d->ip_address }}</code></td>
                <td>
                    @if($r['online'])
                        <span class="badge bg-success">Online</span>
                    @else
                        <span class="badge bg-danger">Offline</span>
                    @endif
                </td>
                <td>{{ $r['latency_ms'] !== null ? $r['latency_ms'].' ms' : '—' }}</td>
                <td style="font-size:.8rem">{{ $r['message'] }}</td>
                <td style="font-size:.8rem">{{ $d->last_seen_at?->diffForHumans() ?? '—' }}</td>
                <td>
                    @if($d->last_sent_mode)
                        <span class="badge badge-{{ $d->last_sent_mode }}">{{ strtoupper($d->last_sent_mode) }}</span>
                        <span class="text-secondary ms-1" style="font-size:.75rem">{{ $d->last_sent_at?->format('d/m H:i') }}</span>
                    @else
                        <span class="text-secondary">—</span>
                    @endif
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.ping-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        const id   = btn.dataset.id;
        const name = btn.dataset.name;
        const orig = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Pinging…';
        try {
            const r = await fetch(`/lis-portal/health/${id}/ping`, {
                method:'POST',
                headers:{'Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name=csrf-token]').content}
            });
            const d = await r.json();
            btn.innerHTML = d.online
                ? `<i class="bi bi-check-circle-fill text-success me-1"></i>${d.latency_ms ?? '?'} ms`
                : `<i class="bi bi-x-circle-fill text-danger me-1"></i>Offline`;
        } catch(e) {
            btn.innerHTML = `<i class="bi bi-exclamation-circle text-warning"></i>`;
        }
        setTimeout(() => { btn.disabled = false; btn.innerHTML = orig; }, 3000);
    });
});
</script>
@endpush