{{-- text input --}}
@php
    $value = old_empty_or_null($field['name'], '') ?? ($field['value'] ?? ($field['default'] ?? ''));
    $isempty = empty($value);
@endphp

@include('crud::fields.inc.wrapper_start')

<div class="d-flex flex-stack mb-2">
    <div class="me-5">
        <label class="fs-6 fw-semibold">{!! $field['label'] !!}</label>
    </div>
    <label class="form-check form-switch form-check-custom form-check-solid">
        <input type="hidden" name="{{ $field['name'] }}" value="{{ $isempty ? 0 : 1 }}" />
        <input type="checkbox" data-init-function="bpFieldInitHiddenInputText" class="form-check-input" />
        <span class="form-check-label fw-semibold text-muted" data-checked="{{ $field['onLabel'] ?? '' }}"
            data-unchecked="{{ $field['offLabel'] ?? '' }}">Oui</span>
        </span>
    </label>
</div>
<div class="hiddentext" id="container_{{ $field['name'] }}">
    <input type="text" name="{{ $field['name'] }}"
        value="{{ old_empty_or_null($field['name'], '') ?? ($field['value'] ?? ($field['default'] ?? '')) }}"
        @include('crud::fields.inc.attributes')>
</div>

{{-- HINT --}}
@if (isset($field['hint']))
    <p class="help-block">{!! $field['hint'] !!}</p>
@endif
@include('crud::fields.inc.wrapper_end')


@push('crud_fields_scripts')
    @loadOnce('bpFieldInitHiddenInputText')
        <script>
            function bpFieldInitHiddenInputText($element) {
                console.log("bpFieldInitHiddenInputText");
                let element = $element[0];
                let hiddenElement = element.previousElementSibling;
                let targetContainer = hiddenElement.parentElement.parentElement.nextElementSibling;

                // set unique IDs so that labels are correlated with inputs
                let id = `switch_${hiddenElement.name}_${Math.random() * 1e18}`;
                element.setAttribute('id', id);
                element.parentElement.previousElementSibling.firstElementChild.setAttribute('for', id);

                // set initial checked/unchecked state
                hiddenElement.value !== '0' ?
                    element.setAttribute('checked', true) :
                    element.removeAttribute('checked');
                hiddenElement.value !== '0' ?
                    $(targetContainer).show() :
                    $(targetContainer).hide();

                $element.on('change', () => {
                    hiddenElement.value = element.checked ? 1 : 0;
                    console.log(hiddenElement.value);
                    console.log(targetContainer);
                    hiddenElement.dispatchEvent(new Event('change'));
                    hiddenElement.value !== '0' ?
                        $(targetContainer).show() :
                        $(targetContainer).hide();
                });
            }
        </script>
    @endLoadOnce
@endpush