@extends('layouts.front.app')

@section('title', 'Judgments Archive - JotiJournal')
@section('meta_description', 'Explore our comprehensive archive of legal judgements. Search by citation, party name, act, or key legal sections with our advanced research tools.')
@section('meta_keywords', 'legal judgements, case search, citation index, law archive, SCC judgements, Indian case law')

@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 class="breadcrumb-item"><a class="text-muted text-decoration-none" href="{{ route('user.judgements') }}">Judgment Search</a></li>
                    <li aria-current="page" class="breadcrumb-item active text-dark">Proximity Search</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="proximitySearchForm">
                        <div class="">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-7">
                                    <div class="search-field-group">
                                        <label class="form-label mb-2 fw-bold small text-uppercase text-secondary" for="keywords">Keywords</label>
                                        <div class="input-group-premium">
                                            <input class="form-control premium-input" id="keywords" placeholder="e.g. murder rape court  (separate by spaces)" type="text" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="search-field-group">
                                        <label class="form-label mb-2 fw-bold small text-uppercase text-secondary" for="distance">Within (Words)</label>
                                        <div class="input-group-premium">
                                            <input class="form-control premium-input text-center" id="distance" placeholder="10" type="number" min="1" value="10" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-legal-primary flex-grow-1" type="submit">
                                            <i class="fa-solid fa-magnifying-glass me-2"></i>SEARCH
                                        </button>
                                        <button class="btn btn-outline-secondary flex-grow-1" title="Reset Search" type="reset">
                                            <i class="fa-solid fa-rotate-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <small class="text-muted d-block mt-2">
                                Type two or more keywords; results contain all of them within the chosen number of words.
                                Example: <code>murder rape court</code> within <code>10</code>.
                            </small>
                        </div>
                    </form>
                </div>
                <div class="results-metadata mb-4" id="results-count" style="display: none;"></div>
                
                <div id="application-list-container">
                    <div class="text-center py-5 border rounded-3 bg-white shadow-sm">
                        <i class="fa-solid fa-microscope fa-3x text-light mb-3"></i>
                        <h5 class="text-muted">Proximity Search: Find related terms</h5>
                        <p class="text-secondary small">Enter keywords and distance to find judgements where specific terms appear near each other.</p>
                    </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() {
        console.log("Proximity Search UI Initialized");
        
        function fetchJudgements(page) {
            let keywords = $('#keywords').val().trim();
            let distance = parseInt($('#distance').val(), 10);
            let perPage = 10;

            if (!keywords) {
                showToast('warning', 'Please enter at least one keyword.');
                return;
            }
            if (!distance || distance < 1) {
                showToast('warning', 'Please enter a valid distance (1 or greater).');
                return;
            }

            $('#results-count').hide();
            $('#application-list-container').html('<div class="loader-premium"><div class="spinner-premium"></div><div class="placeholder-text">Searching proximity archive...</div></div>');

            $.ajax({
                url: "{{ route('user.judgements.proximity.list') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    page: page,
                    max: perPage,
                    keywords: keywords,
                    distance: distance
                },
                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`).show();
                    }

                    if (response.meta && response.meta.keywords) {
                        highlightSearchTerms(response.meta.keywords);
                    }
                },
                error: function(xhr) {
                    let msg = 'Error loading data.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    $('#application-list-container').html('<div class="alert alert-danger w-100">' + msg + '</div>');
                }
            });
        }

        // Event Listeners
        $('#proximitySearchForm').on('submit', function(e) {
            e.preventDefault();
            fetchJudgements(1);
        });

        // Auto-run when redirected from /user/search-history with query params
        window.applyHistoryParams && window.applyHistoryParams({
            'keywords': '#keywords',
            'distance': '#distance',
        }, function(p) { fetchJudgements(p); });

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

        // Reset Filters
        $('button[type="reset"]').click(function(e) {
            e.preventDefault();
            console.log("Proximity Search Reset");
            $('#keywords').val('');
            $('#distance').val('10');
            $('#results-count').hide();
            $('.pagination-nav').empty();
            $('#application-list-container').html(`
                <div class="text-center py-5 border rounded-3 bg-white shadow-sm">
                    <i class="fa-solid fa-microscope fa-3x text-light mb-3"></i>
                    <h5 class="text-muted">Proximity Search: Find related terms</h5>
                    <p class="text-secondary small">Enter keywords and distance to find judgements where specific terms appear near each other.</p>
                </div>
            `);
        });

        function highlightSearchTerms(keywords) {
            const terms = (keywords || []).filter(t => t && t.trim().length > 1);
            if (terms.length === 0) return;

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

        function highlightNode(node, regex) {
            if (node.nodeType === 3) { // Text node
                const matches = node.data.match(regex);
                if (matches) {
                    const highlight = document.createElement('span');
                    highlight.innerHTML = node.data.replace(regex, '<span class="search-highlight">$1</span>');
                    
                    while (highlight.firstChild) {
                        node.parentNode.insertBefore(highlight.firstChild, node);
                    }
                    node.parentNode.removeChild(node);
                }
            } else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName) && node.className !== 'search-highlight') {
                for (let i = 0; i < node.childNodes.length; i++) {
                    highlightNode(node.childNodes[i], regex);
                }
            }
        }
    });

</script>
@endpush