@extends('layouts.front.app')

@section('title', "Judgments Archive ($year Edition) - JotiJournal")
@section('meta_description', "Explore our comprehensive archive of legal judgments from $year. Search by citation, party name, act, or key legal sections.")
@section('meta_keywords', "legal judgments $year, case search, citation index, law archive, SCC judgments, Indian case law")

@push('styles')
<style>
    .archive-scroll-container {
        overflow-x: hidden;
    }
    .archive-scroll-container::-webkit-scrollbar {
        width: 3px;
    }
    .archive-scroll-container::-webkit-scrollbar-track {
        background: transparent;
    }
    .archive-scroll-container::-webkit-scrollbar-thumb {
        background: #eee;
        border-radius: 10px;
    }
    .archive-scroll-container::-webkit-scrollbar-thumb:hover {
        background: #ddd;
    }
</style>
@endpush

@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">{{ $year }} Edition</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 id="yearSearchForm">
                        <div class="mb-2">
                            <label class="form-label mb-2 fw-bold small text-uppercase opacity-75"
                                for="heroSearch">Search {{ $year }} 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">
                                                    Binary 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="headnoteInput">Headnote</label>
                                                <input class="form-control" id="headnoteInput"
                                                    placeholder="Search keywords in Headnote" 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-4">
                                            <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-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="yearInput">Publication Year</label>
                                                <input type="text" class="form-control" id="yearInput" value="{{ $year }}" readonly>
                                            </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>
                                </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">
                    <!-- 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 @if($yearObj->publication_year == $year) text-primary @endif" 
                                                href="{{ route('user.judgements.search.year', $yearObj->publication_year) }}">
                                                {{ $yearObj->publication_year }} Edition
                                            </a></span>
                                        <span class="badge @if($yearObj->publication_year == $year) bg-primary @else bg-light text-dark @endif border">{{ $yearObj->total }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <!-- Consultation CTA -->
                    <!-- <div class="sidebar-card text-center animate-up"
                        style="background-color: var(--legal-blue); color: #fff; animation-delay: 0.3s; border: none;">
                        <div class="mb-4">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
                                style="width: 70px; height: 70px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);">
                                <i class="fa-solid fa-gavel h3 mb-0" style="color: var(--legal-gold);"></i>
                            </div>
                        </div>
                        <h3 class="font-serif h5 mb-3">Professional Advisory</h3>
                        <p class="small opacity-75 mb-4">Consult with our leading experts on complex corporate
                            governance and regulatory compliance.</p>
                        <a class="btn btn-gold w-100 py-3 shadow-lg" href="#">BOOK A CONSULTATION</a>
                    </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
        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
        $('#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
        $('#actSelect').on('change', function() {
            let actId = $(this).val();
            $list.html('<div class="text-muted small p-2">Loading...</div>');
            $tagsContainer.empty();
            $placeholder.show();
            
            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();
        });

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

        $tagsContainer.on('click', '.remove-tag', function(e) {
            e.stopPropagation();
            e.preventDefault();
            let targetId = $(this).closest('.selected-tag').data('for');
            let checkbox = document.getElementById(targetId);
            if (checkbox) {
                checkbox.checked = false;
                updateTags();
            }
        });

        // Initial fetch
        fetchJudgements(1);

        function fetchJudgements(page) {
            let perPage = 50;
            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.keyword.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 keywords
                    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>');
                }
            });
        }

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

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

        $('#heroSearch').keyup(function(e) {
            if (e.which === 13) {
                e.preventDefault();
                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(e) {
            e.preventDefault();
            $('#heroSearch').val('');
            $('#booleanInput').val('');
            $('#citationInput').val('');
            $('#heldInput').val('');
            $('#actSelect').val(null).trigger('change.select2');
            $('#customSectionList').html('<div class="text-muted small p-2">Select an Act first...</div>');
            $tagsContainer.empty();
            $placeholder.show();
            
            $('#partyInput').val(null).trigger('change.select2');
            $('#noteNoInput').val('');
            
            $('#headnoteInput').val('');
            $('#results-count').html('Showing <span class="text-highlight">...</span> of <span class="text-highlight">...</span> entries');
            fetchJudgements(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 quotedRegex = /"([^"]+)"/g;
                    let match;
                    while ((match = quotedRegex.exec(str)) !== null) {
                        terms.push(match[1]);
                        str = str.replace(match[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, .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);
                });
            });
        }

        function highlightNode(node, regex) {
            if (node.nodeType === 3) {
                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