@extends('site.layouts.new.app')

@php
    $trackedMeetingsLabel = number_format($allTrackedMeetingsCount ?? 0, 0, ',', '.');
    $topAttendanceName = $topAttendance['name'] ?? 'Nenhum parlamentar';
    $topAttendanceValue = isset($topAttendance['percentage'])
        ? $topAttendance['percentage'] . '%'
        : '0%';
@endphp

@section('site_content')
    <div>
        <section class="sl-materials-surface sl-attendance">
            <div class="sl-materials-tabs">
                @include('site.components.materials-tab', [
                    'label' => 'Lista de presença',
                    'href' => request()->fullUrl(),
                    'active' => true,
                ])
            </div>

            <div class="sl-attendance__hero">
                <div class="sl-attendance__hero-copy">
                    <p class="sl-attendance__eyebrow">Presenças registradas</p>
                    <h1>Frequência dos parlamentares nas sessões monitoradas</h1>
                    <p class="sl-attendance__lede">
                        O ranking considera apenas sessões que possuem presença registrada no sistema e contabiliza a
                        participação real dos parlamentares.
                    </p>
                </div>

                <div class="sl-attendance__hero-metrics">
                    <article class="sl-attendance__hero-metric">
                        <span>Sessões monitoradas</span>
                        <strong>{{ $trackedMeetingsLabel }}</strong>
                    </article>
                    <article class="sl-attendance__hero-metric">
                        <span>Maior frequência</span>
                        <strong>{{ $topAttendanceValue }}</strong>
                        <small>{{ $topAttendanceName }}</small>
                    </article>
                </div>
            </div>

            <form method="GET" action="{{ route('site.attendance') }}" class="sl-attendance__filters">
                <input type="hidden" name="front_layout" value="new">

                <div class="sl-materials-filter-field">
                    <label for="attendance_text">Buscar</label>
                    <input id="attendance_text" type="text" name="text" value="{{ $selectedText ?? '' }}" class="sl-materials-control"
                        placeholder="Número da sessão ou tipo">
                </div>

                <div class="sl-materials-filter-field">
                    <label for="attendance_type">Tipo de sessão</label>
                    <select id="attendance_type" name="type" class="sl-materials-control">
                        @foreach ($sessionTypes as $optionValue => $optionLabel)
                            <option value="{{ $optionValue }}" {{ (string) $optionValue === (string) ($selectedType ?? '') ? 'selected' : '' }}>{{ $optionLabel }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="sl-materials-filter-field">
                    <label for="attendance_year">Ano</label>
                    <select id="attendance_year" name="year" class="sl-materials-control">
                        @foreach ($availableYears as $optionValue => $optionLabel)
                            <option value="{{ $optionValue }}" {{ (string) $optionValue === (string) ($selectedYear ?? '') ? 'selected' : '' }}>{{ $optionLabel }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="sl-materials-actions">
                    <a href="{{ route('site.attendance', ['front_layout' => 'new']) }}" class="sl-materials-button is-light">
                        <span>Limpar</span>
                    </a>
                    <button type="submit" class="sl-materials-button is-primary">
                        <span>Aplicar filtros</span>
                    </button>
                </div>
            </form>

            <div class="sl-attendance__grid">
                @component('site.components.panel', ['title' => 'Sessões com presença registrada', 'className' => 'sl-attendance__panel'])
                    <div class="sl-attendance__list">
                        @forelse ($records as $meeting)
                            <article class="sl-attendance-session">
                                <div class="sl-attendance-session__copy">
                                    <strong>{{ $meeting->meeting_label }}</strong>
                                    <p>{{ \Illuminate\Support\Str::before((string) $meeting->date_start, ' ') ?: (string) $meeting->date_start }}</p>
                                    <span>{{ $meeting->presence_total }} {{ \Illuminate\Support\Str::plural('presença', $meeting->presence_total) }} registrada(s)</span>
                                </div>

                                <button type="button" class="sl-inline-action sl-inline-action--attendance" data-modal-open="attendance-meeting-{{ $meeting->id }}">
                                    <span>Ver lista</span>
                                </button>
                            </article>

                            @component('site.components.modal', [
                                'id' => 'attendance-meeting-' . $meeting->id,
                                'title' => 'Lista de presença - ' . $meeting->meeting_label,
                                'description' => \Illuminate\Support\Str::before((string) $meeting->date_start, ' ') ?: (string) $meeting->date_start,
                                'panelClass' => 'sl-modal__dialog--presence',
                            ])
                                @include('site.components.meeting-presence-grid', [
                                    'assemblymen' => $meeting->present_assemblymen,
                                ])

                                @slot('footer')
                                    <button type="button" class="sl-materials-button is-light" data-modal-close>Fechar</button>
                                @endslot
                            @endcomponent
                        @empty
                            <div class="sl-attendance__empty">
                                <h2>Nenhuma presença encontrada</h2>
                                <p>Não há sessões com presença registrada para os filtros aplicados.</p>
                            </div>
                        @endforelse
                    </div>

                    @if (method_exists($records, 'links'))
                        <div class="sl-materials-pagination-wrap">
                            @include('site.components.materials-pagination', ['records' => $records])
                        </div>
                    @endif
                @endcomponent

                @component('site.components.panel', ['title' => 'Frequência por vereador', 'className' => 'sl-attendance__panel'])
                    <div class="sl-attendance-ranking__legend" aria-label="Legenda da frequência">
                        <span><i class="is-presence"></i>Presenças</span>
                        <span><i class="is-absence"></i>Ausências</span>
                        <span class="is-muted"><i></i>Justificadas não informadas</span>
                    </div>

                    <div class="sl-attendance-ranking">
                        @forelse ($attendanceRanking as $item)
                            @php
                                $presencePercentage = min(max((int) ($item['percentage'] ?? 0), 0), 100);
                                $absencePercentage = max(100 - $presencePercentage, 0);
                                $attendanceLabel = $item['name'] . ': ' . $presencePercentage . '% de presença e ' . $absencePercentage . '% de ausência nas sessões monitoradas.';
                            @endphp
                            <article class="sl-attendance-ranking__item">
                                <div class="sl-attendance-ranking__topline">
                                    <div class="sl-attendance-ranking__identity">
                                        <div class="sl-attendance-ranking__avatar">
                                            @if ($item['image'])
                                                <img src="{{ $item['image'] }}" alt="{{ $item['name'] }}" loading="lazy" onerror="this.onerror=null;this.src='{{ asset('front/assets/img/default-profile.png') }}';">
                                            @else
                                                <span>{{ $item['initials'] }}</span>
                                            @endif
                                        </div>

                                        <div>
                                            <strong>{{ $item['name'] }}</strong>
                                            <span>{{ collect([$item['role'], $item['party']])->filter()->join(' • ') }}</span>
                                        </div>
                                    </div>

                                    <div class="sl-attendance-ranking__percent">{{ $item['percentage'] }}%</div>
                                </div>

                                <div class="sl-attendance-ranking__bar" role="img" aria-label="{{ $attendanceLabel }}">
                                    @if ($presencePercentage > 0)
                                        <span class="is-presence" style="width: {{ $presencePercentage }}%">
                                            @if ($presencePercentage >= 12)
                                                <small>{{ $presencePercentage }}%</small>
                                            @endif
                                        </span>
                                    @endif

                                    @if ($absencePercentage > 0)
                                        <span class="is-absence" style="width: {{ $absencePercentage }}%">
                                            @if ($absencePercentage >= 10)
                                                <small>{{ $absencePercentage }}%</small>
                                            @endif
                                        </span>
                                    @endif
                                </div>

                                <div class="sl-attendance-ranking__meta">
                                    <span><i class="is-presence"></i>{{ $item['presence_total'] }} presenças</span>
                                    <span><i class="is-absence"></i>{{ $item['absence_total'] }} ausências</span>
                                </div>
                            </article>
                        @empty
                            <div class="sl-attendance__empty is-compact">
                                <h2>Sem ranking disponível</h2>
                                <p>Ainda não há presenças suficientes para montar a frequência por vereador.</p>
                            </div>
                        @endforelse
                    </div>
                @endcomponent
            </div>
        </section>
    </div>
@endsection