@php
    /** @var \Illuminate\Pagination\LengthAwarePaginator $parceiros */
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => 'Parceiros — ' . config('app.name'),
    'pageDescription'       => 'Conheça os parceiros e apoiadores institucionais.',
    'gtag'                  => ['page_context' => 'parceiros-institucionais'],
    'schemas'               => [
        [
            '@context' => 'https://schema.org',
            '@type' => 'CollectionPage',
            'name' => 'Parceiros',
            'description' => 'Conheça os parceiros e apoiadores institucionais.',
            'url' => route('v2.parceiros-institucionais.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('{{ asset('assets/sucesu/img/hero/breadcrumb.png') }}');">
    <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>Parceiros</li>
            </ul>
            <h1>Parceiros</h1>
        </div>
    </div>
</div>

{{-- PARTNERS GRID --}}
<section class="team-section section-padding section-bg">
    <div class="container">
        @if($parceiros->count() > 0)
            <div class="row g-4">
                @foreach($parceiros as $parceiro)
                    @php $logo = $parceiro->galleryLogo; @endphp
                    <div class="col-md-6 d-flex">
                        <div class="team-box-items mt-0 parceiro-card h-100 w-100 d-flex flex-column"
                             data-id="{{ $parceiro->id }}"
                             data-bs-toggle="modal"
                             data-bs-target="#parceiroModal">
                            <div class="team-img align-items-stretch flex-grow-1">
                                @if($logo && $logo->file_path)
                                    @include('v2-service-media::components.picture', [
                                        'originalPath' => $logo->file_path,
                                        'variants'     => $logo->variants ?? [],
                                        'alt'          => $logo->alt_text ?: $parceiro->name,
                                        'class'        => 'parceiro-logo',
                                        'lazy'         => true,
                                    ])
                                @else
                                    <div class="parceiro-logo-placeholder">
                                        <i class="bi bi-building display-4 text-muted"></i>
                                    </div>
                                @endif
                                <div class="team-content d-flex flex-column flex-grow-1">
                                    <h3 class="mb-2">{{ $parceiro->name }}</h3>
                                    <p class="text-muted small mb-2 flex-grow-1">{{ $parceiro->summary ?: str_limit(strip_tags($parceiro->getHtmlDescription()), 250) }}</p>
                                    @php
                                        $socialLinks = $parceiro->metadata['social_media'] ?? [];
                                        $socialIconMap = [
                                            'site'      => 'bi-globe2',
                                            'linkedin'  => 'bi-linkedin',
                                            'instagram' => 'bi-instagram',
                                            'facebook'  => 'bi-facebook',
                                            'twitter'   => 'bi-twitter-x',
                                            'youtube'   => 'bi-youtube',
                                            'whatsapp'  => 'bi-whatsapp',
                                            'telegram'  => 'bi-telegram',
                                            'tiktok'    => 'bi-tiktok',
                                        ];
                                    @endphp
                                    @if(!empty($socialLinks))
                                        <div class="d-flex justify-content-center gap-2 mt-auto pt-2">
                                            @foreach($socialLinks as $social)
                                                @if(!empty($social['url']) && ($social['active'] ?? true))
                                                    <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer"
                                                       class="parceiro-social-icon" title="{{ ucfirst($social['network'] ?? '') }}"
                                                       aria-label="{{ ucfirst($social['network'] ?? '') }} — abre em nova aba"
                                                       onclick="event.stopPropagation();">
                                                        <i class="bi {{ $social['icon'] ?? ($socialIconMap[$social['network'] ?? ''] ?? 'bi-link-45deg') }}" aria-hidden="true"></i>
                                                    </a>
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            @if($parceiros->hasPages())
                <div class="mt-5">
                    {{ $parceiros->appends(request()->except('page'))->links('v2-portal::partials.pagination') }}
                </div>
            @endif
        @else
            <div class="text-center py-5">
                <i class="bi bi-people display-1 text-muted d-block mb-3"></i>
                <h2 class="h4 fw-bold text-muted">Nenhum parceiro cadastrado</h2>
                <p class="text-muted">Em breve divulgaremos nossos parceiros.</p>
            </div>
        @endif
    </div>
</section>

{{-- DETAIL MODAL --}}
<div class="modal fade" id="parceiroModal" tabindex="-1" role="dialog" aria-modal="true" aria-labelledby="parceiroModalLabel" 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="parceiroModalLabel" class="visually-hidden">Detalhes do parceiro</span>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body pt-0" id="parceiroModalBody">
                <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

@push('head-styles')
<style>
.parceiro-card {
    cursor: pointer;
    transition: all .3s ease;
    border-radius: 12px;
    overflow: hidden;
}
.parceiro-card .parceiro-logo,
.parceiro-card .parceiro-logo-placeholder {
    flex-shrink: 0;
    align-self: flex-start;
}
.parceiro-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
.parceiro-logo {
    width: 185px;
    height: 185px;
    object-fit: contain;
    padding: 20px;
    margin: 0 auto;
    display: block;
}
.parceiro-logo-placeholder {
    width: 185px;
    height: 185px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 0.5rem;
}
.parceiro-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #6c757d;
    transition: all .2s ease;
}
.parceiro-social-icon:hover {
    background: #e9ecef;
    color: var(--tenant-primary, #1075ad);
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    var detalheUrlBase = '{{ route('v2.parceiros-institucionais.portal.detalhe', ['id' => '__ID__']) }}';

    $('#parceiroModal').on('show.bs.modal', function(event) {
        var card = $(event.relatedTarget);
        var id = card.data('id');
        var url = detalheUrlBase.replace('__ID__', id);

        $.get(url, function(html) {
            $('#parceiroModalBody').html(html);
            // After modal content loaded:
            var modalEl = document.getElementById('parceiroModal');
            if (modalEl) {
                var firstFocusable = modalEl.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])');
                if (firstFocusable) setTimeout(function() { firstFocusable.focus(); }, 200);
            }
        }).fail(function() {
            $('#parceiroModalBody').html(
                '<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 parceiro.</p></div>'
            );
        });
    });
});
</script>
@endpush