@php
    $prepostoChecked = old('checkPrepostoEmpresa', isset($preposto)) ? true : false;
@endphp
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" name="checkPrepostoEmpresa" id="checkPrepostoEmpresa" {{ $prepostoChecked ? 'checked' : '' }}>
    <label class="form-check-label" for="checkPrepostoEmpresa">
        {{ __('Autorizo esta pessoa a representar minha empresa durante a minha ausência.') }}
        <span class="preposto-required text-danger d-none">*</span>
    </label>
</div>

<div class="row">
    <div class="col-sm-12 col-md-8">
        @include('components.inputs._inputType',[
            'for' => null,
            'label' => __('Nome completo do preposto'),
            'name' => 'fullNamePrepostoEmpresa',
            'id' => 'fullNamePrepostoEmpresa',
            'required' => false,
            'type' => null,
            'old' => old('fullNamePrepostoEmpresa', $preposto->name ?? null),
            'oninput' => "javascript:this.value = this.value.toLocaleUpperCase('pt-BR').replace(/[^\\p{L}\\s]+/gu, '').replace(/\\s{2,}/g,' ').trimStart()",
            'readonly' => false,
            'small' => null,
        ])
        <span class="preposto-required text-danger d-none">*</span>
    </div>
    <div class="col-sm-12 col-md-4">
        @include('components.inputs._inputType',[
            'for' => null,
            'label' => __('CPF do preposto'),
            'name' => 'cpfPrepostoEmpresa',
            'id' => 'cpfPrepostoEmpresa',
            'required' => false,
            'type' => null,
            'old' => old('cpfPrepostoEmpresa', $preposto->cpf ?? null),
            'oninput' => "javascript:aplicarMascaraCPF(this)",
            'readonly' => false,
            'small' => null,
        ])
        <span class="preposto-required text-danger d-none">*</span>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-4">
        @include('components.inputs._inputType',[
            'for' => null,
            'label' => __('Email do preposto'),
            'name' => 'emailPrepostoEmpresa',
            'id' => 'emailPrepostoEmpresa',
            'required' => false,
            'type' => 'email',
            'old' => old('emailPrepostoEmpresa', $preposto->email ?? null),
            'oninput' => "javascript:this.value = this.value.toLowerCase()",
            'readonly' => false,
            'small' => null,
            'placeholder' => 'nome@email.com',
        ])
        <span class="preposto-required text-danger d-none">*</span>
    </div>
    <div class="col-sm-12 col-md-4">
        @include('components.inputs._inputType',[
            'for' => null,
            'label' => __('Telefone do preposto'),
            'name' => 'phoneNumberPrepostoEmpresa',
            'id' => 'phoneNumberPrepostoEmpresa',
            'required' => false,
            'type' => null,
            'old' => old('phoneNumberPrepostoEmpresa', $preposto->phoneNumber ?? null),
            'oninput' => "javascript:aplicarMascaraTelefone(this)",
            'readonly' => false,
            'small' => null,
        ])
        <span class="preposto-required text-danger d-none">*</span>
    </div>
    <div class="col-sm-12 col-md-4">
        @include('components.inputs._inputType',[
            'for' => null,
            'label' => __('Foto do preposto'),
            'name' => 'photoPrepostoEmpresa',
            'id' => 'photoPrepostoEmpresa',
            'required' => false,
            'type' => 'file',
            'old' => null,
            'oninput' => null,
            'readonly' => true,
            'small' => null,
            'accept' => 'image/jpeg,image/jpg,image/png,image/gif',
        ])
    </div>
</div>

<script>
    (function () {
        const toggle = document.getElementById('checkPrepostoEmpresa');
        const fields = [
            'fullNamePrepostoEmpresa',
            'cpfPrepostoEmpresa',
            'emailPrepostoEmpresa',
            'phoneNumberPrepostoEmpresa',
        ];
        const requiredBadges = document.querySelectorAll('.preposto-required');
        const cpfResp = document.getElementById('cpfResponsavelEmpresa');
        const cpfPrep = document.getElementById('cpfPrepostoEmpresa');
        const cpfGlobalAlert = document.getElementById('prepostoCpfAlert');

        function digits(value) {
            return (value || '').replace(/\D/g, '');
        }

        function validateCpfDifferent() {
            if (!cpfResp || !cpfPrep) return;
            const enable = toggle?.checked;
            const same = enable && digits(cpfResp.value) && digits(cpfResp.value) === digits(cpfPrep.value);
            cpfPrep.classList.toggle('is-invalid', !!same);
            cpfPrep.setCustomValidity(same ? '{{ __("O CPF do preposto deve ser diferente do CPF do responsável.") }}' : '');
            if (cpfGlobalAlert) {
                cpfGlobalAlert.classList.toggle('d-none', !same);
            }
        }

        function syncPrepostoRequired() {
            const enable = toggle?.checked;
            requiredBadges.forEach(badge => badge.classList.toggle('d-none', !enable));
            fields.forEach(id => {
                const el = document.getElementById(id);
                if (!el) return;
                if (enable) {
                    el.setAttribute('required', 'required');
                } else {
                    el.removeAttribute('required');
                    el.classList.remove('is-invalid');
                    el.setCustomValidity('');
                }
            });
            validateCpfDifferent();
        }

        if (toggle) {
            toggle.addEventListener('change', syncPrepostoRequired);
            syncPrepostoRequired();
        }
        if (cpfPrep) {
            cpfPrep.addEventListener('input', validateCpfDifferent);
        }
        if (cpfResp) {
            cpfResp.addEventListener('input', validateCpfDifferent);
        }
    })();
</script>