@extends('layouts.app')

@section('title', 'Issues Report')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body py-3">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="d-flex align-items-center">
                                <div class="mr-3">
                                    <i class="fas fa-list-alt fa-2x text-success"></i>
                                </div>
                                <div>
                                    <h3 class="font-weight-bold mb-0" style="color: #495057;">Issues Report</h3>
                                    <p class="mb-0 text-muted small">View all issues by category</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-lg-right mt-2 mt-lg-0">
                            <button type="button" onclick="history.back()" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to Tickets
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Issues Table -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header" style="background-color: #d4edda; color: #155724;">
                    <h5 class="mb-0"><i class="fas fa-list-alt"></i> All Issues</h5>
                </div>
                <div class="card-body">
                    <!-- Show Entries Control -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="font-weight-bold text-muted mr-2" style="font-size: 0.9em; color: #6c757d;">SHOW</span>
                                    <select class="form-control form-control-sm" id="issuesEntriesPerPage" style="width: auto; display: inline-block; margin: 0 8px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 30px 4px 8px; font-size: 0.9em; color: #495057;">
                                        <option value="10" selected>10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="all">All</option>
                                    </select>
                                    <span class="font-weight-bold text-muted ml-2" style="font-size: 0.9em; color: #6c757d;">ENTRIES</span>
                                </div>
                                <div>
                                    <input type="text" id="issuesSearch" class="form-control form-control-sm" placeholder="Search..." style="width: 200px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 8px; font-size: 0.9em;">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                        <table id="issuesTable" class="table table-bordered table-hover table-striped">
                            <thead style="position: sticky; top: 0; z-index: 10; background-color: #e9ecef; color: #495057;">
                                <tr>
                                    <th style="width: 80px;" class="text-center">SL</th>
                                    <th style="width: 200px;" class="text-center">Issues</th>
                                    <th style="min-width: 120px;" class="text-center">Created Ticket</th>
                                    <th style="min-width: 120px;" class="text-center">Solved Ticket</th>
                                    <th style="min-width: 150px;" class="text-center">Average Assign Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Forwarded Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Solved Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if($allIssues->count() > 0)
                                    @php
                                        $statusColors = [
                                            'upstream_issues' => '#cfe2ff',
                                            'pop_issues' => '#ffe5d0',
                                            'transmission_issues' => '#e2d9f3'
                                        ];
                                        $statusTextColors = [
                                            'upstream_issues' => '#084298',
                                            'pop_issues' => '#b45309',
                                            'transmission_issues' => '#5a32a3'
                                        ];
                                    @endphp
                                    @foreach($allIssues as $index => $issueData)
                                        @php
                                            $statusColor = $statusColors[$issueData['status']] ?? '#e9ecef';
                                            $statusTextColor = $statusTextColors[$issueData['status']] ?? '#495057';
                                        @endphp
                                        <tr>
                                            <td class="align-middle text-center">{{ $index + 1 }}</td>
                                            <td class="align-middle text-center">
                                                <a href="{{ route('reseller-tickets.issues-report-details', $issueData['status']) }}" style="text-decoration: none;">
                                                    <span class="badge" style="background-color: {{ $statusColor }}; color: {{ $statusTextColor }}; font-size: 0.9em; padding: 6px 12px; font-weight: bold; cursor: pointer;">
                                                        {{ $issueData['status_label'] }}
                                                    </span>
                                                </a>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['created_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['solved_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_assign_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_forwarded_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_solved_time'] }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-3">
                                            No issues found.
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Upstream Issues Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header" style="background-color: #cfe2ff; color: #084298;">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Upstream Issues</h5>
                </div>
                <div class="card-body">
                    <!-- Show Entries Control -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="font-weight-bold text-muted mr-2" style="font-size: 0.9em; color: #6c757d;">SHOW</span>
                                    <select class="form-control form-control-sm" id="upstreamIssuesEntriesPerPage" style="width: auto; display: inline-block; margin: 0 8px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 30px 4px 8px; font-size: 0.9em; color: #495057;">
                                        <option value="10" selected>10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="all">All</option>
                                    </select>
                                    <span class="font-weight-bold text-muted ml-2" style="font-size: 0.9em; color: #6c757d;">ENTRIES</span>
                                </div>
                                <div>
                                    <input type="text" id="upstreamIssuesSearch" class="form-control form-control-sm" placeholder="Search..." style="width: 200px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 8px; font-size: 0.9em;">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                        <table id="upstreamIssuesTable" class="table table-bordered table-hover table-striped">
                            <thead style="position: sticky; top: 0; z-index: 10; background-color: #e9ecef; color: #495057;">
                                <tr>
                                    <th style="width: 80px;" class="text-center">SL</th>
                                    <th style="min-width: 200px;" class="text-center">Issue Name</th>
                                    <th style="min-width: 120px;" class="text-center">Created Ticket</th>
                                    <th style="min-width: 120px;" class="text-center">Solved Ticket</th>
                                    <th style="min-width: 150px;" class="text-center">Average Assign Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Forwarded Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Solved Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($upstreamIssuesList) && $upstreamIssuesList->count() > 0)
                                    @foreach($upstreamIssuesList as $index => $issueData)
                                        <tr>
                                            <td class="align-middle text-center">{{ $index + 1 }}</td>
                                            <td class="align-middle">
                                                <a href="{{ route('reseller-tickets.issue-details', $issueData['issue']->id) }}" style="text-decoration: none; color: #007bff; font-weight: bold;">
                                                    {{ $issueData['issue']->name }}
                                                </a>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['created_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['solved_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_assign_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_forwarded_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_solved_time'] }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-3">
                                            No upstream issues found.
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- POP Issues Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header" style="background-color: #ffe5d0; color: #b45309;">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> POP Issues</h5>
                </div>
                <div class="card-body">
                    <!-- Show Entries Control -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="font-weight-bold text-muted mr-2" style="font-size: 0.9em; color: #6c757d;">SHOW</span>
                                    <select class="form-control form-control-sm" id="popIssuesEntriesPerPage" style="width: auto; display: inline-block; margin: 0 8px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 30px 4px 8px; font-size: 0.9em; color: #495057;">
                                        <option value="10" selected>10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="all">All</option>
                                    </select>
                                    <span class="font-weight-bold text-muted ml-2" style="font-size: 0.9em; color: #6c757d;">ENTRIES</span>
                                </div>
                                <div>
                                    <input type="text" id="popIssuesSearch" class="form-control form-control-sm" placeholder="Search..." style="width: 200px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 8px; font-size: 0.9em;">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                        <table id="popIssuesTable" class="table table-bordered table-hover table-striped">
                            <thead style="position: sticky; top: 0; z-index: 10; background-color: #e9ecef; color: #495057;">
                                <tr>
                                    <th style="width: 80px;" class="text-center">SL</th>
                                    <th style="min-width: 200px;" class="text-center">Issue Name</th>
                                    <th style="min-width: 120px;" class="text-center">Created Ticket</th>
                                    <th style="min-width: 120px;" class="text-center">Solved Ticket</th>
                                    <th style="min-width: 150px;" class="text-center">Average Assign Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Forwarded Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Solved Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($popIssuesList) && $popIssuesList->count() > 0)
                                    @foreach($popIssuesList as $index => $issueData)
                                        <tr>
                                            <td class="align-middle text-center">{{ $index + 1 }}</td>
                                            <td class="align-middle">
                                                <a href="{{ route('reseller-tickets.issue-details', $issueData['issue']->id) }}" style="text-decoration: none; color: #007bff; font-weight: bold;">
                                                    {{ $issueData['issue']->name }}
                                                </a>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['created_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['solved_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_assign_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_forwarded_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_solved_time'] }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-3">
                                            No POP issues found.
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Transmission Issues Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header" style="background-color: #e2d9f3; color: #5a32a3;">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Transmission Issues</h5>
                </div>
                <div class="card-body">
                    <!-- Show Entries Control -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center">
                                    <span class="font-weight-bold text-muted mr-2" style="font-size: 0.9em; color: #6c757d;">SHOW</span>
                                    <select class="form-control form-control-sm" id="transmissionIssuesEntriesPerPage" style="width: auto; display: inline-block; margin: 0 8px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 30px 4px 8px; font-size: 0.9em; color: #495057;">
                                        <option value="10" selected>10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="all">All</option>
                                    </select>
                                    <span class="font-weight-bold text-muted ml-2" style="font-size: 0.9em; color: #6c757d;">ENTRIES</span>
                                </div>
                                <div>
                                    <input type="text" id="transmissionIssuesSearch" class="form-control form-control-sm" placeholder="Search..." style="width: 200px; border: 1px solid #ced4da; border-radius: 4px; padding: 4px 8px; font-size: 0.9em;">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                        <table id="transmissionIssuesTable" class="table table-bordered table-hover table-striped">
                            <thead style="position: sticky; top: 0; z-index: 10; background-color: #e9ecef; color: #495057;">
                                <tr>
                                    <th style="width: 80px;" class="text-center">SL</th>
                                    <th style="min-width: 200px;" class="text-center">Issue Name</th>
                                    <th style="min-width: 120px;" class="text-center">Created Ticket</th>
                                    <th style="min-width: 120px;" class="text-center">Solved Ticket</th>
                                    <th style="min-width: 150px;" class="text-center">Average Assign Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Forwarded Time</th>
                                    <th style="min-width: 150px;" class="text-center">Average Solved Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($transmissionIssuesList) && $transmissionIssuesList->count() > 0)
                                    @foreach($transmissionIssuesList as $index => $issueData)
                                        <tr>
                                            <td class="align-middle text-center">{{ $index + 1 }}</td>
                                            <td class="align-middle">
                                                <a href="{{ route('reseller-tickets.issue-details', $issueData['issue']->id) }}" style="text-decoration: none; color: #007bff; font-weight: bold;">
                                                    {{ $issueData['issue']->name }}
                                                </a>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['created_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span style="font-size: 0.9em;">{{ $issueData['solved_count'] }}</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_assign_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_forwarded_time'] }}
                                                </span>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span class="badge badge-info" style="background-color: #d1ecf1; color: #0c5460; font-size: 0.85em; padding: 5px 10px; white-space: nowrap;">
                                                    {{ $issueData['avg_solved_time'] }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-3">
                                            No transmission issues found.
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    tbody tr:hover {
        background-color: #f8f9fa !important;
    }
    thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background-color: #e9ecef !important;
        color: #495057 !important;
    }
    .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.02);
    }
    .table-striped tbody tr:nth-of-type(even) {
        background-color: rgba(0, 0, 0, 0.05);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const entriesSelect = document.getElementById('issuesEntriesPerPage');
    const searchInput = document.getElementById('issuesSearch');
    const table = document.getElementById('issuesTable');
    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    
    // Store original rows
    const originalRows = rows.map(row => row.cloneNode(true));
    let filteredRows = originalRows;
    
    function filterRows(searchTerm) {
        if (!searchTerm || searchTerm.trim() === '') {
            filteredRows = originalRows;
        } else {
            const term = searchTerm.toLowerCase();
            filteredRows = originalRows.filter(row => {
                const text = row.textContent.toLowerCase();
                return text.includes(term);
            });
        }
        showRows(entriesSelect.value);
    }
    
    function showRows(count) {
        // Clear tbody
        tbody.innerHTML = '';
        
        if (count === 'all') {
            // Show all filtered rows
            filteredRows.forEach(row => tbody.appendChild(row.cloneNode(true)));
        } else {
            // Show limited filtered rows
            const limit = parseInt(count);
            filteredRows.slice(0, limit).forEach(row => tbody.appendChild(row.cloneNode(true)));
        }
    }
    
    // Initial display
    showRows(entriesSelect.value);
    
    // Handle entries change event
    entriesSelect.addEventListener('change', function() {
        showRows(this.value);
    });
    
    // Handle search input event
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            filterRows(this.value);
        });
    }
});

// Upstream Issues Table Entries Control
document.addEventListener('DOMContentLoaded', function() {
    const upstreamEntriesSelect = document.getElementById('upstreamIssuesEntriesPerPage');
    const upstreamSearchInput = document.getElementById('upstreamIssuesSearch');
    const upstreamTable = document.getElementById('upstreamIssuesTable');
    
    if (upstreamEntriesSelect && upstreamTable) {
        const upstreamTbody = upstreamTable.querySelector('tbody');
        const upstreamRows = Array.from(upstreamTbody.querySelectorAll('tr'));
        
        // Store original rows
        const upstreamOriginalRows = upstreamRows.map(row => row.cloneNode(true));
        let upstreamFilteredRows = upstreamOriginalRows;
        
        function filterUpstreamRows(searchTerm) {
            if (!searchTerm || searchTerm.trim() === '') {
                upstreamFilteredRows = upstreamOriginalRows;
            } else {
                const term = searchTerm.toLowerCase();
                upstreamFilteredRows = upstreamOriginalRows.filter(row => {
                    const text = row.textContent.toLowerCase();
                    return text.includes(term);
                });
            }
            showUpstreamRows(upstreamEntriesSelect.value);
        }
        
        function showUpstreamRows(count) {
            // Clear tbody
            upstreamTbody.innerHTML = '';
            
            if (count === 'all') {
                // Show all filtered rows
                upstreamFilteredRows.forEach(row => upstreamTbody.appendChild(row.cloneNode(true)));
            } else {
                // Show limited filtered rows
                const limit = parseInt(count);
                upstreamFilteredRows.slice(0, limit).forEach(row => upstreamTbody.appendChild(row.cloneNode(true)));
            }
        }
        
        // Initial display
        showUpstreamRows(upstreamEntriesSelect.value);
        
        // Handle change event
        upstreamEntriesSelect.addEventListener('change', function() {
            showUpstreamRows(this.value);
        });
        
        // Handle search input event
        if (upstreamSearchInput) {
            upstreamSearchInput.addEventListener('input', function() {
                filterUpstreamRows(this.value);
            });
        }
    }
});

// POP Issues Table Entries Control
document.addEventListener('DOMContentLoaded', function() {
    const popEntriesSelect = document.getElementById('popIssuesEntriesPerPage');
    const popSearchInput = document.getElementById('popIssuesSearch');
    const popTable = document.getElementById('popIssuesTable');
    
    if (popEntriesSelect && popTable) {
        const popTbody = popTable.querySelector('tbody');
        const popRows = Array.from(popTbody.querySelectorAll('tr'));
        
        // Store original rows
        const popOriginalRows = popRows.map(row => row.cloneNode(true));
        let popFilteredRows = popOriginalRows;
        
        function filterPopRows(searchTerm) {
            if (!searchTerm || searchTerm.trim() === '') {
                popFilteredRows = popOriginalRows;
            } else {
                const term = searchTerm.toLowerCase();
                popFilteredRows = popOriginalRows.filter(row => {
                    const text = row.textContent.toLowerCase();
                    return text.includes(term);
                });
            }
            showPopRows(popEntriesSelect.value);
        }
        
        function showPopRows(count) {
            // Clear tbody
            popTbody.innerHTML = '';
            
            if (count === 'all') {
                // Show all filtered rows
                popFilteredRows.forEach(row => popTbody.appendChild(row.cloneNode(true)));
            } else {
                // Show limited filtered rows
                const limit = parseInt(count);
                popFilteredRows.slice(0, limit).forEach(row => popTbody.appendChild(row.cloneNode(true)));
            }
        }
        
        // Initial display
        showPopRows(popEntriesSelect.value);
        
        // Handle change event
        popEntriesSelect.addEventListener('change', function() {
            showPopRows(this.value);
        });
        
        // Handle search input event
        if (popSearchInput) {
            popSearchInput.addEventListener('input', function() {
                filterPopRows(this.value);
            });
        }
    }
});

// Transmission Issues Table Entries Control
document.addEventListener('DOMContentLoaded', function() {
    const transmissionEntriesSelect = document.getElementById('transmissionIssuesEntriesPerPage');
    const transmissionSearchInput = document.getElementById('transmissionIssuesSearch');
    const transmissionTable = document.getElementById('transmissionIssuesTable');
    
    if (transmissionEntriesSelect && transmissionTable) {
        const transmissionTbody = transmissionTable.querySelector('tbody');
        const transmissionRows = Array.from(transmissionTbody.querySelectorAll('tr'));
        
        // Store original rows
        const transmissionOriginalRows = transmissionRows.map(row => row.cloneNode(true));
        let transmissionFilteredRows = transmissionOriginalRows;
        
        function filterTransmissionRows(searchTerm) {
            if (!searchTerm || searchTerm.trim() === '') {
                transmissionFilteredRows = transmissionOriginalRows;
            } else {
                const term = searchTerm.toLowerCase();
                transmissionFilteredRows = transmissionOriginalRows.filter(row => {
                    const text = row.textContent.toLowerCase();
                    return text.includes(term);
                });
            }
            showTransmissionRows(transmissionEntriesSelect.value);
        }
        
        function showTransmissionRows(count) {
            // Clear tbody
            transmissionTbody.innerHTML = '';
            
            if (count === 'all') {
                // Show all filtered rows
                transmissionFilteredRows.forEach(row => transmissionTbody.appendChild(row.cloneNode(true)));
            } else {
                // Show limited filtered rows
                const limit = parseInt(count);
                transmissionFilteredRows.slice(0, limit).forEach(row => transmissionTbody.appendChild(row.cloneNode(true)));
            }
        }
        
        // Initial display
        showTransmissionRows(transmissionEntriesSelect.value);
        
        // Handle change event
        transmissionEntriesSelect.addEventListener('change', function() {
            showTransmissionRows(this.value);
        });
        
        // Handle search input event
        if (transmissionSearchInput) {
            transmissionSearchInput.addEventListener('input', function() {
                filterTransmissionRows(this.value);
            });
        }
    }
});
</script>
@endsection