@extends('layouts.app')

@section('title', 'Detalle de Ticket - ERP LOGÍSTICO')
@section('header_title', 'Detalle de Incidencia')

@section('styles')
<style>
    .timeline-item {
        position: relative;
        padding-left: 30px;
        padding-bottom: 25px;
        border-left: 2px solid #ebedf3;
    }
    .timeline-item:last-child {
        border-left: 2px solid transparent;
        padding-bottom: 0;
    }
    .timeline-badge {
        position: absolute;
        left: -9px;
        top: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #fff;
        border: 3px solid #ccc;
        z-index: 1;
    }
    .timeline-badge.bg-ingresado { border-color: #0095ff; background-color: #e1f0ff; }
    .timeline-badge.bg-en_proceso { border-color: #ff9f43; background-color: #fff4de; }
    .timeline-badge.bg-resuelto { border-color: #1bc5bd; background-color: #c9f7f5; }
    .timeline-badge.bg-no_resuelto { border-color: #f64e60; background-color: #ffe2e5; }
    .timeline-badge.bg-cerrado { border-color: #3f4254; background-color: #e2e5ec; }
    .timeline-badge.bg-eliminado { border-color: #7e8299; background-color: #f3f6f9; }

    .ticket-img {
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: transform 0.2s ease;
    }
    .ticket-img:hover {
        transform: scale(1.02);
        cursor: pointer;
    }
    .card-workflow {
        background: linear-gradient(135deg, #ffffff 0%, #fcfdfe 100%);
        border-left: 4px solid var(--accent-color);
    }
</style>
@endsection

@section('content')
<div class="row mb-4">
    <div class="col-12 d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center gap-3">
            @if(request('kpi') == '1')
                <a href="{{ route('tickets.dashboard') }}" class="btn btn-outline-secondary btn-sm px-3">
                    <i class="bi bi-arrow-left"></i> Volver al Dashboard
                </a>
            @else
                <a href="{{ route('tickets.index') }}" class="btn btn-outline-secondary btn-sm px-3">
                    <i class="bi bi-arrow-left"></i> Volver a la bandeja
                </a>
            @endif
            <h4 class="mb-0 fw-bold text-dark">{{ $ticket->codigo }}</h4>
            @if($ticket->trashed())
                <span class="badge badge-premium badge-no_resuelto">Eliminado</span>
            @else
                <span class="badge badge-premium badge-{{ $ticket->estado }}">
                    {{ str_replace('_', ' ', ucfirst($ticket->estado)) }}
                </span>
            @endif
        </div>
        <div>
            @if((Auth::user()->can_delete_tickets || Auth::user()->role === 'admin') && !$ticket->trashed() && request('kpi') !== '1')
                <form action="{{ route('tickets.destroy', array_merge(['ticket' => $ticket->id], request()->query())) }}" method="POST" onsubmit="return confirmDelete(this)" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-outline-danger btn-sm px-3 fw-semibold">
                        <i class="bi bi-trash-fill me-1"></i> Eliminar Ticket
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>

<div class="row">
    <!-- Left Column: Details & Forms -->
    <div class="col-lg-8">
        
        @if(request('kpi') == '1')
            <div class="alert alert-info border-0 shadow-sm rounded-3 mb-4 p-3 d-flex align-items-center" style="background-color: #e1f0ff; border-left: 4px solid #0095ff !important;">
                <i class="bi bi-info-circle-fill fs-3 me-3 text-primary"></i>
                <div>
                    <h6 class="fw-bold mb-1 text-primary">Modo Informe (Lectura)</h6>
                    <div class="text-dark small">Está visualizando esta incidencia en modo lectura desde el reporte KPI. Las acciones de flujo y eliminación se encuentran deshabilitadas.</div>
                </div>
            </div>
        @endif
        
        @if($ticket->trashed())
            <div class="alert alert-danger border-0 shadow-sm rounded-3 mb-4 p-3 d-flex align-items-center">
                <i class="bi bi-trash-fill fs-3 me-3 text-danger"></i>
                <div>
                    <h6 class="fw-bold mb-1 text-danger">Incidencia Eliminada</h6>
                    <div class="text-dark small"><strong>Motivo de eliminación:</strong> {{ $motivoEliminacion }}</div>
                </div>
            </div>
        @endif

        <!-- Main Details Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="text-muted small"><i class="bi bi-calendar3 me-1"></i> Creado el {{ $ticket->created_at->format('d/m/Y H:i') }}</span>
                    <span>
                        @if($ticket->problematica->gravedad === 'alta')
                            <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-1">Gravedad Alta</span>
                        @elseif($ticket->problematica->gravedad === 'media')
                            <span class="badge bg-warning bg-opacity-10 text-warning px-3 py-1">Gravedad Media</span>
                        @else
                            <span class="badge bg-success bg-opacity-10 text-success px-3 py-1">Gravedad Baja</span>
                        @endif
                    </span>
                </div>
            </div>
            <div class="card-body">
                <h4 class="fw-bold text-dark mb-3">{{ $ticket->titulo }}</h4>
                
                <div class="row g-4 mb-4">
                    <!-- Sucursal -->
                    <div class="col-sm-6">
                        <div class="p-3 bg-light rounded-3">
                            <div class="small text-muted fw-semibold mb-1">SUCURSAL</div>
                            <div class="fw-bold text-dark"><i class="bi bi-shop me-2 text-danger"></i>{{ $ticket->sucursal->nombre }}</div>
                            @if($ticket->sucursal->direccion)
                                <div class="small text-muted mt-1">{{ $ticket->sucursal->direccion }}</div>
                            @endif
                        </div>
                    </div>
                    <!-- Departamento / Problema -->
                    <div class="col-sm-6">
                        <div class="p-3 bg-light rounded-3">
                            <div class="small text-muted fw-semibold mb-1">DEPARTAMENTO / CATEGORÍA</div>
                            <div class="fw-bold text-dark"><i class="bi bi-tag-fill me-2 text-primary"></i>{{ $ticket->departamento->nombre }}</div>
                            <div class="small text-muted mt-1">{{ $ticket->problematica->nombre }}</div>
                        </div>
                    </div>
                    <!-- Reportado Por -->
                    <div class="col-sm-6">
                        <div class="p-3 bg-light rounded-3">
                            <div class="small text-muted fw-semibold mb-1">REPORTADO POR</div>
                            <div class="fw-bold text-dark"><i class="bi bi-person-circle me-2 text-secondary"></i>{{ $ticket->usuario->name_with_role }}</div>
                        </div>
                    </div>
                    <!-- SLA Counter -->
                    <div class="col-sm-6">
                        <div class="p-3 bg-light rounded-3">
                            <div class="small text-muted fw-semibold mb-1">TIEMPO DE RESOLUCIÓN (SLA)</div>
                            @if($ticket->fecha_asignacion)
                                @php
                                    $dias = $ticket->dias_transcurridos;
                                @endphp
                                <div class="fs-5 fw-bold @if($ticket->estado === 'cerrado' || $ticket->estado === 'resuelto' || $ticket->estado === 'no_resuelto') text-success @elseif($dias > 3) text-danger @else text-warning @endif">
                                    <i class="bi bi-clock-fill me-2"></i>{{ $dias }} días transcurridos
                                </div>
                                <div class="small text-muted mt-1">
                                    @if($ticket->estado === 'cerrado' || $ticket->estado === 'resuelto' || $ticket->estado === 'no_resuelto')
                                        Finalizado en {{ $dias }} días.
                                    @else
                                        Asignado el {{ $ticket->fecha_asignacion->format('d/m/Y H:i') }}.
                                    @endif
                                </div>
                            @else
                                <div class="fw-bold text-muted"><i class="bi bi-clock me-2"></i>Sin asignar (SLA detenido)</div>
                                <div class="small text-muted mt-1">Esperando asignación de responsable.</div>
                            @endif
                        </div>
                    </div>
                </div>

                <h6 class="fw-bold text-dark mb-2">Descripción de la Incidencia:</h6>
                <div class="p-3 border rounded-3 bg-white mb-4" style="white-space: pre-wrap; line-height: 1.6;">{{ $ticket->descripcion }}</div>

                @if($ticket->imagen_adjunta)
                    <div class="mb-4">
                        <h6 class="fw-bold text-dark mb-2">Evidencia Fotográfica:</h6>
                        <div class="row">
                            <div class="col-md-6 col-lg-5">
                                <a href="{{ asset($ticket->imagen_adjunta) }}" target="_blank">
                                    <img src="{{ asset($ticket->imagen_adjunta) }}" alt="Evidencia de Incidencia" class="ticket-img">
                                </a>
                                <div class="form-text mt-1 text-center">Haga clic en la imagen para verla en tamaño completo</div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="border-top pt-3 mt-4">
                    <h6 class="fw-bold text-dark mb-3">Responsable de Resolución:</h6>
                    @if($ticket->responsable_tipo === 'interno' && $ticket->responsableUsuario)
                        <div class="d-flex align-items-center gap-3">
                            <div class="user-avatar" style="width: 45px; height: 45px; font-size: 1.2rem;">
                                {{ strtoupper(substr($ticket->responsableUsuario->name, 0, 2)) }}
                            </div>
                            <div>
                                <div class="fw-bold text-dark">{{ $ticket->responsableUsuario->name_with_role }}</div>
                                <div class="text-muted small">Técnico / Responsable Interno &bull; {{ $ticket->responsableUsuario->email }}</div>
                            </div>
                        </div>
                    @elseif($ticket->responsable_tipo === 'externo')
                        <div class="d-flex align-items-center gap-3">
                            <div class="user-avatar bg-info-subtle text-info border-info" style="width: 45px; height: 45px; font-size: 1.2rem;">
                                <i class="bi bi-building"></i>
                            </div>
                            <div>
                                <div class="fw-bold text-dark">{{ $ticket->responsable_nombre_externo }}</div>
                                <div class="text-muted small">Proveedor de Servicios Externo &bull; {{ $ticket->responsable_email_externo }}</div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center mb-0" role="alert">
                            <i class="bi bi-exclamation-triangle-fill me-3 fs-4"></i>
                            <div>
                                No hay un responsable asignado para resolver esta incidencia todavía.
                            </div>
                        </div>
                    @endif
                </div>

            </div>
        </div>

        <!-- Workflow Transitions Forms Card -->
        @if(!$ticket->trashed() && request('kpi') !== '1')
            
            <!-- 1. APPOVER ASSIGNS RESPONSIBLE (State: ingresado) -->
            @if($ticket->estado === 'ingresado' && (Auth::user()->can_assign_tickets || Auth::user()->role === 'admin'))
                <div class="card shadow-sm card-workflow mb-4">
                    <div class="card-header bg-transparent border-0 pb-0 pt-4 px-4">
                        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-person-fill-gear text-danger me-2"></i>Asignar Responsable de Resolución</h5>
                    </div>
                    <div class="card-body p-4">
                        <p class="text-muted small mb-4">Como Aprobador o Administrador, debe asignar un responsable interno o externo para iniciar el proceso de solución del ticket.</p>
                        
                        <form action="{{ route('tickets.assign', $ticket->id) }}" method="POST">
                            @csrf
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-dark">Tipo de Responsable</label>
                                <div class="d-flex gap-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="responsable_tipo" id="tipo_interno" value="interno" checked>
                                        <label class="form-check-input-label fw-medium" for="tipo_interno">
                                            Personal Interno (Usuario ERP)
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="responsable_tipo" id="tipo_externo" value="externo">
                                        <label class="form-check-input-label fw-medium" for="tipo_externo">
                                            Proveedor Externo
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- Internal Section -->
                            <div id="section_interno" class="mb-3">
                                <label for="responsable_usuario_id" class="form-label fw-semibold text-muted small">Seleccionar Técnico Interno</label>
                                <select class="form-select border-grey" name="responsable_usuario_id" id="responsable_usuario_id">
                                    <option value="">-- Seleccionar Técnico --</option>
                                    @foreach($tecnicos as $t)
                                        <option value="{{ $t->id }}" {{ old('responsable_usuario_id') == $t->id ? 'selected' : '' }}>
                                            {{ $t->name_with_role }} - {{ $t->sucursal ? $t->sucursal->nombre : 'Multisucursal' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- External Section -->
                            <div id="section_externo" class="mb-3 d-none">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label for="responsable_nombre_externo" class="form-label fw-semibold text-muted small">Nombre Proveedor / Empresa</label>
                                        <input type="text" class="form-control border-grey" name="responsable_nombre_externo" id="responsable_nombre_externo" placeholder="Ej. FrigoServicios Ltda." value="{{ old('responsable_nombre_externo') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="responsable_email_externo" class="form-label fw-semibold text-muted small">Email de Contacto Proveedor</label>
                                        <input type="email" class="form-control border-grey" name="responsable_email_externo" id="responsable_email_externo" placeholder="contacto@empresa.com" value="{{ old('responsable_email_externo') }}">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="assign_comentario" class="form-label fw-semibold text-muted small">Instrucciones o Comentarios de Asignación</label>
                                <textarea class="form-control border-grey" name="comentario" id="assign_comentario" rows="3" placeholder="Indique detalles para la resolución del ticket...">{{ old('comentario') }}</textarea>
                            </div>

                            <button type="submit" class="btn btn-danger px-4 fw-semibold w-100 w-sm-auto">
                                <i class="bi bi-check-circle me-1"></i> Asignar e Iniciar SLA
                            </button>
                        </form>
                    </div>
                </div>
            @endif

            <!-- 2. RESOLVER RESOLVES TICKET (State: en_proceso) -->
            @if($ticket->estado === 'en_proceso' && (Auth::user()->can_resolve_tickets || Auth::user()->role === 'admin'))
                
                <div class="card shadow-sm card-workflow mb-4">
                    <div class="card-header bg-transparent border-0 pb-0 pt-4 px-4">
                        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-tools text-danger me-2"></i>Registrar Resolución de Incidencia</h5>
                    </div>
                    <div class="card-body p-4">
                        <p class="text-muted small mb-4">Como encargado de la resolución, registre si el problema fue solucionado con éxito o si no fue factible resolverlo.</p>
                        
                        <form action="{{ route('tickets.resolve', $ticket->id) }}" method="POST">
                            @csrf
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-dark">Resultado de la Intervención</label>
                                <div class="d-flex gap-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="resultado" id="res_resuelto" value="resuelto" checked>
                                        <label class="form-check-input-label fw-semibold text-success" for="res_resuelto">
                                            <i class="bi bi-check-circle-fill me-1"></i> Resuelto
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="resultado" id="res_no_resuelto" value="no_resuelto">
                                        <label class="form-check-input-label fw-semibold text-danger" for="res_no_resuelto">
                                            <i class="bi bi-x-circle-fill me-1"></i> No Resuelto (SLA sin éxito)
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="resolve_comentario" class="form-label fw-semibold text-muted small">Comentario o Detalle Técnico del Trabajo <span class="text-danger">*</span></label>
                                <textarea class="form-control border-grey @error('comentario') is-invalid @enderror" name="comentario" id="resolve_comentario" rows="3" required placeholder="Indique qué reparación se hizo, repuestos instalados o por qué no se pudo solucionar el problema (mínimo 5 caracteres)...">{{ old('comentario') }}</textarea>
                                @error('comentario')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-danger px-4 fw-semibold w-100 w-sm-auto">
                                <i class="bi bi-send me-1"></i> Enviar Resolución
                            </button>
                        </form>
                    </div>
                </div>
            @endif

            <!-- 3. STORE MANAGER VALIDATION (State: resuelto) -->
            @if($ticket->estado === 'resuelto' && 
                (Auth::user()->role === 'admin' || 
                 (Auth::user()->can_close_tickets && (Auth::user()->role !== 'jefe_local' || $ticket->sucursal_id === Auth::user()->sucursal_id))))
                
                <div class="card shadow-sm card-workflow mb-4">
                    <div class="card-header bg-transparent border-0 pb-0 pt-4 px-4">
                        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-patch-check-fill text-danger me-2"></i>Validar Resolución del Ticket</h5>
                    </div>
                    <div class="card-body p-4">
                        <p class="text-muted small mb-3">El responsable ha marcado el ticket como <strong>Resuelto</strong>. Como Jefe de Local, debe validar si el problema fue resuelto a su entera satisfacción.</p>
                        
                        <form action="{{ route('tickets.validate', $ticket->id) }}" method="POST">
                            @csrf
                            
                            <div class="mb-3">
                                <label class="form-label fw-semibold text-dark">¿La solución es correcta?</label>
                                <div class="d-flex gap-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="aprobacion" id="val_aprobar" value="aprobar" checked>
                                        <label class="form-check-input-label fw-semibold text-success" for="val_aprobar">
                                            <i class="bi bi-shield-fill-check me-1"></i> Sí, Aprobar y Cerrar Ticket
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="aprobacion" id="val_rechazar" value="rechazar">
                                        <label class="form-check-input-label fw-semibold text-danger" for="val_rechazar">
                                            <i class="bi bi-shield-fill-x me-1"></i> No, Rechazar (vuelve a En Proceso)
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label for="validate_comentario" class="form-label fw-semibold text-muted small">Comentario de Validación <span class="text-danger">*</span></label>
                                <textarea class="form-control border-grey @error('comentario') is-invalid @enderror" name="comentario" id="validate_comentario" rows="3" required placeholder="Indique su conformidad o justifique el rechazo si la solución no es correcta (mínimo 5 caracteres)...">{{ old('comentario') }}</textarea>
                                @error('comentario')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-danger px-4 fw-semibold w-100 w-sm-auto">
                                <i class="bi bi-clipboard-check me-1"></i> Registrar Validación
                            </button>
                        </form>
                    </div>
                </div>
            @endif

            <!-- 4. STORE MANAGER ACKNOWLEDGE NOTICE (State: no_resuelto) -->
            @if($ticket->estado === 'no_resuelto' && 
                (Auth::user()->role === 'admin' || 
                 (Auth::user()->can_close_tickets && (Auth::user()->role !== 'jefe_local' || $ticket->sucursal_id === Auth::user()->sucursal_id))))
                
                <div class="card shadow-sm card-workflow mb-4">
                    <div class="card-header bg-transparent border-0 pb-0 pt-4 px-4">
                        <h5 class="fw-bold text-dark mb-0"><i class="bi bi-info-circle-fill text-danger me-2"></i>Acusar Recibo de No Resolución</h5>
                    </div>
                    <div class="card-body p-4">
                        <p class="text-muted small mb-3">El responsable ha marcado el ticket como <strong>No Resuelto</strong>. Como Jefe de Local, debe acusar recibo de esta situación para proceder al archivado del ticket.</p>
                        
                        <form action="{{ route('tickets.acknowledge', $ticket->id) }}" method="POST">
                            @csrf
                            
                            <div class="mb-4">
                                <label for="ack_comentario" class="form-label fw-semibold text-muted small">Comentario o Nota de Recibo <span class="text-danger">*</span></label>
                                <textarea class="form-control border-grey @error('comentario') is-invalid @enderror" name="comentario" id="ack_comentario" rows="3" required placeholder="Indique alguna observación o medidas paliativas adoptadas (mínimo 5 caracteres)...">{{ old('comentario') }}</textarea>
                                @error('comentario')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-danger px-4 fw-semibold w-100 w-sm-auto">
                                <i class="bi bi-file-earmark-check me-1"></i> Acusar Recibo y Cerrar Ticket
                            </button>
                        </form>
                    </div>
                </div>
            @endif

        @endif

    </div>

    <!-- Right Column: History Timeline -->
    <div class="col-lg-4">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0 text-dark fw-bold"><i class="bi bi-clock-history text-danger me-2"></i>Historial del Ticket</h5>
            </div>
            <div class="card-body">
                @if($ticket->historial->count() > 0)
                    <div class="timeline ps-2 py-2">
                        @foreach($ticket->historial as $h)
                            <div class="timeline-item">
                                <div class="timeline-badge bg-{{ $h->estado_nuevo }}"></div>
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="badge badge-premium badge-{{ $h->estado_nuevo }} py-0 px-2 small" style="font-size: 0.7rem;">
                                        {{ str_replace('_', ' ', ucfirst($h->estado_nuevo)) }}
                                    </span>
                                    <span class="text-muted small" style="font-size: 0.75rem;">{{ $h->created_at->format('d/m H:i') }}</span>
                                </div>
                                <div class="fw-semibold text-dark small" style="font-size: 0.85rem;">
                                    Por: {{ $h->usuario->name_with_role }}
                                </div>
                                @if($h->comentario)
                                    <div class="mt-2 p-2 bg-light rounded text-muted small" style="font-size: 0.8rem; border-left: 2px solid #ccc;">
                                        {{ $h->comentario }}
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-calendar-x fs-1 d-block mb-2"></i>
                        Sin historial registrado
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function confirmDelete(form) {
        let motivo = prompt('Por favor ingrese el motivo de la eliminación del ticket (mínimo 5 caracteres):');
        if (motivo === null) {
            return false; // User cancelled
        }
        motivo = motivo.trim();
        if (motivo.length < 5) {
            alert('Error: El motivo de la eliminación debe tener al menos 5 caracteres.');
            return false;
        }
        
        // Add hidden input
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'motivo_eliminacion';
        input.value = motivo;
        form.appendChild(input);
        return true;
    }

    document.addEventListener('DOMContentLoaded', function() {
        const radInterno = document.getElementById('tipo_interno');
        const radExterno = document.getElementById('tipo_externo');
        const secInterno = document.getElementById('section_interno');
        const secExterno = document.getElementById('section_externo');
        const selectUsuario = document.getElementById('responsable_usuario_id');
        const inputNombreExt = document.getElementById('responsable_nombre_externo');
        const inputEmailExt = document.getElementById('responsable_email_externo');

        if(radInterno && radExterno) {
            radInterno.addEventListener('change', function() {
                if(this.checked) {
                    secInterno.classList.remove('d-none');
                    secExterno.classList.add('d-none');
                    selectUsuario.setAttribute('required', 'required');
                    inputNombreExt.removeAttribute('required');
                    inputEmailExt.removeAttribute('required');
                }
            });

            radExterno.addEventListener('change', function() {
                if(this.checked) {
                    secInterno.classList.add('d-none');
                    secExterno.classList.remove('d-none');
                    selectUsuario.removeAttribute('required');
                    inputNombreExt.setAttribute('required', 'required');
                    inputEmailExt.setAttribute('required', 'required');
                }
            });

            // Trigger initial check
            if(radInterno.checked) {
                selectUsuario.setAttribute('required', 'required');
            } else if(radExterno.checked) {
                inputNombreExt.setAttribute('required', 'required');
                inputEmailExt.setAttribute('required', 'required');
            }
        }
    });
</script>
@endsection