@extends('layouts.front.app')

@section('title', 'Articles by Subcategory - JotiJournal')
@section('meta_description', 'Explore legal articles organized by detailed subcategories. Refine your search using our advanced filtering tools.')
@section('meta_keywords', 'legal articles, subcategory search, legal research, case index')

@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.articles') }}">Article</a></li>
                    <li class="breadcrumb-item"><a class="text-muted text-decoration-none" href="{{ route('user.articles') }}">Category</a></li>
                    <li aria-current="page" class="breadcrumb-item active text-dark">{{ $category ? $category->category : 'Articles' }}</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="articleSearchForm">
                        <input type="hidden" id="categoryId" value="{{ $categoryId }}">
                        <div class="mb-2">
                            <label class="form-label mb-2 fw-bold small text-uppercase opacity-75"
                                for="keywordSearch">Search Articles by Subcategory</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">Article Title</label>
                                                <input class="form-control" id="titleInput" placeholder="e.g. Constitutional Law..." type="text" />
                                            </div>
                                        </div>
                                          <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="contentInput">Article Content</label>
                                                <input class="form-control" id="contentInput" placeholder="Search in content..." type="text" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        
                                          <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="authorInput">Author Name</label>
                                                <input class="form-control" id="authorInput" placeholder="Enter author name..." type="text" />
                                            </div>
                                        </div>
                                          <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label" for="subcategorySelect">Subcategory</label>
                                                <select class="form-select" id="subcategorySelect">
                                                    <option value="">-- All Subcategories --</option>
                                                    @foreach($subcategories as $subcategory)
                                                        <option value="{{ $subcategory->id }}">{{ $subcategory->subcategory }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                  <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="dateInput">Publish Date</label>
                                                <input class="form-control" id="dateInput" type="date" />
                                            </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">
                    <!-- Articles 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;">
                    <!-- Subcategories Archive -->
                    <div class="sidebar-card animate-up" style="animation-delay: 0.2s;">
                        <h3 class="sidebar-title font-serif">Subcategories</h3>

                      <ul class="archive-list list-unstyled mb-0">
                            @foreach($subcategories as $subcategory)
                            <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 subcategory-filter-link" 
                                       href="javascript:void(0)" 
                                       data-subcategory-id="{{ $subcategory->id }}">
                                        {{ $subcategory->subcategory }}
                                    </a>
                                </span>
                                <span class="text-muted small fw-bold">{{ str_pad($subcategory->articles_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 subcategories
        $('#subcategorySelect').select2({
            placeholder: "--Select Subcategory--",
            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',
            'author':         '#authorInput',
            'date':           '#dateInput',
            'subcategory_id': '#subcategorySelect',
        }, function(p) { fetchArticles(p); });
        if (!__ranFromHistory) fetchArticles(1);

        function fetchArticles(page) {
            let perPage = 10;
            let search = $('#keywordSearch').val();
            let title = $('#titleInput').val();
            let author = $('#authorInput').val();
            let date = $('#dateInput').val();
            let contentSearch = $('#contentInput').val();
            let subcategoryId = $('#subcategorySelect').val();

            $('#application-list-container').html('<div class="loader-premium"><div class="spinner-premium"></div><div class="placeholder-text">Searching articles...</div></div>');
            
            $.ajax({
                url: "{{ route('user.articles.subcategory.list') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    page: page,
                    max: perPage,
                    search: search,
                    title: title,
                    author: author,
                    date: date,
                    content: contentSearch,
                    subcategory_id: subcategoryId,
                    category_id: $('#categoryId').val()
                },
                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`);
                    }
                },
                error: function(xhr) {
                    $('#application-list-container').html('<div class="alert alert-danger w-100">Error loading articles.</div>');
                }
            });
        }

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

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

        // Reset Filters
        $('#resetFilters').on('click', function() {
            $('#keywordSearch').val('');
            $('#titleInput').val('');
            $('#authorInput').val('');
            $('#dateInput').val('');
            $('#contentInput').val('');
            $('#subcategorySelect').val(null).trigger('change');
            fetchArticles(1);
        });

        // Sidebar Subcategory Filter
        $(document).on('click', '.subcategory-filter-link', function() {
            let subId = $(this).data('subcategory-id');
            $('#subcategorySelect').val(subId).trigger('change');
            fetchArticles(1);
            
            $('html, body').animate({
                scrollTop: $(".premium-search-container").offset().top - 100
            }, 500);
        });
    });
</script>
@endpush