@extends('layouts.app')

@section('content')
    <!-- Bootstrap Links -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        .reports-container {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            min-height: 100vh;
            padding: 2rem;
        }
        .custom-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }
        .table-header {
            background-color: #4e73df;
            color: white;
        }
        .uptime-badge {
            font-size: 0.9em;
            padding: 0.6em 1em;
            border-radius: 0.5rem;
            min-width: 85px;
        }
        .back-btn {
            transition: all 0.3s ease;
        }
        .back-btn:hover {
            transform: translateX(-3px);
        }
        .hover-animate {
            transition: transform 0.2s ease;
        }
        .hover-animate:hover {
            transform: translateX(4px);
            background-color: #f8f9fa !important;
        }
    </style>

    <div class="reports-container">
        <div class="container">
            <div class="custom-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="text-primary fw-bold">
                        <i class="fas fa-chart-line me-2"></i>Uptime Reports for {{ $monitor->name }}
                    </h2>
                    <a href="{{ route('monitors.index') }}" class="btn btn-secondary back-btn">
                        <i class="fas fa-arrow-left me-2"></i>Back to Monitors
                    </a>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover table-striped align-middle" id="myTable">
                        <thead class="table-header">
                            <tr>
                                <th>Period</th>
                                <th>Date Range</th>
                                <th class="text-center">Uptime</th>
                                <th class="text-center">Downtime</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($reports as $report)
                            <tr class="hover-animate">
                                <td class="fw-bold">{{ ucfirst($report->period) }}</td>
                                <td>
                                    <span class="text-muted small me-2">
                                        {{ $report->start_date->format('M j, Y') }}
                                        <i class="fas fa-arrow-right mx-2"></i>
                                        {{ $report->end_date->format('M j, Y') }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="uptime-badge bg-{{ $report->uptime_percentage >= 99.9 ? 'success' : ($report->uptime_percentage >= 95 ? 'warning' : 'danger') }}">
                                        {{ number_format($report->uptime_percentage, 2) }}%
                                    </span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-light text-dark">
                                        <i class="fas fa-clock text-danger me-2"></i>
                                        {{ gmdate('H\h i\m', $report->downtime_seconds) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection