@props([
    'name', 
    'label' => null, 
    'checked' => false, 
    'value' => 1, 
    'onColor' => 'success', 
    'offColor' => 'danger', // Cambiado a danger por defecto para contraste
    'onText' => 'ACTIVO',   // Texto cuando está encendido
    'offText' => 'INACTIVO' // Texto cuando está apagado
])

@php
    // Generamos un ID único para evitar conflictos si hay varios switches
    $id = $attributes->get('id') ?? $name . '_' . uniqid();
    
    // Determinamos el estado inicial (para ediciones o validaciones fallidas)
    $isChecked = old($name, $checked);
    
    // Definimos el color y texto inicial según el estado
    $currentColor = $isChecked ? 'text-' . $onColor : 'text-' . $offColor;
    $currentText  = $isChecked ? $onText : $offText;
@endphp

<div class="form-group mb-0">
    {{-- Label superior opcional para alineación --}}
    @if($label)
        <label class="d-none d-md-block small font-weight-bold text-muted text-uppercase">&nbsp;</label>
    @endif
    
    <div class="custom-control custom-switch">
        {{-- TRUCO: Input oculto para enviar '0' si el switch está apagado --}}
        <input type="hidden" name="{{ $name }}" value="0">
        
        <input 
            type="checkbox" 
            class="custom-control-input @error($name) is-invalid @enderror" 
            id="{{ $id }}" 
            name="{{ $name }}" 
            value="{{ $value }}"
            {{ $isChecked ? 'checked' : '' }}
            {{-- Evento directo para manejar el cambio visual --}}
            onchange="toggleSwitchState('{{ $id }}', '{{ $onText }}', '{{ $offText }}', '{{ $onColor }}', '{{ $offColor }}')"
            {{ $attributes }}
        >
        
        <label class="custom-control-label font-weight-bold {{ $currentColor }}" 
               for="{{ $id }}" 
               id="label_{{ $id }}"
               style="cursor: pointer; transition: all 0.3s ease;">
            {{-- Si se pasó un label general, úsalo, sino usa el dinámico --}}
            {{ $label ?? $currentText }}
        </label>
    </div>

    @error($name)
        <span class="text-danger small mt-1 d-block font-weight-bold">
            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
        </span>
    @enderror
</div>

{{-- SCRIPT ÚNICO (Solo se define una vez, pero funciona para todos los switches) --}}
@once
    @push('js')
    <script>
        function toggleSwitchState(id, onText, offText, onColor, offColor) {
            const checkbox = document.getElementById(id);
            const label    = document.getElementById('label_' + id);
            
            // Si el label es estático (el usuario pasó un texto fijo en 'label'), no cambiamos texto
            // Pero aquí asumimos que queremos el efecto dinámico si no se pasó label fijo en el componente padre
            // Para este ejemplo, cambiaremos el texto del label asociado
            
            if (checkbox.checked) {
                // Estado ENCENDIDO
                label.textContent = onText;
                label.classList.remove('text-' + offColor);
                label.classList.add('text-' + onColor);
            } else {
                // Estado APAGADO
                label.textContent = offText;
                label.classList.remove('text-' + onColor);
                label.classList.add('text-' + offColor);
            }
        }
    </script>
    @endpush
@endonce

{{-- Estilos para hacer el switch un poco más grande y atractivo --}}
@once
    @push('css')
    <style>
        .custom-switch {
            padding-left: 2.5rem !important;
        }
        .custom-switch .custom-control-label::before {
            height: 1.5rem;
            width: 2.75rem;
            border-radius: 1rem;
            left: -2.5rem;
        }
        .custom-switch .custom-control-label::after {
            height: calc(1.5rem - 4px);
            width: calc(1.5rem - 4px);
            border-radius: 50%;
            left: calc(-2.5rem + 2px);
        }
        .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
            transform: translateX(1.25rem);
        }
    </style>
    @endpush
@endonce


{{-- 1. Caso Clásico (Activo/Inactivo): --}}

{{-- <x-form.switch name="activo" :checked="$producto->activo" /> --}}


{{-- Resultado: Un switch que cambia entre texto verde "ACTIVO" y rojo "INACTIVO".

2. Caso Personalizado (Visible en Web):
<x-form.switch 
    name="web" 
    onText="VISIBLE EN WEB" 
    offText="OCULTO EN WEB" 
    onColor="primary" 
    offColor="secondary" 
    :checked="$producto->web" 
/>

 --}}