@extends('layouts.app')

@section('title', 'Uptime Details - ' . $site->name)

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('uptime.index') }}">Uptime Monitoring</a></li>
                <li class="breadcrumb-item active">{{ $site->name }}</li>
            </ol>
        </nav>

        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h2 mb-2">{{ $site->name }}</h1>
                <p class="text-muted">{{ $site->url }}</p>
            </div>
            <div>
                <span class="badge bg-success fs-6 px-3 py-2">
                    <i class="bi bi-graph-up-arrow"></i> {{ $uptimePercentage }}% Uptime
                </span>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="bi bi-percent text-success fs-1 mb-3"></i>
                    <h3 class="mb-1">{{ $uptimePercentage }}%</h3>
                    <p class="text-muted mb-0">Uptime (30 days)</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="bi bi-speedometer2 text-primary fs-1 mb-3"></i>
                    <h3 class="mb-1">{{ round($avgResponseTime ?? 0) }}ms</h3>
                    <p class="text-muted mb-0">Avg Response Time</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="bi bi-clock-history text-info fs-1 mb-3"></i>
                    <h3 class="mb-1">{{ $uptimeChecks->count() }}</h3>
                    <p class="text-muted mb-0">Total Checks</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Uptime Chart -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white">
            <h5 class="mb-0">
                <i class="bi bi-graph-up me-2"></i>
                Response Time Trend
            </h5>
        </div>
        <div class="card-body">
            <canvas id="responseTimeChart" height="100"></canvas>
        </div>
    </div>

    <!-- Check History -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white">
            <h5 class="mb-0">
                <i class="bi bi-list-ul me-2"></i>
                Check History
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th>Date & Time</th>
                            <th>Status</th>
                            <th>Status Code</th>
                            <th>Response Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($uptimeChecks as $check)
                            <tr>
                                <td>{{ $check->created_at->format('M d, Y H:i:s') }}</td>
                                <td>
                                    @if($check->is_online)
                                        <span class="badge bg-success">
                                            <i class="bi bi-check-circle"></i> Online
                                        </span>
                                    @else
                                        <span class="badge bg-danger">
                                            <i class="bi bi-x-circle"></i> Down
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-{{ $check->status_code >= 200 && $check->status_code < 300 ? 'success' : ($check->status_code >= 300 && $check->status_code < 400 ? 'info' : 'danger') }}">
                                        {{ $check->status_code }}
                                    </span>
                                </td>
                                <td>{{ round($check->response_time ?? 0) }}ms</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">
                                    No uptime checks recorded yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($uptimeChecks->hasPages())
        <div class="card-footer bg-white">
            {{ $uptimeChecks->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('responseTimeChart');
    if (!ctx) return;

    const isDarkMode = localStorage.getItem('darkMode') === 'true';

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($uptimeChecks->pluck('created_at')->map(fn($date) => $date->format('M d H:i'))->reverse()),
            datasets: [{
                label: 'Response Time (ms)',
                data: @json($uptimeChecks->pluck('response_time')->reverse()),
                borderColor: '#06b6d4',
                backgroundColor: 'rgba(6, 182, 212, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.06)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
});
</script>
@endpush