{{-- MercadoLibre Configuration Form --}}
{{-- Requires: $settings (IntegrationSetting) --}}
<div id="ml-config-container">
<form action="{{ route('integrations.mercadolibre.update') }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <div class="card">
        <div class="card-body p-0">

            <!-- Navigation Tabs -->
            <ul class="nav nav-tabs" id="mercadolibreTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="general-mercadolibre-tab" data-bs-toggle="tab" data-bs-target="#general-mercadolibre"
                            type="button" role="tab" aria-controls="general-mercadolibre" aria-selected="true">
                        <i class="ri-store-2-line tab-icon"></i>
                        Configuración General
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="sync-tab" data-bs-toggle="tab" data-bs-target="#sync-settings"
                            type="button" role="tab" aria-controls="sync-settings" aria-selected="false">
                        <i class="ri-refresh-line tab-icon"></i>
                        Sincronización
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="advanced-tab" data-bs-toggle="tab" data-bs-target="#advanced-settings"
                            type="button" role="tab" aria-controls="advanced-settings" aria-selected="false">
                        <i class="ri-settings-4-line tab-icon"></i>
                        Avanzado
                    </button>
                </li>
            </ul>

            <!-- Tab Content -->
            <div class="tab-content" id="mercadolibreTabContent">

                {{-- ======================================== --}}
                {{-- TAB 1: Configuración General --}}
                {{-- ======================================== --}}
                <div class="tab-pane fade show active" id="general-mercadolibre" role="tabpanel" aria-labelledby="general-mercadolibre-tab">
                    <div class="integration-card">
                        <div class="d-flex align-items-center mb-4">
                            <div class="integration-icon">
                                <i class="ri-store-2-line"></i>
                            </div>
                            <div>
                                <h5 class="mb-1">Mercado Libre - Marketplace Líder</h5>
                                <p class="text-muted mb-0">Configura la integración con Mercado Libre para sincronizar productos y gestionar ventas</p>
                                <span class="environment-badge mt-2 d-inline-block">
                                    <i class="ri-global-line"></i> Marketplace
                                </span>
                            </div>
                        </div>

                        <!-- Enable/Disable Toggle -->
                        <div class="alert alert-light border">
                            <h6 class="form-section-title mb-3">
                                <i class="ri-shut-down-line text-warning"></i>
                                Estado de la Integración
                            </h6>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="d-block mb-3"><strong>MercadoLibre Status</strong></label>
                                        <div class="btn-group btn-group-toggle" data-bs-toggle="buttons">
                                            <label class="btn btn-outline-success {{ old('ml_enabled', $settings->ml_enabled ?? false) ? 'active' : '' }}">
                                                <input type="radio" name="ml_enabled" value="1" id="ml_enabled_yes" {{ old('ml_enabled', $settings->ml_enabled ?? false) ? 'checked' : '' }}>
                                                <i class="ri-checkbox-circle-line"></i> Habilitar
                                            </label>
                                            <label class="btn btn-outline-danger {{ old('ml_enabled', $settings->ml_enabled ?? false) ? '' : 'active' }}">
                                                <input type="radio" name="ml_enabled" value="0" id="ml_enabled_no" {{ old('ml_enabled', $settings->ml_enabled ?? false) ? '' : 'checked' }}>
                                                <i class="ri-close-circle-line"></i> Deshabilitar
                                            </label>
                                        </div>
                                        <small class="help-text d-block mt-2">
                                            <i class="ri-information-line"></i>
                                            <strong>Habilitado:</strong> MercadoLibre estará disponible para sincronización.
                                            <strong>Deshabilitado:</strong> Las configuraciones se guardan pero no se sincroniza.
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Configuration Content (hidden when disabled) -->
                        <div class="ml-configuration-content">

                        <h6 class="form-section-title">
                            <i class="ri-key-line text-warning"></i>
                            Credenciales de Producción
                            <span class="badge bg-info ms-2">Requerido solo en modo Producción</span>
                        </h6>

                        <div class="config-group ml-production-fields">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ml_production_client_id" class="form-label">Production Client ID <span class="text-danger ml-production-required">*</span></label>
                                        <div class="input-group">
                                            <input type="password" name="ml_production_client_id" id="ml_production_client_id" class="form-control credential-field @error('ml_production_client_id') is-invalid @enderror"
                                                   value="{{ old('ml_production_client_id', $settings->ml_production_client_id ?? '') }}"
                                                   placeholder="••••••••">
                                            <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="ml_production_client_id">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        </div>
                                        <small class="help-text">
                                            <i class="ri-id-card-line"></i>
                                            ID del cliente para el entorno de producción de Mercado Libre
                                        </small>
                                        @error('ml_production_client_id')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ml_production_client_secret" class="form-label">Production Client Secret <span class="text-danger ml-production-required">*</span></label>
                                        <div class="input-group">
                                            <input type="password" name="ml_production_client_secret" id="ml_production_client_secret" class="form-control credential-field @error('ml_production_client_secret') is-invalid @enderror"
                                                   value="{{ old('ml_production_client_secret', $settings->ml_production_client_secret ?? '') }}"
                                                   placeholder="••••••••">
                                            <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="ml_production_client_secret">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        </div>
                                        <small class="help-text">
                                            <i class="ri-spy-line"></i>
                                            Secreto del cliente para el entorno de producción de Mercado Libre
                                        </small>
                                        @error('ml_production_client_secret')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modo Sandbox -->
                        <div class="ml-sandbox-section">
                            <h6 class="form-section-title">
                                <i class="ri-flask-line text-warning"></i>
                                Modo de Pruebas (Sandbox)
                                <span class="badge bg-warning ms-2">Requerido solo en modo Sandbox</span>
                            </h6>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input type="checkbox" name="ml_use_sandbox" class="form-check-input" id="ml_use_sandbox" {{ old('ml_use_sandbox', $settings->ml_use_sandbox ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="ml_use_sandbox">
                                                <strong>Usar Modo Sandbox (Pruebas)</strong>
                                                <span class="environment-badge sandbox ms-2">
                                                    <i class="ri-flask-line"></i> Entorno de Pruebas
                                                </span>
                                            </label>
                                            <small class="help-text d-block">
                                                <i class="ri-error-warning-line"></i>
                                                Marque esta opción para usar el entorno de pruebas de Mercado Libre. Las credenciales de Producción se deshabilitarán automáticamente.
                                            </small>
                                            @error('ml_use_sandbox')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row ml-sandbox-field" style="display: none;">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ml_sandbox_client_id" class="form-label">Sandbox Client ID <span class="text-danger ml-sandbox-required">*</span></label>
                                        <div class="input-group">
                                            <input type="password" name="ml_sandbox_client_id" id="ml_sandbox_client_id" class="form-control credential-field @error('ml_sandbox_client_id') is-invalid @enderror"
                                                   value="{{ old('ml_sandbox_client_id', $settings->ml_sandbox_client_id ?? '') }}"
                                                   placeholder="••••••••">
                                            <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="ml_sandbox_client_id">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        </div>
                                        <small class="help-text">
                                            <i class="ri-flask-line"></i>
                                            ID del cliente para el entorno de pruebas de Mercado Libre
                                        </small>
                                        @error('ml_sandbox_client_id')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="ml_sandbox_client_secret" class="form-label">Sandbox Client Secret <span class="text-danger ml-sandbox-required">*</span></label>
                                        <div class="input-group">
                                            <input type="password" name="ml_sandbox_client_secret" id="ml_sandbox_client_secret" class="form-control credential-field @error('ml_sandbox_client_secret') is-invalid @enderror"
                                                   value="{{ old('ml_sandbox_client_secret', $settings->ml_sandbox_client_secret ?? '') }}"
                                                   placeholder="••••••••">
                                            <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="ml_sandbox_client_secret">
                                                <i class="ri-eye-line"></i>
                                            </button>
                                        </div>
                                        <small class="help-text">
                                            <i class="ri-flask-line"></i>
                                            Secreto del cliente para el entorno de pruebas de Mercado Libre
                                        </small>
                                        @error('ml_sandbox_client_secret')
                                            <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        </div><!-- /.ml-configuration-content -->

                        <div class="alert alert-info mt-3">
                            <i class="ri-information-line"></i>
                            <strong>¿Cómo obtener las credenciales de Mercado Libre?</strong>
                            <ol class="mb-0 mt-2">
                                <li>Ve a <a href="https://developers.mercadolibre.com.ar" target="_blank">Mercado Libre Developers</a></li>
                                <li>Inicia sesión con tu cuenta de Mercado Libre</li>
                                <li>Crea una nueva aplicación desde "Mis aplicaciones"</li>
                                <li>Completa la información requerida (nombre, descripción, etc.)</li>
                                <li>Una vez creada, encontrarás tu App ID (Client ID) y Secret Key</li>
                            </ol>
                        </div>
                    </div>
                </div>

                {{-- ======================================== --}}
                {{-- TAB 2: Sincronización --}}
                {{-- ======================================== --}}
                <div class="tab-pane fade" id="sync-settings" role="tabpanel" aria-labelledby="sync-tab">
                    <div class="integration-card">
                        <h6 class="form-section-title">
                            <i class="ri-refresh-line text-primary"></i>
                            Sincronización Automática
                        </h6>
                        <p class="text-muted mb-4">
                            Configurá la sincronización automática de stock y precios entre tu sistema y MercadoLibre.
                        </p>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="ml_auto_sync_stock" value="0">
                                        <input type="checkbox" name="ml_auto_sync_stock" class="form-check-input" id="ml_auto_sync_stock" value="1"
                                               {{ old('ml_auto_sync_stock', $settings->ml_auto_sync_stock ?? false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="ml_auto_sync_stock">
                                            <strong>Sincronizar Stock Automáticamente</strong>
                                        </label>
                                    </div>
                                    <small class="help-text d-block">
                                        <i class="ri-information-line"></i>
                                        Al activar, el stock de las publicaciones se actualiza automáticamente según el stock físico del sistema (WW_STCK).
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check form-switch">
                                        <input type="hidden" name="ml_auto_sync_price" value="0">
                                        <input type="checkbox" name="ml_auto_sync_price" class="form-check-input" id="ml_auto_sync_price" value="1"
                                               {{ old('ml_auto_sync_price', $settings->ml_auto_sync_price ?? false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="ml_auto_sync_price">
                                            <strong>Sincronizar Precios Automáticamente</strong>
                                        </label>
                                    </div>
                                    <small class="help-text d-block">
                                        <i class="ri-information-line"></i>
                                        Al activar, los precios de las publicaciones se actualizan según el precio MLA (IM_MLA_VTA) o precio unitario (IM_UNITA).
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="ml_sync_interval_minutes" class="form-label">Intervalo de Sincronización (minutos)</label>
                                    <input type="number" name="ml_sync_interval_minutes" id="ml_sync_interval_minutes"
                                           class="form-control @error('ml_sync_interval_minutes') is-invalid @enderror"
                                           value="{{ old('ml_sync_interval_minutes', $settings->ml_sync_interval_minutes ?? 60) }}"
                                           min="5" max="1440" step="5">
                                    <small class="help-text">
                                        <i class="ri-time-line"></i>
                                        Cada cuántos minutos se ejecuta la sincronización automática (mín: 5, máx: 1440)
                                    </small>
                                    @error('ml_sync_interval_minutes')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Última Sincronización</label>
                                    <div class="form-control-plaintext">
                                        @if($settings->ml_last_sync_at)
                                            <span class="badge bg-success">
                                                <i class="ri-check-line"></i>
                                                {{ \Carbon\Carbon::parse($settings->ml_last_sync_at)->format('d/m/Y H:i:s') }}
                                            </span>
                                            <br><small class="text-muted">{{ \Carbon\Carbon::parse($settings->ml_last_sync_at)->diffForHumans() }}</small>
                                        @else
                                            <span class="badge bg-secondary">
                                                <i class="ri-time-line"></i> Nunca sincronizado
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <div class="form-check form-switch mt-4">
                                        <input type="hidden" name="ml_log_enabled" value="0">
                                        <input type="checkbox" name="ml_log_enabled" class="form-check-input" id="ml_log_enabled" value="1"
                                               {{ old('ml_log_enabled', $settings->ml_log_enabled ?? false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="ml_log_enabled">
                                            <strong>Habilitar Log Detallado</strong>
                                        </label>
                                    </div>
                                    <small class="help-text d-block">
                                        <i class="ri-file-text-line"></i>
                                        Registra en detalle cada operación de sincronización para diagnóstico.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ======================================== --}}
                {{-- TAB 3: Avanzado --}}
                {{-- ======================================== --}}
                <div class="tab-pane fade" id="advanced-settings" role="tabpanel" aria-labelledby="advanced-tab">
                    <div class="integration-card">
                        <h6 class="form-section-title">
                            <i class="ri-global-line text-info"></i>
                            Configuración Regional
                        </h6>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="ml_site_id" class="form-label">Site ID (País)</label>
                                    <select name="ml_site_id" id="ml_site_id" class="form-select @error('ml_site_id') is-invalid @enderror">
                                        <option value="MLA" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MLA' ? 'selected' : '' }}>MLA - Argentina</option>
                                        <option value="MLB" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MLB' ? 'selected' : '' }}>MLB - Brasil</option>
                                        <option value="MLC" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MLC' ? 'selected' : '' }}>MLC - Chile</option>
                                        <option value="MLM" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MLM' ? 'selected' : '' }}>MLM - México</option>
                                        <option value="MCO" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MCO' ? 'selected' : '' }}>MCO - Colombia</option>
                                        <option value="MLU" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MLU' ? 'selected' : '' }}>MLU - Uruguay</option>
                                        <option value="MPE" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MPE' ? 'selected' : '' }}>MPE - Perú</option>
                                        <option value="MEC" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MEC' ? 'selected' : '' }}>MEC - Ecuador</option>
                                        <option value="MPY" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MPY' ? 'selected' : '' }}>MPY - Paraguay</option>
                                        <option value="MBO" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MBO' ? 'selected' : '' }}>MBO - Bolivia</option>
                                        <option value="MVE" {{ old('ml_site_id', $settings->ml_site_id ?? 'MLA') == 'MVE' ? 'selected' : '' }}>MVE - Venezuela</option>
                                    </select>
                                    <small class="help-text">
                                        <i class="ri-map-pin-line"></i>
                                        Sitio de MercadoLibre donde operás
                                    </small>
                                    @error('ml_site_id')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="ml_redirect_uri" class="form-label">Redirect URI (OAuth Callback)</label>
                                    <div class="input-group">
                                        <input type="text" name="ml_redirect_uri" id="ml_redirect_uri"
                                               class="form-control @error('ml_redirect_uri') is-invalid @enderror"
                                               value="{{ old('ml_redirect_uri', $settings->ml_redirect_uri ?? route('meli.oauth.callback')) }}"
                                               placeholder="{{ route('meli.oauth.callback') }}">
                                        <button type="button" class="btn btn-outline-secondary" onclick="document.getElementById('ml_redirect_uri').value='{{ route('meli.oauth.callback') }}'">
                                            <i class="ri-refresh-line"></i> Restaurar
                                        </button>
                                    </div>
                                    <small class="help-text">
                                        <i class="ri-link"></i>
                                        URL de callback para OAuth. Debe coincidir con la configurada en tu aplicación de MercadoLibre Developers.
                                        <br>URL por defecto: <code>{{ route('meli.oauth.callback') }}</code>
                                    </small>
                                    @error('ml_redirect_uri')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="integration-card">
                        <h6 class="form-section-title">
                            <i class="ri-file-list-3-line text-success"></i>
                            Documentación Tesauro
                        </h6>
                        <p class="text-muted mb-3">
                            Configuración para la generación automática de documentos en Tesauro Desktop asociados a ventas de MercadoLibre.
                        </p>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="ml_doc_type" class="form-label">Tipo de Documento</label>
                                    <input type="text" name="ml_doc_type" id="ml_doc_type"
                                           class="form-control @error('ml_doc_type') is-invalid @enderror"
                                           value="{{ old('ml_doc_type', $settings->ml_doc_type ?? '') }}"
                                           placeholder="Ej: FAC, REM, REC" maxlength="10">
                                    <small class="help-text">
                                        <i class="ri-file-text-line"></i>
                                        Código del tipo de documento a generar en Tesauro (ej: FAC, REM, REC)
                                    </small>
                                    @error('ml_doc_type')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="ml_doc_prefix" class="form-label">Prefijo de Documento</label>
                                    <input type="text" name="ml_doc_prefix" id="ml_doc_prefix"
                                           class="form-control @error('ml_doc_prefix') is-invalid @enderror"
                                           value="{{ old('ml_doc_prefix', $settings->ml_doc_prefix ?? '') }}"
                                           placeholder="Ej: ML-" maxlength="10">
                                    <small class="help-text">
                                        <i class="ri-text"></i>
                                        Prefijo para identificar documentos generados por MercadoLibre
                                    </small>
                                    @error('ml_doc_prefix')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Form Actions -->
            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg">
                    <i class="ri-save-line me-2"></i>Actualizar Configuración de Mercado Libre
                </button>
                <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-lg ms-3">
                    <i class="ri-close-line me-2"></i>Cancelar
                </a>
            </div>

        </div>
    </div>

</form>
</div><!-- /#ml-config-container -->

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var mlContainer = document.getElementById('ml-config-container');
    if (!mlContainer) return;

    var mlEnabledYes = document.getElementById('ml_enabled_yes');
    var mlEnabledNo = document.getElementById('ml_enabled_no');
    var mlConfigContent = mlContainer.querySelector('.ml-configuration-content');

    var mlSandboxCheckbox = document.getElementById('ml_use_sandbox');
    var mlSandboxFields = mlContainer.querySelectorAll('.ml-sandbox-field');
    var mlProductionFields = mlContainer.querySelector('.ml-production-fields');
    var mlProductionRequiredSpans = mlContainer.querySelectorAll('.ml-production-required');
    var mlSandboxRequiredSpans = mlContainer.querySelectorAll('.ml-sandbox-required');

    // Toggle entire configuration content based on ml_enabled
    function toggleMercadoLibre() {
        var isEnabled = mlEnabledYes.checked;
        if (isEnabled) {
            mlConfigContent.style.display = 'block';
            mlConfigContent.style.opacity = '1';
        } else {
            mlConfigContent.style.display = 'none';
            mlConfigContent.style.opacity = '0.3';
        }
    }

    // Toggle sandbox/production fields
    function toggleMLEnvironmentFields() {
        var isSandbox = mlSandboxCheckbox.checked;

        mlSandboxFields.forEach(function(field) {
            field.style.display = isSandbox ? 'block' : 'none';
        });

        mlSandboxRequiredSpans.forEach(function(span) {
            span.style.display = isSandbox ? 'inline' : 'none';
        });

        mlProductionRequiredSpans.forEach(function(span) {
            span.style.display = isSandbox ? 'none' : 'inline';
        });

        if (mlProductionFields) {
            mlProductionFields.style.display = isSandbox ? 'none' : 'block';
        }
    }

    // Event listeners
    mlEnabledYes.addEventListener('change', toggleMercadoLibre);
    mlEnabledNo.addEventListener('change', toggleMercadoLibre);
    mlSandboxCheckbox.addEventListener('change', toggleMLEnvironmentFields);

    // Toggle visibility buttons (ojito) - scoped to ML container
    mlContainer.querySelectorAll('.toggle-visibility').forEach(function(button) {
        button.addEventListener('click', function() {
            var targetId = this.getAttribute('data-bs-target');
            var input = document.getElementById(targetId);
            var icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('ri-eye-line');
                icon.classList.add('ri-eye-off-line');
            } else {
                input.type = 'password';
                icon.classList.remove('ri-eye-off-line');
                icon.classList.add('ri-eye-line');
            }
        });
    });

    // Initial calls
    toggleMercadoLibre();
    toggleMLEnvironmentFields();
});
</script>
@endpush