@php
    // Group the staff by designation
    $staffsByDesignation = $staffs->flatMap(fn($group) => $group) // flatten all inner collections
                                  ->unique('id')                    // remove duplicate staff
                                  ->groupBy('designations');        // group by designation
@endphp

@foreach ($staffsByDesignation as $designation => $staffGroup)
    {{-- <h2 class="text-center mb-4">{{ $designation }}</h2> --}}

    @foreach ($staffGroup->chunk(4) as $chunk) <!-- chunk for rows of 4 -->
        <div class="row d-flex align-items-center justify-content-center g-5">
            @foreach ($chunk as $staff)
                <div class="col-lg-3 col-md-4">
                    <div class="mb-4 position-relative shine-animate-item">
                        <div class="shine-animate">
                            <img src="{{ asset($staff->image ?: 'default-image.jpg') }}"
                                 alt="{{ $staff->title }}"
                                 class="img-fluid" />
                        </div>
                        <div class="s-body p-3 d-flex flex-column align-items-center h-100 text-center bg-white z-20 overflow-hidden"
                             style="margin-top: -60px;">
                            <h3 class="text-uppercase fs-6 fwc-600 mb-0 text-custom-blue-dark2 position-relative z-20">
                                {{ $staff->title }}
                            </h3>
                            <p class="mb-0 position-relative z-20">{{ $staff->designations }}</p>
                            @if($staff->showappointment)
                                <p class="mb-0 fsc-8 position-relative z-20">
                                    @lang('language.appointmentdate') {{ getNepaliDate($staff->appointment_date) }}
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endforeach
@endforeach