@extends('layouts.front.app')

@section('title', 'Research Articles - JotiJournal')
@section('meta_description', 'Access high-quality legal research articles, scholarly journals, and expert commentaries on Indian law. Stay informed with our curated legal publications.')
@section('meta_keywords', 'legal articles, law research, legal journals, Indian law commentary, scholarly legal papers, JotiJournal articles')

@section('content')
   <section class="breadcrumb-section">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a class="text-muted text-decoration-none" href="{{ route('welcome') }}">Home</a></li>
                    <li aria-current="page" class="breadcrumb-item active text-dark">Research Articles</li>
                </ol>
            </nav>
        </div>
    </section>
    <!-- Main Content -->
    <main class="container py-5">
        <div class="row g-5">
            <!-- Main Column -->
            <div class="col-lg-12">
                <!-- Modernized Search Section -->
                <div class="premium-search-container animate-up">
                    <form id="researchArticleSearchForm">
                        <div class="mb-2">
                            <label class="form-label mb-2 fw-bold small text-uppercase opacity-75"
                                for="keywordSearch">Search Research Articles</label>
                            <div class="search-integrated-wrapper">
                                <i class="fa-solid fa-magnifying-glass inner-icon"></i>
                                <input class="form-control" id="keywordSearch"
                                    placeholder="Quick find by keywords..." type="text" />
                                <div class="integrated-controls">
                                    <button class="btn-integrated" id="resetFilters" title="Reset Filters" type="button">
                                        <i class="fa-solid fa-rotate-right"></i>
                                    </button>
                                    <button aria-expanded="false" class="btn-integrated"
                                        data-bs-target="#advancedSearchFields" data-bs-toggle="collapse"
                                        title="Advanced Search" type="button">
                                        <i class="fa-solid fa-sliders"></i>
                                    </button>
                                    <button class="btn-search-integrated" id="startSearch" title="Execute Search" type="button">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="collapse" id="advancedSearchFields">
                            <div class="pt-3">
                                <div class="p-4 bg-light rounded-3 border border-dashed">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="titleInput">Article Title</label>
                                                <input class="form-control" id="titleInput" placeholder="e.g. Constitutional Law..." type="text" />
                                            </div>
                                        </div>
                                          <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="contentInput">Article Content</label>
                                                <input class="form-control" id="contentInput" placeholder="Search in content..." type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="authorInput">Author Name</label>
                                                <input class="form-control" id="authorInput" placeholder="Enter author name..." type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="dateFromInput">From Date</label>
                                                <input class="form-control js-datepicker" id="dateFromInput" type="text" placeholder="dd-mm-yyyy" autocomplete="off" data-alt-format="d-m-Y" />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="dateToInput">To Date</label>
                                                <input class="form-control js-datepicker" id="dateToInput" type="text" placeholder="dd-mm-yyyy" autocomplete="off" data-link-min="#dateFromInput" data-alt-format="d-m-Y" />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="dateFlexInput">Publish Date</label>
                                                <input class="form-control" id="dateFlexInput" type="text" placeholder="e.g. 05-2024, 2024, or 05" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="results-metadata" id="results-count">Showing <span class="text-highlight">...</span> of <span class="text-highlight">...</span> entries</div>
                
                <div id="application-list-container">
                    <!-- Articles will be loaded here via AJAX -->
                    <div class="loader-premium">
                        <div class="spinner-premium"></div>
                        <div class="placeholder-text">Searching repository...</div>
                    </div>
                </div>

                <!-- Premium Pagination -->
                <nav aria-label="Page navigation" class="mt-5 pagination-nav">
                    <!-- Pagination will be loaded here via AJAX -->
                </nav>


            </div>
        </div>
    </main>
@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function() {

        // Initial fetch — applyHistoryParams takes over if URL has rerun params
        var __ranFromHistory = window.applyHistoryParams && window.applyHistoryParams({
            'search':      '#keywordSearch',
            'title':       '#titleInput',
            'content':     '#contentInput',
            'author':      '#authorInput',
            'date_from':   '#dateFromInput',
            'date_to':     '#dateToInput',
            'date_flex':   '#dateFlexInput',
        }, function(p) { fetchArticles(p); });
        if (!__ranFromHistory) fetchArticles(1);

        function fetchArticles(page) {
            let perPage = 10;
            let search = $('#keywordSearch').val();
            let title = $('#titleInput').val();
            let author = $('#authorInput').val();
            let dateFrom = $('#dateFromInput').val();
            let dateTo = $('#dateToInput').val();
            let dateFlex = $('#dateFlexInput').val();
            let contentSearch = $('#contentInput').val();

            $('#application-list-container').html('<div class="loader-premium"><div class="spinner-premium"></div><div class="placeholder-text">Searching research articles...</div></div>');
            
            $.ajax({
                url: "{{ route('user.research.articles.list') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    page: page,
                    max: perPage,
                    search: search,
                    title: title,
                    author: author,
                    date_from: dateFrom,
                    date_to: dateTo,
                    date_flex: dateFlex,
                    content: contentSearch,
                },
                success: function(response) {
                    $('#application-list-container').html(response.content);
                    $('.pagination-nav').html(response.navigation);

                    if (response.meta) {
                        $('#results-count').html(`Showing <span class="text-highlight">${response.meta.from || 0}</span> to <span class="text-highlight">${response.meta.to || 0}</span> of <span class="text-highlight">${response.meta.total}</span> entries`);
                    }

                    // Highlight keywords
                    const activeTerms = [
                        $('#keywordSearch').val(),
                        $('#titleInput').val(),
                        $('#authorInput').val(),
                        $('#contentInput').val()
                    ];
                    highlightSearchTerms(activeTerms);
                },
                error: function(xhr) {
                    $('#application-list-container').html('<div class="alert alert-danger w-100">Error loading research articles.</div>');
                }
            });
        }

        // Event Listeners
        $('#startSearch, #mainSearchBtn').on('click', function() {
            fetchArticles(1);
        });

        $('#keywordSearch, #titleInput, #authorInput, #contentInput, #dateFlexInput').on('keyup', function(e) {
            if (e.which === 13) fetchArticles(1);
        });

        // Pagination Click
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            let url = $(this).attr('href');
            if (url) {
                let page = url.split('page=')[1];
                fetchArticles(page);
            }
        });

        // Reset Filters
        $('#resetFilters').on('click', function() {
            $('#keywordSearch').val('');
            $('#titleInput').val('');
            $('#authorInput').val('');
            ['#dateFromInput', '#dateToInput'].forEach(function (sel) {
                var el = document.querySelector(sel);
                if (el && el._flatpickr) el._flatpickr.clear();
                else $(sel).val('');
            });
            $('#dateFlexInput').val('');
            $('#contentInput').val('');
            fetchArticles(1);
        });

        function highlightSearchTerms(termsArray) {
            let terms = [];

            termsArray.forEach(t => {
                if (!t) return;
                let str = t.toString().trim();
                if (str.length <= 1) return;

                if (/\s+(AND|OR|NOT|NEAR\/\d+)\s+/i.test(str) || str.indexOf('"') !== -1) {
                    const quotedMatches = [...str.matchAll(/"([^"]+)"/g)];
                    quotedMatches.forEach(m => {
                        terms.push(m[1]);
                        str = str.replace(m[0], ' ');
                    });
                    let cleanStr = str.replace(/\s+(AND|OR|NOT|NEAR\/\d+)\s+/gi, ' ');
                    const words = cleanStr.split(/\s+/).filter(w => w.length > 2);
                    terms = terms.concat(words);
                } else {
                    terms.push(str);
                }
            });

            const finalTerms = [...new Set(terms)].filter(t => t.length > 1);
            if (finalTerms.length === 0) return;

            finalTerms.sort((a, b) => b.length - a.length);

            const $container = $('#application-list-container');
            const selectors = '.article-content';

            $container.find(selectors).each(function() {
                const element = this;
                finalTerms.forEach(term => {
                    const escaped = term.toString().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
                    const regex = new RegExp(`(${escaped})`, 'gi');
                    highlightNode(element, regex);
                });
            });
        }

        function highlightNode(node, regex) {
            if (node.nodeType === 3) {
                const data = node.data;
                if (!regex.test(data)) return;
                regex.lastIndex = 0;
                const parts = data.split(regex);
                if (parts.length === 1) return;
                const frag = document.createDocumentFragment();
                parts.forEach((part, i) => {
                    if (part === '') return;
                    if (i % 2 === 1) { 
                        const span = document.createElement('span');
                        span.className = 'search-highlight';
                        span.textContent = part;
                        frag.appendChild(span);
                    } else {
                        frag.appendChild(document.createTextNode(part));
                    }
                });
                node.parentNode.insertBefore(frag, node);
                node.parentNode.removeChild(node);
            } else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName) && node.className !== 'search-highlight') {
                const children = Array.from(node.childNodes);
                for (let i = 0; i < children.length; i++) {
                    highlightNode(children[i], regex);
                }
            }
        }
    });
</script>
@endpush