{{-- componente de campo de texto para form --}}
@props([
	'class' => 'col-12 col-sm-12 col-md-auto',
	'id' => null,
	'name' => 'textfield',
	'tooltip' => null,
	'value' => null,
	'controlClass' => null,
	'controlProperties' => null,
	'placeholder' => null,
	'disabled' => false,
	'errorName' => $errorName ?? ($name ?? 'textfield'),	//nome do error Bag
	'helpText' => null, // texto que aparece abaixo do campo, small e muted
	'required' => false,
	'canAny' => null,
	'number' => false, // se true, o campo será do tipo number
	'confidential' => false, // se true cria caixa e icone em volta
	'mask' => null // mascara do campo. Opções: 'phone', 'zip'. Default null

])


@aware(['item' => null])

@if( ($canAny && Gate::any($canAny)) || !$canAny )

@php
	if(!isset($value)) {
		// popular padrão do campo
		$value = old($name) ?? (($item->$name) ?? null);
	}

	$propertiesArray = ['id' => $id ?? $name];

	if($controlProperties) {
		$propertiesArray += $controlProperties;
	}
	if($controlClass) {
		$propertiesArray += ['class' => "form-control ".$controlClass 
			. ($errors->has($errorName) ? ' is-invalid ' : '')
			. (($mask && strtolower($mask)=='phone') ? ' phoneField ' : '')
		];
	} else {
		$propertiesArray += ['class' => "form-control " 
			. ($errors->has($errorName) ? ' is-invalid ' : '')
			. (($mask && strtolower($mask)=='phone') ? ' phoneField ' : '')
		];
	}
	if( $placeholder ) {
		$propertiesArray += ['placeholder' => $placeholder];
	}

    // Detecta se é parte de um form liveWire
    $isLiveWire = collect($attributes->getAttributes())
        ->filter(fn($value, $key) => str_starts_with($key, 'wire:'))->isNotEmpty();
	$isLWPhoneMask = ($isLiveWire && $mask && strtolower($mask) == 'phone');
	$isZipMask = ($mask && strtolower($mask) == 'zip');

@endphp

{{-- JS para máscara - legacy/não livewire--}}
@if(!$isLiveWire)
	@section('scripts')
		@parent	
		@once
		<script type="text/javascript" src="/js/plugins/jquery.mask.min.js"></script>
		<script type="text/javascript">
			$( function () {
				var SPMaskBehaviorPhone = function (val) {
					return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
				};
				var spOptionsPhone = {
					onKeyPress: function (val, e, field, options) {
						field.mask(SPMaskBehaviorPhone.apply({}, arguments), options);
					}
				};
				$(".phoneField").mask(SPMaskBehaviorPhone, spOptionsPhone);
			});
		</script>
		<script type="text/javascript" src="/js/zipcode.js"></script>
		@endonce
	@endsection
@endif


@if($confidential)
<div class="alert alert-danger position-relative pt-0 pb-1 px-2 mx-1 {{$class}}" role="alert">
	<div class="form-row">
@endif

<div class="my-1 form-group @if(!$confidential){{$class}}@else col-12 @endif"
	@if($isLWPhoneMask) {{-- Lógica de masking com alpine.js para funcionar em campos dentro de forms livewire --}}
      x-data="{ phone: @entangle($id ?? $name).live, formatPhone() { let val = this.phone.replace(/\D/g, '');
	  if (val === '') { return; }
	  this.phone = val.length === 11 ? `(${val.slice(0,2)}) ${val.slice(2,7)}-${val.slice(7,11)}` : `(${val.slice(0,2)}) ${val.slice(2,6)}-${val.slice(6,10)}`; } }"
	   x-init="formatPhone()" x-effect="formatPhone()"
	@endif
>
	<label for="{{$name}}" class="col-12 p-0 mb-0 col-form-label @error($errorName) text-danger @enderror">
			{!! $slot !!} 
			@if($required)<span class="@error($errorName) text-danger @else text-info @enderror small">
				<i class="fa fa-asterisk" aria-hidden="true" data-bs-toggle="tooltip" data-placement="top" data-tooltip="tooltip" data-delay=400 
					data-html="true" title="<em>Campo obrigatório</em>"></i></span> 
			@endif 
			@if($tooltip)
				<i class="ml-1 fa-regular fa-circle-question small text-gray-400 tooltipBtn" 
					data-bs-toggle="tooltip" data-placement="top" data-tooltip="tooltip" data-delay=400 data-html="true" 
					title="{!! $tooltip . ($required ? '<br><em>Campo obrigatório</em>' :'') . ($confidential ? '<br><em>Campo confidencial</em>' :'') !!}" >
				</i> 
			@endif
			@if($confidential)<span class="badge badge-danger float-right"><i class="fas fa-key" aria-hidden="true" data-bs-toggle="tooltip" 
					data-placement="top" data-tooltip="tooltip" data-delay=400 
					data-html="true" title="<em>Campo confidencial</em>"></i></span> 
			@endif 
	</label>
	<div class="col-12 p-0">
		<input type="{{($number ? "number" : "text")}}" name="{{$name}}" value="{{$value}}" 
		  @foreach($propertiesArray as $key => $val) {{$key}}="{{$val}}" @endforeach {{$attributes}} 
		  @if($isLWPhoneMask) x-model="phone" x-on:input="formatPhone()" x-on:keypress="$event.key.match(/[0-9]/) ? true : $event.preventDefault()" @endif
		  @if($isZipMask) oninput="this.value = this.value.replace(/\D/g, '').replace(/^(\d{5})(\d{3})?$/, '$1-$2')" @endif
		  @if($disabled) disabled @endif>
		@if($helpText)
			<div class="col-12 p-0 small text-muted mb-0">
				{!! $helpText !!}
			</div>
		@endif
		<div class="col-12 p-0 small invalid-feedback mb-1">
			@error($errorName){!! $message !!} @enderror
		</div>
	</div>
</div>
@if($confidential)
	</div>
</div>
@endif

@endif {{-- eoCanany --}}