@extends('layouts.master')
@section('title')
All Users
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">API Status</h4>
                        <button id="refreshButton" class="btn btn-primary float-end">Refresh</button>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>URL</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="apiStatusTable">
                                @foreach($urls as $index => $url)
                                <tr>
                                    <td>{{ $index }}</td>
                                    <td>{{ $url }}</td>
                                    <td>
                                        <span class="status-dot" data-url="{{ str_replace('https://', '', $url) }}"></span>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">API Errors</h4>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Event</th>
                                <th>Message</th>
                                <th>Timestamp</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($audit_error as $index => $error)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $error->event }}</td>
                                <td>{{ $error->new_values }}</td>
                                <td>{{ $error->created_at }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <script>
        function pingUrls() {
            document.querySelectorAll('.status-dot').forEach(function(dot) {
                const url = dot.getAttribute('data-url');
                dot.classList.remove('green', 'red');
                dot.classList.add('blinking');
                fetch(url)
                    .then(response => {
                        if (response.ok) {
                            dot.classList.remove('blinking');
                            dot.classList.add('green');
                        } else {
                            dot.classList.remove('blinking');
                            dot.classList.add('red');
                        }
                    })
                    .catch(() => {
                        dot.classList.remove('blinking');
                        dot.classList.add('red');
                    });
            });
        }

        document.getElementById('refreshButton').addEventListener('click', pingUrls);

        document.addEventListener('DOMContentLoaded', pingUrls);
    </script>

    <style>
        .status-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: gray;
        }
        .status-dot.green {
            background-color: green;
            animation: blinkGreen 1s infinite;
        }
        .status-dot.red {
            background-color: red;
        }
        .status-dot.blinking {
            animation: blink 1s infinite;
        }
        @keyframes blink {
            50% {
                opacity: 0.5;
            }
        }
        @keyframes blinkGreen {
            0%, 100% {
                background-color: green;
            }
            50% {
                background-color: lightgreen;
            }
        }
    </style>
@endsection
@section('script')
<script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection