@extends('layouts.front.app')

@section('title', 'Judgments Archive - JotiJournal')
@section('meta_description', 'Explore our comprehensive archive of legal judgments. Search by citation, party name, act, or key legal sections with our advanced research tools.')
@section('meta_keywords', 'legal judgments, case search, citation index, law archive, SCC judgments, 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 aria-current="page" class="breadcrumb-item active text-dark">Judgment Search</li>
                </ol>
            </nav>
        </div>
    </section>
    <!-- Main Content -->
    <main class="container py-5">
        <div class="row g-5">
            <!-- Main Column -->
            <div class="col-lg-8">
                <!-- Modernized Search Section -->
                <div class="premium-search-container animate-up">
                    <form>
                        <div class="mb-2">
                            <label class="form-label mb-2 fw-bold small text-uppercase opacity-75"
                                for="heroSearch">Search Legal Archive</label>
                            <div class="search-integrated-wrapper">
                                <i class="fa-solid fa-magnifying-glass inner-icon"></i>
                                <input class="form-control" id="heroSearch"
                                    placeholder="Case title, keywords, or citation..." type="text" />
                                <div class="integrated-controls">
                                    <button class="btn-integrated" title="Reset Search" type="reset">
                                        <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" title="Start Search" type="submit">
                                        <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-12">
                                            <div class="mb-3">
                                                <label class="form-label d-flex align-items-center" for="booleanInput">
                                                    Boolean Search
                                                    <span class=" ms-2 cursor-pointer transition-all hover-scale"
                                                          data-bs-toggle="popover"
                                                          data-bs-html="true"
                                                          data-bs-trigger="hover focus"
                                                          data-bs-content='
<div class="popover-premium-content">
    <h6 class="fw-bold mb-2  border-bottom pb-1">Search Examples</h6>
    <ul class="list-unstyled small mb-3">
        <li class="mb-1"><code>privacy AND constitution</code> &rarr; Both words match</li>
        <li class="mb-1"><code>privacy NOT aadhaar</code> &rarr; Exclude matches</li>
        <li class="mb-1"><code>"right to privacy"</code> &rarr; Exact phrase match</li>
        <li class="mb-1"><code>privacy NEAR/5 right</code> &rarr; Within 5 words proximity</li>
    </ul>
    <h6 class="fw-bold mb-1 text-secondary small text-uppercase opacity-75">Quick Help</h6>
    <div class="small opacity-75">Combine keywords for more precise legal research results.</div>
</div>
'>
                                                        <i class="fa-solid fa-circle-question fs-6"></i>
                                                    </span>
                                                </label>
                                                <input class="form-control" id="booleanInput"
                                                    placeholder='e.g., privacy AND constitution, privacy NOT aadhaar, privacy NEAR/5 right' type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="citationInput">Citation</label>
                                                <input class="form-control" id="citationInput"
                                                    placeholder="e.g. 2024 SCC 123" type="text" />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="noteNoInput">Note Number</label>
                                                <input class="form-control" id="noteNoInput"
                                                    placeholder="e.g. 12" type="text" />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="heldInput">Held</label>
                                                <input class="form-control" id="heldInput"
                                                    placeholder="Search keywords in Held" type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="actSelect">Act</label>
                                                <select class="form-select" id="actSelect">
                                                    <option selected disabled value="">--Select Act--</option>
                                                    @foreach($acts as $actId => $actName)
                                                        <option value="{{ $actId }}">{{ $actName }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">Sections</label>
                                                <div class="custom-section-container">
                                                    <div class="section-selector-trigger" id="sectionTrigger">
                                                        <span class="text-muted small" id="triggerPlaceholder">Select Sections...</span>
                                                        <div id="selectedTagsContainer" class="d-flex flex-wrap gap-2"></div>
                                                    </div>
                                                    <div class="custom-options-panel" id="sectionOptionsPanel">
                                                        <div class="custom-search-wrapper">
                                                            <i class="fa-solid fa-magnifying-glass custom-search-icon"></i>
                                                            <input type="text" class="custom-search-input" id="customSectionSearch" placeholder="Search sections...">
                                                        </div>
                                                        <div class="custom-checkbox-list" id="customSectionList">
                                                            <div class="text-muted small p-2">Select an Act first...</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="partyInput">Party Name</label>
                                                <select class="form-control" id="partyInput">
                                                    <option value="">Search by petitioner or respondent</option>
                                                </select>
                                            </div>
                                        </div>
                                       
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="headnoteInput">Headnote</label>
                                                <input class="form-control" id="headnoteInput"
                                                    placeholder="Search keywords in Headnote" type="text" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="yearInput" value="">
                    </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">
                    <!-- Judgements 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>
            <!-- Sidebar Column -->
            <aside class="col-lg-4">
                <div class="sticky-top" style="top: 150px;">
                    <!-- Archive -->
                    <div class="sidebar-card animate-up" style="animation-delay: 0.2s;">
                        <h3 class="sidebar-title font-serif">Legal Archives</h3>
                        <div class="archive-scroll-container thin-scrollbar" style="max-height: 400px; overflow-y: auto; overflow-x: hidden; padding-right: 5px;">
                            <ul class="archive-list list-unstyled mb-0">
                                @foreach($years as $yearObj)
                                    <li class="mb-1 d-flex justify-content-between align-items-center">
                                        <span><span class="archive-dot"></span> <a
                                                class="text-dark text-decoration-none fw-bold" 
                                                href="{{ route('user.judgements.search.year', $yearObj->publication_year) }}">
                                                {{ $yearObj->publication_year }} Edition
                                            </a></span>
                                        <span class="badge bg-light text-dark border">{{ $yearObj->total }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                
                </div>
            </aside>
        </div>
    </main>
@endsection

@push('scripts')
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize Select2
        $('#actSelect').select2({
            placeholder: "--Select Act--",
            allowClear: true,
            width: '100%'
        });

        // Initialize Popovers (boolean-search help)
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl);
        });

        // Initialize Party Autocomplete with Select2 (AJAX-driven typeahead)
        $('#partyInput').select2({
            placeholder: "Search by petitioner or respondent",
            allowClear: true,
            width: '100%',
            ajax: {
                url: "{{ route('user.party.autocomplete') }}",
                dataType: 'json',
                type: 'GET',
                delay: 250,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    return { results: data.results };
                },
                cache: true
            },
            minimumInputLength: 3
        });

        // Custom Section Selector Logic
        const $trigger = $('#sectionTrigger');
        const $panel = $('#sectionOptionsPanel');
        const $container = $('.custom-section-container');
        const $list = $('#customSectionList');
        const $search = $('#customSectionSearch');
        const $placeholder = $('#triggerPlaceholder');
        const $tagsContainer = $('#selectedTagsContainer');

        $trigger.on('click', function(e) {
            e.stopPropagation();
            $trigger.toggleClass('active');
            $panel.fadeToggle(150);
            if ($trigger.hasClass('active')) $search.focus();
        });

        $(document).on('click', function(e) {
            if (!$container.is(e.target) && $container.has(e.target).length === 0) {
                $trigger.removeClass('active');
                $panel.fadeOut(150);
            }
        });

        // Dependent Dropdown for Sections (Custom Implementation)
        $('#actSelect').on('change', function() {
            let actId = $(this).val();
            $list.html('<div class="text-muted small p-2">Loading...</div>');
            $tagsContainer.empty();
            $placeholder.show();
            
            // Removed automatic fetchJudgements here to allow manual search only
            
            if (actId) {
                $.ajax({
                    url: "{{ route('user.get.sections.by.act') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        act_id: actId
                    },
                    success: function(response) {
                        $list.empty();
                        if (Object.keys(response).length > 0) {
                            let idx = 0;
                            $.each(response, function(id, name) {
                                let safeId = `c_sec_${idx++}`;
                                $list.append(`
                                    <div class="custom-check-item">
                                        <input type="checkbox" id="${safeId}" value="${name}" class="section-check">
                                        <label for="${safeId}">${name}</label>
                                    </div>
                                `);
                            });
                        } else {
                            $list.html('<div class="text-muted small p-2">No sections found.</div>');
                        }
                    }
                });
            } else {
                $list.html('<div class="text-muted small p-2">Select an Act first...</div>');
            }
        });

        // Search Filter
        $search.on('input', function() {
            let term = $(this).val().toLowerCase();
            $('.custom-check-item').each(function() {
                let text = $(this).find('label').text().toLowerCase();
                $(this).toggle(text.indexOf(term) > -1);
            });
        });

        // Handle Selection and Tags
        $(document).on('change', '.section-check', function() {
            updateTags();
            // Removed automatic fetchJudgements here for manual search
        });

        function updateTags() {
            $tagsContainer.empty();
            let $checked = $('.section-check:checked');
            
            if ($checked.length > 0) {
                $placeholder.hide();
                $checked.each(function() {
                    let val = $(this).val();
                    let id = $(this).attr('id');
                    $tagsContainer.append(`
                        <div class="selected-tag" data-for="${id}">
                            ${val}
                            <i class="fa-solid fa-xmark remove-tag"></i>
                        </div>
                    `);
                });
            } else {
                $placeholder.show();
            }
        }

        // Specific event listener for remove buttons to prevent bubbling to trigger
        $tagsContainer.on('click', '.remove-tag', function(e) {
            e.stopPropagation(); // Stop from reaching #sectionTrigger
            e.preventDefault();
            
            let targetId = $(this).closest('.selected-tag').data('for');
            let checkbox = document.getElementById(targetId);
            
            if (checkbox) {
                checkbox.checked = false;
                // Manual search only
                updateTags();
            }
        });

        // Initial fetch — but if URL has history params, applyHistoryParams below will fire fetchJudgements instead
        var __ranFromHistory = window.applyHistoryParams && window.applyHistoryParams({
            'search':         '#heroSearch',
            'boolean_search': '#booleanInput',
            'citation':       '#citationInput',
            'note_no':        '#noteNoInput',
            'held':           '#heldInput',
            'act':            '#actSelect',
            'party':          '#partyInput',
            'headnote':       '#headnoteInput',
            'year':           '#yearInput',
        }, function(p) { fetchJudgements(p); });
        if (!__ranFromHistory) fetchJudgements(1);

        function fetchJudgements(page) {
            let perPage = 10;
            let search = $('#heroSearch').val();
            let booleanSearch = $('#booleanInput').val();
            let citation = $('#citationInput').val();
            let noteNo = $('#noteNoInput').val();
            let year = $('#yearInput').val();
            let held = $('#heldInput').val();
            let act = $('#actSelect').val();
            
            let sections = [];
            $('.section-check:checked').each(function() {
                sections.push($(this).val());
            });

            let party = $('#partyInput').val();
            let headnote = $('#headnoteInput').val();

            let sort = $('#appSortBy').val() || 'id-DESC';
            let th_name = sort.split('-')[0];
            let th_sort = sort.split('-')[1];

            $('#application-list-container').html('<div class="loader-premium"><div class="spinner-premium"></div><div class="placeholder-text">Searching repository...</div></div>');
            $.ajax({
                url: "{{ route('user.judgements.list') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    page: page,
                    max: perPage,
                    search: search,
                    boolean_search: booleanSearch,
                    citation: citation,
                    note_no: noteNo,
                    year: year,
                    held: held,
                    act: act,
                    section: sections,
                    party: party,
                    headnote: headnote,
                    th_name: th_name,
                    th_sort: th_sort
                },
                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 matched terms inside the rendered results
                    const activeTerms = [
                        $('#heroSearch').val(),
                        $('#booleanInput').val(),
                        $('#citationInput').val(),
                        $('#heldInput').val(),
                        $('#partyInput').val(),
                        $('#headnoteInput').val()
                    ];
                    highlightSearchTerms(activeTerms);
                },
                error: function(xhr) {
                    $('#application-list-container').html('<div class="alert alert-danger w-100">Error loading data.</div>');
                }
            });
        }

        /* 
        // Real-time refresh for other filters with debouncing - Disabled for Manual Search
        let filterTimer;
        $('#citationInput, #heldInput, #partyInput, #headnoteInput').on('keyup input', function() {
            clearTimeout(filterTimer);
            filterTimer = setTimeout(() => {
                fetchJudgements(1);
            }, 500);
        });
        */

        // Event Listeners
        $('.btn-search-integrated').click(function(e) {
            e.preventDefault();
            fetchJudgements(1);
        });

        $('#heroSearch').keyup(function(e) {
            if (e.which === 13) fetchJudgements(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];
                fetchJudgements(page);
            }
        });

        // Reset Filters
        $('button[type="reset"]').click(function() {
            $('#heroSearch').val('');
            $('#booleanInput').val('');
            $('#citationInput').val('');
            $('#heldInput').val('');
            $('#actSelect').val(null).trigger('change');
            $('#customSectionList').html('<div class="text-muted small p-2">Select an Act first...</div>');
            $tagsContainer.empty();
            $placeholder.show();
            $search.val('');
            $('#partyInput').val(null).trigger('change.select2');
            $('#noteNoInput').val('');
            $('#yearInput').val('');
            $('#headnoteInput').val('');
            $('.archive-year-link').removeClass('text-primary').addClass('text-dark');
            fetchJudgements(1);
        });

        // Archive Year Click Handler
        $(document).on('click', '.archive-year-link', function(e) {
            e.preventDefault();
            let year = $(this).data('year');
            
            // Toggle selection
            if ($(this).hasClass('text-primary')) {
                $('#yearInput').val('');
                $(this).removeClass('text-primary').addClass('text-dark');
            } else {
                $('.archive-year-link').removeClass('text-primary').addClass('text-dark');
                $(this).removeClass('text-dark').addClass('text-primary');
                $('#yearInput').val(year);
            }
            
            fetchJudgements(1);
        });

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

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

                // Extract individual keywords if boolean operators or quotes are present
                if (/\s+(AND|OR|NOT|NEAR\/\d+)\s+/i.test(str) || str.indexOf('"') !== -1) {
                    // 1. Extract phrases in quotes (replace with space, collect captured phrase)
                    str = str.replace(/"([^"]+)"/g, function (_, phrase) {
                        terms.push(phrase);
                        return ' ';
                    });

                    // 2. Clear out boolean/proximity keywords
                    let cleanStr = str.replace(/\s+(AND|OR|NOT|NEAR\/\d+)\s+/gi, ' ');

                    // 3. Split by space and add remaining words
                    const words = cleanStr.split(/\s+/).filter(w => w.length > 2);
                    terms = terms.concat(words);
                } else {
                    terms.push(str);
                }
            });

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

            // Sort by length descending so longer phrases win over substrings
            finalTerms.sort((a, b) => b.length - a.length);

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

            $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);
                });
            });
        }

        // XSS-safe highlighter: splits text nodes and inserts span elements via DOM APIs
        // (no innerHTML), so user-supplied search terms can never become HTML.
        function highlightNode(node, regex) {
            if (node.nodeType === 3) { // Text node
                const text = node.data;
                const matches = Array.from(text.matchAll(regex));
                if (matches.length === 0) return;

                const fragment = document.createDocumentFragment();
                let lastIndex = 0;
                matches.forEach(m => {
                    if (m.index > lastIndex) {
                        fragment.appendChild(document.createTextNode(text.slice(lastIndex, m.index)));
                    }
                    const span = document.createElement('span');
                    span.className = 'search-highlight';
                    span.textContent = m[0];
                    fragment.appendChild(span);
                    lastIndex = m.index + m[0].length;
                });
                if (lastIndex < text.length) {
                    fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
                }
                node.parentNode.replaceChild(fragment, node);
            } else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName) && node.className !== 'search-highlight') {
                // Snapshot child list since we may replace children during iteration
                const children = Array.from(node.childNodes);
                for (let i = 0; i < children.length; i++) {
                    highlightNode(children[i], regex);
                }
            }
        }
    });

    function printJudgement(id) {
        // Logic to print only the specific article
        // For simplicity, we trigger browser print with CSS hiding everything else
        // We ensure the specific article is visible if it was collapsed
        $(`#heldSection${id}`).addClass('show');
        window.print();
    }
</script>
@endpush