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

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

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

        .header {
            display: flex;
            justify-content: center;
            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;
        }

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

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

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

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

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

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

        .change-type-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);
            background-color: rgb(61 41 188) !important;
        }

        .bg-success { background-color: #28a745 !important; }
        .bg-warning { background-color: #ffc107 !important; color: #000 !important; }
        .bg-danger { background-color: #dc3545 !important; }

        .timestamp {
            color: #6c757d;
            font-size: 0.9rem;
        }

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

        .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);
        }
    </style>

    <div class="changelog-container">
        <div class="container">
            <div class="custom-card">
                <!-- Header Section -->
                <div class="header mb-4">
                    <i class="fas fa-history header-icon"></i>
                    <h2 class="page-title">Change Logs for {{ $monitor->name }}</h2>
                </div>
                <div class="mb-4 d-flex justify-content-center">
                    <a href="{{ $monitor->url }}" target="_blank" class="url-link">
                        <i class="fas fa-link me-2"></i>{{ $monitor->url }} <i class="fas fa-external-link-alt ms-1"></i>
                    </a>
                </div>

                <!-- Search Filter Section -->
                <div class="filter-section mb-4">
                    <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="searchChangeLog" class="form-control" placeholder="Search by description...">
                    </div>
                </div>

                <!-- Table Section -->
                <div class="table-container">
                    <table class="table" id="myTable">
                        <thead>
                            <tr>
                                <th>S. No.</th>
                                <th>Change Type</th>
                                <th>Description</th>
                                <th>Changed At</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($changeLogs as $log)
                                <tr class="change-log-row">
                                    <td>{{ $loop->iteration }}</td>
                                    <td>
                                        @php
                                            $changeType = strtolower($log->change_type);
                                            $badgeClass = 'bg-secondary';
                                            $iconClass = 'fa-info-circle';

                                            if ($changeType === 'added') {
                                                $badgeClass = 'bg-success';
                                                $iconClass = 'fa-plus-circle';
                                            } elseif ($changeType === 'modified') {
                                                $badgeClass = 'bg-warning';
                                                $iconClass = 'fa-pen';
                                            } elseif ($changeType === 'removed') {
                                                $badgeClass = 'bg-danger';
                                                $iconClass = 'fa-trash';
                                            }
                                        @endphp
                                        <span class="change-type-badge {{ $badgeClass }}">
                                            <i class="fas {{ $iconClass }} me-2"></i>
                                            {{ ucfirst($log->change_type) }}
                                        </span>
                                    </td>
                                    <td class="text-break">{{ $log->details }}</td>
                                    <td class="timestamp">
                                        <i class="fas fa-clock me-2" style="color: #3d29bc;"></i>
                                        {{ $log->created_at->format('M d, Y H:i') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </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>
    </div>

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

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

            if (
                !$j('#searchChangeLog').length ||
                !$j('.change-log-row').length ||
                !$j('#pagination').length
            ) {
                console.error("Missing required DOM elements for change log management.");
                return;
            }

            let currentPage = 1;
            const rowsPerPage = 10;

            safeApplyFiltersAndPagination();

            function safeApplyFiltersAndPagination() {
                try {
                    const searchTerm = $j('#searchChangeLog').val().toLowerCase();

                    let visibleRows = $j('.change-log-row').filter(function () {
                        const description = $j(this).find('td:nth-child(3)').text().toLowerCase();
                        const matchesSearch = searchTerm === '' || description.includes(searchTerm);
                        return matchesSearch;
                    });

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

                    $j('.change-log-row').hide();
                    visibleRows.slice(start, end).each(function(index) {
                        $j(this).show();
                    });

                    safeUpdatePagination(totalPages);
                } catch (e) {
                    console.error("Error applying change log 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 change log pagination:", e);
                }
            }

            // Event Listeners
            $j('#searchChangeLog').on('keyup', function () {
                try {
                    currentPage = 1;
                    safeApplyFiltersAndPagination();
                } catch (e) {
                    console.error("Error handling search change log 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('.change-log-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);
                    }
                }
            );

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

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

})(window, document, jQuery);
    </script>
@endsection