@props(['name', 'label', 'value' => null, 'required' => false, 'help' => null, 'options' => []])

<div class="form-group mb-3">
    <label class="form-label fw-semibold mb-4 block">
        {{ $label }}
        @if ($required)
            <span class="text-danger ms-1">*</span>
        @endif
        @if ($help)
            <i class="fas fa-info-circle ms-1" data-bs-toggle="tooltip" data-bs-placement="top"
                title="{{ $help }}"></i>
        @endif
    </label>

    <div class="radio-group">
        @foreach ($options as $optionValue => $optionLabel)
            <div class="form-check me-4">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="radio"
                           id="{{ $name }}_{{ $loop->index }}"
                           name="{{ $name }}"
                           value="{{ $optionValue }}"
                           class="sr-only peer @error($name) is-invalid @enderror"
                           {{ old($name, $value) == $optionValue ? 'checked' : '' }}
                           {{ $required ? 'required' : '' }}>

                    <div class="relative w-10 h-5 bg-gray-300 peer-focus:outline-none rounded-full peer
                                peer-checked:after:translate-x-5 peer-checked:after:border-white
                                after:content-[''] after:absolute after:top-[2px] after:left-0.5
                                after:bg-white after:border-gray-300 after:border after:rounded-full
                                after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600
                                peer-focus:ring-4 peer-focus:ring-blue-300">
                    </div>

                    <span class="ml-3 text-gray-700">{{ $optionLabel }}</span>
                </label>
            </div>
        @endforeach
    </div>

    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror

    @if ($help && !$errors->has($name))
        <div class="form-text text-muted">{{ $help }}</div>
    @endif
</div>

<style>
    .form-label {
        color: var(--bs-gray-700);
        margin-bottom: 0.5rem;
    }

    .radio-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-check {
        display: flex;
        align-items: center;
        padding-left: 0;
    }

    /* Custom toggle switch styles */
    .radio-group input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .radio-group .relative {
        position: relative;
    }

    .radio-group .w-10 {
        width: 2.5rem;
    }

    .radio-group .h-5 {
        height: 1.25rem;
    }

    .radio-group .bg-gray-300 {
        background-color: #d1d5db;
        transition: background-color 0.3s ease;
    }

    .radio-group .rounded-full {
        border-radius: 9999px;
    }

    .radio-group .after\:content-\[\'\'\]::after {
        content: '';
    }

    .radio-group .after\:absolute::after {
        position: absolute;
    }

    .radio-group .after\:top-\[2px\]::after {
        top: 2px;
    }

    .radio-group .after\:left-0\.5::after {
        left: 2px;
    }

    .radio-group .after\:bg-white::after {
        background-color: white;
    }

    .radio-group .after\:border-gray-300::after {
        border-color: #d1d5db;
    }

    .radio-group .after\:border::after {
        border-width: 1px;
    }

    .radio-group .after\:rounded-full::after {
        border-radius: 9999px;
    }

    .radio-group .after\:h-4::after {
        height: 1rem;
    }

    .radio-group .after\:w-4::after {
        width: 1rem;
    }

    .radio-group .after\:transition-all::after {
        transition: all 0.3s ease;
    }

    .radio-group input:checked + div {
        background-color: #2563eb;
    }

    .radio-group input:checked + div::after {
        transform: translateX(1.25rem);
        border-color: white;
    }

    .radio-group input:focus + div {
        outline: none;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3);
    }

    .radio-group .ml-3 {
        margin-left: 0.75rem;
    }

    .radio-group .text-gray-700 {
        color: #374151;
    }

    /* Invalid state */
    .radio-group input.is-invalid + div {
        border-color: var(--bs-danger);
    }

    .radio-group input.is-invalid:focus + div {
        box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), 0.3);
    }

    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: var(--bs-danger);
    }

    .form-text {
        margin-top: 0.25rem;
        font-size: 0.875em;
        color: var(--bs-gray-600);
    }

    /* Responsive design */
    @media (min-width: 576px) {
        .radio-group {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
    }
</style>