@php
    $gridDirection = $getGridDirection() ?? 'row';
    $hasInlineLabel = $hasInlineLabel();
    $id = $getId();
    $isDisabled = $isDisabled();
    $isInline = $isInline();
    $isMultiple = $isMultiple();
    $statePath = $getStatePath();
@endphp

<div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
    <x-dynamic-component
        :component="$getFieldWrapperView()"
        :field="$field"
        :has-inline-label="$hasInlineLabel"
    >
        <x-slot
            name="label"
            @class([
                'sm:pt-1.5' => $hasInlineLabel,
            ])
        >
            {{ $getLabel() }}
        </x-slot>

        <div @class([
                'flex justify-center gap-6',
                'flex-wrap' => count($getPackages()) > 3
            ])
        >
            @foreach ($getPackages() as $value => $data)
                @php
                    $inputId = "{$id}-{$value}";
                    $shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $data['libelle'] ?? $value);
                @endphp

                <div
                    {{--                    class="p-4 rounded-xl cursor-pointer bg-gray-100"--}}
                    class="basis-1/2 p-4 rounded-xl cursor-pointer bg-gray-100 md:basis-1/3"
                    x-on:click="state = @js($value)"
                    x-bind:class="
                        state === @js($value)
                        ? 'ring-2 ring-primary-600 scale-105 transition-all duration-150'
                        : 'ring-1 ring-gray-300'
                    "
                    for="{{ $inputId }}"
                >
                    <label for="{{ $inputId }}">
                        <input
                            @disabled($shouldOptionBeDisabled)
                            id="{{ $inputId }}"
                            @if (! $isMultiple)
                                name="{{ $id }}"
                            @endif
                            type="{{ $isMultiple ? 'checkbox' : 'radio' }}"
                            value="{{ $value }}"
                            wire:loading.attr="disabled"
                        {{ $applyStateBindingModifiers('wire:model') }}="{{ $statePath }}"
                        {{ $getExtraInputAttributeBag()->class(['peer pointer-events-none absolute opacity-0']) }}
                        />
                    </label>
                    <div>
                        <h3 class="text-xl font-semibold leading-8 text-gray-900">
                            {{ $data['libelle'] }}
                        </h3>
                        <p class="mt-4 text-[13px] tracking-tight leading-tight text-gray-600">
                            {{ $data['description'] }}
                        </p>
                        <p class="my-4 flex items-baseline gap-x-1">
                            <span class="text-[22px] font-bold tracking-tight text-gray-900">
                                {{ \Illuminate\Support\Number::currency($data['prix'], in: 'XAF', locale: 'fr') }}
                            </span>
                            {{--                            <span class="text-sm font-semibold leading-6 text-gray-600">/mois</span>--}}
                        </p>
                        <ul role="list" class="space-y-3 text-sm leading-6 text-gray-600 xl:mt-4">
                            @foreach($data['valeursOptions'] as $feature)
                                <li class="flex gap-x-1.5">
                                    <x-filament::icon
                                        icon="heroicon-s-check-circle"
                                        class="mt-px size-[18px] text-primary-600"
                                    />
                                    <span class="leading-tight tracking-tight text-[13px]">
                                        {{ $feature['valeur'] }} {{ $feature['option_abonnement'] }}
                                    </span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endforeach

        </div>
    </x-dynamic-component>
</div>