@php
    $locale = $locale ?? 'en';
    $rtl = $rtl ?? false;
    $prevIcon = $rtl ? 'fa-arrow-right-long' : 'fa-arrow-left-long';
    $nextIcon = $rtl ? 'fa-arrow-left-long' : 'fa-arrow-right-long';

    $slides = $homeSliders ?? [];
    if (! is_array($slides)) {
        $slides = [];
    }

    $slideHref = function (array $slide) use ($locale): string {
        $raw = trim((string) data_get($slide, 'anchor', ''));
        if ($raw === '') {
            return '#';
        }
        if (\Illuminate\Support\Str::startsWith($raw, ['http://', 'https://'])) {
            return $raw;
        }

        return url($raw);
    };

    $slideImage = function (array $slide, int $i): string {
        $img = trim((string) data_get($slide, 'image', ''));
        if ($img === '') {
            return asset('assets/images/' . (($i % 3) + 1) . '.jpeg');
        }
        if (\Illuminate\Support\Str::startsWith($img, ['http://', 'https://'])) {
            return $img;
        }

        return asset($img);
    };
@endphp

<div class="hero-right hero-slide-right">
    <div class="slider-frame">
        <div id="serviceSlider" class="carousel slide service-slider" data-bs-ride="carousel" data-bs-interval="3600">
            <div class="carousel-indicators">
                @forelse ($slides as $i => $slide)
                    @php $slide = is_array($slide) ? $slide : []; @endphp
                    <button type="button" data-bs-target="#serviceSlider" data-bs-slide-to="{{ $i }}" class="{{ $i === 0 ? 'active' : '' }}" @if($i === 0) aria-current="true" @endif aria-label="Slide {{ $i + 1 }}"></button>
                @empty
                    @for ($i = 0; $i < 3; $i++)
                        <button type="button" data-bs-target="#serviceSlider" data-bs-slide-to="{{ $i }}" class="{{ $i === 0 ? 'active' : '' }}" @if($i === 0) aria-current="true" @endif aria-label="Slide {{ $i + 1 }}"></button>
                    @endfor
                @endforelse
            </div>

            <div class="carousel-inner">
                @forelse ($slides as $i => $slide)
                    @php
                        $slide = is_array($slide) ? $slide : [];
                        $heading = data_get($slide, 'heading');
                        $icon = filled(trim((string) data_get($slide, 'icon'))) ? data_get($slide, 'icon') : 'fa-solid fa-circle';
                        $img = $slideImage($slide, $i);
                    @endphp
                    <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                        <a href="{{ $slideHref($slide) }}" class="service-slide-link">
                            <div class="service-slide">
                                <img src="{{ $img }}" alt="{{ $heading ?: 'Service' }}">
                                <div class="slide-overlay">
                                    <div class="slide-chip interactive">
                                        <div class="chip-icon"><i class="{{ $icon }}"></i></div>
                                        <div class="chip-text">
                                            @if(filled(trim((string) $heading)))
                                                <strong style="font-size: 1.3rem;">{{ $heading }}</strong>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @empty
                    @if ($locale === 'ar')
                        <div class="carousel-item active">
                            <a href="{{ route('candidates.profiles') }}" class="service-slide-link">
                                <div class="service-slide">
                                    <img src="{{ asset('assets/images/1.jpeg') }}" alt="كفالة عائلية">
                                    <div class="slide-overlay">
                                        <div class="slide-chip interactive">
                                            <div class="chip-icon"><i class="fa-solid fa-house-user"></i></div>
                                            <div class="chip-text">
                                                <strong style="font-size: 1.3rem;">كفالة عائلية</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="carousel-item">
                            <a href="{{ route('candidates.profiles') }}" class="service-slide-link">
                                <div class="service-slide">
                                    <img src="{{ asset('assets/images/2.jpeg') }}" alt="كفالة شركة">
                                    <div class="slide-overlay">
                                        <div class="slide-chip interactive">
                                            <div class="chip-icon"><i class="fa-solid fa-building"></i></div>
                                            <div class="chip-text">
                                                <strong style="font-size: 1.3rem;">كفالة شركة</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="carousel-item">
                            <a href="{{ route('maid.visa') }}" class="service-slide-link">
                                <div class="service-slide">
                                    <img src="{{ asset('assets/images/3.jpeg') }}" alt="تأشيرة خادمة">
                                    <div class="slide-overlay">
                                        <div class="slide-chip interactive">
                                            <div class="chip-icon"><i class="fa-solid fa-passport"></i></div>
                                            <div class="chip-text">
                                                <strong style="font-size: 1.3rem;">تأشيرة خادمة</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @else
                        <div class="carousel-item active">
                            <a href="{{ route('candidates.profiles') }}" class="service-slide-link">
                                <div class="service-slide">
                                    <img src="{{ asset('assets/images/1.jpeg') }}" alt="Family Sponsorship Service">
                                    <div class="slide-overlay">
                                        <div class="slide-chip interactive">
                                            <div class="chip-icon"><i class="fa-solid fa-house-user"></i></div>
                                            <div class="chip-text">
                                                <strong style="font-size: 1.3rem;">Full Time Live-In (Family Sponsorship)</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="carousel-item">
                            <a href="{{ route('candidates.profiles') }}" class="service-slide-link">
                                <div class="service-slide">
                                    <img src="{{ asset('assets/images/2.jpeg') }}" alt="Company Sponsorship Service">
                                    <div class="slide-overlay">
                                        <div class="slide-chip interactive">
                                            <div class="chip-icon"><i class="fa-solid fa-building"></i></div>
                                            <div class="chip-text">
                                                <strong style="font-size: 1.3rem;">Full Time Live-In (TADBEER Sponsorship)</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="carousel-item">
                            <a href="{{ route('maid.visa') }}" class="service-slide-link">
                                <div class="service-slide">
                                    <img src="{{ asset('assets/images/3.jpeg') }}" alt="Maid Visa Service">
                                    <div class="slide-overlay">
                                        <div class="slide-chip interactive">
                                            <div class="chip-icon"><i class="fa-solid fa-passport"></i></div>
                                            <div class="chip-text">
                                                <strong style="font-size: 1.3rem;">Maid Visa Services</strong>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endif
                @endforelse
            </div>

            <button class="carousel-control-prev" type="button" data-bs-target="#serviceSlider" data-bs-slide="prev" aria-label="Previous slide">
                <span class="nav-arrow interactive"><i class="fa-solid {{ $prevIcon }}"></i></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#serviceSlider" data-bs-slide="next" aria-label="Next slide">
                <span class="nav-arrow interactive"><i class="fa-solid {{ $nextIcon }}"></i></span>
            </button>
        </div>
    </div>
</div>
