@php
    /** @var \V2\Modules\Conexoes\Associados\Models\AssociadoInstituicao $instituicao */
    /** @var array $benefitsList */
    /** @var string $htmlContent */
    $pageTitle = $instituicao->name . ' — Associados Regionais — ' . config('app.name');
    $metaDescription = strip_tags($instituicao->description ?? ($instituicao->convenio_description ?? ''));
    $galleryHasItems = $instituicao->gallery->count() > 0;
    $storage = app(\V2\Services\Storage\StorageService::class);
    $socialNetworks = $instituicao->social_media;
    $socialIconMap = [
        'facebook' => 'bi-facebook',
        'instagram' => 'bi-instagram',
        'twitter' => 'bi-twitter-x',
        'youtube' => 'bi-youtube',
        'linkedin' => 'bi-linkedin',
        'whatsapp' => 'bi-whatsapp',
        'telegram' => 'bi-telegram',
        'tiktok' => 'bi-tiktok',
        'flickr' => 'bi-image',
    ];
    $socialLabelMap = [
        'facebook' => 'Facebook',
        'instagram' => 'Instagram',
        'twitter' => 'Twitter / X',
        'youtube' => 'YouTube',
        'linkedin' => 'LinkedIn',
        'whatsapp' => 'WhatsApp',
        'telegram' => 'Telegram',
        'tiktok' => 'TikTok',
        'flickr' => 'Flickr',
    ];
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => $pageTitle,
    'pageDescription'       => str_limit($metaDescription, 160),
    'coverImage'            => null,
    'gtag'                  => ['page_context' => 'associado'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'Product',
            'name' => $instituicao->name,
            'description' => $metaDescription,
            'url' => request()->url()
        ]
    ],
    'fullWidthMain' => true,
    'showHeader' => false,
    'showMainHeader' => false,
    'showMainFooter' => false,
    'showFooter' => false,
    'showAccessibilityBar' => false,
    'showMainLeftArea' => false,
    'showMainRightArea' => false,
])

@section('main-section-area')
    {{-- Hero / Breadcrumb --}}
    @php
        $isRegional = !empty($unidadeRegional);
        $coverBgVariants = [];
        if (!empty($instituicao->cover_image)) {
            $coverMedia = \V2\Services\Gallery\Models\GalleryMedia::where('file_path', $instituicao->cover_image)->first();
            if ($coverMedia && !empty($coverMedia->variants)) {
                $coverBgVariants = json_decode($coverMedia->variants, true) ?: [];
            }
        }
        $coverBg = $instituicao->cover_image
            ? v2_bg_image_css($instituicao->cover_image, $coverBgVariants)
            : 'linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary))';
    @endphp
    <div class="breadcrumb-wrapper bg-cover" style="background-image: {{ $coverBg }}; min-height: 200px;">
        <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><a href="{{ route('v2.associados.portal.index') }}">Associados Regionais</a></li>
                    <li><i class="bi bi-chevron-right mx-2"></i></li>
                    <li>{{ $instituicao->name }}</li>
                </ul>
                <div class="d-flex align-items-center gap-4 flex-wrap">
                    @if($instituicao->logo)
                        <img alt="{{ $instituicao->name }}" src="{{ v2_storage_url($instituicao->logo) }}"
                             loading="eager"
                             style="max-height:80px;width:auto;object-fit:contain;"
                             class="rounded bg-white border p-2 shadow-sm">
                    @endif
                    <div>
                        <h1 class="fw-bold mb-1">{{ $instituicao->name }}</h1>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            @if($isRegional)
                                <a href="{{ route('v2.unidade-regional.portal.show', ['slug' => $unidadeRegional->slug]) }}"
                                   class="badge fs-6 px-3 py-2 d-inline-flex align-items-center gap-1 text-decoration-none"
                                   style="background: var(--tenant-primary);">
                                    <i class="bi bi-award-fill" aria-hidden="true" style="font-size:1.1rem;"></i>
                                    Associado à {{ $unidadeRegional->acronym }}
                                </a>
                            @else
                                <span class="badge fs-6 px-3 py-2 d-inline-flex align-items-center gap-1" style="background: var(--tenant-primary);">
                                    <i class="bi bi-award-fill" aria-hidden="true" style="font-size:1.1rem;"></i>
                                    Associado Institucional
                                </span>
                            @endif
                            @if($instituicao->discount_badge)
                                <span class="badge bg-warning text-dark fs-6 px-3 py-2">{{ $instituicao->discount_badge }}</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Conteúdo --}}
    <section class="team-section section-padding section-bg">
        <div class="container">
            <div class="row g-5">
                {{-- Coluna principal --}}
                <div class="col-lg-8">
                    @if($instituicao->description)
                        <div class="mb-4">
                            <p class="lead text-muted">{{ $instituicao->description }}</p>
                        </div>
                    @endif

                    @if(!empty($htmlContent))
                        <div class="mb-5">
                            <h2 class="h4 fw-bold mb-3"><i class="bi bi-info-circle me-2 text-primary" aria-hidden="true"> </i> Sobre o Convênio</h2>
                            <div class="content-rich-viewer" style="line-height: 1.8;">
                                {!! $htmlContent !!}
                            </div>
                        </div>
                    @endif

                    @if(!empty($benefitsList) || !empty($instituicao->benefits))
                        <div class="mb-5">
                            <h2 class="h4 fw-bold mb-3"><i class="bi bi-gift me-2 text-primary" aria-hidden="true"> </i> Benefícios</h2>
                            <div class="row g-3">
                                @if(!empty($benefitsList))
                                    @foreach($benefitsList as $benefit)
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-center gap-2 p-3 bg-light rounded">
                                                <i class="bi bi-check-circle-fill flex-shrink-0 text-primary"> </i>
                                                <span>{{ $benefit }}</span>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                                @php $benefits = $instituicao->benefits; @endphp
                                @if(!empty($benefits))
                                    @foreach($benefits as $benefit)
                                        <div class="col-md-6">
                                            <div class="d-flex align-items-center gap-2 p-3 bg-light rounded">
                                                <i class="bi bi-check-circle-fill flex-shrink-0 text-primary"> </i>
                                                @if(!empty($benefit['link']))
                                                    <a href="{{ $benefit['link'] }}" target="_blank" rel="noopener noreferrer"
                                                       class="text-decoration-none"
                                                       aria-label="{{ $benefit['name'] }} — abre em nova aba">{{ $benefit['name'] }}</a>
                                                @else
                                                    <span>{{ $benefit['name'] }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    @endif

                    @if($galleryHasItems)
                        <div class="mb-5">
                            <h2 class="h4 fw-bold mb-3"><i class="bi bi-images me-2 text-primary" aria-hidden="true"> </i> Galeria</h2>
                            <div class="row g-3">
                                @foreach($instituicao->gallery as $i => $item)
                                    @php
                                        $imgPath = $item->galleryMedia ? $item->galleryMedia->file_path : $item->image;
                                        $imgVariants = $item->galleryMedia && !empty($item->galleryMedia->variants) ? json_decode($item->galleryMedia->variants, true) : [];
                                    @endphp
                                    <div class="col-md-4 col-6">
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#galleryModal"
                                           data-index="{{ $i }}"
                                           class="d-block rounded overflow-hidden gallery-thumb">
                                             @include('v2-service-media::components.picture', [
                                                 'originalPath' => $imgPath,
                                                 'variants' => is_array($imgVariants) ? $imgVariants : [],
                                                 'alt' => 'Galeria ' . $instituicao->name,
                                                 'class' => 'img-fluid',
                                                 'style' => 'width:100%;height:180px;object-fit:cover;',
                                                 'lazy' => true,
                                             ])
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                {{-- Sidebar --}}
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white fw-bold text-primary"> 
                            <i class="bi bi-info-circle me-1 text-primary"> </i> Informações
                        </div>
                        <div class="card-body">
                            <dl class="mb-0">
                                @if($instituicao->url)
                                    <dt class="small text-muted">Site</dt>
                                    <dd class="mb-3">
                                        <a href="{{ $instituicao->url }}" target="_blank" rel="noopener noreferrer"
                                           class="text-decoration-none text-primary"
                                           aria-label="Visitar site — abre em nova aba">
                                            <i class="bi bi-box-arrow-up-right me-1" aria-hidden="true"></i> Visitar site
                                        </a>
                                    </dd>
                                @endif
                                @if(!empty($socialNetworks))
                                    @foreach($socialNetworks as $social)
                                        @php
                                            $networkId = $social['network'] ?? '';
                                            $socialIcon = $socialIconMap[$networkId] ?? 'bi-share';
                                            $socialLabel = $socialLabelMap[$networkId] ?? ucfirst($networkId);
                                        @endphp
                                        @if(!empty($social['url']))
                                            <dt class="small text-muted">{{ $socialLabel }}</dt>
                                            <dd class="mb-3">
                                                <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer"
                                                   class="text-decoration-none text-primary"
                                                   aria-label="Seguir no {{ $socialLabel }} — abre em nova aba">
                                                    <i class="bi {{ $socialIcon }} me-1" aria-hidden="true"></i> Seguir
                                                </a>
                                            </dd>
                                        @endif
                                    @endforeach
                                @endif
                            </dl>
                        </div>
                    </div>

                    @if($instituicao->relationLoaded('tags') && $instituicao->tags->count() > 0)
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-white fw-bold text-primary"> 
                                <i class="bi bi-tags me-1 text-primary"> </i> Tags
                            </div>
                            <div class="card-body">
                                <div class="d-flex flex-wrap gap-2">
                                    @foreach($instituicao->tags as $tag)
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill">
                                            @if($tag->pivot->is_primary)
                                                <i class="bi bi-star-fill text-warning me-1"></i>
                                            @endif
                                            {{ $tag->name }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Gallery Modal --}}
    @if($galleryHasItems)
        @php
            $galleryItems = [];
            foreach ($instituicao->gallery as $item) {
                $galleryItems[] = $item->galleryMedia ? v2_storage_url($item->galleryMedia->file_path) : v2_storage_url($item->image);
            }
        @endphp
        <div class="modal fade" id="galleryModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content bg-dark border-0 rounded-0">
                    <div class="modal-header border-0 position-absolute top-0 end-0 z-3">
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body text-center p-0 position-relative">
                        <button type="button" class="btn btn-dark position-absolute start-0 top-50 translate-middle-y z-2 ms-2 gallery-prev" style="opacity:0.7;" aria-label="Imagem anterior">
                            <i class="bi bi-chevron-left fs-3"></i>
                        </button>
                        <button type="button" class="btn btn-dark position-absolute end-0 top-50 translate-middle-y z-2 me-2 gallery-next" style="opacity:0.7;" aria-label="Próxima imagem">
                            <i class="bi bi-chevron-right fs-3"></i>
                        </button>
                        <img src="{{ $galleryItems[0] }}" alt="Galeria" class="img-fluid w-100 gallery-modal-img" style="max-height:90vh;object-fit:contain;" loading="lazy" decoding="async">
                    </div>
                </div>
            </div>
        </div>

        @push('scripts')
        <script>
        (function() {
            var items = {!! json_encode($galleryItems) !!};
            var current = 0;
            var img = document.querySelector('.gallery-modal-img');
            var prev = document.querySelector('.gallery-prev');
            var next = document.querySelector('.gallery-next');

            document.querySelectorAll('.gallery-thumb').forEach(function(el) {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    current = parseInt(this.getAttribute('data-index'));
                    img.src = items[current];
                });
            });

            function show(idx) {
                current = (idx + items.length) % items.length;
                img.src = items[current];
            }

            if (prev) prev.addEventListener('click', function() { show(current - 1); });
            if (next) next.addEventListener('click', function() { show(current + 1); });

            document.addEventListener('keydown', function(e) {
                if (!document.getElementById('galleryModal').classList.contains('show')) return;
                if (e.key === 'ArrowLeft') show(current - 1);
                if (e.key === 'ArrowRight') show(current + 1);
            });
        })();
        </script>
        @endpush
    @endif
@endsection