@php
    /** @var \Illuminate\Pagination\LengthAwarePaginator $unidades */
    $pageTitle = 'Regionais SUCESU — ' . config('app.name');
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => $pageTitle,
    'pageDescription'       => 'Conheça as unidades regionais da SUCESU espalhadas pelo Brasil.',
    'coverImage'            => null,
    'gtag'                  => ['page_context' => 'unidades-regionais'],
    '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({{ $regionaisBg }});">
        <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>Regionais SUCESU</li>
                </ul>
                <h1>Regionais <span class="text-primary">SUCESU</span></h1>
            </div>
        </div>
    </div>

    {{-- Listagem de regionais --}}
    @if($unidades->count() > 0)
        <section class="team-section section-padding section-bg">
            <div class="container">
                <div class="row g-4">
                    @foreach($unidades as $unidade)
                        <div class="col-md-6 d-flex">
                            <div class="team-box-items mt-0 h-100 w-100 d-flex flex-column">
                                <div class="team-img align-items-start flex-shrink-0">
                                    <a href="{{ route('v2.unidade-regional.portal.show', ['slug' => $unidade->slug]) }}">
                                        @if($unidade->logo)
                                            <img alt="{{ $unidade->name }}" src="{{ v2_storage_url($unidade->logo) }}"
                                                 style="width:185px;height:185px;object-fit:contain;padding:20px;background:var(--color-bg-canvas);margin:0 auto;display:block;"
                                                 loading="lazy" decoding="async" width="185" height="185">
                                        @else
                                            <div style="width:185px;height:185px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-canvas);margin:0 auto;">
                                                <i class="bi bi-geo-alt text-primary" style="font-size:3rem;"></i>
                                            </div>
                                        @endif
                                    </a>
                                </div>
                                <div class="team-content d-flex flex-column flex-grow-1">
                                    <h3>
                                        <a href="{{ route('v2.unidade-regional.portal.show', ['slug' => $unidade->slug]) }}" style="color:inherit;text-decoration:none;">
                                            {{ $unidade->name }}
                                        </a>
                                    </h3>
                                    @if($unidade->city && $unidade->state)
                                        <span class="badge bg-primary text-white fs-6 mb-2 d-inline-flex align-items-center gap-1 align-self-start">
                                            <i class="bi bi-geo" aria-hidden="true"></i> {{ $unidade->city }}, {{ $unidade->state }}
                                        </span>
                                    @endif
                                    <p class="flex-grow-1">{{ !empty($unidade->metadata['resumo']) ? str_limit($unidade->metadata['resumo'], 250) : 'Regional SUCESU oferecendo benefícios e representação regional.' }}</p>
                                    <div class="mt-auto pt-3 d-flex align-items-center">
                                        <a href="{{ route('v2.unidade-regional.portal.show', ['slug' => $unidade->slug]) }}" class="link-btn link-btn2">
                                            Ver Detalhes <i class="bi bi-box-arrow-up-right text-primary"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if($unidades->hasPages())
                    <div class="d-flex justify-content-center mt-5">
                        {{ $unidades->links('v2-portal::partials.pagination') }}
                    </div>
                @endif
            </div>
        </section>
    @else
        <section class="section-padding">
            <div class="container">
                <div class="text-center py-5">
                    <i class="bi bi-geo-alt display-1 text-primary" aria-hidden="true"></i>
                    <h2 class="h5 mt-3 text-muted">Nenhuma regional encontrada</h2>
                    <p class="text-muted">Em breve anunciaremos nossas unidades regionais.</p>
                </div>
            </div>
        </section>
    @endif
@endsection