@extends('layouts.bootstrap')

@section('title', 'Products')

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-box me-2"></i>Products
    </h1>
    <div>
        @if(auth()->user()->canManage())
            <div class="btn-group me-2">
                <a href="{{ route('products.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-1"></i>Add Product
                </a>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('products.import.form') }}">
                        <i class="bi bi-upload me-2"></i>Import CSV
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="{{ route('products.merge.index') }}">
                        <i class="bi bi-arrow-down-up me-2"></i>Merge Products
                    </a></li>
                    <li><a class="dropdown-item" href="{{ route('products.merge.history') }}">
                        <i class="bi bi-clock-history me-2"></i>Merge History
                    </a></li>
                </ul>
            </div>
        @endif
        <a href="{{ route('products.export') }}" class="btn btn-success">
            <i class="bi bi-download me-1"></i>Export CSV
        </a>
    </div>
@endsection

@section('content')
<div class="container-fluid">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <h5><i class="bi bi-check-circle me-2"></i>Import Completed!</h5>
            {{ session('success') }}

            @if(session('import_summary'))
                @php $summary = session('import_summary'); @endphp
                <hr>
                <div class="row text-center mt-3">
                    @if($summary['imported'] > 0)
                        <div class="col-md-2">
                            <strong class="text-success">{{ $summary['imported'] }}</strong><br>
                            <small>Imported</small>
                        </div>
                    @endif
                    @if($summary['exact_duplicates'] > 0)
                        <div class="col-md-2">
                            <strong class="text-warning">{{ $summary['exact_duplicates'] }}</strong><br>
                            <small>Duplicates Skipped</small>
                        </div>
                    @endif
                    @if(count($summary['errors']) > 0)
                        <div class="col-md-2">
                            <strong class="text-danger">{{ count($summary['errors']) }}</strong><br>
                            <small>Errors</small>
                        </div>
                    @endif
                    <div class="col-md-2">
                        <strong class="text-info">{{ $summary['total_rows'] }}</strong><br>
                        <small>Total Rows</small>
                    </div>
                </div>

                @if(count($summary['skipped_duplicates']) > 0)
                    <div class="mt-3">
                        <button class="btn btn-sm btn-outline-warning" type="button" data-bs-toggle="collapse" data-bs-target="#duplicatesList">
                            <i class="bi bi-list me-1"></i>View Skipped Duplicates ({{ count($summary['skipped_duplicates']) }})
                        </button>
                        <div class="collapse mt-2" id="duplicatesList">
                            <div class="card card-body">
                                <h6>Skipped Duplicate Products:</h6>
                                <ul class="mb-0">
                                    @foreach($summary['skipped_duplicates'] as $duplicate)
                                        <li>Row {{ $duplicate['row'] }}: "{{ $duplicate['name'] }}" (matches existing product)</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                @endif
            @endif

            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

<!-- Filters -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-body">
                <form method="GET" action="{{ route('products.index') }}">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="search" class="form-label">Search</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="search" name="search"
                                       value="{{ request('search') }}" placeholder="Search products..."
                                       autocomplete="off">
                                <div id="search-suggestions" class="position-absolute w-100 bg-white border border-top-0 rounded-bottom shadow-sm"
                                     style="display: none; z-index: 1000; max-height: 300px; overflow-y: auto;">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label for="category_id" class="form-label">Category</label>
                            <select class="form-select" id="category_id" name="category_id">
                                <option value="">All Categories</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" 
                                            {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="subcategory_id" class="form-label">Subcategory</label>
                            <select class="form-select" id="subcategory_id" name="subcategory_id">
                                <option value="">All Subcategories</option>
                                @foreach($subcategories as $subcategory)
                                    <option value="{{ $subcategory->id }}" 
                                            {{ request('subcategory_id') == $subcategory->id ? 'selected' : '' }}>
                                        {{ $subcategory->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="bi bi-search me-1"></i>Filter
                            </button>
                            <a href="{{ route('products.index') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle"></i>
                            </a>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="live_search" checked>
                                <label class="form-check-label" for="live_search">
                                    <small class="text-muted">
                                        <i class="bi bi-lightning me-1"></i>Live search (search as you type)
                                    </small>
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Products Table -->
<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    All Products 
                    <span class="badge bg-secondary">{{ $products->total() }}</span>
                </h6>
            </div>
            <div class="card-body">
                @if($products->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Product Name</th>
                                    <th>Status</th>
                                    <th>Category</th>
                                    <th>Subcategory</th>
                                    <th>Country</th>
                                    <th>Price</th>
                                    <th>Unit</th>
                                    <th>Created By</th>
                                    <th>Created</th>
                                    <th width="150">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($products as $product)
                                    <tr>
                                        <td>
                                            <strong>{{ $product->name }}</strong>
                                            @if($product->description)
                                                <br><small class="text-muted">{{ Str::limit($product->description, 50) }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($product->isComplete())
                                                <span class="badge bg-success">
                                                    <i class="bi bi-check-circle me-1"></i>Complete
                                                </span>
                                            @else
                                                <span class="badge bg-warning text-dark">
                                                    <i class="bi bi-exclamation-triangle me-1"></i>Incomplete
                                                </span>
                                                <br><small class="text-muted">{{ $product->getCompletionPercentage() }}% done</small>
                                            @endif
                                        </td>
                                        <td>{{ $product->category->name ?? '-' }}</td>
                                        <td>{{ $product->subcategory->name ?? '-' }}</td>
                                        <td>{{ $product->country_of_origin ?? '-' }}</td>
                                        <td>
                                            @if($product->price)
                                                <span class="fw-bold text-success">${{ number_format($product->price, 2) }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($product->measurement_unit)
                                                <span class="badge bg-light text-dark">{{ $product->measurement_unit }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>{{ $product->creator->name }}</td>
                                        <td>{{ $product->created_at->format('M d, Y') }}</td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('products.show', $product) }}" 
                                                   class="btn btn-sm btn-outline-info" title="View">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                                @if(auth()->user()->canManage())
                                                    <a href="{{ route('products.edit', $product) }}"
                                                       class="btn btn-sm {{ $product->isIncomplete() ? 'btn-warning' : 'btn-outline-warning' }}"
                                                       title="{{ $product->isIncomplete() ? 'Complete Product' : 'Edit' }}">
                                                        <i class="bi bi-{{ $product->isIncomplete() ? 'plus-circle' : 'pencil' }}"></i>
                                                        @if($product->isIncomplete())
                                                            <span class="d-none d-md-inline ms-1">Complete</span>
                                                        @endif
                                                    </a>
                                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                                            data-bs-toggle="modal" 
                                                            data-bs-target="#deleteModal{{ $product->id }}" title="Delete">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                @endif
                                            </div>

                                            @if(auth()->user()->canManage())
                                                <!-- Delete Modal -->
                                                <div class="modal fade" id="deleteModal{{ $product->id }}" tabindex="-1">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Confirm Delete</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                Are you sure you want to delete "{{ $product->name }}"?
                                                                <div class="alert alert-warning mt-2">
                                                                    <i class="bi bi-exclamation-triangle me-2"></i>
                                                                    This action cannot be undone.
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                                <form action="{{ route('products.destroy', $product) }}" method="POST" class="d-inline">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="submit" class="btn btn-danger">Delete</button>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Enhanced Pagination -->
                    @if($products->hasPages())
                        <div class="row mt-4">
                            <div class="col-md-6 d-flex align-items-center">
                                <!-- Results Info -->
                                <div class="pagination-info">
                                    <span class="text-muted">
                                        Showing
                                        <strong>{{ $products->firstItem() ?? 0 }}</strong>
                                        to
                                        <strong>{{ $products->lastItem() ?? 0 }}</strong>
                                        of
                                        <strong>{{ $products->total() }}</strong>
                                        results
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- Page Size Selector -->
                                <div class="d-flex justify-content-end align-items-center mb-3">
                                    <label for="per_page" class="form-label me-2 mb-0">
                                        <small class="text-muted">Show:</small>
                                    </label>
                                    <select class="form-select form-select-sm" id="per_page" name="per_page" style="width: auto;">
                                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                                        <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15</option>
                                        <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                                    </select>
                                    <small class="text-muted ms-2">per page</small>
                                </div>
                            </div>
                        </div>

                        <!-- Custom Pagination Links -->
                        <div class="row">
                            <div class="col-12">
                                <nav aria-label="Products pagination" class="d-flex justify-content-center">
                                    <ul class="pagination pagination-lg shadow-sm">
                                        {{-- First Page Link --}}
                                        @if ($products->currentPage() > 3)
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $products->appends(request()->query())->url(1) }}"
                                                   title="First Page">
                                                    <i class="bi bi-chevron-double-left"></i>
                                                </a>
                                            </li>
                                        @endif

                                        {{-- Previous Page Link --}}
                                        @if ($products->onFirstPage())
                                            <li class="page-item disabled">
                                                <span class="page-link">
                                                    <i class="bi bi-chevron-left"></i>
                                                </span>
                                            </li>
                                        @else
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $products->appends(request()->query())->previousPageUrl() }}"
                                                   title="Previous Page">
                                                    <i class="bi bi-chevron-left"></i>
                                                </a>
                                            </li>
                                        @endif

                                        {{-- Pagination Elements --}}
                                        @foreach ($products->appends(request()->query())->getUrlRange(max(1, $products->currentPage() - 2), min($products->lastPage(), $products->currentPage() + 2)) as $page => $url)
                                            @if ($page == $products->currentPage())
                                                <li class="page-item active">
                                                    <span class="page-link bg-primary border-primary">
                                                        {{ $page }}
                                                        <span class="visually-hidden">(current)</span>
                                                    </span>
                                                </li>
                                            @else
                                                <li class="page-item">
                                                    <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                                </li>
                                            @endif
                                        @endforeach

                                        {{-- Next Page Link --}}
                                        @if ($products->hasMorePages())
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $products->appends(request()->query())->nextPageUrl() }}"
                                                   title="Next Page">
                                                    <i class="bi bi-chevron-right"></i>
                                                </a>
                                            </li>
                                        @else
                                            <li class="page-item disabled">
                                                <span class="page-link">
                                                    <i class="bi bi-chevron-right"></i>
                                                </span>
                                            </li>
                                        @endif

                                        {{-- Last Page Link --}}
                                        @if ($products->currentPage() < $products->lastPage() - 2)
                                            <li class="page-item">
                                                <a class="page-link" href="{{ $products->appends(request()->query())->url($products->lastPage()) }}"
                                                   title="Last Page">
                                                    <i class="bi bi-chevron-double-right"></i>
                                                </a>
                                            </li>
                                        @endif
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <!-- Quick Jump -->
                        @if($products->lastPage() > 10)
                            <div class="row mt-3">
                                <div class="col-12 d-flex justify-content-center">
                                    <div class="input-group" style="max-width: 200px;">
                                        <span class="input-group-text">
                                            <small>Go to page</small>
                                        </span>
                                        <input type="number" class="form-control form-control-sm"
                                               id="jump_to_page"
                                               min="1"
                                               max="{{ $products->lastPage() }}"
                                               placeholder="{{ $products->currentPage() }}">
                                        <button class="btn btn-outline-primary btn-sm" type="button" id="jump_btn">
                                            <i class="bi bi-arrow-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endif
                @else
                    <div class="text-center py-4">
                        <i class="bi bi-box display-1 text-muted"></i>
                        <h4 class="mt-3">No Products Found</h4>
                        <p class="text-muted">
                            @if(request()->hasAny(['search', 'category_id', 'subcategory_id']))
                                Try adjusting your filters or search terms.
                            @else
                                Get started by adding your first product.
                            @endif
                        </p>
                        @if(auth()->user()->canManage())
                            <a href="{{ route('products.create') }}" class="btn btn-primary">
                                <i class="bi bi-plus-circle me-1"></i>Add Product
                            </a>
                        @endif
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Dynamic subcategory loading
document.getElementById('category_id').addEventListener('change', function() {
    const categoryId = this.value;
    const subcategorySelect = document.getElementById('subcategory_id');
    
    // Clear current options
    subcategorySelect.innerHTML = '<option value="">All Subcategories</option>';
    
    if (categoryId) {
        fetch(`/categories/${categoryId}/subcategories`)
            .then(response => response.json())
            .then(data => {
                data.forEach(subcategory => {
                    const option = document.createElement('option');
                    option.value = subcategory.id;
                    option.textContent = subcategory.name;
                    subcategorySelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
});

// Auto-complete search functionality
const searchInput = document.getElementById('search');
const suggestionsContainer = document.getElementById('search-suggestions');
const liveSearchCheckbox = document.getElementById('live_search');
let searchTimeout;
let liveSearchTimeout;

searchInput.addEventListener('input', function() {
    const query = this.value.trim();

    // Clear previous timeout
    clearTimeout(searchTimeout);

    if (query.length < 2) {
        hideSuggestions();
        return;
    }

    // Debounce search requests
    searchTimeout = setTimeout(() => {
        fetchSuggestions(query);
    }, 300);

    // Live search functionality
    if (liveSearchCheckbox.checked && query.length >= 2) {
        clearTimeout(liveSearchTimeout);
        liveSearchTimeout = setTimeout(() => {
            performLiveSearch(query);
        }, 800); // Longer delay for live search to avoid too many requests
    }
});

searchInput.addEventListener('focus', function() {
    const query = this.value.trim();
    if (query.length >= 2) {
        fetchSuggestions(query);
    }
});

// Hide suggestions when clicking outside
document.addEventListener('click', function(e) {
    if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
        hideSuggestions();
    }
});

function fetchSuggestions(query) {
    fetch(`{{ route('products.search.suggestions') }}?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(suggestions => {
            displaySuggestions(suggestions);
        })
        .catch(error => {
            console.error('Error fetching suggestions:', error);
            hideSuggestions();
        });
}

function displaySuggestions(suggestions) {
    if (suggestions.length === 0) {
        hideSuggestions();
        return;
    }

    const html = suggestions.map(suggestion => `
        <div class="suggestion-item px-3 py-2 border-bottom cursor-pointer hover-bg-light"
             data-value="${suggestion.value}"
             style="cursor: pointer;">
            <div class="d-flex justify-content-between align-items-center">
                <span>${suggestion.label}</span>
                <small class="text-muted">${suggestion.type}</small>
            </div>
        </div>
    `).join('');

    suggestionsContainer.innerHTML = html;
    suggestionsContainer.style.display = 'block';

    // Add click handlers to suggestions
    suggestionsContainer.querySelectorAll('.suggestion-item').forEach(item => {
        item.addEventListener('click', function() {
            searchInput.value = this.dataset.value;
            hideSuggestions();
            // Optionally trigger search immediately
            searchInput.closest('form').submit();
        });

        // Add hover effects
        item.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#f8f9fa';
        });

        item.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
        });
    });
}

function hideSuggestions() {
    suggestionsContainer.style.display = 'none';
}

function performLiveSearch(query) {
    // Get current form data
    const form = searchInput.closest('form');
    const formData = new FormData(form);

    // Update search parameter
    formData.set('search', query);

    // Build URL with parameters
    const params = new URLSearchParams();
    for (let [key, value] of formData.entries()) {
        if (value) params.append(key, value);
    }

    // Update URL without page reload
    const newUrl = `${window.location.pathname}?${params.toString()}`;
    window.history.pushState({}, '', newUrl);

    // Fetch and update results
    fetch(newUrl, {
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.text())
    .then(html => {
        // Parse the response and update the products table
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const newProductsTable = doc.querySelector('.table-responsive');
        const currentProductsTable = document.querySelector('.table-responsive');

        if (newProductsTable && currentProductsTable) {
            currentProductsTable.innerHTML = newProductsTable.innerHTML;
        }

        // Update pagination if exists
        const newPagination = doc.querySelector('.pagination');
        const currentPagination = document.querySelector('.pagination');
        if (newPagination && currentPagination) {
            currentPagination.parentNode.innerHTML = newPagination.parentNode.innerHTML;
        }

        // Show live search indicator
        showLiveSearchIndicator();
    })
    .catch(error => {
        console.error('Live search error:', error);
    });
}

function showLiveSearchIndicator() {
    // Add a subtle indicator that live search was performed
    const indicator = document.createElement('div');
    indicator.className = 'alert alert-success alert-dismissible fade show position-fixed';
    indicator.style.cssText = 'top: 20px; right: 20px; z-index: 9999; padding: 8px 12px;';
    indicator.innerHTML = `
        <small><i class="bi bi-check-circle me-1"></i>Search updated</small>
        <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert"></button>
    `;
    document.body.appendChild(indicator);

    // Auto-remove after 2 seconds
    setTimeout(() => {
        if (indicator.parentNode) {
            indicator.remove();
        }
    }, 2000);
}

// Keyboard navigation for suggestions
searchInput.addEventListener('keydown', function(e) {
    const suggestions = suggestionsContainer.querySelectorAll('.suggestion-item');
    const activeSuggestion = suggestionsContainer.querySelector('.suggestion-item.active');

    if (e.key === 'ArrowDown') {
        e.preventDefault();
        if (activeSuggestion) {
            activeSuggestion.classList.remove('active');
            const next = activeSuggestion.nextElementSibling;
            if (next) {
                next.classList.add('active');
            } else {
                suggestions[0]?.classList.add('active');
            }
        } else {
            suggestions[0]?.classList.add('active');
        }
    } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        if (activeSuggestion) {
            activeSuggestion.classList.remove('active');
            const prev = activeSuggestion.previousElementSibling;
            if (prev) {
                prev.classList.add('active');
            } else {
                suggestions[suggestions.length - 1]?.classList.add('active');
            }
        } else {
            suggestions[suggestions.length - 1]?.classList.add('active');
        }
    } else if (e.key === 'Enter') {
        if (activeSuggestion) {
            e.preventDefault();
            searchInput.value = activeSuggestion.dataset.value;
            hideSuggestions();
            this.closest('form').submit();
        }
    } else if (e.key === 'Escape') {
        hideSuggestions();
    }
});

// Pagination functionality
document.addEventListener('DOMContentLoaded', function() {
    // Per page selector
    const perPageSelect = document.getElementById('per_page');
    if (perPageSelect) {
        perPageSelect.addEventListener('change', function() {
            const currentUrl = new URL(window.location);
            currentUrl.searchParams.set('per_page', this.value);
            currentUrl.searchParams.delete('page'); // Reset to first page
            window.location.href = currentUrl.toString();
        });
    }

    // Quick jump functionality
    const jumpInput = document.getElementById('jump_to_page');
    const jumpBtn = document.getElementById('jump_btn');

    if (jumpInput && jumpBtn) {
        function jumpToPage() {
            const pageNumber = parseInt(jumpInput.value);
            const maxPage = parseInt(jumpInput.getAttribute('max'));

            if (pageNumber && pageNumber >= 1 && pageNumber <= maxPage) {
                const currentUrl = new URL(window.location);
                currentUrl.searchParams.set('page', pageNumber);
                window.location.href = currentUrl.toString();
            } else {
                jumpInput.classList.add('is-invalid');
                setTimeout(() => {
                    jumpInput.classList.remove('is-invalid');
                }, 2000);
            }
        }

        jumpBtn.addEventListener('click', jumpToPage);

        jumpInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                jumpToPage();
            }
        });

        jumpInput.addEventListener('input', function() {
            this.classList.remove('is-invalid');
        });
    }
});
</script>

<style>
.suggestion-item.active {
    background-color: #e9ecef !important;
}
.hover-bg-light:hover {
    background-color: #f8f9fa;
}

/* Enhanced Pagination Styles */
.pagination-lg .page-link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    margin: 0 0.125rem;
    transition: all 0.2s ease-in-out;
}

.pagination-lg .page-item.active .page-link {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
    transform: translateY(-1px);
}

.pagination-lg .page-link:hover:not(.disabled) {
    background-color: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination-lg .page-item.disabled .page-link {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

.pagination-info {
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.pagination {
    margin-bottom: 0;
}

/* Quick Jump Styling */
#jump_to_page.is-invalid {
    border-color: #dc3545;
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Responsive pagination */
@media (max-width: 768px) {
    .pagination-lg .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        margin: 0 0.05rem;
    }

    .pagination-info {
        text-align: center;
        margin-bottom: 1rem;
    }

    /* Hide some pagination elements on mobile */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }
}

@media (max-width: 576px) {
    .pagination-lg {
        justify-content: center;
    }

    .pagination-lg .page-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}
</style>
@endpush