@extends('layouts.admin')

@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;
            --light-bg: #F5F7FF;
            --card-bg: #FFFFFF;
            --border-radius: 12px;
            --shadow: 0 4px 20px rgba(72, 57, 245, 0.1);
            --text-color: #2D2D3F;
        }

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

        .monitoring-container {
            padding: 2rem;
            min-height: 100vh;
        }

        .header {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
        }

        .header-icon {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-right: 0.5rem;
        }

        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-color);
            margin: 0;
        }

        .stats-card {
            background: linear-gradient(145deg, #6B5BFF, #4839F5);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
            margin-bottom: 2rem;
        }

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

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

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

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

        .filter-section {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

        .form-select, .form-control {
            border: 1px solid #E0E0FF;
            border-radius: var(--border-radius);
            padding: 0.5rem 1rem;
            background-color: #F9FAFF;
            font-size: 0.9rem;
        }

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

        .table-container {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 1rem;
        }

        .table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .table thead th {
            background-color: transparent;
            color: var(--text-color);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #E0E0FF;
        }

        .table tbody tr {
            transition: background-color 0.2s ease;
        }

        .table tbody tr:hover {
            background-color: #F9FAFF;
        }

        .table td {
            padding: 1rem;
            vertical-align: middle;
            border-bottom: 1px solid #E0E0FF;
        }

        .monitor-icon {
            font-size: 1.2rem;
            margin-right: 0.5rem;
        }

        .monitoring-badge {
            font-size: 0.75rem;
            color: #ffffff;
            padding: 0.5rem 0.75rem;
            border-radius: 50px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .bg-purple{
            background-color: #6f42c1;
        }
        .bg-warning{
            color: #000 !important;
        }
        .bg-primary{
            background-color: #4839F5 !important;
        }
        .bg-info{
            color: #000;
        }

        .url-link {
            color: var(--primary-color);
            font-weight: 500;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .url-link:hover {
            color: var(--secondary-color);
        }

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

        .action-btns .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .btn-primary { background-color: #6B5BFF; }
        .btn-info { background-color: #17A2B8; }
        .btn-danger { background-color: #FF6B5B; }

        .pagination {
            justify-content: center;
            margin-top: 1rem;
        }

        .page-item .page-link {
            color: var(--primary-color);
            border: 1px solid #E0E0FF;
            border-radius: var(--border-radius);
            padding: 0.25rem 0.75rem;
            margin: 0 0.25rem;
            transition: all 0.2s ease;
        }

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

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

        .page-link:hover {
            background-color: #F9FAFF;
            border-color: var(--primary-color);
        }

        .modal-content {
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
        }

        .modal-header {
            background-color: var(--primary-color);
            color: white;
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
        }

        .modal-body {
            padding: 2rem;
        }

        .modal-body p {
            margin: 0.5rem 0;
        }

        .modal-body strong {
            color: var(--primary-color);
        }
    </style>

    <div class="monitoring-container">
        <div class="container">
            <!-- Header Section -->
            <div class="header mb-4">
                <i class="fas fa-chart-line header-icon"></i>
                <h2 class="page-title">Monitoring Dashboard</h2>
            </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->whereNotIn('monitoring_type', ['email_health'])->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-envelope"></i></div>
                        <div class="stats-number">{{ $monitors->where('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-tachometer-alt"></i></div>
                        <div class="stats-number">
                            @php
                                $websiteMonitorIds = $monitors->whereNotIn('monitoring_type', ['email_health'])->pluck('id');
                                $averageResponse = $monitors->whereIn('id', $websiteMonitorIds)
                                    ->flatMap(function ($monitor) {
                                        return $monitor->websiteStats->last() ? [$monitor->websiteStats->last()->response_time] : [];
                                    })->avg();
                                echo $averageResponse ? number_format($averageResponse, 2) : 'N/A';
                            @endphp
                        </div>
                        <div class="stats-title">Average Response Time (s)</div>
                    </div>
                </div>
            </div>

            <!-- Filter Section -->
            <div class="filter-section mb-4">
                <div class="d-flex align-items-center">
                    <label class="filter-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="d-flex align-items-center">
                    <label class="filter-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="d-flex align-items-center">
                    <label class="filter-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>

            <!-- Table Section -->
            <div class="table-container">
                <table class="table" id="myTable">
                    <thead>
                        <tr>
                            <th>Website</th>
                            <th>URL/Domain</th>
                            <th class="text-center">Type</th>
                            <th 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 = $latestResponse && $latestResponse->response_time < 3 ? 'status-good' : 'status-bad';
                            @endphp
                            <tr class="monitor-row" data-monitor-type="{{ $monitor->monitoring_type }}" data-status="{{ $latestResponse ? ($latestResponse->response_time < 3 ? 'up' : 'down') : 'unknown' }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <i class="fas @if ($isEmailHealth) fa-envelope @elseif ($isSSLMonitoring) fa-lock @elseif ($isKeywordMonitoring) fa-key @elseif ($isElementMonitoring) fa-code @elseif ($isServerMonitoring) fa-server @else fa-globe @endif monitor-icon text-{{ $isEmailHealth ? 'purple' : ($isSSLMonitoring ? 'info' : ($isKeywordMonitoring ? 'warning' : ($isElementMonitoring ? 'success' : ($isServerMonitoring ? 'danger' : 'primary')))) }}"></i>
                                        <strong>{{ $monitor->name }}</strong>
                                    </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-purple @elseif ($isSSLMonitoring) bg-info @elseif ($isKeywordMonitoring) bg-warning @elseif ($isElementMonitoring) bg-success @elseif ($isServerMonitoring) bg-danger @else bg-primary @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 action-btns">
                                    <div class="d-flex justify-content-center">
                                        <!-- Details Button -->
                                        <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#detailsModal{{ $monitor->id }}" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>

                                        <!-- Change Log Button (Always Visible) -->
                                        <a href="{{ route('admin.monitors.changelogs', $monitor) }}" class="btn btn-primary" data-bs-toggle="tooltip" title="View Change Log">
                                            <i class="fas fa-history"></i>
                                        </a>

                                        <!-- Reports Button (Only for Server Monitoring) -->
                                        @if ($isServerMonitoring)
                                            <a href="{{ route('admin.monitors.reports', $monitor) }}" class="btn btn-info" data-bs-toggle="tooltip" title="View Reports">
                                                <i class="fas fa-chart-bar"></i>
                                            </a>
                                        @endif

                                        @if (auth()->user()->isAdmin())
                                            <button type="button" class="btn btn-danger delete-btn" data-id="{{ $monitor->id }}" data-route="{{ route('admin.monitors.destroy', $monitor) }}" title="Delete Monitor">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>

                            <!-- Modal for Details -->
                            <div class="modal fade" id="detailsModal{{ $monitor->id }}" tabindex="-1" aria-labelledby="detailsModalLabel{{ $monitor->id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="detailsModalLabel{{ $monitor->id }}">Monitor Details</h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p><strong>Website/Email:</strong> {{ $monitor->name }}</p>
                                            <p><strong>URL/Domain:</strong>
                                                @if($isEmailHealth)
                                                    {{ $monitor->domain_to_monitor }}
                                                @else
                                                    {{ parse_url($monitor->url, PHP_URL_HOST) }}
                                                @endif
                                            </p>
                                            <p><strong>Registered By:</strong> {{ $monitor->user->name }}</p>
                                            <p><strong>Date of Register:</strong> {{ $monitor->created_at->format('d M Y') }}</p>
                                            <p><strong>Type:</strong>
                                                {{ match ($monitor->monitoring_type) {
                                                    'email_health' => 'Email Health',
                                                    'ssl' => 'SSL',
                                                    'keyword' => 'Keyword',
                                                    'element' => 'Element',
                                                    'server' => 'Server',
                                                    default => 'Full Page'
                                                } }}
                                            </p>
                                            <p><strong>Response Time:</strong>
                                                @if($isEmailHealth)
                                                    N/A
                                                @elseif($latestResponse)
                                                    {{ number_format($latestResponse->response_time, 2) }}s
                                                @else
                                                    N/A
                                                @endif
                                            </p>
                                            <p><strong>Target:</strong>
                                                @if ($isEmailHealth)
                                                    SPF: {{ $monitor->spf_record ? 'Yes' : 'No' }},
                                                    DKIM: {{ $monitor->dkim_record ? 'Yes' : 'No' }},
                                                    DMARC: {{ $monitor->dmarc_record ? 'Yes' : 'No' }}
                                                @elseif ($isSSLMonitoring)
                                                    SSL Certification
                                                @elseif ($isKeywordMonitoring)
                                                    {{ implode(', ', $monitor->keywords ?? []) }}
                                                @elseif ($isElementMonitoring)
                                                    <code>{{ $monitor->xpath }}</code>
                                                @elseif ($isServerMonitoring)
                                                    Server Uptime
                                                @else
                                                    Full Page
                                                @endif
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </tbody>
                </table>
                <!-- Hidden Delete Form -->
                <form id="deleteForm" method="POST" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
            </div>
            <!-- 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>

    <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 ||
                !$j('#deleteForm').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(1)').text().toLowerCase();
                        const url = $j(this).find('td:nth-child(2)').text().toLowerCase();

                        const matchesType = typeFilter === 'all' ||
                            (typeFilter === 'ssl' && type === 'ssl') ||
                            (typeFilter === 'full' && type === 'full_page') ||
                            (typeFilter === 'keyword' && type === 'keyword') ||
                            (typeFilter === 'element' && type === 'element') ||
                            (typeFilter === 'server' && type === 'server') ||
                            (typeFilter === 'email_health' && type === 'email_health');

                        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();
                    });

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

            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);
                }
            }

            // Event Listeners
            $j('#monitorFilter, #statusFilter').on('change', function () {
                try {
                    currentPage = 1;
                    safeApplyFiltersAndPagination();
                } catch (e) {
                    console.error("Error handling filter change:", e);
                }
            });

            $j('#searchMonitor').on('keyup', function () {
                try {
                    currentPage = 1;
                    safeApplyFiltersAndPagination();
                } catch (e) {
                    console.error("Error handling search monitor keyup:", e);
                }
            });

            $j(document).on('click', '.page-link', function (e) {
                try {
                    e.preventDefault();
                    let page = parseInt($j(this).data('page'));
                    if (!isNaN(page)) {
                        currentPage = page;
                        safeApplyFiltersAndPagination();
                    }
                } catch (e) {
                    console.error("Error handling page link click:", e);
                }
            });

            $j('.monitor-row').hover(
                function () {
                    try {
                        $j(this).addClass('bg-light');
                    } catch (e) {
                        console.error("Error handling row hover (in):", e);
                    }
                },
                function () {
                    try {
                        $j(this).removeClass('bg-light');
                    } catch (e) {
                        console.error("Error handling row hover (out):", e);
                    }
                }
            );

            $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 click:", e);
                }
            });

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

        } catch (e) {
            console.error("Top-level monitor management 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' // Matches your primary color
            });
        @endif
    </script>
@endsection