{{--
    Toggle/Switch Component - AdminLTE style
    
    Usage:
    <x-proxmox::ui.toggle wire:model="enabled" label="Enable Feature" />
--}}

@props([
    'label' => null,
    'description' => null,
    'disabled' => false,
])

<style>
    .toggle-wrapper-lte {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        cursor: pointer;
    }
    .toggle-wrapper-lte-disabled {
        cursor: not-allowed;
        opacity: 0.65;
    }
    .toggle-content-lte {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }
    .toggle-label-lte {
        font-size: 0.875rem;
        font-weight: 500;
        color: #495057;
    }
    .toggle-description-lte {
        font-size: 0.8125rem;
        color: var(--lte-secondary, #6c757d);
    }
    .toggle-switch-lte {
        position: relative;
        flex-shrink: 0;
    }
    .toggle-input-lte {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .toggle-track-lte {
        display: block;
        width: 2.75rem;
        height: 1.5rem;
        background-color: #dee2e6;
        border-radius: 9999px;
        border: 2px solid transparent;
        transition: background-color var(--lte-transition-speed, 0.3s) ease;
    }
    .toggle-input-lte:checked + .toggle-track-lte {
        background-color: var(--lte-primary, #0d6efd);
    }
    .toggle-input-lte:focus-visible + .toggle-track-lte {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    .toggle-input-lte:disabled + .toggle-track-lte {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .toggle-thumb-lte {
        position: absolute;
        top: 0.125rem;
        left: 0.125rem;
        width: 1.25rem;
        height: 1.25rem;
        background-color: #fff;
        border-radius: 9999px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform var(--lte-transition-speed, 0.3s) ease;
        pointer-events: none;
    }
    .toggle-input-lte:checked ~ .toggle-thumb-lte {
        transform: translateX(1.25rem);
    }
    /* Dark mode */
    .dark .toggle-label-lte {
        color: #d1d5db;
    }
    .dark .toggle-description-lte {
        color: #9ca3af;
    }
    .dark .toggle-track-lte {
        background-color: #374151;
    }
    .dark .toggle-input-lte:checked + .toggle-track-lte {
        background-color: var(--lte-primary, #0d6efd);
    }
</style>

<label {{ $attributes->only('class')->class(['toggle-wrapper-lte', 'toggle-wrapper-lte-disabled' => $disabled]) }}>
    @if($label || $description)
        <div class="toggle-content-lte">
            @if($label)
                <span class="toggle-label-lte">{{ $label }}</span>
            @endif
            @if($description)
                <p class="toggle-description-lte">{{ $description }}</p>
            @endif
        </div>
    @endif
    
    <div class="toggle-switch-lte">
        <input
            type="checkbox"
            {{ $attributes->whereDoesntStartWith('class')->merge(['disabled' => $disabled]) }}
            class="toggle-input-lte"
        />
        <div class="toggle-track-lte"></div>
        <div class="toggle-thumb-lte"></div>
    </div>
</label>