@extends('layouts.front.app')

@section('title', 'Search by Act - JotiJournal')
@section('meta_description', 'Search our comprehensive legal archive by specific Acts and Sections with our advanced research tools.')
@section('meta_keywords', 'legal judgments, act search, section search, Indian law archive, JotiJournal')

@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">Act</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container py-5">
        <div class="row g-5">
            <!-- Main Column -->
            <div class="col-lg-12">
                <!-- Search Section -->
                <div class="premium-search-container animate-up">
                    <form id="actSearchForm">
                       
                            <div class="row g-3 align-items-end">
                                <div class="col-md-5">
                                    <div class="search-field-group">
                                        <label class="form-label mb-2 fw-bold small text-uppercase text-secondary" for="actSelect">Select Act</label>
                                        <div class="input-group-premium">
                                            <select class="form-select premium-input" id="actSelect">
                                                <option selected disabled value="">--Select Act--</option>
                                                @foreach($acts as $actId => $actName)
                                                    <option value="{{ $actId }}">{{ $actName }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="search-field-group">
                                        <label class="form-label mb-2 fw-bold small text-uppercase text-secondary">Select 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" style="display: none;">
                                                <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 class="col-md-2">
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-legal-primary flex-grow-1 py-2" type="submit">
                                            <i class="fa-solid fa-magnifying-glass me-2"></i>SEARCH
                                        </button>
                                        <button class="btn btn-outline-secondary" title="Reset Search" type="reset">
                                            <i class="fa-solid fa-rotate-right"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                      
                    </form>
                </div>

                <div class="results-metadata mb-4" id="results-count" style="display: none;"></div>
                
                <div id="application-list-container">
                    <div class="text-center py-5 border rounded-3 bg-white shadow-sm">
                        <i class="fa-solid fa-scale-balanced fa-3x text-light mb-3"></i>
                        <h5 class="text-muted">Ready to search the archive</h5>
                        <p class="text-secondary small">Select an Act and Sections above to view specific judgments.</p>
                    </div>
                </div>

                <!-- Premium Pagination -->
                <nav aria-label="Page navigation" class="mt-5 pagination-nav">
                    <!-- Pagination will be loaded here via AJAX -->
                </nav>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
<!-- 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">
    (function($) {
        $(document).ready(function() {
            console.log("JudgementByAct Script Initialized");

            // Initialize Select2 for Act
            $('#actSelect').select2({
                placeholder: "--Select Act--",
                allowClear: true,
                width: '100%'
            });

            const $trigger = $('#sectionTrigger');
            const $panel = $('#sectionOptionsPanel');
            const $list = $('#customSectionList');
            const $search = $('#customSectionSearch');
            const $placeholder = $('#triggerPlaceholder');
            const $tagsContainer = $('#selectedTagsContainer');

            // Toggle Section Panel
            $trigger.on('click', function(e) {
                e.stopPropagation();
                if ($('#actSelect').val()) {
                    $trigger.toggleClass('active');
                    $panel.fadeToggle(150);
                    if ($trigger.hasClass('active')) $search.focus();
                } else {
                    showToast('warning', 'Please select an Act first');
                }
            });

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

            // Dependent Dropdown for Sections
            $('#actSelect').on('change', function() {
                let actId = $(this).val();
                console.log("Act changed to ID:", actId);
                
                $list.html('<div class="text-muted small p-2">Loading sections...</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) {
                            console.log("Sections loaded for Act", actId, ":", Object.keys(response).length);
                            $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 for this Act.</div>');
                            }
                        },
                        error: function(xhr) {
                            console.error("Error loading sections:", xhr.statusText);
                            $list.html('<div class="text-muted small p-2 text-danger">Error loading sections.</div>');
                        }
                    });
                } else {
                    $list.html('<div class="text-muted small p-2">Select an Act first...</div>');
                }
            });

            // Section 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);
                });
            });

            // Update Tags on Selection
            $(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();
                let targetId = $(this).closest('.selected-tag').data('for');
                $(`#${targetId}`).prop('checked', false).trigger('change');
            });

            // Fetch Judgements Logic
            window.fetchJudgements = function(page) {
                let actId = $('#actSelect').val();
                let sections = [];
                $('.section-check:checked').each(function() {
                    sections.push($(this).val());
                });

                console.log("Triggering Search - Act:", actId, "Sections:", sections);

                if (!actId) {
                    showToast('warning', 'Please select an Act to search.');
                    return;
                }

                $('#results-count').hide();
                $('#application-list-container').html('<div class="loader-premium"><div class="spinner-premium"></div><div class="placeholder-text">Searching judgments...</div></div>');
                
                $.ajax({
                    url: "{{ route('user.judgements.act.list') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        page: page,
                        max: 10,
                        act: actId,
                        section: sections.length > 0 ? sections : null
                    },
                    success: function(response) {
                        console.log("Search Successful, Total:", response.meta?.total);
                        $('#application-list-container').html(response.content);
                        $('.pagination-nav').html(response.navigation);
                        
                        if (response.meta) {
                            $('#results-count').html(`Showing <span class="text-highlight">${response.meta.from || 0}</span> to <span class="text-highlight">${response.meta.to || 0}</span> of <span class="text-highlight">${response.meta.total}</span> entries`).show();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error in fetchJudgements:", status, error, xhr.responseText);
                        $('#application-list-container').html('<div class="alert alert-danger w-100">Error loading judgments. Please try again or check console.</div>');
                    }
                });
            }

            $('#actSearchForm').on('submit', function(e) {
                e.preventDefault();
                fetchJudgements(1);
            });

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

            $('button[type="reset"]').click(function(e) {
                e.preventDefault();
                console.log("Search Reset");
                $('#actSelect').val(null).trigger('change.select2');
                $list.html('<div class="text-muted small p-2">Select an Act first...</div>');
                $tagsContainer.empty();
                $placeholder.show();
                $('#results-count').hide();
                $('.pagination-nav').empty();
                $('#application-list-container').html(`
                    <div class="text-center py-5 border rounded-3 bg-white shadow-sm">
                        <i class="fa-solid fa-scale-balanced fa-3x text-light mb-3"></i>
                        <h5 class="text-muted">Ready to search the archive</h5>
                        <p class="text-secondary small">Select an Act and Sections above to view specific judgments.</p>
                    </div>
                `);
            });
        });
    })(jQuery);
</script>
@endpush