@php
    $achievementGalleries = getGalleriesByCategory(limit: null, order: 'asc', category: 'achievement');
    $institutions = getInstitutions(limit: null, order: 'asc');
@endphp
@extends('client.raffles.layouts.app')
@section('content')

@include('client.raffles.pages.partials.breadcumb')

    @isset($institutions)
        <section class="ps-12 pe-12 xl-ps-10 xl-pe-10 lg-ps-3 lg-pe-3 half-section" id="down-section">
            <div class="container-fluid">
                <div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 clients-style-06"
                    data-anime='{ "el": "childs", "scale": [0,1], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }'>
                    @foreach ($institutions as $institution)
                        <div class="col client-box text-center pt-6 pb-6 sm-pt-8 sm-pb-8">
                            <a href="javascript:void(0)"><img src="{{ $institution->image }}" class="h-80px md-h-60px sm-h-80px"
                                    alt="{{ $institution->title }}"></a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endisset

    @if ($achievementGalleries->galleries->isNotEmpty())
        <section id="down-section bg-solitude-blue">
            <div class="container-fluid">
                <div class="row justify-content-center mb-2">
                    <div class="col-xxl-4 col-xl-5 col-lg-6 col-sm-8 text-center"
                        data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                        <span
                            class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px">{{ setting('title') }}</span>
                        <h3 class="alt-font text-dark-gray fw-600 ls-minus-1px mb-0">{{ $page->short_description }}</h3>
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="row align-items-center justify-content-center" data-anime='{ " perspective": 1200 }'>
                    @foreach ($achievementGalleries->galleries as $achievement)
                        <div class="col-lg-6 md-mb-40px"
                            data-anime='{ "translateY": [0, 0], "zoom": [1.1, 1], "rotateX": [50, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
                            <figure class="position-relative m-0">
                                <img src="{{ $achievement->images[0] }}" alt="" class="w-100 border-radius-5px">
                            </figure>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

@endsection