@extends('admin.template_LFv2')

@section('content')
<div class="container">
    <div class="row">

		<div class="col-12">
			@if (session('success'))
				<div class="alert alert-success">
					{{ session('success') }}
				</div>
			@endif

			@if ($errors->any())
				<div class="alert alert-danger">
					Revise los campos del formulario.
				</div>
			@endif
		</div>

        <form method="POST" action="{{ route('usuarios.update', $usuario) }}" class="form-horizontal">
            @csrf
            @method('PUT')

            <h2 class="destacado mb-1">Datos de Usuario</h2>

                <h2 class="line mb-4">1. Información Personal</h2>
                <div class="row">
                    <div class="col-12 col-md-6">
                        <label class="form-label">País</label>
                        <select
                            id="pais_id"
                            name="pais_id"
                            class="form-select @error('pais_id') is-invalid @enderror"
                            required
                        >
                            <option value="">Seleccione país</option>
                            @foreach ($paises as $pais)
                                <option
                                    value="{{ $pais->id }}"
                                    data-code="{{ $pais->iso ?? $pais->codigo ?? $pais->id }}"
                                    @selected(old('pais_id', $usuario->pais_id) == $pais->id)
                                >
                                    {{ $pais->nombre }}
                                </option>
                            @endforeach
                        </select>

                        @error('pais_id')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6">
                        <label id="identificacionLabel" class="form-label">Documento de Identificación</label>
                        <input
                            type="text"
                            id="pasaporte"
                            name="pasaporte"
                            value="{{ old('pasaporte', $usuario->pasaporte) }}"
                            class="form-control @error('pasaporte') is-invalid @enderror"
                            required
                        >

                        @error('pasaporte')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                        <p>
                            <small class="text-muted">
                                Para el RUT, ingrese solo números, guion y la letra k. Ejemplo: 12345678-5 o 7617343-k
                            </small>
                        </p>

                    </div>

                    <div class="col-12 col-md-6 py-2">
                        <label class="form-label">Nombres</label>
                        <input
                            name="nombres"
                            value="{{ old('nombres', $usuario->nombres) }}"
                            class="form-control @error('nombres') is-invalid @enderror"
                            required
                            data-sanitize="true"
                        >
                        @error('nombres')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 py-2">
                        <label class="form-label">Apellidos</label>
                        <input
                            name="apellidos"
                            value="{{ old('apellidos', $usuario->apellidos) }}"
                            class="form-control @error('apellidos') is-invalid @enderror"
                            required
                            data-sanitize="true"
                        >
                        @error('apellidos')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 py-2">
                        <label class="form-label">Nacionalidad</label>
                        <select
                            name="nacionalidad"
                            class="form-select @error('nacionalidad') is-invalid @enderror"
                            required
                        >
                            <option value="">Seleccione país</option>
                            @foreach ($paises as $pais)
                                <option
                                    value="{{ $pais->id }}"
                                    @selected(old('nacionalidad', $usuario->nacionalidad) == $pais->id)
                                >
                                    {{ $pais->nombre }}
                                </option>
                            @endforeach
                        </select>

                        @error('nacionalidad')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 py-2">
                        <label class="form-label">E-Mail</label>
                        <input
                            type="email"
                            name="email"
                            value="{{ old('email', $usuario->email) }}"
                            class="form-control @error('email') is-invalid @enderror"
                            required
                            data-sanitize="email"
                        >
                        @error('email')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6 py-2">
                        <label class="form-label">Teléfono</label>
                        <input
                            name="telefono"
                            value="{{ old('telefono', $usuario->telefono) }}"
                            class="form-control @error('telefono') is-invalid @enderror"
                            autocomplete="off"
                            data-sanitize="tel"
                        >
                        @error('telefono')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 py-2">
                        <label class="form-label">Otro medio de contacto</label>
                        <textarea
                            name="otro_contacto"
                            class="form-control @error('otro_contacto') is-invalid @enderror"
                            data-sanitize="true"
                        >{{ old('otro_contacto', $usuario->otro_contacto) }}</textarea>

                        @error('otro_contacto')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <hr class="line">

                    <div class="col-12">
                        <x-auth.password-fields
                            password-label="Nueva contraseña"
                            confirmation-label="Repetir contraseña"
                            :required="false"
                        />
                        <small class="text-muted d-block mb-2">
                            Dejar en blanco si no desea cambiar la contraseña.
                        </small>
                        @error('password')
                            <small class="text-danger d-block">{{ $message }}</small>
                        @enderror
                        @error('password_confirmation')
                            <small class="text-danger d-block">{{ $message }}</small>
                        @enderror
                    </div>

                </div>

                @if (auth()->user()->root)
                    <br>

                    <h2 class="line mb-4">2. Administración</h2>

                    <div class="col-12 py-2">
                        <input type="hidden" name="contraloria" value="0">
                        <input
                            id="usuarioContraloria"
                            type="checkbox"
                            name="contraloria"
                            value="1"
                            @checked(old('contraloria', $usuario->contraloria))
                        >
                        <label for="usuarioContraloria" class="form-label">Contraloría</label>

                        @error('contraloria')
                            <small class="text-danger d-block">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="col-12 py-2">
                        <input type="hidden" name="root" value="0">
                        <input
                            id="usuarioRoot"
                            type="checkbox"
                            name="root"
                            value="1"
                            @checked(old('root', $usuario->root))
                        >
                        <label for="usuarioRoot" class="form-label">Súper Administrador</label>

                        @error('root')
                            <small class="text-danger d-block">{{ $message }}</small>
                        @enderror
                    </div>
                @endif

                <div class="col-12 my-2 text-right">
                    <button type="submit" class="btn btn-primary">Actualizar datos</button>
                </div>

        </form>

    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const paisSelect = document.getElementById('pais_id');
    const identificacion = document.getElementById('pasaporte');
    const label = document.getElementById('identificacionLabel');

    if (!paisSelect || !identificacion || !label) {
        return;
    }

    function esChileSeleccionado() {
        const option = paisSelect.options[paisSelect.selectedIndex];
        const code = (option?.dataset?.code || '').toUpperCase();
        const name = (option?.dataset?.name || '').toUpperCase();

        return code === 'CHL' || name === 'CHILE';
    }

    function refreshIdentificacion() {
        if (esChileSeleccionado()) {
            label.textContent = 'RUT';
            identificacion.placeholder = 'Ej. 12345678-5';
            identificacion.setAttribute('pattern', '[0-9\\-k]+');
            identificacion.setAttribute('title', 'Ingrese solo números, guion y la letra k. Ejemplo: 12345678-5');
            identificacion.setAttribute('maxlength', '10');
        } else {
            label.textContent = 'Pasaporte / Identificación';
            identificacion.placeholder = 'N° Pasaporte o identificación';
            identificacion.removeAttribute('pattern');
            identificacion.removeAttribute('title');
            identificacion.setAttribute('maxlength', '30');
        }
    }

    identificacion.addEventListener('input', function () {
        if (esChileSeleccionado()) {
            this.value = this.value.replace(/[^0-9\-k]/g, '');
        }
    });

    paisSelect.addEventListener('change', refreshIdentificacion);
    refreshIdentificacion();
});
</script>
@endpush