@extends('frontend.layout.main')

@section('content')

<style>
.category-item {
    padding: 5px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    margin-bottom: 3px;
    transition: all 0.2s ease;
    font-size: 12px;
}

.category-item:hover {
    background-color: #f1f3f5;
}

.active-category {
    background-color: #e9f2ff;
    font-weight: 600;
    color: #0d6efd !important;
}

.count-badge {
    min-width: 32px;
    text-align: center;
    font-size: 13px;
    padding: 6px 8px;
}
</style>

<div class="container my-4">

    {{-- PAGE HEADING --}}
    <div class="text-center mb-4">
        <h2 class="fw-bold">Acts</h2>
        <p class="text-white fw-light">Browse judgments by category & year</p>
    </div>
    
    <div class="d-block d-lg-none mb-3">
        <div class="row g-2">
    
            <!-- CATEGORY -->
            <div class="col-6">
                <select class="form-select" id="mobileCategory">
                    <option value="">Select Category</option>
                    @foreach($subcategories as $type)
                        @php
                            $slug = Str::slug($type);
                        @endphp
                        <option value="{{ $slug }}"
                            {{ request('category') == $slug ? 'selected' : '' }}>
                            {{ $type }}
                        </option>
                    @endforeach
                </select>
            </div>
    
            <!-- YEAR -->
            <div class="col-6">
                <select class="form-select" id="mobileYear">
                    <option value="">Select Year</option>
                    @foreach($years as $year)
                        <option value="{{ $year }}"
                            {{ request('year') == $year ? 'selected' : '' }}>
                            {{ $year }}
                        </option>
                    @endforeach
                </select>
            </div>
    
        </div>
    </div>
    
    <div class="row">

        {{-- ================= LEFT : CATEGORY (DESKTOP) ================= --}}
        <div class="col-lg-2 d-none d-lg-block">
            <div class="card shadow-sm border-0">
                <div class="card-body p-3">
        
                    <h6 class="fw-bold mb-3 border-bottom pb-2">Categories</h6>
        
                    @foreach($subcategories as $item)
                        @php 
                            $active = request('category') == $item->slug;
                        @endphp
        
                        <a href="?category={{ $item->slug }}"
                           class="category-item d-flex justify-content-between align-items-center
                           {{ $active ? 'active-category' : '' }}">
        
                            <span>{{ $item->state }}</span>
        
                            <span class="badge rounded-pill bg-light text-dark count-badge">
                                {{ $item->act_data_count }}
                            </span>
                        </a>
                    @endforeach
        
                </div>
            </div>
        </div>

        {{-- ================= CENTER : CASE LAWS LIST ================= --}}
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-body p-0">

                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Case Name</th>
                             
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($acts as $key => $item)
                                <tr>
                                    <td>{{ $key+1 }}</td>
                                    <td> <a href="{{ route('act.detail', $item->slug) }}"  >{{ $item->title }}</a></td>
                                    <!--<td>{{ $item->category }}</td>-->
                              
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">
                                        No records found
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>

                </div>
            </div>

        </div>

        {{-- ================= RIGHT : YEARS (DESKTOP) ================= --}}
        <div class="col-lg-2 d-none d-lg-block">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">Years</h6>
                    @foreach($years as $year)
                        <a href="?year={{ $year }}"
                           class="d-block mb-2 text-decoration-none
                           {{ request('year') == $year ? 'fw-bold text-primary' : 'text-dark' }}">
                            {{ $year }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>

    </div>
</div>

{{-- ================= MOBILE FILTER JS ================= --}}
<script>
    document.getElementById('mobileCategory')?.addEventListener('change', applyFilter);
    document.getElementById('mobileYear')?.addEventListener('change', applyFilter);

    function applyFilter() {
        let category = document.getElementById('mobileCategory').value;
        let year = document.getElementById('mobileYear').value;

        let url = new URL(window.location.href);

        category ? url.searchParams.set('category', category) : url.searchParams.delete('category');
        year ? url.searchParams.set('year', year) : url.searchParams.delete('year');

        window.location.href = url.toString();
    }
</script>

@endsection