@extends(getTemplate().'.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
@endpush

@php
    $spHero = view('web.default.pages.partials.simple_banner_hero_inner', [
        'bannerTitle' => $bannerTitle ?? $title,
        'bannerDescription' => $bannerDescription ?? null,
    ])->render();
@endphp

@section('content')
    @include('web.default.includes.premium.page_hero', [
        'variant' => 'image',
        'backgroundUrl' => $bannerImage ?? '/store/1/default_images/category_cover.png',
        'backgroundAlt' => $bannerTitle ?? $title ?? '',
        'title' => '',
        'kicker' => $title ?? '',
        'extra' => $spHero,
    ])

    <div class="container">
        <!-- المؤسسات Section -->
        @if($showInstitutions ?? true)
        <section class="mt-50">
            <div class="d-flex justify-content-between align-items-center mb-30">
                <div>
                    <h2 class="font-24 text-dark-blue font-weight-bold">المؤسسات</h2>
                    <span class="font-14 text-gray">{{ $institutionsCount }} مؤسسة</span>
                </div>
            </div>

            <form action="/{{ $page }}" method="get" class="mb-30">
                <div class="search-input bg-white p-10 shadow-lg border border-gray300 rounded-sm">
                    <div class="form-group d-flex align-items-center m-0">
                        <input type="text" name="search_inst" class="form-control border-0" value="{{ request()->get('search_inst') }}" placeholder="ابحث عن مؤسسة..."/>
                        <button type="submit" class="btn btn-primary rounded-pill">بحث</button>
                    </div>
                </div>
            </form>

            <div class="row mt-20">
                @forelse($institutions as $institution)
                    <div class="col-12 col-md-6 col-lg-4">
                        <div class="d-flex flex-column align-items-center text-center rounded-lg shadow-sm border p-20 h-100">
                            <div class="w-100 d-flex justify-content-center mb-15">
                                <img src="{{ $institution['logo'] ?? '/store/1/default_images/category_cover.png' }}" alt="{{ $institution['name'] ?? '' }}" class="img-cover" style="max-width: 400px; max-height: 260px; object-fit: contain;">
                            </div>
                            <h3 class="font-18 text-dark-blue font-weight-bold mb-5">{{ $institution['name'] ?? '' }}</h3>
                            @if(!empty($institution['country']))
                                <span class="font-14 text-gray">{{ $institution['country'] }}</span>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="text-center py-50">
                            <p class="font-16 text-gray">لا توجد مؤسسات متاحة</p>
                        </div>
                    </div>
                @endforelse
            </div>

        </section>
        @endif
    </div>

@endsection

@push('scripts_bottom')
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>
@endpush

