@php
    /** @var \Illuminate\Database\Eloquent\Collection|\Illuminate\Pagination\LengthAwarePaginator $instituicoes */
    /** @var \Illuminate\Database\Eloquent\Collection $allTags */
    /** @var \Illuminate\Database\Eloquent\Collection $allRegionals */
    /** @var string $activeSearch */
    /** @var array $activeTags */
    /** @var string $activeRegional */
    /** @var bool $hasFilters */
    $pageTitle = 'Associados Regionais — ' . config('app.name');
    $portalStorage = app(\V2\Services\Storage\StorageService::class);
    $indexUrl = route('v2.associados.portal.index');
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => $pageTitle,
    'pageDescription'       => 'Confira as instituições associadas regionais que oferecem benefícios exclusivos.',
    'coverImage'            => null,
    'gtag'                  => ['page_context' => 'associados-regionais'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'CollectionPage',
                'name' => 'Associados Regionais',
            'description' => 'Confira as instituições associadas regionais que oferecem benefícios exclusivos.',
            'url' => route('v2.associados.portal.index', [], false)
        ]
    ],
    'fullWidthMain' => true,
    'showHeader' => false,
    'showMainHeader' => false,
    'showMainFooter' => false,
    'showFooter' => false,
    'showAccessibilityBar' => false,
    'showMainLeftArea' => false,
    'showMainRightArea' => false,
])

@section('main-section-area')
    {{-- Hero / Breadcrumb --}}
    <div class="breadcrumb-wrapper bg-cover" style="background-image: url({{ $associadosBg }});">
        <div class="container">
            <div class="page-heading">
                <ul class="breadcrumb-items">
                    <li><a href="{{ url('/') }}">Home</a></li>
                    <li><i class="bi bi-chevron-right mx-2"></i></li>
                    <li>Associados Regionais</li>
                </ul>
                <h1>Associados Regionais</h1>
            </div>
        </div>
    </div>

    {{-- 2. FILTROS --}}
    <section class="associados-filter-section section-padding" aria-label="Filtros de busca">
        <div class="container">
            <form method="GET" action="{{ $indexUrl }}" role="search" class="associados-filter-form" aria-label="Buscar e filtrar associados">

                {{-- Search --}}
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6">
                        <div class="search-form-group">
                            <label for="associados-search" class="visually-hidden">Buscar associados</label>
                            <input type="text"
                                   name="search"
                                   id="associados-search"
                                   class="search-form-input"
                                   placeholder="Buscar associado por nome..."
                                   value="{{ $activeSearch }}"
                                   aria-label="Buscar associado por nome"
                                   autocomplete="off">
                            <button type="submit" class="search-form-btn" aria-label="Buscar">
                                <i class="bi bi-search me-1" aria-hidden="true"></i> Buscar
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Tag Filters --}}
                @if($allTags->count() > 0)
                    <div class="d-flex flex-wrap justify-content-center gap-2 mt-4" role="group" aria-label="Filtrar por área temática">
                        @foreach($allTags as $tag)
                            @php
                                $isChecked = in_array($tag->id, $activeTags);
                            @endphp
                            <div class="form-check associado-tag-check">
                                <input type="checkbox"
                                       class="btn-check"
                                       name="tags[]"
                                       value="{{ $tag->id }}"
                                       id="tag-{{ $tag->id }}"
                                       {{ $isChecked ? 'checked' : '' }}>
                                <label class="btn btn-sm btn-outline-primary rounded-pill associado-tag-label"
                                       for="tag-{{ $tag->id }}">
                                    {{ $tag->name }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- Regional Filter --}}
                <div class="d-flex flex-wrap justify-content-center align-items-center gap-3 mt-4">
                    <label for="associados-regional" class="visually-hidden">Filtrar por regional</label>
                    <select id="associados-regional"
                            name="regional"
                            class="associados-regional-select"
                            aria-label="Filtrar por regional">
                        <option value="">Todas as Regionais</option>
                        @foreach($allRegionals as $regional)
                            <option value="{{ $regional->id }}" {{ $activeRegional == $regional->id ? 'selected' : '' }}>
                                {{ $regional->name }}{{ $regional->acronym ? ' (' . $regional->acronym . ')' : '' }}
                            </option>
                        @endforeach
                    </select>
                    {{-- Clear filters button with count badge --}}
                    @if($hasFilters)
                        @php
                            $filterCount = 0;
                            if ($activeSearch !== '') $filterCount++;
                            if (!empty($activeTags)) $filterCount++;
                            if ($activeRegional !== '') $filterCount++;
                        @endphp
                        <a href="{{ $indexUrl }}" class="btn btn-outline-secondary rounded-pill d-inline-flex align-items-center gap-1"
                           role="button" aria-label="Limpar {{ $filterCount }} {{ $filterCount === 1 ? 'filtro ativo' : 'filtros ativos' }}">
                            <i class="bi bi-x-circle" aria-hidden="true"></i>
                            Limpar filtros
                            <span class="badge bg-secondary rounded-pill ms-1">{{ $filterCount }}</span>
                        </a>
                    @endif
                </div>

            </form>
        </div>
    </section>

    {{-- Results Count (when filtering) --}}
    @if($hasFilters)
        <div class="container py-3">
            <p class="text-muted mb-0" aria-live="polite">
                <i class="bi bi-funnel-fill me-1" aria-hidden="true"></i>
                @php
                    $totalResults = ($instituicoes instanceof \Illuminate\Support\Collection) ? $instituicoes->count() : $instituicoes->total();
                @endphp
                {{ $totalResults }} {{ str_plural('resultado encontrado', 'resultados encontrados', $totalResults) }}
                @if($activeSearch !== '')
                    para "<strong>{{ $activeSearch }}</strong>"
                @endif
            </p>
        </div>
    @endif

    {{-- Listagem de instituições --}}
    @php
        /** @var bool $shouldGroup */
        $shouldGroup = $hasFilters;
        if ($shouldGroup) {
            $grouped = $instituicoes->groupBy(function ($item) {
                $primaryTag = $item->primaryTag->first();
                return $primaryTag ? $primaryTag->name : 'Outros';
            });
        }
    @endphp

    @if(($hasFilters && $instituicoes->count() > 0) || (!$hasFilters && $instituicoes->count() > 0))
        <section class="team-section section-padding section-bg">
            <div class="container">
                @if($shouldGroup)
                    {{-- Grouped by primary tag --}}
                    @foreach($grouped as $tagName => $items)
                        <div class="mb-5">
                            <div class="d-flex align-items-center mb-4">
                                <h2 class="h4 fw-bold mb-0 me-3">
                                    <i class="bi bi-tag-fill text-primary me-2" aria-hidden="true"></i>{{ $tagName }}
                                </h2>
                                <span class="badge bg-primary bg-opacity-10 text-primary rounded-pill">{{ $items->count() }}</span>
                            </div>
                            <div class="row g-4 associados-grid-row">
                                @foreach($items as $instituicao)
                                    @include('v2-associados::portal._card', ['instituicao' => $instituicao, 'portalStorage' => $portalStorage])
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                @else
                    {{-- Default: flat paginated list --}}
                    <div class="row g-4 associados-grid-row">
                        @foreach($instituicoes as $instituicao)
                            @include('v2-associados::portal._card', ['instituicao' => $instituicao, 'portalStorage' => $portalStorage])
                        @endforeach
                    </div>

                    @if($instituicoes->hasPages())
                        <div class="d-flex justify-content-center mt-5">
                            {{ $instituicoes->links('v2-portal::partials.pagination') }}
                        </div>
                    @endif
                @endif
            </div>
        </section>
    @else
        <section class="section-padding">
            <div class="container">
                <div class="text-center py-5">
                    <i class="bi bi-building display-1 text-primary" aria-hidden="true"></i>
                    <h2 class="h5 mt-3 text-muted">Nenhuma instituição encontrada</h2>
                    @if($hasFilters)
                        <p class="text-muted">Tente ajustar os filtros ou <a href="{{ $indexUrl }}">limpar a busca</a>.</p>
                    @else
                        <p class="text-muted">Volte mais tarde para conferir as instituições conveniadas.</p>
                    @endif
                </div>
            </div>
        </section>
    @endif

    {{-- DETAIL MODAL --}}
    <div class="modal fade" id="associadoModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="associadoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-0 pb-0">
                    <span id="associadoModalLabel" class="visually-hidden">Detalhes do associado</span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <div class="modal-body pt-0 associado-modal-body" id="associadoModalBody">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Carregando...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('head-styles')
    <link rel="stylesheet" href="{{ asset('assets/css/modules/associados/portal-associados.css') }}?v={{ filemtime(public_path('assets/css/modules/associados/portal-associados.css')) }}">
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const detalheUrlBase = '{{ route("v2.associados.portal.detalhe", ["id" => "__ID__"]) }}';
    const modalEl = document.getElementById('associadoModal');
    const modalBody = document.getElementById('associadoModalBody');
    const filterForm = document.querySelector('.associados-filter-form');

    // Auto-submit on tag toggle
    const tagChecks = document.querySelectorAll('.associado-tag-check .btn-check');
    for (let i = 0; i < tagChecks.length; i++) {
        tagChecks[i].addEventListener('change', function() {
            if (filterForm) {
                filterForm.submit();
            }
        });
    }

    // Auto-submit on regional change
    const regionalSelect = document.getElementById('associados-regional');
    if (regionalSelect) {
        regionalSelect.addEventListener('change', function() {
            if (filterForm) {
                filterForm.submit();
            }
        });
    }

    // Keyboard support for card triggers (Enter/Space)
    const cards = document.querySelectorAll('.associado-card[role="button"]');
    for (let i = 0; i < cards.length; i++) {
        cards[i].addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.click();
            }
        });
    }

    // Modal detail loading
    if (modalEl) {
        modalEl.addEventListener('show.bs.modal', function(event) {
            const trigger = event.relatedTarget;
            if (!trigger) return;

            const id = trigger.getAttribute('data-id');
            if (!id) return;

            const url = detalheUrlBase.replace('__ID__', id);

            modalBody.innerHTML =
                '<div class="text-center py-4">' +
                '<div class="spinner-border text-primary" role="status">' +
                '<span class="visually-hidden">Carregando...</span>' +
                '</div></div>';

            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    modalBody.innerHTML = xhr.responseText;
                    var firstFocusable = modalBody.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])');
                    if (firstFocusable) {
                        setTimeout(function() { firstFocusable.focus(); }, 200);
                    }
                } else {
                    modalBody.innerHTML =
                        '<div class="text-center py-4 text-danger">' +
                        '<i class="bi bi-exclamation-triangle display-4 d-block mb-3"></i>' +
                        '<p>Erro ao carregar detalhes do associado.</p></div>';
                }
            };
            xhr.onerror = function() {
                modalBody.innerHTML =
                    '<div class="text-center py-4 text-danger">' +
                    '<i class="bi bi-exclamation-triangle display-4 d-block mb-3"></i>' +
                    '<p>Erro ao carregar detalhes do associado.</p></div>';
            };
            xhr.send();
        });
    }
});
</script>
@endpush