@extends('layouts.front.app')

@section('title', 'Samasya Samadhan - JotiJournal')
@section('meta_description', 'Search and explore solutions to various legal problems and questions. Comprehensive Q&A archive for legal practitioners.')
@section('meta_keywords', 'legal Q&A, samasya samadhan, legal solutions, law problem solving')

@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">Samasya</li>
                </ol>
            </nav>
        </div>
    </section>
    <!-- Main Content -->
    <main class="container py-5">
        <div class="row g-5">
            <!-- Main Column -->
            <div class="col-lg-8">
                <!-- Premium Search Section -->
                <div class="premium-search-container animate-up">
                    <form id="samasyaSearchForm">
                        <div class="mb-2">
                            <label class="form-label mb-2 fw-bold small text-uppercase opacity-75"
                                for="keywordSearch">Search Problems & Solutions</label>
                            <div class="search-integrated-wrapper">
                                <i class="fa-solid fa-magnifying-glass inner-icon"></i>
                                <input class="form-control" id="keywordSearch"
                                    placeholder="Keywords in Problem or Solution..." 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="samasyaInput">Problem / Question</label>
                                                <input class="form-control" id="samasyaInput" placeholder="e.g. Leave Rules..." type="text" />
                                            </div>
                                        </div>
                                          <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="samadhanInput">Solution / Answer</label>
                                                <input class="form-control" id="samadhanInput" placeholder="Search in solution..." type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="categorySelect">Category</label>
                                                <select class="form-select" id="categorySelect">
                                                    <option value="">-- All Categories --</option>
                                                    @foreach($categories as $category)
                                                        <option value="{{ $category->id }}">{{ $category->category }}</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">
                    <!-- Q&A will be loaded here via AJAX -->
                    <div class="loader-premium">
                        <div class="spinner-premium"></div>
                        <div class="placeholder-text">Searching database...</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;">
                    <!-- Categories -->
                    <div class="sidebar-card animate-up" style="animation-delay: 0.2s;">
                        <h3 class="sidebar-title font-serif">Categories</h3>
                      <ul class="archive-list list-unstyled mb-0">
                            @foreach($categories as $category)
                            <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" 
                                       href="{{ route('user.samasyas.subcategory', ['category_id' => $category->id]) }}">
                                        {{ $category->category }}
                                    </a>
                                </span>
                                <span class="text-muted small fw-bold">{{ str_pad($category->samasyas_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 categories
        $('#categorySelect').select2({
            placeholder: "--Select Category--",
            allowClear: true,
            width: '100%'
        });


        // Initial fetch — applyHistoryParams takes over if URL has rerun params
        var __ranFromHistory = window.applyHistoryParams && window.applyHistoryParams({
            'search':      '#keywordSearch',
            'samasya':     '#samasyaInput',
            'samadhan':    '#samadhanInput',
            'category_id': '#categorySelect',
            'date_from':   '#dateFromInput',
            'date_to':     '#dateToInput',
            'date_flex':   '#dateFlexInput',
        }, function(p) { fetchSamasyas(p); });
        if (!__ranFromHistory) fetchSamasyas(1);

        function fetchSamasyas(page) {
            let perPage = 10;
            let search = $('#keywordSearch').val();
            let samasyaInput = $('#samasyaInput').val();
            let samadhanInput = $('#samadhanInput').val();
            let dateFrom = $('#dateFromInput').val();
            let dateTo = $('#dateToInput').val();
            let dateFlex = $('#dateFlexInput').val();
            let categoryId = $('#categorySelect').val();

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

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

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

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

        // Sidebar Category Filter - Redirect handled by standard link

        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