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

<div class="form-group input-with-label">
    <label class="form-label fw-semibold">
        {{ $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="checkbox-group">
        @if($single)
            <!-- Single checkbox -->
            <div class="form-check">
                <input
                    type="checkbox"
                    id="{{ $name }}"
                    name="{{ $name }}"
                    value="1"
                    class="form-check-input @error($name) is-invalid @enderror"
                    {{ old($name, $value) ? 'checked' : '' }}
                    {{ $required ? 'required' : '' }}
                >
                <label for="{{ $name }}" class="form-check-label">
                    {{ $options[0] ?? $label }}
                </label>
            </div>
        @else
            <!-- Multiple checkboxes -->
            @foreach($options as $optionValue => $optionLabel)
                <div class="form-check">
                    <input
                        type="checkbox"
                        id="{{ $name }}_{{ $loop->index }}"
                        name="{{ $name }}[]"
                        value="{{ $optionValue }}"
                        class="form-check-input @error($name) is-invalid @enderror"
                        {{ is_array(old($name, $value)) && in_array($optionValue, old($name, $value)) ? 'checked' : '' }}
                        {{ $required && $loop->first ? 'required' : '' }}
                    >
                    <label for="{{ $name }}_{{ $loop->index }}" class="form-check-label">
                        {{ $optionLabel }}
                    </label>
                </div>
            @endforeach
        @endif
    </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>

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.form-check-input {
    margin-top: 0;
    margin-right: 0.5rem;
    margin-left: 0;
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-label {
    margin-bottom: 0;
    cursor: pointer;
    color: var(--bs-gray-700);
}

.form-check-input.is-invalid {
    border-color: var(--bs-danger);
}

.form-check-input.is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.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);
}

@media (min-width: 576px) {
    .checkbox-group {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .form-check {
        margin-right: 1rem;
        margin-bottom: 0.5rem;
    }
}
</style>