@props(['name', 'checked' => false])
<div x-data="{ toggle: {{ $checked ? 'true':'false'}} }" class="flex items-center">
    <label {{ $attributes->merge(['class'=>'relative inline-flex items-center cursor-pointer']) }}>{{ $slot }}
        <input type="checkbox" x-model="toggle" name="{{ $name }}" class="sr-only" {{ $checked ? 'checked':''}} value="1" >
        <div :class="toggle ? 'bg-indigo-600' : 'bg-gray-200'" class="w-11 h-6 rounded-full transition-colors duration-300"></div>
        <div :class="toggle ? 'translate-x-6' : 'translate-x-1'" class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-300"></div>
    </label>
    @error($name)
    <p class="text-xs text-red-500 font-semibold mt-1 ml-3">{{ $message }}</p>
    @enderror
</div>