@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>
    
    <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);
            --success-color: #20c997;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
        }

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

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

        .change-type-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);
        }

        .website-badge {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: 50px;
            font-weight: 500;
            background-color: var(--primary-color);
            color: white;
            transition: all 0.3s ease;
        }

        .website-badge:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }

        .download-btn {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border: none;
            border-radius: var(--border-radius);
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(72, 57, 245, 0.25);
        }

        .download-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(72, 57, 245, 0.35);
        }

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

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

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

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

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

        .time-indicator {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            color: #6c757d;
        }

        .time-indicator i {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }

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

        .changelog-details {
            line-height: 1.6;
            color: var(--text-color);
        }

        /* Type-specific styles */
        .change-added {
            background-color: var(--success-color);
            color: white;
        }

        .change-modified {
            background-color: var(--warning-color);
            color: #212529;
        }

        .change-removed {
            background-color: var(--danger-color);
            color: white;
        }

        .timeline-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }

        .dot-added {
            background-color: var(--success-color);
        }

        .dot-modified {
            background-color: var(--warning-color);
        }

        .dot-removed {
            background-color: var(--danger-color);
        }

        /* 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="changelog-container">
        <div class="container">
            <!-- Header Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <h2 class="page-title"><i class="fas fa-history me-2"></i>Change Logs</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-clipboard-list"></i></div>
                        <div class="stats-number">{{ $changelogs->count() }}</div>
                        <div class="stats-title">Total Changes</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-plus-circle"></i></div>
                        <div class="stats-number">{{ $changelogs->where('change_type', 'Added')->count() }}</div>
                        <div class="stats-title">Added Elements</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-edit"></i></div>
                        <div class="stats-number">{{ $changelogs->where('change_type', 'Modified')->count() }}</div>
                        <div class="stats-title">Modified Elements</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-card">
                        <div class="stats-icon"><i class="fas fa-trash-alt"></i></div>
                        <div class="stats-number">{{ $changelogs->where('change_type', 'Removed')->count() }}</div>
                        <div class="stats-title">Removed Elements</div>
                    </div>
                </div>
            </div>

            <!-- Filter Section -->
            <div class="filter-card mb-4">
                <div class="row">
                    <div class="col-md-4">
                        <label for="changeTypeFilter" class="form-label">
                            <i class="fas fa-filter me-2"></i>Filter Change Type
                        </label>
                        <select id="changeTypeFilter" class="form-select">
                            <option value="all">All Changes</option>
                            <option value="Added">Added</option>
                            <option value="Modified">Modified</option>
                            <option value="Removed">Removed</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="dateFilter" class="form-label">
                            <i class="fas fa-calendar me-2"></i>Filter by Date
                        </label>
                        <select id="dateFilter" class="form-select">
                            <option value="all">All Time</option>
                            <option value="today">Today</option>
                            <option value="week">This Week</option>
                            <option value="month">This Month</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="searchChangelog" class="form-label">
                            <i class="fas fa-search me-2"></i>Search
                        </label>
                        <input type="text" id="searchChangelog" class="form-control"
                            placeholder="Search by website or details...">
                    </div>
                </div>
            </div>

            <!-- Main Content Section -->
            <div class="custom-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="fw-bold text-primary mb-0">
                        <i class="fas fa-list-alt me-2"></i>Change History
                    </h4>
                    <a href="{{ route('changelogs.export') }}" class="btn download-btn">
                        <i class="fas fa-file-export me-2"></i>Export Logs
                    </a>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover align-middle" id="changelogTable">
                        <thead class="table-header">
                            <tr>
                                <th class="text-center">#</th>
                                <th>Website</th>
                                <th class="text-center">Change Type</th>
                                <th>Details</th>
                                <th>Detected At</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($changelogs as $log)
                                <tr class="hover-animate changelog-row" data-change-type="{{ $log->change_type }}"
                                    data-date="{{ $log->created_at->format('Y-m-d') }}">
                                    <td class="text-center">
                                        <span class="timeline-dot dot-{{ strtolower($log->change_type) }}"></span>
                                        <span class="row-number"></span>
                                    </td>
                                    <td>
                                        <span class="website-badge">
                                            {{ optional($log->monitor)->name ?? 'N/A' }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <span class="change-type-badge change-{{ strtolower($log->change_type) }}">
                                            {{ $log->change_type }}
                                        </span>
                                    </td>
                                    <td class="changelog-details">{{ $log->details }}</td>
                                    <td>
                                        <div class="time-indicator">
                                            <i class="fas fa-clock"></i>
                                            <span>{{ $log->created_at->format('Y-m-d H:i:s') }}</span>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach

                            @if(count($changelogs) === 0)
                                <tr>
                                    <td colspan="5">
                                        <div class="empty-state">
                                            <i class="fas fa-clipboard-check fa-4x mb-3 text-muted pulse"></i>
                                            <h4>No changes detected</h4>
                                            <p class="text-muted">All monitored websites are stable</p>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                    <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>
    </div>

    <script>
        $(document).ready(function () {
            // Change type filter
            $('#changeTypeFilter').on('change', function () {
                applyFilters();
            });

            // Date filter
            $('#dateFilter').on('change', function () {
                applyFilters();
            });

            // Search functionality
            $('#searchChangelog').on('keyup', function () {
                applyFilters();
            });

            // Apply all filters
            function applyFilters() {
                let changeTypeFilter = $('#changeTypeFilter').val();
                let dateFilter = $('#dateFilter').val();
                let searchTerm = $('#searchChangelog').val().toLowerCase();

                let today = new Date();
                let oneWeekAgo = new Date();
                oneWeekAgo.setDate(today.getDate() - 7);
                let oneMonthAgo = new Date();
                oneMonthAgo.setMonth(today.getMonth() - 1);

                $('.changelog-row').each(function () {
                    let row = $(this);
                    let changeType = row.data('change-type');
                    let dateStr = row.data('date');
                    let rowDate = new Date(dateStr);

                    let website = row.find('td:nth-child(2)').text().toLowerCase();
                    let details = row.find('td:nth-child(4)').text().toLowerCase();

                    // Check if the row matches change type filter
                    let matchesChangeType = changeTypeFilter === 'all' || changeType === changeTypeFilter;

                    // Check if the row matches date filter
                    let matchesDateFilter = false;
                    switch (dateFilter) {
                        case 'all':
                            matchesDateFilter = true;
                            break;
                        case 'today':
                            matchesDateFilter = rowDate.toDateString() === today.toDateString();
                            break;
                        case 'week':
                            matchesDateFilter = rowDate >= oneWeekAgo;
                            break;
                        case 'month':
                            matchesDateFilter = rowDate >= oneMonthAgo;
                            break;
                    }

                    // Check if the row matches search term
                    let matchesSearch = searchTerm === '' ||
                        website.includes(searchTerm) ||
                        details.includes(searchTerm);

                    if (matchesChangeType && matchesDateFilter && matchesSearch) {
                        row.show();
                    } else {
                        row.hide();
                    }
                });

                // Check if there are any visible rows
                if ($('.changelog-row:visible').length === 0) {
                    if ($('#no-results-row').length === 0) {
                        $('#changelogTable tbody').append(
                            '<tr id="no-results-row"><td colspan="5" class="text-center py-4">' +
                            '<i class="fas fa-search fa-2x mb-3 text-muted"></i>' +
                            '<p>No changes match your search criteria</p></td></tr>'
                        );
                    }
                } else {
                    $('#no-results-row').remove();
                }
            }

            // Row hover effect
            $('.changelog-row').hover(
                function () {
                    $(this).addClass('bg-light');
                },
                function () {
                    $(this).removeClass('bg-light');
                }
            );
        });
    </script>
    <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('.changelog-row').length ||
                !$j('#pagination').length ||
                !$j('#changeTypeFilter').length ||
                !$j('#dateFilter').length
            ) {
                console.error("Missing required DOM elements for changelog management.");
                return;
            }

            let currentPage = 1;
            const rowsPerPage = 10;

            safeApplyFiltersAndPagination();

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

                    let today = new Date();
                    let oneWeekAgo = new Date();
                    oneWeekAgo.setDate(today.getDate() - 7);
                    let oneMonthAgo = new Date();
                    oneMonthAgo.setMonth(today.getMonth() - 1);

                    let visibleRows = $j('.changelog-row').filter(function () {
                        const changeType = $j(this).data('change-type');
                        const dateStr = $j(this).data('date');
                        const rowDate = new Date(dateStr);
                        const website = $j(this).find('td:nth-child(2)').text().toLowerCase();
                        const details = $j(this).find('td:nth-child(4)').text().toLowerCase();

                        const matchesChangeType = changeTypeFilter === 'all' || changeType === changeTypeFilter;
                        const matchesDateFilter = dateFilter === 'all' || safeCheckDateFilter(rowDate, dateFilter);
                        const matchesSearch = searchTerm === '' || website.includes(searchTerm) || details.includes(searchTerm);

                        return matchesChangeType && matchesDateFilter && matchesSearch;
                    });

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

                    $j('.changelog-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 changelog filters and pagination:", e);
                }
            }

            function safeCheckDateFilter(rowDate, filter) {
                try {
                    let today = new Date();
                    switch (filter) {
                        case 'today':
                            return rowDate.toDateString() === today.toDateString();
                        case 'week':
                            return rowDate >= new Date(today.setDate(today.getDate() - 7));
                        case 'month':
                            return rowDate >= new Date(today.setMonth(today.getMonth() - 1));
                        default:
                            return true;
                    }
                } catch (e) {
                    console.error("Error checking date filter:", 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 changelog pagination:", e);
                }
            }

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

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

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

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

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

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

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