@extends('layouts.master')

@section('styles')

<style>
.publication-title {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}
.publication-title .ellipsis-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: pointer;
}
.publication-title:hover {
    overflow: visible;
    white-space: normal;
    z-index: 10;
}
.publication-title:hover .ellipsis-text {
    display: block;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 300px;
    max-width: 600px;
    white-space: normal;
    word-break: break-word;
}
.publication-link-btn, .publication-link-nolink {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.country-list {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}
.country-list .ellipsis-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: pointer;
}
.country-list:hover {
    overflow: visible;
    white-space: normal;
    z-index: 10;
}
.country-list:hover .ellipsis-text {
    display: block;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 8px 12px;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    max-width: 400px;
    white-space: normal;
    word-break: break-word;
}

#publications-table tbody tr:hover {
    background-color: #f5f5f5 !important;
}

</style>

@endsection

@section('content')
    <div id="chart_div"></div>

    <div class="page-header">
        <h1 class="page-title">{{ __('menu.publications.title') }}</h1>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <!-- Search and Controls -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="form-group">
                                <input type="text" id="search-input" class="form-control" placeholder="Search publications...">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <input type="number" id="start-year-input" class="form-control" placeholder="Start Year" min="1900" max="2100">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <input type="number" id="end-year-input" class="form-control" placeholder="End Year" min="1900" max="2100">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <select id="order-by" class="form-control">
                                    <option value="id" selected>Order by ID</option>
                                    <option value="date">Order by Date</option>
                                    <option value="article_title">Order by Title</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-1">
                            <div class="form-group">
                                <select id="order-direction" class="form-control">
                                    <option value="desc" selected>DESC</option>
                                    <option value="asc">ASC</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="button" id="apply-filters" class="btn btn-primary me-2">Apply</button>
                            <button type="button" id="clear-filters" class="btn btn-secondary">Clear</button>
                        </div>
                    </div>

                    <!-- Page Navigation Row -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-text">Page</span>
                                    <input type="number" id="page-input" class="form-control" min="1" placeholder="1">
                                    <button class="btn btn-outline-secondary" type="button" id="go-to-page">Go</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div id="page-info" class="form-text mt-2">
                                of <span id="total-pages">0</span> pages
                            </div>
                        </div>
                        <div class="col-md-7 text-end">
                            <div id="loading-indicator" class="d-none">
                                <span class="spinner-border spinner-border-sm me-2"></span>
                                Loading...
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered text-nowrap border-bottom" id="publications-table">
                            <thead>
                            <tr>
                                <th class="wd-5p border-bottom-0">ID</th>
                                <th class="wd-15p border-bottom-0">Publication Date</th>
                                <th class="wd-30p border-bottom-0">Title</th>
                                <th class="wd-20p border-bottom-0">Countries</th>
                                <th class="wd-30p border-bottom-0">Link</th>
                            </tr>
                            </thead>
                            <tbody id="publications-tbody">
                            <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div id="table-info" class="dataTables_info">
                                Showing 0 to 0 of 0 publications
                            </div>
                        </div>
                        <div class="col-md-6">
                            <nav>
                                <ul class="pagination justify-content-end" id="pagination-controls">
                                    <li class="page-item" id="prev-page">
                                        <a class="page-link" href="#" data-page="prev">Previous</a>
                                    </li>
                                    <li class="page-item" id="next-page">
                                        <a class="page-link" href="#" data-page="next">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Row -->

@endsection

@section('scripts')
<script>
$(document).ready(function() {
    let currentPage = 1;
    let totalPages = 1;
    let allPublications = [];
    let filteredPublications = [];
    let searchTerm = '';
    let startYear = '';
    let endYear = '';
    let orderBy = 'id';
    let orderDirection = 'desc';

    // Load publications data
    function loadPublications(page = 1) {
        $.ajax({
            url: '/api/publications',
            method: 'GET',
            data: {
                page: page,
                search: searchTerm,
                start_year: startYear,
                end_year: endYear,
                order_by: orderBy,
                order_direction: orderDirection
            },
            beforeSend: function() {
                showLoading(true);
            },
            success: function(response) {
                if (response.success) {
                    allPublications = response.data.publications;
                    filteredPublications = allPublications;
                    currentPage = response.data.pagination.current_page;
                    totalPages = response.data.pagination.last_page;

                    // Apply current search if any
                    if (searchTerm) {
                        filterPublications(searchTerm);
                    } else {
                        renderTable(filteredPublications);
                    }

                    updatePagination(response.data.pagination);
                } else {
                    showError('Failed to load publications: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                showError('Error loading publications. Please try again.');
                console.error('AJAX Error:', error);
            },
            complete: function() {
                showLoading(false);
            }
        });
    }

    // Render table with publications data
    function renderTable(publications) {
        const tbody = $('#publications-tbody');
        tbody.empty();

        if (publications.length === 0) {
            tbody.html(`
                <tr>
                    <td colspan="5" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fe fe-inbox fs-3 mb-2 d-block"></i>
                            No publications found
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        // Function to safely extract countries
        function getCountriesText(countries) {
            if (!countries) return 'N/A';
            let countryArr = [];
            if (Array.isArray(countries)) {
                countryArr = countries;
            } else if (typeof countries === 'object') {
                countryArr = Object.values(countries).filter(country => country && country.trim() !== '');
            } else if (typeof countries === 'string') {
                countryArr = countries.trim() ? [countries.trim()] : [];
            }
            if (countryArr.length === 0) return 'N/A';
            if (countryArr.length <= 3) {
                return `<div class='country-list'>
                            <span class='ellipsis-text'>${countryArr.join(', ')}</span>
                        </div>`;
            } else {
                return `<div class='country-list'>
                            <span class='ellipsis-text' title='${escapeHtml(countryArr.join(', '))}'>
                                ${escapeHtml(countryArr.join(', '))},
                            </span>
                        </div>`;
            }
        }

        publications.forEach(function(publication) {
            const linkColumn = publication.link ?
                `<a href="${publication.link}" target="_blank" class="btn btn-sm btn-primary publication-link-btn">
                    <i class="fe fe-external-link"></i> View
                </a>` :
                '<span class="text-muted publication-link-nolink">No link</span>';

            const actionsColumn = `
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-sm btn-info view-details" data-id="${publication.id}">
                        <i class="fe fe-eye"></i> Details
                    </button>
                    <button type="button" class="btn btn-sm btn-warning edit-publication" data-id="${publication.id}">
                        <i class="fe fe-edit"></i> Edit
                    </button>
                </div>
            `;

            const row = `
                <tr>
                    <td>${publication.id}</td>
                    <td>${publication.date || 'N/A'}</td>
                    <td>
                        <div class="publication-title" title="${escapeHtml(publication.title)}">
                            <span class="ellipsis-text">${escapeHtml(publication.title)}</span>
                        </div>
                    </td>
                    <td>${getCountriesText(publication.countries)}</td>
                    <td>${linkColumn}</td>
                </tr>
            `;

            tbody.append(row);
        });
    }

    // Filter publications based on search term
    function filterPublications(term) {
        if (!term) {
            filteredPublications = allPublications;
        } else {
            filteredPublications = allPublications.filter(function(publication) {
                return publication.title.toLowerCase().includes(term.toLowerCase()) ||
                       publication.id.toString().includes(term);
            });
        }

        renderTable(filteredPublications);
        updateTableInfo();
    }

    // Filter publications by year range
    function filterByYearRange(start, end) {
        filteredPublications = allPublications.filter(function(publication) {
            if (!publication.date) return false;
            const pubYear = new Date(publication.date).getFullYear();
            if (start && end) {
                return pubYear >= start && pubYear <= end;
            } else if (start) {
                return pubYear >= start;
            } else if (end) {
                return pubYear <= end;
            }
            return true;
        });
        renderTable(filteredPublications);
        updateTableInfo();
    }

    // Update pagination controls
    function updatePagination(pagination) {
        const prevBtn = $('#prev-page');
        const nextBtn = $('#next-page');

        // Update previous button
        if (pagination.prev_page_url) {
            prevBtn.removeClass('disabled');
        } else {
            prevBtn.addClass('disabled');
        }

        // Update next button
        if (pagination.next_page_url) {
            nextBtn.removeClass('disabled');
        } else {
            nextBtn.addClass('disabled');
        }

        updateTableInfo(pagination);
    }

    // Update table info
    function updateTableInfo(pagination = null) {
        let infoText;

        if (pagination) {
            infoText = `Showing ${pagination.from} to ${pagination.to} of ${pagination.total} publications`;
        } else if (filteredPublications.length > 0) {
            infoText = `Showing ${filteredPublications.length} of ${allPublications.length} publications (filtered)`;
        } else {
            infoText = 'Showing 0 to 0 of 0 publications';
        }

        $('#table-info').text(infoText);
        $('#total-pages').text(totalPages);
    }

    // Show/hide loading indicator
    function showLoading(show) {
        if (show) {
            $('#loading-indicator').removeClass('d-none');
        } else {
            $('#loading-indicator').addClass('d-none');
        }
    }

    // Error display function
    function showError(message) {
        const alertHtml = `
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        $('.card-body').prepend(alertHtml);

        // Auto dismiss after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut();
        }, 5000);
    }

    // Escape HTML to prevent XSS
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Initialize form values from DOM elements
    function initializeFormValues() {
        orderBy = $('#order-by').val() || 'id';
        orderDirection = $('#order-direction').val() || 'desc';
        searchTerm = $('#search-input').val().trim() || '';
        startYear = $('#start-year-input').val() || '';
        endYear = $('#end-year-input').val() || '';
    }

    // Handle pagination clicks
    $(document).on('click', '#pagination-controls .page-link', function(e) {
        e.preventDefault();
        const page = $(this).data('page');
        initializeFormValues();
        if (page === 'prev' && currentPage > 1 && !$(this).parent().hasClass('disabled')) {
            loadPublications(currentPage - 1);
        } else if (page === 'next' && currentPage < totalPages && !$(this).parent().hasClass('disabled')) {
            loadPublications(currentPage + 1);
        }
    });

    // Handle search input
    $('#search-input').on('input', function() {
        searchTerm = $(this).val().trim();
        filterPublications(searchTerm);
    });

    // Handle year range inputs
    $('#start-year-input, #end-year-input').on('input', function() {
        startYear = $('#start-year-input').val();
        endYear = $('#end-year-input').val();
    });

    // Handle order by and direction changes
    $('#order-by, #order-direction').on('change', function() {
        orderBy = $('#order-by').val();
        orderDirection = $('#order-direction').val();

        // Automatically apply filters when ordering changes
        loadPublications(1);
    });

    // Handle apply filters button click
    $('#apply-filters').on('click', function() {
        initializeFormValues();
        loadPublications(1);
    });

    // Handle clear filters button click
    $('#clear-filters').on('click', function() {
        $('#search-input').val('');
        $('#start-year-input').val('');
        $('#end-year-input').val('');
        $('#order-by').val('id');
        $('#order-direction').val('desc');

        searchTerm = '';
        startYear = '';
        endYear = '';
        orderBy = 'id';
        orderDirection = 'desc';

        loadPublications(1);
    });

    // Handle go to page button click
    $('#go-to-page').on('click', function() {
        const page = parseInt($('#page-input').val());

        if (page > 0 && page <= totalPages) {
            loadPublications(page);
        }
    });

    // Initial load
    loadPublications();
});
</script>
@endsection