@extends('layouts.app-layout')

@section('title', 'Detalle de unidad - ' . config('app.name'))
@section('navbar_suffix', 'Unidades')

@section('content')
    @php
        use App\Enums\CantidadPersonasEnum;
        use App\Enums\FuncionarioRolEnum;
        use App\Enums\RolEnEmpresaEnum;
        use App\Enums\UserStatusEnum;

        $direccion = $unidadAtencion->direccion;
        $user = auth()->user();
        $contactoActual = $user?->contacto;
        $esFuncionarioAdmin = $user?->funcionario
            && $user->funcionario->estado === UserStatusEnum::ACTIVO
            && $user->funcionario->rol === FuncionarioRolEnum::ADMIN;

        $rolPivot = $contactoActual
            ? $contactoActual->unidadesAtencion()->whereKey($unidadAtencion->id)->first()?->pivot?->rol_en_empresa
            : null;

        $esTitular = $rolPivot instanceof RolEnEmpresaEnum
            ? $rolPivot === RolEnEmpresaEnum::TITULAR
            : $rolPivot === RolEnEmpresaEnum::TITULAR->value;

        $puedeGestionarContactos = $esTitular || $esFuncionarioAdmin;
        $estadoLabel = $unidadAtencion->estado_formalizacion
            ? str_replace('_', ' ', $unidadAtencion->estado_formalizacion)
            : 'Sin definir';
        $tipoLabel = $unidadAtencion->tipo_unidad ? ucfirst($unidadAtencion->tipo_unidad) : 'Sin definir';
        $cantidadLabel = CantidadPersonasEnum::tryFrom($unidadAtencion->cantidad_personas ?? '')?->label() ?? 'Sin definir';
        $canales = $unidadAtencion->canalVentas ?? collect();

        $mostrarFormularioContacto = $puedeGestionarContactos
            && (
                $errors->has('contacto_id')
                || $errors->has('rol_en_empresa')
                || $errors->has('unidad_atencion_id')
                || old('contacto_id')
                || old('rol_en_empresa')
            );
    @endphp

    <div class="container py-4">
        <div id="unidades-toasts" class="position-fixed top-0 end-0 p-3 d-grid gap-2" style="z-index:1080;max-width:380px;">
            @if(session('success'))
                <div class="alert alert-success border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3 js-auto-toast">
                    <i class="bi bi-check-circle-fill"></i>
                    <span class="small fw-semibold">{{ session('success') }}</span>
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger border-0 shadow rounded-3 mb-0 d-flex align-items-center gap-2 py-2 px-3 js-auto-toast">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <span class="small fw-semibold">{{ session('error') }}</span>
                </div>
            @endif
        </div>

        <div class="card border shadow-sm rounded-4 mb-3 bg-body-tertiary bg-gradient">
            <div class="card-body p-3 p-md-4">
                <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                    <div class="d-flex align-items-start gap-3">
                        <a href="{{ route('unidades-atencion.index') }}"
                           class="btn btn-outline-secondary btn-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-36 flex-shrink-0"
                           title="Volver al listado">
                            <i class="bi bi-arrow-left"></i>
                        </a>
                        <div>
                            <p class="text-muted small mb-1 text-uppercase ui-letter-08">Unidad de atencion</p>
                            <h1 class="h4 fw-bold mb-1">{{ $unidadAtencion->nombre_comercial }}</h1>
                            <p class="text-muted mb-0 small">{{ $unidadAtencion->descripcion ?: 'Sin descripcion registrada.' }}</p>
                        </div>
                    </div>

                    @if($esTitular || $esFuncionarioAdmin)
                        <a href="{{ route('unidades-atencion.edit', $unidadAtencion) }}"
                           class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-34 flex-shrink-0"
                           title="Editar datos de la unidad">
                            <i class="bi bi-pencil text-primary"></i>
                        </a>
                    @endif
                </div>

                <div class="d-flex flex-wrap gap-2">
                    <span class="badge rounded-pill text-primary-emphasis bg-primary-subtle border border-primary-subtle px-3 py-2 fw-semibold d-inline-flex align-items-center gap-1">
                        <i class="bi bi-diagram-3"></i>
                        <span>{{ $tipoLabel }}</span>
                    </span>
                    <span class="badge rounded-pill text-primary-emphasis bg-primary-subtle border border-primary-subtle px-3 py-2 fw-semibold d-inline-flex align-items-center gap-1">
                        <i class="bi bi-patch-check"></i>
                        <span class="text-capitalize">{{ $estadoLabel }}</span>
                    </span>
                    <span class="badge rounded-pill text-primary-emphasis bg-primary-subtle border border-primary-subtle px-3 py-2 fw-semibold d-inline-flex align-items-center gap-1">
                        <i class="bi bi-people"></i>
                        <span>{{ $cantidadLabel }}</span>
                    </span>
                </div>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="col-12 col-lg-8">
                <div class="card border shadow-sm rounded-4 h-100 bg-body-tertiary bg-gradient">
                    <div class="card-body p-3 p-md-4">
                        <h2 class="h6 fw-bold mb-3">Informacion general</h2>

                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="d-grid gap-1">
                                    <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Razon social</span>
                                    <span>{{ $unidadAtencion->razon_social ?? '—' }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-grid gap-1">
                                    <span class="small text-muted text-uppercase fw-semibold ui-letter-08">RUT</span>
                                    <span>{{ $unidadAtencion->rut ?? '—' }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-grid gap-1">
                                    <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Rubro CIU</span>
                                    <span>{{ $unidadAtencion->rubro_ciu ?? '—' }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-grid gap-1">
                                    <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Ano de inicio</span>
                                    <span>{{ $unidadAtencion->anio_inicio ?? '—' }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-grid gap-1">
                                    <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Ventas</span>
                                    <span>{{ $unidadAtencion->ventas ?? '—' }}</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-grid gap-1">
                                    <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Canales de venta</span>
                                    <span>{{ $canales->map(fn($canal) => $canal->nombre)->implode(', ') ?: '—' }}</span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-grid gap-1 pt-1">
                                    <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Observaciones</span>
                                    <span>{{ $unidadAtencion->observaciones ?: 'Sin observaciones.' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-4">
                <div class="card border shadow-sm rounded-4 h-100 bg-body-tertiary bg-gradient">
                    <div class="card-body p-3 p-md-4">
                        <h2 class="h6 fw-bold mb-3">Direccion</h2>

                        @if($direccion)
                            <div class="d-grid gap-1 mb-2">
                                <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Departamento</span>
                                <span>{{ $direccion->departamento ?? '—' }}</span>
                            </div>
                            <div class="d-grid gap-1 mb-2">
                                <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Localidad</span>
                                <span>{{ $direccion->localidad ?? '—' }}</span>
                            </div>
                            <div class="d-grid gap-1 mb-2">
                                <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Calle</span>
                                <span>{{ $direccion->calle ?? '—' }}</span>
                            </div>
                            <div class="d-grid gap-1 mb-2">
                                <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Numero de puerta</span>
                                <span>{{ $direccion->numero_puerta ?? '—' }}</span>
                            </div>
                            <div class="d-grid gap-1">
                                <span class="small text-muted text-uppercase fw-semibold ui-letter-08">Codigo postal</span>
                                <span>{{ $direccion->codigo_postal ?? '—' }}</span>
                            </div>
                        @else
                            <div class="border rounded-3 bg-body text-muted small d-flex align-items-center justify-content-center gap-2 text-center py-4 px-3">
                                <i class="bi bi-geo-alt"></i>
                                <span>Sin direccion registrada.</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card border shadow-sm rounded-4 bg-body-tertiary bg-gradient">
            <div class="card-body p-3 p-md-4">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                    <div>
                        <h2 class="h6 fw-bold mb-1">Equipo de la unidad</h2>
                        <p class="text-muted small mb-0">{{ $unidadAtencion->contactos->count() }} contacto(s) asociado(s).</p>
                    </div>

                    @if($puedeGestionarContactos)
                        <button class="btn btn-outline-primary btn-sm d-inline-flex align-items-center gap-2"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#agregarContactoCollapse"
                                aria-expanded="{{ $mostrarFormularioContacto ? 'true' : 'false' }}"
                                aria-controls="agregarContactoCollapse"
                                id="toggle-agregar-contacto">
                            <i class="bi bi-plus-lg"></i>
                            <span>Agregar contacto</span>
                        </button>
                    @endif
                </div>

                @if($puedeGestionarContactos)
                    <div class="collapse @if($mostrarFormularioContacto) show @endif" id="agregarContactoCollapse">
                        <div class="border rounded-3 p-3 mb-3 bg-body-tertiary">
                            <form action="{{ route('contactos.attach-to-unit') }}" method="POST" novalidate>
                                @csrf

                                <input type="hidden" id="lookup-cedula-url-unidad-show" value="{{ route('contactos.lookup-cedula') }}">
                                <input type="hidden" name="unidad_atencion_id" value="{{ $unidadAtencion->id }}">

                                <div class="row g-3 align-items-start">
                                    <div class="col-12 col-xl-5">
                                        <label for="cedula_lookup_unidad_show" class="form-label small text-muted mb-2">Buscar por cedula</label>
                                        <div class="input-group">
                                            <input type="text"
                                                   id="cedula_lookup_unidad_show"
                                                   class="form-control"
                                                   placeholder="Ingresa la cedula"
                                                   autocomplete="off">
                                            <button class="btn btn-outline-primary d-inline-flex align-items-center justify-content-center"
                                                    type="button"
                                                    id="buscar-cedula-unidad-show"
                                                    aria-label="Buscar contacto por cedula"
                                                    title="Buscar contacto"
                                                    style="width:42px;">
                                                <i class="bi bi-search"></i>
                                            </button>
                                        </div>
                                        <div class="form-text">Solo se aceptan coincidencias exactas.</div>
                                        <div class="invalid-feedback d-block d-none" id="cedula-error-unidad-show"></div>
                                    </div>

                                    <div class="col-12 col-xl-4">
                                        <label for="contacto_encontrado_unidad_show" class="form-label small text-muted mb-2">Contacto encontrado</label>
                                        <div class="form-control bg-white" id="contacto_encontrado_unidad_show">
                                            {{ old('contacto_id') ? 'Contacto seleccionado' : '—' }}
                                        </div>
                                        <input type="hidden" name="contacto_id" id="contacto_id_unidad_show" value="{{ old('contacto_id') }}">
                                        <input type="hidden" id="crear-contacto-base-url-unidad-show" value="{{ route('contactos.create') }}">
                                        <div class="pt-2">
                                            <a href="#"
                                               class="btn btn-outline-success btn-sm d-none"
                                               id="crear-contacto-link-unidad-show">
                                                <i class="bi bi-person-plus me-1"></i>Crear contacto nuevo
                                            </a>
                                        </div>
                                        @error('contacto_id')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-xl-3">
                                        <label for="rol_en_empresa_unidad_show" class="form-label small text-muted mb-2">Rol en la unidad</label>
                                        <select name="rol_en_empresa"
                                                id="rol_en_empresa_unidad_show"
                                                class="form-select @error('rol_en_empresa') is-invalid @enderror"
                                                required>
                                            <option value="">Seleccionar</option>
                                            <option value="titular" @selected(old('rol_en_empresa') === 'titular')>Titular</option>
                                            <option value="socio" @selected(old('rol_en_empresa') === 'socio')>Socio/a</option>
                                            <option value="encargado" @selected(old('rol_en_empresa') === 'encargado')>Encargado/a</option>
                                            <option value="otro" @selected(old('rol_en_empresa') === 'otro')>Otro</option>
                                        </select>
                                        @error('rol_en_empresa')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                @error('unidad_atencion_id')
                                    <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                                @enderror

                                <div class="pt-3">
                                    <button type="submit" class="btn btn-success" id="agregar-contacto-btn-unidad-show" disabled>
                                        <i class="bi bi-plus-circle me-2"></i>Agregar contacto
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endif

                @if($unidadAtencion->contactos->isEmpty())
                    <div class="border rounded-3 bg-body text-muted small d-flex align-items-center justify-content-center gap-2 text-center py-4 px-3">
                        <i class="bi bi-people"></i>
                        <span>Sin contactos asociados por el momento.</span>
                    </div>
                @else
                    <div class="d-flex flex-column gap-2">
                        @foreach($unidadAtencion->contactos as $contactoUnidad)
                            @php
                                $userContacto = $contactoUnidad->user;
                                $nombre = $userContacto->nombre ?? 'Sin nombre';
                                $apellido = $userContacto->apellido ?? '';
                                $cedula = $userContacto->cedula ?? 'N/A';
                                $email = $userContacto->email ?? 'N/A';
                                $telefono = $userContacto->telefono ?? 'N/A';
                                $iniciales = strtoupper(mb_substr($nombre, 0, 1) . mb_substr($apellido, 0, 1));

                                $rolEnEmpresa = $contactoUnidad->pivot?->rol_en_empresa;
                                $rolEnEmpresaValue = $rolEnEmpresa instanceof RolEnEmpresaEnum ? $rolEnEmpresa->value : $rolEnEmpresa;

                                $rolLabel = match($rolEnEmpresaValue) {
                                    'titular' => 'Titular',
                                    'socio' => 'Socio/a',
                                    'encargado' => 'Encargado/a',
                                    'otro' => 'Otro',
                                    default => '-'
                                };

                                $esElMismo = $contactoActual?->id === $contactoUnidad->id;
                                $puedeRemover = $puedeGestionarContactos && ! $esElMismo;
                            @endphp

                            <div class="border rounded-3 p-3 d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3 bg-body">
                                <div class="rounded-circle d-inline-flex align-items-center justify-content-center fw-bold text-primary border border-primary-subtle bg-primary-subtle flex-shrink-0"
                                     style="width:42px;height:42px;"
                                     title="{{ $nombre }} {{ $apellido }}">
                                    {{ $iniciales }}
                                </div>

                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center flex-wrap gap-2 mb-1">
                                        <span class="fw-semibold">{{ $nombre }} {{ $apellido }}</span>
                                        <span class="badge text-bg-light border">{{ $rolLabel }}</span>
                                        @if($contactoUnidad->estado === UserStatusEnum::INACTIVO)
                                            <span class="badge bg-warning text-dark">Suspendido</span>
                                        @endif
                                    </div>

                                    <div class="d-flex flex-wrap gap-3 text-muted small">
                                        <span class="d-inline-flex align-items-center gap-1"><i class="bi bi-credit-card-2-front"></i>{{ $cedula }}</span>
                                        <span class="d-inline-flex align-items-center gap-1"><i class="bi bi-envelope"></i>{{ $email }}</span>
                                        <span class="d-inline-flex align-items-center gap-1"><i class="bi bi-telephone"></i>{{ $telefono }}</span>
                                    </div>
                                </div>

                                <div class="d-flex align-items-center gap-2 ms-md-auto">
                                    <a href="{{ route('contactos.show', $contactoUnidad) }}"
                                       class="btn btn-light btn-sm border shadow-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-34"
                                       title="Ver contacto">
                                        <i class="bi bi-eye text-primary"></i>
                                    </a>

                                    @if($puedeRemover)
                                        <button type="button"
                                                class="btn btn-outline-danger btn-sm rounded-circle d-flex align-items-center justify-content-center ui-icon-btn-34"
                                                title="Remover de unidad"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteModalremove-show-{{ $contactoUnidad->id }}">
                                            <i class="bi bi-person-dash"></i>
                                        </button>
                                    @endif
                                </div>
                            </div>

                            @if($puedeRemover)
                                <x-delete-confirmation-modal
                                    :id="'remove-show-' . $contactoUnidad->id"
                                    title="Remover contacto de la unidad"
                                    :entity-name="$nombre . ' ' . $apellido"
                                    :entity-data="[
                                        'iniciales' => $iniciales,
                                        'subtitle' => 'CI: ' . $cedula,
                                        'details' => [
                                            '<i class=\'bi bi-envelope me-1\'></i> ' . $email,
                                            '<i class=\'bi bi-telephone me-1\'></i> ' . $telefono,
                                            '<i class=\'bi bi-person-badge me-1\'></i> ' . $rolLabel,
                                        ],
                                    ]"
                                    warning-message="Esta accion removera al contacto de esta unidad de atencion. El contacto seguira existiendo en el sistema y podra ser agregado nuevamente si es necesario."
                                    :route="route('contactos.remove-from-unit', [$contactoUnidad, $unidadAtencion])"
                                    button-text="Remover de unidad"
                                    :show-avatar="true"
                                    method="DELETE"
                                />
                            @endif
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const toasts = Array.from(document.querySelectorAll('#unidades-toasts .js-auto-toast'));
            if (!toasts.length) return;

            toasts.forEach((toast, index) => {
                setTimeout(() => {
                    toast.style.transition = 'opacity .35s ease';
                    toast.classList.add('opacity-0');
                    setTimeout(() => toast.remove(), 360);
                }, 2300 + (index * 250));
            });
        })();

        (() => {
            const collapseElement = document.getElementById('agregarContactoCollapse');
            const toggleButton = document.getElementById('toggle-agregar-contacto');
            const toggleIcon = toggleButton?.querySelector('i');

            if (collapseElement && toggleIcon) {
                const syncIcon = (expanded) => {
                    toggleIcon.classList.toggle('bi-plus-lg', !expanded);
                    toggleIcon.classList.toggle('bi-dash-lg', expanded);
                };

                syncIcon(collapseElement.classList.contains('show'));
                collapseElement.addEventListener('shown.bs.collapse', () => syncIcon(true));
                collapseElement.addEventListener('hidden.bs.collapse', () => syncIcon(false));
            }
        })();

        (() => {
            const lookupUrl = document.getElementById('lookup-cedula-url-unidad-show')?.value;
            const createUrl = document.getElementById('crear-contacto-base-url-unidad-show')?.value;
            const cedulaInput = document.getElementById('cedula_lookup_unidad_show');
            const lookupButton = document.getElementById('buscar-cedula-unidad-show');
            const contactoIdInput = document.getElementById('contacto_id_unidad_show');
            const unidadIdInput = document.querySelector('input[name="unidad_atencion_id"]');
            const rolSelect = document.getElementById('rol_en_empresa_unidad_show');
            const createLink = document.getElementById('crear-contacto-link-unidad-show');
            const contactoEncontrado = document.getElementById('contacto_encontrado_unidad_show');
            const errorBox = document.getElementById('cedula-error-unidad-show');
            const submitButton = document.getElementById('agregar-contacto-btn-unidad-show');
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

            if (!lookupUrl || !createUrl || !cedulaInput || !lookupButton || !contactoIdInput || !unidadIdInput || !rolSelect || !createLink || !contactoEncontrado || !errorBox || !submitButton) {
                return;
            }

            const toggleCreateLink = (show) => {
                createLink.classList.toggle('d-none', !show);
            };

            const syncSubmitState = () => {
                submitButton.disabled = !contactoIdInput.value;
            };

            const resetSelection = () => {
                contactoIdInput.value = '';
                contactoEncontrado.textContent = '—';
                toggleCreateLink(false);
                syncSubmitState();
            };

            const setCreateLink = (cedula) => {
                const params = new URLSearchParams({
                    cedula,
                    unidad_atencion_id: unidadIdInput.value,
                    rol_en_empresa: rolSelect.value || 'titular',
                });
                createLink.href = `${createUrl}?${params.toString()}`;
                toggleCreateLink(true);
            };

            const setNotFoundCandidate = (cedula) => {
                contactoIdInput.value = '';
                contactoEncontrado.textContent = 'No existe en sistema.';
                setCreateLink(cedula);
                syncSubmitState();
            };

            const showError = (message) => {
                errorBox.textContent = message;
                errorBox.classList.remove('d-none');
                resetSelection();
            };

            const clearError = () => {
                errorBox.textContent = '';
                errorBox.classList.add('d-none');
            };

            const handleLookup = async () => {
                const cedula = cedulaInput.value.trim();

                clearError();

                if (!cedula) {
                    showError('Ingresa una cedula para buscar.');
                    return;
                }

                lookupButton.disabled = true;

                try {
                    const response = await fetch(lookupUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken || '',
                        },
                        body: JSON.stringify({ cedula }),
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (response.status === 404) {
                        if (payload?.can_create) {
                            clearError();
                            setNotFoundCandidate(cedula);
                            return;
                        }
                        showError(payload.error || 'Contacto no encontrado o no disponible.');
                        return;
                    }

                    if (response.status === 422) {
                        const mensajeValidacion = payload?.errors?.cedula?.[0];
                        showError(payload.error || mensajeValidacion || 'No puedes realizar esta accion.');
                        return;
                    }

                    if (response.status === 403) {
                        showError(payload.error || 'No tienes permiso para esta accion.');
                        return;
                    }

                    if (!response.ok) {
                        showError(payload.error || payload.message || 'Error al buscar. Intenta nuevamente.');
                        return;
                    }

                    const { id, nombre, apellido } = payload;
                    if (!id || !nombre) {
                        showError('Respuesta invalida del servidor.');
                        return;
                    }

                    clearError();
                    contactoIdInput.value = id;
                    toggleCreateLink(false);
                    contactoEncontrado.textContent = `${nombre} ${apellido}`.trim();
                    syncSubmitState();
                } catch (error) {
                    showError('Hubo un problema al buscar. Intenta nuevamente.');
                    console.error('Lookup error:', error);
                } finally {
                    lookupButton.disabled = false;
                }
            };

            lookupButton.addEventListener('click', handleLookup);
            cedulaInput.addEventListener('keydown', (event) => {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    handleLookup();
                }
            });
            cedulaInput.addEventListener('input', () => {
                resetSelection();
                clearError();
            });
            rolSelect.addEventListener('change', () => {
                const cedulaActual = cedulaInput.value.trim();
                if (!createLink.classList.contains('d-none') && cedulaActual) {
                    setCreateLink(cedulaActual);
                }
            });

            syncSubmitState();
        })();
    </script>
@endpush