@extends('layouts.front.app')

@section('title', 'Circulars & Notifications - JotiJournal')
@section('meta_description', 'Explore our comprehensive archive of legal circulars and notifications. Search by notification number, gazette, or subject with our advanced research tools.')
@section('meta_keywords', 'legal circulars, notifications, gazette search, law archive, Indian law circulars')

@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">Circulars</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="circularSearchForm">
                        <div class="mb-2">
                            <label class="form-label mb-2 fw-bold small text-uppercase opacity-75"
                                for="keywordSearch">Search Circulars & Notifications</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">Title</label>
                                                <input class="form-control" id="titleInput" placeholder="e.g. Leave Rules..." type="text" />
                                            </div>
                                        </div>
                                          <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="contentInput">Content</label>
                                                <input class="form-control" id="contentInput" placeholder="Search in details..." type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="notificationNoInput">Notification / Circular No</label>
                                                <input class="form-control" id="notificationNoInput" placeholder="e.g. 12/2024..." type="text" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="subjectSelect">Subject</label>
                                                <select class="form-select" id="subjectSelect">
                                                    <option value="">-- All Subjects --</option>
                                                    @foreach($subjects as $subject)
                                                        <option value="{{ $subject->id }}">{{ $subject->subject }}</option>
                                                    @endforeach
                                                </select>
                                            </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">
                    <!-- Circulars 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">Subjects</h3>
                      <ul class="archive-list list-unstyled mb-0">
                            @foreach($subjects as $subject)
                            <li class="mb-2 d-flex justify-content-between align-items-center">
                                <span>
                                    <span class="archive-dot"></span> 
                                    <a class="text-muted text-decoration-none subject-filter-link" 
                                       href="javascript:void(0)" 
                                       data-subject-id="{{ $subject->id }}">
                                        {{ $subject->subject }}
                                    </a>
                                </span>
                                <span class="text-muted small fw-bold">{{ str_pad($subject->circulars_count, 2, '0', STR_PAD_LEFT) }}</span>
                            </li>
                            @endforeach
                        </ul>
                    </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 for subjects
        $('#subjectSelect').select2({
            placeholder: "--Select Subject--",
            allowClear: true,
            width: '100%'
        });


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

        function fetchCirculars(page) {
            let perPage = 10;
            let search = $('#keywordSearch').val();
            let title = $('#titleInput').val();
            let content = $('#contentInput').val();
            let notificationNo = $('#notificationNoInput').val();
            let dateFrom = $('#dateFromInput').val();
            let dateTo = $('#dateToInput').val();
            let dateFlex = $('#dateFlexInput').val();
            let subjectId = $('#subjectSelect').val();

            $('#application-list-container').html('<div class="loader-premium"><div class="spinner-premium"></div><div class="placeholder-text">Searching circulars...</div></div>');
            
            $.ajax({
                url: "{{ route('user.circulars.list') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    page: page,
                    max: perPage,
                    search: search,
                    title: title,
                    content: content,
                    notification_no: notificationNo,
                    date_from: dateFrom,
                    date_to: dateTo,
                    date_flex: dateFlex,
                    subject_id: subjectId
                },
                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(),
                        $('#contentInput').val()
                    ];
                    highlightSearchTerms(activeTerms);
                },
                error: function(xhr) {
                    $('#application-list-container').html('<div class="alert alert-danger w-100">Error loading circulars.</div>');
                }
            });
        }

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

        $('#keywordSearch, #titleInput, #contentInput, #notificationNoInput, #dateFlexInput').on('keyup', function(e) {
            if (e.which === 13) fetchCirculars(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];
                fetchCirculars(page);
            }
        });

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

        // Sidebar Subject Filter
        $(document).on('click', '.subject-filter-link', function() {
            let subId = $(this).data('subject-id');
            $('#subjectSelect').val(subId).trigger('change');
            fetchCirculars(1);
            
            $('html, body').animate({
                scrollTop: $(".premium-search-container").offset().top - 100
            }, 500);
        });

        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');
            $container.find('.article-content').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