{{-- resources/views/tramites/edit.blade.php --}}
@extends('backend.layouts.app')

{{-- Estilos críticos en el head para evitar FOUC --}}
@push('before-styles')
    @stack('before-styles')
    @vite(['resources/sass/tramite-form.scss'])
    @stack('after-styles')
@endpush

@push('after-styles')
<style>
/* Override para mantener el estilo azul consistente con crear trámite */
.form-control:focus,
.form-select:focus {
    border-color: #1565C0 !important;
    box-shadow: 0 0 0 0.2rem rgba(21, 101, 192, 0.15) !important;
}
</style>
@endpush

{{-- Título personalizado mejorado para edición --}}
@section('page-title')
    <div class="d-flex align-items-center">
        <div class="page-title-icon">
            <i class="fas fa-edit"></i>
        </div>
        <div class="page-title-content">
            <h1 class="page-main-title">Editar Trámite</h1>
            <p class="page-subtitle">ID: {{ $tramite->id }} - {{ $tramite->nombre_producto ?? 'Sin nombre' }}</p>
        </div>
        <div class="page-title-badge">
            @php
                $stateClass = match($tramite->estado_tramite_id ?? 1) {
                    1 => 'badge-secondary',    // NO ASIGNADO
                    2 => 'badge-primary',      // ASIGNADO
                    3 => 'badge-info',         // INICIADO
                    4 => 'badge-warning',      // EN REVISIÓN
                    5 => 'badge-danger',       // DEVUELTO
                    6 => 'badge-success',      // APROBADO
                    7 => 'badge-dark',         // CANCELADO
                    8 => 'badge-info',         // TICKET
                    9 => 'badge-primary',      // RADICADO
                    10 => 'badge-warning',     // AUTO
                    11 => 'badge-info',        // GESTIÓN DEL AUTO
                    12 => 'badge-success',     // CONCEDIDO
                    13 => 'badge-danger',      // NEGADO
                    14 => 'badge-warning',     // RECURSO
                    15 => 'badge-info',        // COMUNICACIÓN
                    16 => 'badge-success',     // FINALIZADO
                    default => 'badge-secondary'
                };
            @endphp
            <span class="badge {{ $stateClass }} badge-lg">
                {{ $tramite->estadoTramite->nombre ?? 'Sin estado' }}
            </span>
        </div>
    </div>
@endsection

@section('content')
<!-- Enlaces a los nuevos estilos y scripts -->
@vite(['resources/sass/tramite-form.scss'])

@php
    $stateHandler = app(\App\Services\TramiteStateHandler::class);
    $viewData = $stateHandler->getViewData($tramite);
    $stateId = $viewData['stateId'];
    $userRole = $viewData['userRole'];
    $alertConfig = $viewData['alertConfig'];
    $fieldPermissions = $viewData['fieldPermissions'];
    $buttonPermissions = $viewData['buttonPermissions'];
    $visibleFields = $viewData['visibleFields'];
    $editableFields = $viewData['editableFields'];
    $fieldDefinitions = $viewData['fieldDefinitions'];
    $customFields = $viewData['customFields'];
    $jsConfig = $viewData['jsConfig'];
@endphp

<div class="tramite-form-container">
    {{-- Dynamic Alert based on state configuration --}}
    @if(!empty($alertConfig))
        <div class="alert alert-{{ $alertConfig['type'] ?? 'info' }}">
            @if(isset($alertConfig['icon']))
                <i class="{{ $alertConfig['icon'] }}"></i>
            @endif
            
            {!! $alertConfig['message'] ?? '' !!}
            
            @if(($alertConfig['show_responsible'] ?? false) && $tramite->usuario_responsable)
                <br><strong>Responsable:</strong> {{ strtoupper($tramite->usuario_responsable->name) }}
            @endif
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <h6><i class="fas fa-exclamation-triangle"></i> Por favor corrija los siguientes errores:</h6>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                   <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle"></i>
            {{ session('error') }}
        </div>
    @endif

    @if (session('success'))
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
        </div>
    @endif

    <form id="tramite-form" action="{{ route('tramites.update', $tramite) }}" method="POST">
        @csrf
        @method('PUT')
        {{-- Crear una versión estilizada del universal-state --}}
        @include('tramites.edicion.universal-state-styled')

        {{-- ACCIONES DEL FORMULARIO --}}
        <div class="form-actions">
            <div class="btn-group-left">
                <button type="button" class="btn btn-outline" onclick="window.history.back()">
                    <i class="fas fa-arrow-left"></i>
                    Volver
                </button>
                @if(count(array_intersect($editableFields, $visibleFields)) > 0)
                <button type="button" class="btn btn-secondary" onclick="resetChanges()">
                    <i class="fas fa-undo"></i>
                    Deshacer Cambios
                </button>
                @endif
            </div>
            
            <div class="btn-group-right">
                {{-- Botón de Iniciar - Solo visible cuando el trámite está en estado ASIGNADO --}}
                @if($stateHandler->isButtonEnabled($stateId, 'iniciar', $userRole))
                    @php
                        $buttonConfig = $stateHandler->getButtonConfig($stateId, 'iniciar', $userRole);
                    @endphp
                    <button type="button" class="btn {{ $buttonConfig['class'] ?? 'btn-primary' }}" 
                            onclick="iniciarTramite({{ $tramite->id }})"
                            title="Cambia el estado del trámite a INICIADO">
                        <i class="{{ $buttonConfig['icon'] ?? 'fas fa-play' }}"></i> 
                        {{ $buttonConfig['text'] ?? 'Iniciar Trámite' }}
                    </button>
                @endif
                
                {{-- Botón de Solicitar Ticket - Solo visible cuando el trámite está en estado APROBADO --}}
                @if($stateHandler->isButtonEnabled($stateId, 'solicitar_ticket', $userRole))
                    @php
                        $buttonConfig = $stateHandler->getButtonConfig($stateId, 'solicitar_ticket', $userRole);
                    @endphp
                    <button type="button" class="btn {{ $buttonConfig['class'] ?? 'btn-warning' }}" 
                            onclick="solicitarTicket({{ $tramite->id }})"
                            title="Cambia el estado del trámite a TICKET">
                        <i class="{{ $buttonConfig['icon'] ?? 'fas fa-ticket-alt' }}"></i> 
                        {{ $buttonConfig['text'] ?? 'Solicitar Ticket' }}
                    </button>
                @endif
                
                {{-- Botón de Corregir Trámite - Solo visible cuando el trámite está en estado DEVUELTO --}}
                @if($stateHandler->isButtonEnabled($stateId, 'corregir_tramite', $userRole))
                    @php
                        $buttonConfig = $stateHandler->getButtonConfig($stateId, 'corregir_tramite', $userRole);
                    @endphp
                    <button type="button" class="btn {{ $buttonConfig['class'] ?? 'btn-success' }}" 
                            onclick="corregirTramite({{ $tramite->id }})"
                            title="Marcar las correcciones como completadas y cambiar estado a EN REVISIÓN">
                        <i class="{{ $buttonConfig['icon'] ?? 'fas fa-check-double' }}"></i> 
                        {{ $buttonConfig['text'] ?? 'Trámite Corregido' }}
                    </button>
                @endif
                
                {{-- Botón de Notificar - Solo visible cuando el trámite está en estado COMUNICADO --}}
                @if($tramite->estado_tramite_id === 15)
                    <button type="button" class="btn btn-info" 
                            onclick="showNotificationModal({{ $tramite->id }})"
                            title="Abrir modal para enviar notificación por correo">
                        <i class="fas fa-envelope"></i> 
                        Notificar por correo
                    </button>
                @endif
                
                @if(count(array_intersect($editableFields, $visibleFields)) > 0)
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-save"></i>
                    Guardar Cambios
                </button>
                @endif
            </div>
        </div>
    </form>

    <!-- Sistema de Comentarios -->
    @include('tramites.partials.comentarios', ['tramite' => $tramite])
</div>


<script>
// Funciones adicionales para edición
function resetChanges() {
    if (confirm('¿Está seguro de que desea deshacer todos los cambios realizados?')) {
        location.reload();
    }
}

// Configuración específica para edición
document.addEventListener('DOMContentLoaded', function() {
    // Deshabilitar campos no editables visualmente
    document.querySelectorAll('[disabled], [readonly]').forEach(function(element) {
        element.style.backgroundColor = '#f8f9fa';
        element.style.color = '#6c757d';
        element.style.cursor = 'not-allowed';
        element.style.opacity = '0.7';
    });
    
    // Configurar campos dependientes específicos del estado
    @if(!empty($jsConfig) && is_string($jsConfig))
        {!! $jsConfig !!}
    @endif
    
    // === NUEVA FUNCIONALIDAD: Validación dinámica para edición ===
    setupEditFormValidation();
    
    // Confirmar antes de salir si hay cambios sin guardar
    let formChanged = false;
    const form = document.getElementById('tramite-form');
    const editableInputs = form.querySelectorAll('input:not([readonly]):not([disabled]), select:not([disabled]), textarea:not([readonly])');
    
    editableInputs.forEach(function(input) {
        input.addEventListener('change', function() {
            formChanged = true;
        });
    });

    window.addEventListener('beforeunload', function(e) {
        if (formChanged) {
            e.preventDefault();
            e.returnValue = '¿Está seguro de que desea salir? Los cambios no guardados se perderán.';
        }
    });

    // Marcar formulario como enviado al hacer submit
    form.addEventListener('submit', function() {
        formChanged = false;
    });
});

function setupEditFormValidation() {
    const productoSelect = document.querySelector('[name="producto_id"]') || document.getElementById('producto_id');
    const tipoTramiteSelect = document.querySelector('[name="tipo_tramite_id"]') || document.getElementById('tipo_tramite_id');
    const subtipoTramiteSelect = document.querySelector('[name="subtipo_tramite_id"]') || document.getElementById('subtipo_tramite_id');
    
    if (productoSelect) {
        productoSelect.addEventListener('change', function() {
            const productoId = this.value;
            if (productoId) {
                cargarTiposTramiteEdit(productoId);
            } else {
                // Limpiar selects dependientes
                if (tipoTramiteSelect) {
                    tipoTramiteSelect.innerHTML = '<option value="">-- SELECCIONE TIPO TRÁMITE --</option>';
                }
                if (subtipoTramiteSelect) {
                    subtipoTramiteSelect.innerHTML = '<option value="">-- SELECCIONE SUBTIPO --</option>';
                }
            }
        });
    }
    
    if (tipoTramiteSelect) {
        tipoTramiteSelect.addEventListener('change', function() {
            const productoId = productoSelect ? productoSelect.value : null;
            const tipoTramiteId = this.value;
            
            if (productoId && tipoTramiteId) {
                cargarSubtiposTramiteEdit(productoId, tipoTramiteId);
            } else {
                // Limpiar subtipo si no hay tipo seleccionado
                if (subtipoTramiteSelect) {
                    subtipoTramiteSelect.innerHTML = '<option value="">-- SELECCIONE SUBTIPO --</option>';
                }
            }
        });
    }
}

async function cargarTiposTramiteEdit(productoId) {
    const tipoTramiteSelect = document.querySelector('[name="tipo_tramite_id"]') || document.getElementById('tipo_tramite_id');
    const subtipoTramiteSelect = document.querySelector('[name="subtipo_tramite_id"]') || document.getElementById('subtipo_tramite_id');
    
    if (!tipoTramiteSelect) {
        return;
    }
    
    // Guardar valor actual
    const valorActual = tipoTramiteSelect.value;
    
    tipoTramiteSelect.innerHTML = '<option value="">Cargando...</option>';
    
    try {
        const response = await fetch(`/api/tipos-tramite/${productoId}`);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        tipoTramiteSelect.innerHTML = '<option value="">-- SELECCIONE TIPO TRÁMITE --</option>';
        data.forEach((tipo) => {
            const option = document.createElement("option");
            option.value = tipo.id;
            option.textContent = tipo.nombre.toUpperCase();
            // Mantener selección actual si existe
            if (tipo.id == valorActual) {
                option.selected = true;
            }
            tipoTramiteSelect.appendChild(option);
        });
        
        // Limpiar subtipos si cambió el producto
        if (subtipoTramiteSelect) {
            subtipoTramiteSelect.innerHTML = '<option value="">-- SELECCIONE SUBTIPO --</option>';
        }
        
        // Si hay un tipo seleccionado, cargar sus subtipos
        if (tipoTramiteSelect.value) {
            cargarSubtiposTramiteEdit(productoId, tipoTramiteSelect.value);
        }
        
    } catch (error) {
        tipoTramiteSelect.innerHTML = '<option value="">Error al cargar</option>';
    }
}

async function cargarSubtiposTramiteEdit(productoId, tipoTramiteId) {
    const subtipoTramiteSelect = document.querySelector('[name="subtipo_tramite_id"]') || document.getElementById('subtipo_tramite_id');
    
    if (!subtipoTramiteSelect) {
        return;
    }
    
    // Guardar valor actual
    const valorActual = subtipoTramiteSelect.value;
    
    subtipoTramiteSelect.innerHTML = '<option value="">Cargando...</option>';
    
    try {
        const response = await fetch(`/api/subtipos-tramite/${productoId}/${tipoTramiteId}`);
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        subtipoTramiteSelect.innerHTML = '<option value="">-- SELECCIONE SUBTIPO --</option>';
        data.forEach((subtipo) => {
            const option = document.createElement("option");
            option.value = subtipo.id;
            option.textContent = subtipo.nombre.toUpperCase();
            // Mantener selección actual si existe
            if (subtipo.id == valorActual) {
                option.selected = true;
            }
            subtipoTramiteSelect.appendChild(option);
        });
        
    } catch (error) {
        subtipoTramiteSelect.innerHTML = '<option value="">Error al cargar</option>';
    }
}

// Mejorar accesibilidad con navegación por teclado
document.addEventListener('keydown', function(e) {
    // Alt + S para guardar
    if (e.altKey && e.key === 's') {
        e.preventDefault();
        const submitBtn = document.querySelector('button[type="submit"]');
        if (submitBtn && !submitBtn.disabled) {
            document.getElementById('tramite-form').submit();
        }
    }
    
    // Escape para cancelar
    if (e.key === 'Escape') {
        const cancelBtn = document.querySelector('a[href*="tramites.index"]');
        if (cancelBtn && confirm('¿Desea cancelar y salir del formulario de edición?')) {
            window.location.href = cancelBtn.href;
        }
    }
});

/**
 * Función para iniciar trámite (cambiar estado de ASIGNADO a INICIADO)
 */
function iniciarTramite(tramiteId) {
    showBootstrapConfirmModal({
        title: '🚀 ¿Iniciar Trámite?',
        message: `
            <div class="text-start">
                <p class="mb-3 fs-6">
                    <strong>¿Está seguro de que desea iniciar este trámite?</strong>
                </p>
                <div class="alert alert-success" role="alert">
                    <p class="mb-2 text-success">
                        <i class="fas fa-info-circle me-2"></i>
                        Al confirmar esta acción:
                    </p>
                    <ul class="ms-3 text-success small">
                        <li>El trámite pasará automáticamente al estado <strong>INICIADO</strong></li>
                        <li>Se marcará como en progreso activo</li>
                        <li>Se iniciará el seguimiento de tiempos</li>
                        <li>Se notificará a los involucrados</li>
                    </ul>
                </div>
                <p class="mb-0 text-muted small">
                    Si está seguro de proceder, haga clic en "Sí, Iniciar Trámite".
                </p>
            </div>
        `,
        confirmText: '<i class="fas fa-play"></i> Sí, Iniciar Trámite',
        confirmClass: 'btn-success',
        loadingText: 'Iniciando trámite...',
        onConfirm: function() {
            // Crear un formulario para enviar la petición POST
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("tramites.iniciar", ":id") }}'.replace(':id', tramiteId);
            
            // Agregar token CSRF
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Agregar al DOM y enviar
            document.body.appendChild(form);
            form.submit();
        }
    });
}

/**
 * Función para solicitar ticket (cambiar estado de APROBADO a TICKET)
 */
function solicitarTicket(tramiteId) {
    showBootstrapConfirmModal({
        title: '🎫 ¿Solicitar Ticket?',
        message: `
            <div class="text-start">
                <p class="mb-3 fs-6">
                    <strong>¿Está seguro de que desea solicitar un ticket para este trámite?</strong>
                </p>
                <div class="alert alert-warning" role="alert">
                    <p class="mb-2 text-warning-emphasis">
                        <i class="fas fa-info-circle me-2"></i>
                        Al confirmar esta acción:
                    </p>
                    <ul class="ms-3 text-warning-emphasis small">
                        <li>El trámite pasará automáticamente al estado <strong>TICKET</strong></li>
                        <li>Se generará una solicitud de ticket</li>
                        <li>Se enviará al departamento correspondiente</li>
                        <li>Se iniciará el proceso de seguimiento</li>
                    </ul>
                </div>
                <p class="mb-0 text-muted small">
                    Si está seguro de proceder, haga clic en "Sí, Solicitar Ticket".
                </p>
            </div>
        `,
        confirmText: '<i class="fas fa-ticket-alt"></i> Sí, Solicitar Ticket',
        confirmClass: 'btn-warning',
        loadingText: 'Solicitando ticket...',
        onConfirm: function() {
            // Crear un formulario para enviar la petición POST
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("tramites.solicitar-ticket", ":id") }}'.replace(':id', tramiteId);
            
            // Agregar token CSRF
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Agregar al DOM y enviar
            document.body.appendChild(form);
            form.submit();
        }
    });
}

/**
 * Función para corregir trámite (cambiar estado de DEVUELTO a EN REVISIÓN)
 */
function corregirTramite(tramiteId) {
    showBootstrapConfirmModal({
        title: '✅ ¿Trámite Corregido?',
        message: `
            <div class="text-start">
                <p class="mb-3 fs-6">
                    <strong>¿Está seguro de que las correcciones han sido completadas?</strong>
                </p>
                <div class="alert alert-success" role="alert">
                    <p class="mb-2 text-success">
                        <i class="fas fa-info-circle me-2"></i>
                        Al confirmar esta acción:
                    </p>
                    <ul class="ms-3 text-success small">
                        <li>El trámite pasará automáticamente al estado <strong>EN REVISIÓN</strong></li>
                        <li>Las correcciones se marcarán como completadas</li>
                        <li>El trámite estará listo para una nueva revisión</li>
                        <li>Se notificará al equipo de revisión</li>
                    </ul>
                </div>
                <p class="mb-0 text-muted small">
                    Si está seguro de proceder, haga clic en "Sí, Trámite Corregido".
                </p>
            </div>
        `,
        confirmText: '<i class="fas fa-check-double"></i> Sí, Trámite Corregido',
        confirmClass: 'btn-success',
        loadingText: 'Procesando corrección...',
        onConfirm: function() {
            // Crear un formulario para enviar la petición POST
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("tramites.corregir", ":id") }}'.replace(':id', tramiteId);
            
            // Agregar token CSRF
            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';
            form.appendChild(csrfToken);
            
            // Agregar al DOM y enviar
            document.body.appendChild(form);
            form.submit();
        }
    });
}

// Control de visibilidad de la sección de fechas basado en asignación de usuario
document.addEventListener('DOMContentLoaded', function() {
    const usuarioSelect = document.querySelector('[name="usuario_responsable_id"]') || document.getElementById('usuario_responsable_id');
    const fechasSection = document.getElementById('fechas-gestion-section');
    
    if (usuarioSelect && fechasSection) {
        // Función para mostrar/ocultar la sección de fechas
        function toggleFechasSection() {
            if (usuarioSelect.value && usuarioSelect.value !== '') {
                fechasSection.style.display = 'block';
            } else {
                fechasSection.style.display = 'none';
                
                // Limpiar campos de fechas cuando no hay usuario asignado
                const fechaEntrega = document.querySelector('[name="fecha_planeada_de_entrega_del_dossier"]');
                const fechaMaxRadicacion = document.querySelector('[name="fecha_maxima_de_radicacion"]');
                const cargaLaboral = document.querySelector('[name="carga_laboral_en_horas"]');
                
                if (fechaEntrega) fechaEntrega.value = '';
                if (fechaMaxRadicacion) fechaMaxRadicacion.value = '';
                if (cargaLaboral) cargaLaboral.value = '';
            }
        }
        
        // Ejecutar al cargar la página
        toggleFechasSection();
        
        // Ejecutar cuando cambie la selección
        usuarioSelect.addEventListener('change', toggleFechasSection);
    }
});

// === FUNCIONALIDAD DE BÚSQUEDA DE PRODUCTOS PARA EDICIÓN ===
let searchTimeout;

// Inicializar búsqueda de productos si existe el campo
    document.addEventListener('DOMContentLoaded', function() {
    const searchField = document.getElementById('producto_search');
    if (searchField) {
        // Inicializar campo si ya tiene un valor (producto ya seleccionado)
        const productoEspecificoId = document.getElementById('producto_especifico_id');
        if (productoEspecificoId && productoEspecificoId.value && searchField.value) {
            // Si hay un producto específico seleccionado y el campo tiene valor, aplicar estilo
            searchField.classList.add('producto-seleccionado');
            
            // Mostrar botón de limpiar si existe
            const clearBtn = document.getElementById('clear-product-btn');
            if (clearBtn) {
                clearBtn.style.display = 'block';
            }
        }
        // Configurar búsqueda en tiempo real
        searchField.addEventListener('input', function() {
            // No hacer nada si el campo no es editable (readonly)
            if (this.readOnly) {
                return;
            }
            
            const query = this.value.trim();
            const dropdown = document.getElementById('productos_dropdown');
            
            // Limpiar timeout anterior
            if (searchTimeout) {
                clearTimeout(searchTimeout);
            }
            
            // Ocultar dropdown si no hay query
            if (query.length < 2) {
                dropdown.style.display = 'none';
                return;
            }
            
            // Mostrar indicador de carga
            dropdown.innerHTML = '<div class="dropdown-item loading">Buscando productos...</div>';
            dropdown.style.display = 'block';
            
            // Búsqueda con delay para evitar demasiadas peticiones
            searchTimeout = setTimeout(async () => {
                try {
                    const response = await fetch(`/api/productos/buscar?q=${encodeURIComponent(query)}&limit=10`);
                    if (!response.ok) throw new Error('Error en la búsqueda');
                    
                    const productos = await response.json();
                    
                    if (productos.length === 0) {
                        dropdown.innerHTML = '<div class="dropdown-item no-results">No se encontraron productos</div>';
                        return;
                    }
                    
                    // Mostrar resultados
                    dropdown.innerHTML = productos.map(producto => `
                        <div class="dropdown-item" onclick="seleccionarProductoEdit(${JSON.stringify(producto).replace(/"/g, '&quot;')})">
                            <div class="product-name">${producto.nombre}</div>
                            <div class="product-details ml-1">
                                <span class="expediente">Exp: ${producto.expediente}</span>
                            </div>
                        </div>
                    `).join('');
                    
                } catch (error) {
                    console.error('Error buscando productos:', error);
                    dropdown.innerHTML = '<div class="dropdown-item error">Error al buscar productos</div>';
                }
            }, 300); // Delay de 300ms
        });
        
        // Cerrar dropdown al hacer click fuera
        document.addEventListener('click', function(e) {
            const searchContainer = document.querySelector('.search-input-container');
            if (searchContainer && !searchContainer.contains(e.target)) {
                const dropdown = document.getElementById('productos_dropdown');
                if (dropdown) {
                    dropdown.style.display = 'none';
                }
            }
        });
        
        // Evento para permitir nueva búsqueda al hacer clic en campo con producto seleccionado
        searchField.addEventListener('focus', function() {
            // No hacer nada si el campo no es editable (readonly)
            if (this.readOnly) {
                this.blur(); // Quitar el foco del campo readonly
                return;
            }
            
            if (document.getElementById('producto_especifico_id').value) {
                // Si hay un producto seleccionado, preparar para nueva búsqueda
                this.classList.remove('producto-seleccionado');
                this.select(); // Seleccionar todo el texto para facilitar reemplazo
            }
        });
    }
});

// Función para seleccionar un producto en edición
function seleccionarProductoEdit(productoData) {
    // Parsear datos del producto si es string
    const producto = typeof productoData === 'string' ? JSON.parse(productoData) : productoData;
    
    // Ocultar dropdown
    const dropdown = document.getElementById('productos_dropdown');
    if (dropdown) {
        dropdown.style.display = 'none';
    }
    
    // Mostrar el nombre del producto en el campo de búsqueda con estilo especial
    const searchField = document.getElementById('producto_search');
    searchField.value = producto.nombre;
    searchField.classList.add('producto-seleccionado');
    
    // Llenar campo oculto
    document.getElementById('producto_especifico_id').value = producto.id;
    
    // Mostrar botón de limpiar
    const clearBtn = document.getElementById('clear-product-btn');
    if (clearBtn) {
        clearBtn.style.display = 'block';
    }
    
    // Limpiar campos editables de detalles técnicos
    limpiarCamposDetallesTecnicos();
    
    // Completar campos de solo lectura
    completarCamposTecnicosEdit(producto);
    
    // Mostrar sección de detalles
    const detallesSection = document.getElementById('detalles_readonly');
    if (detallesSection) {
        detallesSection.style.display = 'block';
    }
}

// Función para completar los campos técnicos del producto existente en edición
function completarCamposTecnicosEdit(producto) {
    // Campos a completar en la sección de detalles técnicos (solo lectura)
    const camposTecnicos = [
        { id: 'marca_readonly', valor: producto.marca || '' },
        { id: 'unidad_de_negocio_readonly', valor: producto.unidad_de_negocio || '' },
        { id: 'ingrediente_principal_readonly', valor: producto.ingrediente_principal || '' },
        { id: 'forma_farmaceutica_readonly', valor: producto.forma_farmaceutica || '' },
        { id: 'concentracion_readonly', valor: producto.concentracion || '' },
        { id: 'expediente_readonly', valor: producto.expediente || '' }
    ];
    
    // Llenar campos de solo lectura de detalles técnicos
    camposTecnicos.forEach(campo => {
        const elemento = document.getElementById(campo.id);
        if (elemento) {
            elemento.value = campo.valor;
        }
    });
    
    // NOTA: No llenamos campos ocultos para productos existentes
    // porque no necesitamos actualizar esos datos del trámite
}

// Función para limpiar selección de producto en edición
function clearProductSelectionEdit() {
    const productoEspecificoId = document.getElementById('producto_especifico_id');
    if (productoEspecificoId) {
        productoEspecificoId.value = '';
    }
    
    // Limpiar y restaurar campo de búsqueda
    const searchField = document.getElementById('producto_search');
    if (searchField) {
        searchField.value = '';
        searchField.classList.remove('producto-seleccionado');
        searchField.placeholder = 'Buscar producto existente...';
    }
    
    // Ocultar elementos (solo si existen)
    const productosDropdown = document.getElementById('productos_dropdown');
    if (productosDropdown) {
        productosDropdown.style.display = 'none';
    }
    
    const clearProductBtn = document.getElementById('clear-product-btn');
    if (clearProductBtn) {
        clearProductBtn.style.display = 'none';
    }
    
    const detallesReadonly = document.getElementById('detalles_readonly');
    if (detallesReadonly) {
        detallesReadonly.style.display = 'none';
    }
    
    // Limpiar campos de solo lectura de detalles técnicos
    const camposTecnicosIds = ['marca_readonly', 'unidad_de_negocio_readonly', 'ingrediente_principal_readonly', 'forma_farmaceutica_readonly', 'concentracion_readonly', 'expediente_readonly'];
    camposTecnicosIds.forEach(campoId => {
        const elemento = document.getElementById(campoId);
        if (elemento) {
            elemento.value = '';
        }
    });
    
    // Limpiar campos editables de detalles técnicos
    limpiarCamposDetallesTecnicos();
}

// === FUNCIONALIDAD DE CAMBIO DINÁMICO DEL CAMPO NOMBRE DEL PRODUCTO ===
// IDs de tipos de trámite que corresponden a productos NUEVOS
const tiposNuevos = [1, 2, 3, 11, 19, 28, 37, 45];

// Función para cambiar el tipo de campo basado en el tipo de trámite
function toggleProductField(tipoTramiteId) {
    const nombreProductoInput = document.getElementById('nombre_producto');
    const productoSearchContainer = document.getElementById('producto-search-container');
    const detallesReadonly = document.getElementById('detalles_readonly');
    const searchField = document.getElementById('producto_search');
    const helpNew = document.getElementById('nombre-help-new');
    const helpExisting = document.getElementById('nombre-help-existing');
    
    if (!nombreProductoInput || !productoSearchContainer) {
        return;
    }
    
    if (tiposNuevos.includes(parseInt(tipoTramiteId))) {
        // Es tipo NUEVO: mostrar campo de texto normal
        console.log('Tipo de trámite es NUEVO, configurando campos...');
        
        // Solo limpiar si NO es la carga inicial de un trámite existente
        const tieneProductoEspecifico = document.getElementById('producto_especifico_id') && 
                                       document.getElementById('producto_especifico_id').value;
        
        if (!tieneProductoEspecifico) {
            // Primero limpiar completamente la selección de producto existente
            if (typeof clearProductSelectionEdit === 'function') {
                clearProductSelectionEdit();
            }
            
            // Limpiar campo de búsqueda también
            if (searchField) {
                searchField.value = '';
                searchField.classList.remove('producto-seleccionado');
            }
        }
        
        // Ahora configurar el campo de texto
        nombreProductoInput.style.display = 'block';
        nombreProductoInput.required = true;
        nombreProductoInput.readOnly = false;
        nombreProductoInput.classList.remove('campo-bloqueado');
        if (!tieneProductoEspecifico) {
            nombreProductoInput.value = '';
        }
        productoSearchContainer.style.display = 'none';
        
        // Mostrar/ocultar textos de ayuda
        if (helpNew) helpNew.style.display = 'block';
        if (helpExisting) helpExisting.style.display = 'none';
        
        // Para tipos NUEVO, mostrar la sección de detalles si ya existe producto
        if (detallesReadonly && tieneProductoEspecifico) {
            detallesReadonly.style.display = 'block';
        } else if (detallesReadonly) {
            detallesReadonly.style.display = 'none';
        }
        
        // Habilitar campos de detalles técnicos editables (siempre para tipos NUEVO)
        habilitarCamposDetallesTecnicos();
        
    } else if (tipoTramiteId) {
        // Es tipo EXISTENTE: mostrar campo de búsqueda
        nombreProductoInput.style.display = 'none';
        nombreProductoInput.required = false;
        nombreProductoInput.value = '';
        productoSearchContainer.style.display = 'block';
        
        // Mostrar/ocultar textos de ayuda
        if (helpNew) helpNew.style.display = 'none';
        if (helpExisting) helpExisting.style.display = 'block';
        
        // Limpiar campos de detalles técnicos editables
        limpiarCamposDetallesTecnicos();
        
    } else {
        // No hay tipo seleccionado: mostrar campo normal
        nombreProductoInput.style.display = 'block';
        nombreProductoInput.required = true;
        nombreProductoInput.readOnly = false;
        nombreProductoInput.classList.remove('campo-bloqueado');
        nombreProductoInput.value = '';
        productoSearchContainer.style.display = 'none';
        
        // Mostrar/ocultar textos de ayuda
        if (helpNew) helpNew.style.display = 'block';
        if (helpExisting) helpExisting.style.display = 'none';
        
        // Limpiar campo de búsqueda también
        if (searchField) {
            searchField.value = '';
            searchField.classList.remove('producto-seleccionado');
        }
        
        // Ocultar sección de detalles de solo lectura
        if (detallesReadonly) {
            detallesReadonly.style.display = 'none';
        }
        
        // Habilitar campos de detalles técnicos editables (cuando no hay tipo seleccionado)
        habilitarCamposDetallesTecnicos();
    }
}

// Función para habilitar campos de detalles técnicos editables
function habilitarCamposDetallesTecnicos() {
    const camposEditables = ['marca', 'unidad_de_negocio', 'ingrediente_principal', 'forma_farmaceutica_id', 'concentracion', 'expediente'];
    
    camposEditables.forEach(campoId => {
        const elemento = document.getElementById(campoId);
        if (elemento) {
            elemento.readOnly = false;
            elemento.disabled = false;
            elemento.style.backgroundColor = '';
            elemento.style.color = '';
            elemento.classList.remove('campo-bloqueado');
        }
    });
}

// Función para limpiar campos de detalles técnicos editables
function limpiarCamposDetallesTecnicos() {
    const camposEditables = ['marca', 'unidad_de_negocio', 'ingrediente_principal', 'forma_farmaceutica_id', 'concentracion', 'expediente'];
    
    camposEditables.forEach(campoId => {
        const elemento = document.getElementById(campoId);
        if (elemento) {
            elemento.value = '';
            elemento.readOnly = true;
            elemento.disabled = true;
            elemento.style.backgroundColor = '#f8f9fa';
            elemento.style.color = '#6c757d';
            elemento.classList.add('campo-bloqueado');
        }
    });
}

// Escuchar cambios en el tipo de trámite
document.addEventListener('DOMContentLoaded', function() {
    const tipoTramiteSelect = document.querySelector('[name="tipo_tramite_id"]') || document.getElementById('tipo_tramite_id');
    
    if (tipoTramiteSelect) {
        // Ejecutar al cargar la página
        toggleProductField(tipoTramiteSelect.value);
        
        // Ejecutar cuando cambie la selección
        tipoTramiteSelect.addEventListener('change', function() {
            toggleProductField(this.value);
        });
    }
    
    // NUEVA LÓGICA: Inicializar campos de detalles técnicos para trámites existentes
    @if($tramite->productoEspecifico)
        // Si ya existe un producto específico, inicializar los campos de solo lectura
        const productoExistente = {
            marca: "{{ $tramite->productoEspecifico->marca ?? '' }}",
            unidad_de_negocio: "{{ $tramite->productoEspecifico->unidad_de_negocio ?? '' }}",
            ingrediente_principal: "{{ $tramite->productoEspecifico->ingrediente_principal ?? '' }}",
            forma_farmaceutica: "{{ $tramite->productoEspecifico->formaFarmaceutica->nombre ?? '' }}",
            concentracion: "{{ $tramite->productoEspecifico->concentracion ?? '' }}",
            expediente: "{{ $tramite->productoEspecifico->expediente ?? '' }}"
        };
        
        console.log('Inicializando campos de detalles técnicos:', productoExistente);
        
        // Función para inicializar con múltiples intentos
        function inicializarCamposConReintentos(intentos = 0) {
            if (intentos >= 50) { // Aumentar a 50 intentos (5 segundos)
                console.error('No se pudieron inicializar los campos después de 50 intentos');
                return;
            }
            
            // Buscar múltiples elementos para verificar si la vista se cargó
            const elementos = [
                document.getElementById('forma_farmaceutica_readonly'),
                document.getElementById('ingrediente_principal_readonly'),
                document.getElementById('concentracion_readonly')
            ];
            
            const elementosEncontrados = elementos.filter(el => el !== null);
            
            if (elementosEncontrados.length > 0) {
                console.log('Elementos encontrados, inicializando campos...', elementosEncontrados.length);
                completarCamposTecnicosEdit(productoExistente);
            } else {
                console.log('Elementos no encontrados, reintentando en 100ms... (intento ' + (intentos + 1) + ')');
                setTimeout(() => inicializarCamposConReintentos(intentos + 1), 100);
            }
        }
        
        // Inicializar con reintentos
        inicializarCamposConReintentos();
        
        // Alternativa: Usar MutationObserver para detectar cuando se agregan elementos
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    const formaElement = document.getElementById('forma_farmaceutica_readonly');
                    if (formaElement) {
                        console.log('Elemento detectado por MutationObserver, inicializando...');
                        observer.disconnect(); // Dejar de observar
                        completarCamposTecnicosEdit(productoExistente);
                    }
                }
            });
        });
        
        // Observar cambios en el body
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    @else
        console.log('No hay producto específico para inicializar');
    @endif
    });
</script>

<!-- Modal de Notificación -->
<div class="modal fade" id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="notificationModalLabel">
                    <i class="fas fa-envelope"></i> Enviar Notificación por Correo
                </h5>
                <button type="button" class="btn-close" onclick="closeNotificationModal()" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="notificationContent">
                    <div class="text-center">
                        <div class="notification-spinner" role="status">
                            <div class="spinner-circle"></div>
                        </div>
                        <p class="mt-2">Cargando información de áreas y correos...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeNotificationModal()">
                    <i class="fas fa-times"></i> Cancelar
                </button>

                <button type="button" class="btn btn-primary" id="sendNotificationBtn" onclick="sendNotification()" disabled>
                    <i class="fas fa-paper-plane"></i> Enviar Notificación
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Variables globales para el modal de notificación
let currentTramiteId = null;
let selectedEmails = [];

// Función para mostrar el modal de notificación
async function showNotificationModal(tramiteId) {
    currentTramiteId = tramiteId;
    selectedEmails = [];
    
    // Mostrar el modal usando jQuery (más compatible)
    const modalElement = document.getElementById('notificationModal');
    if (modalElement) {
        // Usar jQuery si está disponible, sino usar Bootstrap nativo
        if (typeof $ !== 'undefined' && $.fn.modal) {
            $('#notificationModal').modal('show');
        } else if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const modal = new bootstrap.Modal(modalElement);
            modal.show();
        } else {
            // Fallback: mostrar modal manualmente
            if (modalElement && modalElement.style) {
                modalElement.style.display = 'block';
            }
            modalElement.classList.add('show');
            document.body.classList.add('modal-open');
            
            // Agregar backdrop
            const backdrop = document.createElement('div');
            backdrop.className = 'modal-backdrop fade show';
            backdrop.id = 'notificationModalBackdrop';
            document.body.appendChild(backdrop);
        }
        
        // Cargar datos del modal
        await loadNotificationData(tramiteId);
    } else {
        console.error('Modal element not found');
        alert('Error: No se pudo abrir el modal de notificación');
    }
}

// Función para cargar los datos del modal
async function loadNotificationData(tramiteId) {
    const contentDiv = document.getElementById('notificationContent');
    const sendBtn = document.getElementById('sendNotificationBtn');
    
    try {
        const response = await fetch(`/admin/tramites/${tramiteId}/notification-modal`);
        const data = await response.json();
        
            if (data.success) {
        contentDiv.innerHTML = generateNotificationContent(data);
        // El botón se habilitará cuando se seleccionen correos
        sendBtn.disabled = true;
        // Inicializar el estado visual del botón
        sendBtn.classList.remove('btn-primary');
        sendBtn.classList.add('btn-secondary');
        
        // Agregar event listeners a los checkboxes después de generar el contenido
        setTimeout(() => {
            const checkboxes = document.querySelectorAll('.email-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateSelectedEmails);
            });
            
            // Verificar estado inicial del botón
            updateSelectedEmails();
            
            // Agregar event delegation como respaldo
            const modalBody = document.querySelector('#notificationModal .modal-body');
            if (modalBody) {
                modalBody.addEventListener('change', function(e) {
                    if (e.target.classList.contains('email-checkbox')) {
                        updateSelectedEmails();
                    }
                });
            }
        }, 100);
    } else {
            contentDiv.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i>
                    ${data.message}
                </div>
            `;
            sendBtn.disabled = true;
            // Inicializar el estado visual del botón en caso de error
            sendBtn.classList.remove('btn-primary');
            sendBtn.classList.add('btn-secondary');
        }
    } catch (error) {
        contentDiv.innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle"></i>
                Error al cargar la información: ${error.message}
            </div>
        `;
        sendBtn.disabled = true;
        // Inicializar el estado visual del botón en caso de error
        sendBtn.classList.remove('btn-primary');
        sendBtn.classList.add('btn-secondary');
    }
}

// Función para generar el contenido del modal
function generateNotificationContent(data) {
    let html = `
        <div class="mb-3">
            <h6><i class="fas fa-info-circle"></i> Información del Trámite</h6>
            <div class="row">
                <div class="col-md-6">
                    <strong>ID:</strong> #${data.tramite.id}<br>
                    <strong>Producto:</strong> ${data.tramite.nombre_producto}<br>
                    <strong>Tipo:</strong> ${data.tramite.tipo_tramite}
                </div>
                <div class="col-md-6">
                    <strong>Estado:</strong> ${data.tramite.estado}<br>
                    <strong>Responsable:</strong> ${data.tramite.responsable}
                </div>
            </div>
        </div>
        
        <hr>
        
        <div class="mb-3">
            <h6><i class="fas fa-envelope"></i> Seleccionar Destinatarios</h6>
            <p class="text-muted">Marque los correos a los que desea enviar la notificación:</p>
        </div>
    `;
    
    if (data.areas && data.areas.length > 0) {
        data.areas.forEach(area => {
            html += `
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-building"></i> ${area.nombre}
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
            `;
            
            area.emails.forEach(email => {
                html += `
                    <div class="col-md-6 mb-2">
                        <div class="form-check">
                            <input class="form-check-input email-checkbox" 
                                   type="checkbox" 
                                   value="${email.id}" 
                                   id="email_${email.id}"
                                   onchange="updateSelectedEmails()">
                            <label class="form-check-label" for="email_${email.id}">
                                <strong>${email.nombre || 'Sin nombre'}</strong><br>
                                <small class="text-muted">${email.email}</small>
                            </label>
                        </div>
                    </div>
                `;
            });
            
            html += `
                        </div>
                    </div>
                </div>
            `;
        });
    } else {
        html += `
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                No hay áreas con correos configurados en el sistema.
            </div>
        `;
    }
    
    return html;
}

// Función para actualizar los correos seleccionados
function updateSelectedEmails() {
    const checkboxes = document.querySelectorAll('.email-checkbox:checked');
    selectedEmails = Array.from(checkboxes).map(cb => cb.value);
    
    const sendBtn = document.getElementById('sendNotificationBtn');
    
    if (sendBtn) {
        const shouldDisable = selectedEmails.length === 0;
        
        sendBtn.disabled = shouldDisable;
        
        // Actualizar el texto del botón con el contador
        const count = selectedEmails.length;
        if (count === 0) {
            sendBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Enviar Notificación';
        } else {
            sendBtn.innerHTML = `<i class="fas fa-paper-plane"></i> Enviar Notificación (${count})`;
        }
        
        // Forzar actualización visual del botón
        if (sendBtn && sendBtn.style) {
            sendBtn.style.display = 'none';
            sendBtn.offsetHeight; // Trigger reflow
            sendBtn.style.display = '';
        }
        
        // Aplicar clases CSS apropiadas para el estado del botón
        if (shouldDisable) {
            sendBtn.classList.remove('btn-primary');
            sendBtn.classList.add('btn-secondary');
        } else {
            sendBtn.classList.remove('btn-secondary');
            sendBtn.classList.add('btn-primary');
        }

    } else {
        console.error('Botón sendNotificationBtn no encontrado');
    }
    
    // Actualizar contador si existe
    const countSpan = document.getElementById('selectedCount');
    if (countSpan) {
        countSpan.textContent = selectedEmails.length;
    }
}

// Función para enviar la notificación
async function sendNotification() {
    if (!currentTramiteId || selectedEmails.length === 0) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Debe seleccionar al menos un correo para enviar la notificación.'
        });
        return;
    }
    
    const sendBtn = document.getElementById('sendNotificationBtn');
    const originalText = sendBtn.innerHTML;
    
    try {
        // Deshabilitar botón y mostrar loading
        sendBtn.disabled = true;
        sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enviando...';
        
        const response = await fetch(`/admin/tramites/${currentTramiteId}/send-notification`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                selected_emails: selectedEmails
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showBootstrapAlert({
                type: 'success',
                title: '¡Notificación Enviada!',
                message: data.message,
                onClose: function() {
                    // Solo cerrar el modal, NO recargar la página
                    closeNotificationModal();
                }
            });
        } else {
            throw new Error(data.message);
        }
        
    } catch (error) {
        showBootstrapAlert({
            type: 'error',
            title: 'Error al Enviar',
            message: error.message || 'Ocurrió un error al enviar la notificación.'
        });
    } finally {
        // Restaurar botón
        sendBtn.disabled = false;
        sendBtn.innerHTML = originalText;
    }
}

// Función para seleccionar/deseleccionar todos los correos de un área
function toggleAreaEmails(areaId) {
    const checkboxes = document.querySelectorAll(`[data-area="${areaId}"]`);
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    
    checkboxes.forEach(cb => {
        cb.checked = !allChecked;
    });
    
    updateSelectedEmails();
}



// Función para cerrar el modal de notificación
function closeNotificationModal() {
    const modalElement = document.getElementById('notificationModal');
    if (modalElement) {
        // Usar jQuery si está disponible
        if (typeof $ !== 'undefined' && $.fn.modal) {
            $('#notificationModal').modal('hide');
        } else if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
            const modal = bootstrap.Modal.getInstance(modalElement);
            if (modal) {
                modal.hide();
            }
        } else {
            // Fallback: cerrar modal manualmente
            if (modalElement && modalElement.style) {
                modalElement.style.display = 'none';
            }
            modalElement.classList.remove('show');
            document.body.classList.remove('modal-open');
            
            // Remover backdrop
            const backdrop = document.getElementById('notificationModalBackdrop');
            if (backdrop) {
                backdrop.remove();
            }
        }
    }
}

/**
 * Función para mostrar modal de confirmación usando Bootstrap 5 nativo
 * Reemplaza SweetAlert2 para mejor compatibilidad
 */
function showBootstrapConfirmModal(options) {
    const modalId = 'bootstrapConfirmModal';
    
    // Remover modal existente si existe
    const existingModal = document.getElementById(modalId);
    if (existingModal) {
        existingModal.remove();
    }
    
    // Crear HTML del modal
    const modalHtml = `
        <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}Label" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="${modalId}Label">${options.title || 'Confirmación'}</h5>
                        <button type="button" class="btn btn-link p-0 border-0" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times text-muted" style="font-size: 1.2rem;"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        ${options.message || '¿Está seguro de que desea continuar?'}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                        <button type="button" class="btn ${options.confirmClass || 'btn-primary'}" id="${modalId}Confirm">
                            ${options.confirmText || 'Confirmar'}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Agregar modal al DOM
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Obtener elementos del modal
    const modalElement = document.getElementById(modalId);
    const confirmButton = document.getElementById(modalId + 'Confirm');
    
    // Configurar eventos
    confirmButton.addEventListener('click', function() {
        // Mostrar loading
        if (options.loadingText) {
            confirmButton.innerHTML = `
                <div class="spinner-border spinner-border-sm me-2" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                ${options.loadingText}
            `;
            confirmButton.disabled = true;
        }
        
        // Cerrar modal
        const modal = bootstrap.Modal.getInstance(modalElement);
        if (modal) {
            modal.hide();
        }
        
        // Ejecutar callback
        if (options.onConfirm && typeof options.onConfirm === 'function') {
            options.onConfirm();
        }
    });
    
    // Limpiar modal cuando se cierre
    modalElement.addEventListener('hidden.bs.modal', function() {
        modalElement.remove();
    });
    
    // Mostrar modal
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
}

/**
 * Función para mostrar alertas usando Bootstrap 5 nativo
 * Reemplaza SweetAlert2 para alertas simples
 */
function showBootstrapAlert(options) {
    const alertId = 'bootstrapAlert';
    
    // Remover alerta existente si existe
    const existingAlert = document.getElementById(alertId);
    if (existingAlert) {
        existingAlert.remove();
    }
    
    // Determinar estilo según el tipo
    let alertClass = 'alert-info';
    let iconClass = 'fas fa-info-circle';
    
    if (options.type === 'success') {
        alertClass = 'alert-success';
        iconClass = 'fas fa-check-circle';
    } else if (options.type === 'error') {
        alertClass = 'alert-danger';
        iconClass = 'fas fa-exclamation-circle';
    } else if (options.type === 'warning') {
        alertClass = 'alert-warning';
        iconClass = 'fas fa-exclamation-triangle';
    }
    
    // Crear HTML de la alerta
    const alertHtml = `
        <div class="modal fade" id="${alertId}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title">
                            <i class="${iconClass} me-2"></i>
                            ${options.title || 'Notificación'}
                        </h5>
                        <button type="button" class="btn btn-link p-0 border-0" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fas fa-times text-muted" style="font-size: 1.2rem;"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="alert ${alertClass} border-0 mb-0" role="alert">
                            ${options.message || 'Mensaje de notificación'}
                        </div>
                    </div>
                    <div class="modal-footer border-0">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                            <i class="fas fa-check"></i> Aceptar
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Agregar alerta al DOM
    document.body.insertAdjacentHTML('beforeend', alertHtml);
    
    // Obtener elemento del modal
    const modalElement = document.getElementById(alertId);
    
    // Limpiar modal cuando se cierre y ejecutar callback si existe
    modalElement.addEventListener('hidden.bs.modal', function() {
        modalElement.remove();
        if (options.onClose && typeof options.onClose === 'function') {
            options.onClose();
        }
    });
    
    // Mostrar modal
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
}
</script>
@endsection