@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>
    <script src="https://code.jquery.com/jquery-3.6.4.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>
        :root {
            --primary-color: #4839F5;
            --secondary-color: #6247FF;
            --accent-color: #FF6B5B;
            --text-color: #2D2D3F;
            --light-bg: #f8f9ff;
            --card-bg: #ffffff;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(72, 57, 245, 0.1);
        }

        body {
            background-color: var(--light-bg);
            color: var(--text-color);
            font-family: 'Poppins', sans-serif;
        }

        .monitoring-container {
            background: linear-gradient(135deg, #f8f9ff 0%, #eff0ff 100%);
            min-height: 100vh;
            padding: 2rem;
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .custom-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 2rem;
            border: none;
        }

        .custom-card .card-header {
            background: none;
            border-bottom: 1px solid rgba(72, 57, 245, 0.1);
            padding-bottom: 1rem;
        }

        .table-header {
            background-color: var(--primary-color);
            color: white;
        }

        .table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: var(--border-radius);
            overflow: hidden;
        }

        .table thead th {
            border-bottom: none;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        .table tbody tr:hover {
            background-color: rgba(72, 57, 245, 0.05);
        }

        .monitoring-badge {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 50px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .response-badge {
            font-size: 0.8rem;
            min-width: 75px;
            padding: 0.5rem 0.75rem;
            border-radius: 50px;
            font-weight: 500;
        }

        .url-link {
            color: var(--primary-color);
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .url-link:hover {
            color: var(--secondary-color);
            transform: translateY(-2px);
        }

        .action-btns .btn {
            margin: 0.2rem;
            min-width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .action-btns .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
        }

        .btn-danger {
            background-color: var(--accent-color);
        }

        .btn-info {
            background-color: #3DD5F3;
        }

        .form-control,
        .form-select {
            border-radius: var(--border-radius);
            padding: 0.75rem 1.25rem;
            border: 2px solid #e0e0ff;
            transition: all 0.3s ease;
            background-color: #f8f9ff;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(72, 57, 245, 0.25);
        }

        .form-label {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .filter-card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: none;
        }

        .stats-card {
            background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            color: white;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .stats-card:before {
            content: '';
            position: absolute;
            top: -30px;
            right: -30px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .stats-card .stats-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .stats-card .stats-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .stats-card .stats-title {
            font-size: 1rem;
            opacity: 0.8;
        }

        /* Type-specific badge colors */
        .bg-email {
            background-color: #6f42c1;
            color: white;
        }

        .bg-ssl {
            background-color: #0dcaf0;
            color: white;
        }

        .bg-keyword {
            background-color: #ffc107;
            color: #212529;
        }

        .bg-element {
            background-color: #20c997;
            color: white;
        }

        .bg-server {
            background-color: #dc3545;
            color: white;
        }

        .bg-full {
            background-color: var(--primary-color);
            color: white;
        }

        .status-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .status-good {
            background-color: #20c997;
        }

        .status-warning {
            background-color: #ffc107;
        }

        .status-bad {
            background-color: #dc3545;
        }

        .hover-animate {
            transition: all 0.2s ease;
        }

        .hover-animate:hover {
            transform: translateX(5px);
        }

        .empty-state {
            text-align: center;
            padding: 3rem 0;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        /* Pagination Styles */
        .pagination {
            margin: 20px 0;
        }

        .pagination .page-item .page-link {
            color: var(--primary-color);
            border: 1px solid rgba(72, 57, 245, 0.1);
            margin: 0 4px;
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
        }

        .pagination .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
            box-shadow: var(--shadow);
        }

        .pagination .page-item.disabled .page-link {
            opacity: 0.6;
            pointer-events: none;
        }

        .pagination .page-link:hover {
            background-color: var(--light-bg);
            border-color: var(--primary-color);
        }
    </style>

    <div class="monitoring-container">
        <div class="container">
            <!-- Header Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h2 class="page-title"><i class="fas fa-chart-line me-2"></i>Monitoring Dashboard</h2>
                </div>
            </div>

            <!-- Stats Section -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-server"></i></div>
                        <div class="stats-number">{{ $monitors->count() }}</div>
                        <div class="stats-title">Total Monitors</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-globe"></i></div>
                        <div class="stats-number">
                            {{ $monitors->whereIn('monitoring_type', ['full_page', 'keyword', 'element', 'ssl', 'server'])->count() }}
                        </div>
                        <div class="stats-title">Website Monitors</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-link"></i></div>
                        <div class="stats-number">
                            {{ $monitors->whereIn('monitoring_type', 'email_health')->count() }}
                        </div>
                        <div class="stats-title">Domain Monitors</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-bolt"></i></div>
                        <div class="stats-number">
                            @php
                                use Illuminate\Support\Facades\DB;

                                // 1. Get website-type monitor IDs (exclude domains)
                                $websiteMonitorIds = $monitors
                                    ->whereIn('monitoring_type', ['full_page', 'keyword', 'element', 'server'])
                                    ->pluck('id');

                                // 2. Get latest response time for each monitor
                                $latestStatsSubquery = DB::table('website_stats')
                                    ->whereIn('monitor_id', $websiteMonitorIds)
                                    ->select('monitor_id', DB::raw('MAX(created_at) as latest_date'))
                                    ->groupBy('monitor_id');

                                // 3. Calculate average of latest responses
                                $averageResponse = DB::table('website_stats as ws')
                                    ->joinSub($latestStatsSubquery, 'latest', function ($join) {
                                        $join->on('ws.monitor_id', '=', 'latest.monitor_id')
                                            ->on('ws.created_at', '=', 'latest.latest_date');
                                    })
                                    ->avg('ws.response_time');

                                echo $averageResponse ? number_format($averageResponse, 2) : 'N/A';
                            @endphp
                        </div>
                        <div class="stats-title">Average Response Time (s)</div>
                    </div>
                </div>

                <!-- Filter Section -->
                <div class="filter-card mb-4">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="monitorFilter" class="form-label">
                                <i class="fas fa-filter me-2"></i>Filter Monitoring Type
                            </label>
                            <select id="monitorFilter" class="form-select">
                                <option value="all">Show All</option>
                                <option value="ssl">SSL Certificate</option>
                                <option value="full">Full Page</option>
                                <option value="keyword">Keyword</option>
                                <option value="element">Element</option>
                                <option value="server">Server</option>
                                <option value="email_health">Email Health</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="statusFilter" class="form-label">
                                <i class="fas fa-signal me-2"></i>Filter Status
                            </label>
                            <select id="statusFilter" class="form-select">
                                <option value="all">All Statuses</option>
                                <option value="up">Up</option>
                                <option value="down">Down</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="searchMonitor" class="form-label">
                                <i class="fas fa-search me-2"></i>Search
                            </label>
                            <input type="text" id="searchMonitor" class="form-control"
                                placeholder="Search by name or URL...">
                        </div>
                    </div>
                </div>

                <!-- Table Section -->
                <div class="custom-card">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle" id="myTable">
                            <thead class="table-header">
                                <tr>
                                    <th scope="col" class="text-center">#</th>
                                    <th scope="col">Website</th>
                                    <th scope="col">URL/Domain</th>
                                    <th scope="col" class="text-center">Type</th>
                                    <th scope="col" class="text-center">Response</th>
                                    <th scope="col">Target</th>
                                    <th scope="col" class="text-center">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($monitors as $monitor)
                                                            @php
                                                                $isEmailHealth = $monitor->monitoring_type === 'email_health';
                                                                $isSSLMonitoring = $monitor->monitoring_type === 'ssl';
                                                                $isKeywordMonitoring = $monitor->monitoring_type === 'keyword';
                                                                $isElementMonitoring = $monitor->monitoring_type === 'element';
                                                                $isServerMonitoring = $monitor->monitoring_type === 'server';
                                                                $isFullPage = $monitor->monitoring_type === 'full_page';
                                                                $latestResponse = $monitor->websiteStats->last();

                                                                $statusClass = '';
                                                                if ($latestResponse) {
                                                                    $statusClass = $latestResponse->response_time < 1 ? 'status-good' :
                                                                        ($latestResponse->response_time < 3 ? 'status-warning' : 'status-bad');
                                                                }
                                                            @endphp
                                                            <tr class="monitor-row hover-animate" data-monitor-type="{{ $monitor->monitoring_type }}"
                                                                data-status="{{ $monitor->status ?? 'unknown' }}">
                                                                <td class="text-center">
                                                                    <span class="status-indicator {{ $statusClass }}"></span>
                                                                    <span class="row-number"></span>
                                                                </td>
                                                                <td>
                                                                    <div class="d-flex align-items-center">
                                                                        <div class="me-3">
                                                                            @if ($isEmailHealth)
                                                                                <i class="fas fa-envelope fa-lg text-purple"></i>
                                                                            @elseif ($isSSLMonitoring)
                                                                                <i class="fas fa-lock fa-lg text-info"></i>
                                                                            @elseif ($isKeywordMonitoring)
                                                                                <i class="fas fa-key fa-lg text-warning"></i>
                                                                            @elseif ($isElementMonitoring)
                                                                                <i class="fas fa-code fa-lg text-success"></i>
                                                                            @elseif ($isServerMonitoring)
                                                                                <i class="fas fa-server fa-lg text-danger"></i>
                                                                            @else
                                                                                <i class="fas fa-globe fa-lg text-primary"></i>
                                                                            @endif
                                                                        </div>
                                                                        <div>
                                                                            <strong>{{ $monitor->name }}</strong>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    @if($isEmailHealth)
                                                                        <span class="text-primary">
                                                                            {{ $monitor->domain_to_monitor }}
                                                                        </span>
                                                                    @else
                                                                        <a href="{{ $monitor->url }}" target="_blank" class="url-link">
                                                                            {{ parse_url($monitor->url, PHP_URL_HOST) }}
                                                                            <i class="fas fa-external-link-alt ms-1"></i>
                                                                        </a>
                                                                    @endif
                                                                </td>
                                                                <td class="text-center">
                                                                    <span
                                                                        class="monitoring-badge
                                                                                                                                                                @if ($isEmailHealth) bg-email
                                                                                                                                                                @elseif ($isSSLMonitoring) bg-ssl
                                                                                                                                                                @elseif ($isKeywordMonitoring) bg-keyword
                                                                                                                                                                @elseif ($isElementMonitoring) bg-element
                                                                                                                                                                @elseif ($isServerMonitoring) bg-server
                                                                                                                                                                @else bg-full @endif">
                                                                        {{ match ($monitor->monitoring_type) {
                                        'email_health' => 'Email Health',
                                        'ssl' => 'SSL',
                                        'keyword' => 'Keyword',
                                        'element' => 'Element',
                                        'server' => 'Server',
                                        default => 'Full Page'
                                    } }}
                                                                    </span>
                                                                </td>
                                                                <td class="text-center">
                                                                    @if($isEmailHealth)
                                                                        <span class="badge bg-secondary">N/A</span>
                                                                    @elseif($latestResponse)
                                                                        <span
                                                                            class="response-badge
                                                                                                                                                                                    @if($latestResponse->response_time < 1) bg-success
                                                                                                                                                                                    @elseif($latestResponse->response_time < 3) bg-warning
                                                                                                                                                                                    @else bg-danger @endif">
                                                                            {{ number_format($latestResponse->response_time, 2) }}s
                                                                        </span>
                                                                    @else
                                                                        <span class="badge bg-secondary">N/A</span>
                                                                    @endif
                                                                </td>
                                                                <td>
                                                                    @if ($isEmailHealth)
                                                                        <div class="d-flex align-items-center gap-2">
                                                                            <span
                                                                                class="badge {{ $monitor->spf_record ? 'bg-success' : 'bg-danger' }} me-1">SPF</span>
                                                                            <span
                                                                                class="badge {{ $monitor->dkim_record ? 'bg-success' : 'bg-danger' }} me-1">DKIM</span>
                                                                            <span
                                                                                class="badge {{ $monitor->dmarc_record ? 'bg-success' : 'bg-danger' }}">DMARC</span>
                                                                        </div>
                                                                    @elseif ($isSSLMonitoring)
                                                                        <div class="d-flex align-items-center">
                                                                            <i class="fas fa-shield-alt me-2 text-info"></i>
                                                                            <span>SSL Certification</span>
                                                                        </div>
                                                                    @elseif ($isKeywordMonitoring)
                                                                        <div class="text-truncate" style="max-width: 150px">
                                                                            <i class="fas fa-search me-2 text-warning"></i>
                                                                            {{ implode(', ', $monitor->keywords ?? []) }}
                                                                        </div>
                                                                    @elseif ($isElementMonitoring)
                                                                        <div class="text-truncate" style="max-width: 150px">
                                                                            <i class="fas fa-code me-2 text-success"></i>
                                                                            <code>{{ $monitor->xpath }}</code>
                                                                        </div>
                                                                    @elseif ($isServerMonitoring)
                                                                        <div class="d-flex align-items-center">
                                                                            <i class="fas fa-heartbeat me-2 text-danger"></i>
                                                                            <span>Server Uptime</span>
                                                                        </div>
                                                                    @else
                                                                        <div class="d-flex align-items-center">
                                                                            <i class="fas fa-file-alt me-2 text-primary"></i>
                                                                            <span>Full Page</span>
                                                                        </div>
                                                                    @endif
                                                                </td>
                                                                <td class="text-center action-btns">
                                                                    <div class="d-flex justify-content-center">
                                                                        @if ($monitor->monitoring_type === 'email_health')
                                                                            <a href="{{ route('monitors.email-health', $monitor) }}" class="btn btn-primary"
                                                                                data-bs-toggle="tooltip" title="View Email Health">
                                                                                <i class="fas fa-envelope"></i>
                                                                            </a>
                                                                        @endif
                                                                        @if ($isServerMonitoring)
                                                                            <a href="{{ route('monitors.reports', $monitor) }}" class="btn btn-info"
                                                                                data-bs-toggle="tooltip" title="View Reports">
                                                                                <i class="fas fa-chart-bar"></i>
                                                                            </a>
                                                                        @endif
                                                                        @if ($isServerMonitoring || $isFullPage || $isKeywordMonitoring || $isElementMonitoring || $isSSLMonitoring)
                                                                            <a href="{{ route('changelogs.user_changelogs', $monitor) }}"
                                                                                class="btn btn-warning" data-bs-toggle="tooltip" title="View Changelogs">
                                                                                <i class="fa-solid fa-eye" style="color: #000000;"></i>
                                                                            </a>
                                                                        @endif
                                                                        <form action="{{ route('monitors.destroy', $monitor) }}" method="POST">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <button type="button" class="btn btn-danger delete-btn"
                                                                                data-id="{{ $monitor->id }}"
                                                                                data-route="{{ route('monitors.destroy', $monitor) }}"
                                                                                data-bs-toggle="tooltip" title="Remove Monitor">
                                                                                <i class="fas fa-trash-alt"></i>
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                @endforeach

                                @if(count($monitors) === 0)
                                    <tr>
                                        <td colspan="7">
                                            <div class="empty-state">
                                                <i class="fas fa-radar fa-4x mb-3 text-muted pulse"></i>
                                                <h4>No monitors found</h4>
                                                <p class="text-muted">Create your first monitor to start tracking</p>
                                                <a href="{{ route('monitors.create') }}" class="btn btn-primary mt-3">
                                                    <i class="fas fa-plus me-2"></i>Add Monitor
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Hidden Delete Form -->
                    <form id="deleteForm" method="POST" style="display: none;">
                        @csrf
                        @method('DELETE')
                    </form>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center mt-4">
                        <ul class="pagination" id="pagination">
                            <!-- Pagination links will be inserted here by JavaScript -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

<script>
(function(window, document, $) {
    var $j = jQuery.noConflict();

    document.addEventListener('DOMContentLoaded', function () {
        try {
            if (window.monitorManagementInitialized) return;
            window.monitorManagementInitialized = true;

            if (
                !$j('#searchMonitor').length ||
                !$j('.monitor-row').length ||
                !$j('#pagination').length ||
                !$j('#monitorFilter').length ||
                !$j('#statusFilter').length
            ) {
                console.error("Missing required DOM elements for monitor management.");
                return;
            }

            let currentPage = 1;
            const rowsPerPage = 10;

            initializeTooltips();
            safeApplyFiltersAndPagination();

            function initializeTooltips() {
                try {
                    let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                    tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl);
                    });
                } catch (e) {
                    console.error("Error initializing tooltips:", e);
                }
            }

            function safeApplyFiltersAndPagination() {
                try {
                    const typeFilter = $j('#monitorFilter').val();
                    const statusFilter = $j('#statusFilter').val();
                    const searchTerm = $j('#searchMonitor').val().toLowerCase();

                    let visibleRows = $j('.monitor-row').filter(function () {
                        const type = $j(this).data('monitor-type');
                        const status = $j(this).data('status');
                        const name = $j(this).find('td:nth-child(2)').text().toLowerCase();
                        const url = $j(this).find('td:nth-child(3)').text().toLowerCase();

                        const matchesType = checkTypeMatch(type, typeFilter);
                        const matchesStatus = statusFilter === 'all' || status === statusFilter;
                        const matchesSearch = searchTerm === '' || name.includes(searchTerm) || url.includes(searchTerm);

                        return matchesType && matchesStatus && matchesSearch;
                    });

                    let totalPages = Math.ceil(visibleRows.length / rowsPerPage);
                    let start = (currentPage - 1) * rowsPerPage;
                    let end = start + rowsPerPage;

                    $j('.monitor-row').hide();
                    visibleRows.slice(start, end).each(function(index) {
                        $j(this).show();
                        $j(this).find('.row-number').text(start + index + 1);
                    });

                    safeUpdatePagination(totalPages);
                    safeHandleEmptyState(visibleRows.length);
                } catch (e) {
                    console.error("Error applying monitor filters and pagination:", e);
                }
            }

            function checkTypeMatch(type, filter) {
                try {
                    const typeMap = {
                        'ssl': 'ssl',
                        'full': 'full_page',
                        'keyword': 'keyword',
                        'element': 'element',
                        'server': 'server',
                        'email_health': 'email_health'
                    };
                    return filter === 'all' || type === typeMap[filter];
                } catch (e) {
                    console.error("Error checking type match:", e);
                    return false;
                }
            }

            function safeUpdatePagination(totalPages) {
                try {
                    let pagination = $j('#pagination');
                    pagination.empty();

                    if (totalPages === 0) return;

                    pagination.append(`
                        <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage - 1}">Previous</a>
                        </li>
                    `);

                    for (let i = 1; i <= totalPages; i++) {
                        pagination.append(`
                            <li class="page-item ${i === currentPage ? 'active' : ''}">
                                <a class="page-link" href="#" data-page="${i}">${i}</a>
                            </li>
                        `);
                    }

                    pagination.append(`
                        <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                            <a class="page-link" href="#" data-page="${currentPage + 1}">Next</a>
                        </li>
                    `);
                } catch (e) {
                    console.error("Error updating monitor pagination:", e);
                }
            }

            function safeHandleEmptyState(visibleCount) {
                try {
                    if (visibleCount === 0) {
                        if (!$j('#no-results-row').length) {
                            $j('#myTable tbody').append(`
                                <tr id="no-results-row">
                                    <td colspan="7" class="text-center py-4">
                                        <i class="fas fa-search fa-2x mb-3 text-muted"></i>
                                        <p>No monitors match your search criteria</p>
                                    </td>
                                </tr>
                            `);
                        }
                    } else {
                        $j('#no-results-row').remove();
                    }
                } catch (e) {
                    console.error("Error handling empty state:", e);
                }
            }

            // Event Listeners
            $j('#monitorFilter, #statusFilter').on('change', function () {
                currentPage = 1;
                safeApplyFiltersAndPagination();
            });

            $j('#searchMonitor').on('keyup', function () {
                currentPage = 1;
                safeApplyFiltersAndPagination();
            });

            $j(document).on('click', '.page-link', function (e) {
                e.preventDefault();
                let page = parseInt($j(this).data('page'));
                if (!isNaN(page)) {
                    currentPage = page;
                    safeApplyFiltersAndPagination();
                }
            });

            $j('.monitor-row').hover(
                function () { $j(this).addClass('bg-light'); },
                function () { $j(this).removeClass('bg-light'); }
            );

            $j('.delete-btn').on('click', function () {
                try {
                    const monitorId = $j(this).data('id');
                    const deleteRoute = $j(this).data('route');
                    const deleteForm = $j('#deleteForm');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#4839F5',
                        cancelButtonColor: '#FF6B5B',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            deleteForm.attr('action', deleteRoute);
                            deleteForm.submit();
                        }
                    });
                } catch (e) {
                    console.error("Error handling delete button:", e);
                }
            });

            // Initial load with fallback retry
            setTimeout(function () {
                if ($j('.monitor-row').length > 0) {
                    safeApplyFiltersAndPagination();
                } else {
                    console.warn("No .monitor-row elements found yet, retrying...");
                    setTimeout(() => safeApplyFiltersAndPagination(), 500);
                }
            }, 100);

        } catch (e) {
            console.error("Top-level monitor script error:", e);
        }
    });

})(window, document, jQuery);

            // Success message after deletion (if session has success)
            @if(session('success'))
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: '{{ session('success') }}',
                    timer: 3000,
                    showConfirmButton: false,
                    position: 'top-end',
                    background: '#fff',
                    iconColor: '#4839F5'
                });
            @endif
        </script>
    </div>
@endsection