@php
    $blockType = data_get($reduction, 'block_type.value');
    $position = data_get($reduction, 'position.value');
    $ctaUrl = data_get($reduction, 'cta_url.value');
    $ctaLabel = data_get($reduction, 'cta_label.value');
    $articleId = data_get($reduction, 'article_id.value');
    $reductionNews = $articleId ? \App\Models\News::find($articleId) : null;
    $visibility = data_get($reduction, 'visibility.value', true);
@endphp
<section id="commitments-tabs-texts" class="line-border-large bg-white py-5">
    <div class="container">
        <div class="row justify-content-between pb-4">
            <div class="position-relative col-12 col-xl-6 pe-xl-5">
                <div class="d-flex flex-column justify-content-center align-items-start h-100 pe-xl-5 mb-5 mb-xl-0">
                    <h2 class="text-start">{{ $title }}</h2>
                    <p class="text-start m-0">{{ $text }}</p>
                </div>
            </div>
            <div class="col-12 col-xl-6">
                <ul class="d-none d-sm-flex nav nav-pills" id="pills-tab" role="tablist">
                    @foreach ($collection as $key => $item)
                        <li class="nav-item" role="presentation">
                            <button @class(["btn btn-{$item->color} pb-4", 'active' => $loop->first]) id="commitment-eat-{{ $key }}-tab"
                                data-bs-toggle="pill" data-bs-target="#commitment-eat-{{ $key }}"
                                type="button" role="tab" aria-controls="commitment-eat-{{ $key }}"
                                aria-selected="{{ $loop->first ? 'true' : 'false' }}">{{ $item->name_onglet }}</button>
                        </li>
                    @endforeach
                </ul>
                <div class="tab-content" id="pills-tabContent">
                    @foreach ($collection as $key => $item)
                        <div @class(['tab-pane fade mt-5 mt-sm-0', 'show active' => $loop->first]) id="commitment-eat-{{ $key }}" role="tabpanel"
                            aria-labelledby="commitment-eat-{{ $key }}-tab" tabindex="0">
                            <div class="position-relative bottom-left-shadow">
                                <div
                                    class="border-0 bg-{{ $item->color }} line-border-small text-{{ $item->text_color }} w-100 h-100 p-3">
                                    <div class="row justify-content-start align-items-center w-100 mx-auto py-2">
                                        <div class="col-12 col-xl-8 d-flex align-items-center mb-2">
                                            <img class="img-fluid" src="{{ asset($item->picture->value) }}"
                                                alt="{{ $item->picture->alt }}" title="{{ $item->picture->title }}">
                                            <h4
                                                class="f-bourton-base text-{{ $item->text_color }} text-start ps-3 mb-0">
                                                {{ $item->title }}</h4>
                                        </div>
                                        <div class="col-12">
                                            {!! clean($item->description) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @if ($visibility)
            @include('fo.partials.block.reduction-card', [
                'news' => $reductionNews,
                'ctaUrl' => $ctaUrl ?? null,
                'ctaLabel' => $ctaLabel ?? null,
                'position' => $position,
                'blockType' => $blockType,
            ])
        @endif
    </div>
</section>