@extends('layouts.front.app')

@section('title', 'Search by Party - JotiJournal')
@section('meta_description', 'Search our legal archive by party name with real-time suggestions and autocomplete.')
@section('meta_keywords', 'legal search, party search, petitioner name, respondent search, Indian judgments archive')

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

    <!-- Main Content -->
    <main class="container py-5">
        <div class="row g-5">
            <!-- Main Column -->
            <div class="col-lg-12">
                <!-- Premium Search Section -->
                <div class="premium-search-container animate-up">
                    <form id="partySearchForm">
                       
                            <div class="row g-3 align-items-end justify-content-center">
                                <div class="col-md-8">
                                    <div class="search-field-group">
                                        <label class="form-label mb-2 fw-bold small text-uppercase text-secondary" for="partySelect">Search By Party Name</label>
                                        <div class="input-group-premium">
                                            <select class="form-control premium-input" id="partySelect">
                                                <option value="">Search for petitioner or respondent...</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-legal-primary flex-grow-1" 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>

                <!-- Results Metadata -->
                <div class="results-metadata mb-4" id="results-count" style="display: none;"></div>
                
                <!-- Results List Container -->
                <div id="application-list-container">
                    <div class="text-center py-5 border rounded-3 bg-white shadow-sm">
                        <i class="fa-solid fa-people-group fa-3x text-light mb-3"></i>
                        <h5 class="text-muted">Search by Party Name</h5>
                        <p class="text-secondary small">Start typing a name to get suggestions from our archive.</p>
                    </div>
                </div>

                <!-- Pagination Area -->
                <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("JudgementByParty Script Initialized");

            // Initialize Select2 for Party Autocomplete
            $('#partySelect').select2({
                placeholder: "Search for petitioner or respondent...",
                minimumInputLength: 3,
                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
                }
            });

            // Fetch Judgements Logic
            window.fetchJudgements = function(page) {
                let party = $('#partySelect').val();

                console.log("Triggering Search - Party:", party);

                if (!party) {
                    showToast('warning', 'Please select a party name 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.party.list') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        page: page,
                        max: 10,
                        party: party
                    },
                    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>');
                    }
                });
            }

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

            // Auto-run when redirected from /user/search-history
            (function() {
                var params = new URLSearchParams(window.location.search);
                var party = params.get('party');
                if (!party) return;
                // AJAX-loaded Select2 needs the option to exist before .val() works.
                var opt = new Option(party, party, true, true);
                $('#partySelect').append(opt).trigger('change');
                setTimeout(function() { fetchJudgements(1); }, 50);
            })();

            $(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 Logic
            $('button[type="reset"]').click(function(e) {
                e.preventDefault();
                console.log("Search Reset");
                $('#partySelect').val(null).trigger('change.select2');
                $('#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-people-group fa-3x text-light mb-3"></i>
                        <h5 class="text-muted">Search by Party Name</h5>
                        <p class="text-secondary small">Start typing a name to get suggestions from our archive.</p>
                    </div>
                `);
            });
        });
    })(jQuery);
</script>
@endpush