@extends('layouts.master')

@section('title', $page->title . ' | ' . setting('site.title'))

@section('content')
    <!--begin::Content-->

    <style>
        /* Uniform partner logo size: fixed box, no distortion, letterboxed via object-fit. */
        .partner-logo-img {
            width: 160px;
            height: 90px;
            object-fit: contain;
        }
    </style>

    <div class="main-container">
        <section class="banner-container ">
            <div class="banner-title ">
                <div style="line-height: 1.1;">
                    <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
                </div>
            </div>
            <div style="height: 400px;" class="banner-image">
                <img src="{{ Voyager::image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
            </div>
        </section>

        <div class="container-fluid body-container">

            <div class="row pt-4 pb-4">
                <div class=" col-md-10 col-lg-10 col-xl-10 m-auto">
                    <div class="row">
                        <div class="col-md-12">
                            {{-- Partner-type tabs (All / Funder / Partners). Filtered client-side, no page reload. --}}
                            <section class="btns_section mb-3">

                                @foreach($tabs as $value => $label)
                                    <button type="button"
                                        data-type="{{ $value }}"
                                        class="btn5 btn partner-tab {{ $activeType === $value ? 'active' : '' }}"
                                        onclick="filterPartners('{{ $value }}', this)">
                                        {{ $label }}
                                    </button>
                                @endforeach

                            </section>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class=" col-md-10 col-lg-10 col-xl-10 m-auto">
                    <div class="row" id="our_partners">

                        {{-- CSS Grid (gap-based spacing) so row spacing is structural and immune to
                        the card reveal transforms — fixes the scroll "rows collapse/attach" bug.
                        All partners are rendered up front (no pagination); tabs just toggle
                        display:none client-side, matching whichever card's data-partner-type
                        fits the selected tab. --}}
                        @if($partners->count())
                            @foreach($partners as $partner)
                                @php $isVisible = $activeType === 'all' || $activeType === $partner->partner_type; @endphp
                                <div class="col-6 col-sm-6 col-md-3 partner-card" data-partner-type="{{ $partner->partner_type }}" @if(!$isVisible) style="display:none" @endif>
                                    <div class="anim w-100 h-100 d-flex justify-content-center text-center" style="align-items:center">
                                        <div class="w-100" style="margin-bottom:78px">

                                            <a href="{{ $partner->web_link ?: '#' }}"
                                               @if($partner->web_link) target="_blank" rel="noopener noreferrer" @endif
                                               class="partner-logo" data-cursor-text="View">
                                                @if($partner->logo_url)
                                                    <img class="imgfde partner-logo-img" id="imgfde_0" style="display: inline-block; " loading="lazy" src="{{ $partner->logo_url }}"
                                                         alt="{{ $partner->partner_name }} logo"
                                                         loading="lazy" decoding="async"
                                                    >
                                                @else
                                                    <h3 class="partner-name">{{ $partner->partner_name }}</h3>
                                                    <span class="partner-type-badge">{{ $partner->partner_type }}</span>
                                                    <span class="partner-logo-fallback">{{ $partner->partner_name }}</span>
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif

                        @php $initialVisibleCount = $activeType === 'all' ? $partners->count() : $partners->where('partner_type', $activeType)->count(); @endphp
                        <div id="no-partners-msg" class="section-title text-center" style="width:100%; {{ $initialVisibleCount ? 'display:none' : '' }}">
                            <h2 class="wow fadeInUp">No partners to show</h2>
                            <p class="wow fadeInUp">There are no {{ $activeType === 'all' ? '' : strtolower($activeType).' ' }}partners listed right now.</p>
                        </div>

                    </div>

                </div>
            </div>
        </div>

    </div>
    <!--end::Content-->
@endsection

@push('custom-js-scripts')
<script src="{{ asset('assets/js/partners-reveal.js') }}"></script>
<script>
    function filterPartners(type, btn) {
        document.querySelectorAll('.partner-tab').forEach(function (b) {
            b.classList.remove('active');
        });
        btn.classList.add('active');

        var anyVisible = false;
        document.querySelectorAll('#our_partners .partner-card').forEach(function (card) {
            var match = type === 'all' || card.dataset.partnerType === type;
            card.style.display = match ? '' : 'none';
            if (match) anyVisible = true;
        });

        var emptyMsg = document.getElementById('no-partners-msg');
        if (emptyMsg) {
            emptyMsg.style.display = anyVisible ? 'none' : '';
            var p = emptyMsg.querySelector('p');
            if (p) {
                var label = type === 'all' ? '' : (type.toLowerCase() + ' ');
                p.textContent = 'There are no ' + label + 'partners listed right now.';
            }
        }

    }
</script>
@endpush