<div class="d-flex flex-column gap-5">

    <div class="d-flex flex-wrap gap-4 align-items-baseline">
        <x-secondary-button class="pe-4" wire:click="showStep('resume-step')">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24"
                 height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                 stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M15 6l-6 6l6 6"/>
            </svg>
            Retour
        </x-secondary-button>
        <h4 class='step-header'>Votre maison est-elle équipée d'une alimentation monophasée ou triphasée ?</h4>
    </div>

    <div>
        <div class="d-flex gap-4" x-data="{
                        value: @entangle("type_courant"),
                        select(option){
                            this.value = option;
                            $wire.set('type_courant', option);
                        },
                        isSelected(option) { return this.value === option },
                    }">

            <x-card-checkbox title="Monophasé"
                             description="220 volts"
                             img_path="img/monophase.svg"
                             :value="\App\Enums\TypeCourantsEnum::MONOPHASE->value"/>

            <x-card-checkbox title="Triphasé"
                             description="380 volts"
                             img_path="img/triphase.svg"
                             :value="\App\Enums\TypeCourantsEnum::TRIPHASE->value"/>
        </div>

        @error('type_courant')
            <div class="text-danger mt-2">{{ $message }}</div>
        @enderror
    </div>


    <script>
        // Ajouter un gestionnaire d'événements pour chaque carte
        document.querySelectorAll('.card').forEach(function(card, index) {
            card.addEventListener('click', function(event) {
                // Inverser l'état de la classe de sélection lorsque l'on clique sur n'importe quelle partie de la carte
                card.classList.toggle('card-selected');

                // Trouver l'icône de la case à cocher à l'intérieur de la carte
                const checkboxIcon = card.querySelector('.custom-checkbox');

                // Inverser l'état de l'affichage de l'icône en utilisant une classe différente
                checkboxIcon.classList.toggle('checkbox-visible');

                // Empêcher la propagation de l'événement pour éviter la double inversion de la classe
                event.stopPropagation();
            });
        });
    </script>
</div>
