{{-- MercadoPago Configuration Form --}}
{{-- Requires: $settings (IntegrationSetting) --}}
<div id="mp-config-container">
<form action="{{ route('integrations.mercadopago.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="mercadopagoTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="general-mercadopago-tab" data-bs-toggle="tab" data-bs-target="#general-mercadopago"
                            type="button" role="tab" aria-controls="general-mercadopago" aria-selected="true">
                        <i class="ri-bank-card-line tab-icon"></i>
                        Configuración General
                    </button>
                </li>
            </ul>

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

                <!-- Configuración General de Mercado Pago -->
                <div class="tab-pane fade show active" id="general-mercadopago" role="tabpanel" aria-labelledby="general-mercadopago-tab">
                    <div class="integration-card">
                        <div class="d-flex align-items-center mb-4">
                            <div class="integration-icon">
                                <i class="ri-bank-card-line"></i>
                            </div>
                            <div>
                                <h5 class="mb-1">Mercado Pago - Plataforma de Pagos</h5>
                                <p class="text-muted mb-0">Configura la integración con Mercado Pago para procesar pagos en tu tienda</p>
                                <span class="environment-badge mt-2 d-inline-block">
                                    <i class="ri-shield-check-line"></i> Pagos Seguros
                                </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-primary"></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>MercadoPago Status</strong></label>
                                        <div class="btn-group btn-group-toggle" data-bs-toggle="buttons">
                                            <label class="btn btn-outline-success {{ old('mp_enabled', $settings->mp_enabled ?? false) ? 'active' : '' }}" id="mp_enabled_yes_label">
                                                <input type="radio" name="mp_enabled" value="1" id="mp_enabled_yes" {{ old('mp_enabled', $settings->mp_enabled ?? false) ? 'checked' : '' }}>
                                                <i class="ri-checkbox-circle-line"></i> <span id="mp_enabled_yes_text">{{ old('mp_enabled', $settings->mp_enabled ?? false) ? 'Habilitado' : 'Habilitar' }}</span>
                                            </label>
                                            <label class="btn btn-outline-danger {{ old('mp_enabled', $settings->mp_enabled ?? false) ? '' : 'active' }}" id="mp_enabled_no_label">
                                                <input type="radio" name="mp_enabled" value="0" id="mp_enabled_no" {{ old('mp_enabled', $settings->mp_enabled ?? false) ? '' : 'checked' }}>
                                                <i class="ri-close-circle-line"></i> <span id="mp_enabled_no_text">{{ old('mp_enabled', $settings->mp_enabled ?? false) ? 'Deshabilitar' : 'Deshabilitado' }}</span>
                                            </label>
                                        </div>
                                        <small class="help-text d-block mt-2">
                                            <i class="ri-information-line"></i>
                                            <strong>Habilitado:</strong> MercadoPago aparecerá como opción de pago en el checkout.
                                            <strong>Deshabilitado:</strong> Las configuraciones se guardan pero no se muestra en el checkout.
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

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

                        <!-- Tipo de Integración -->
                        <div class="alert alert-light border mb-4">
                            <h6 class="form-section-title mb-3">
                                <i class="ri-exchange-line text-primary"></i>
                                Tipo de Integración
                            </h6>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="d-block mb-3"><strong>Método de Autenticación</strong></label>
                                        <div class="btn-group btn-group-toggle" data-bs-toggle="buttons">
                                            <label class="btn btn-outline-primary {{ old('mp_integration_type', $settings->mp_integration_type ?? 'oauth2') == 'oauth2' ? 'active' : '' }}">
                                                <input type="radio" name="mp_integration_type" value="oauth2" id="mp_integration_type_oauth2" {{ old('mp_integration_type', $settings->mp_integration_type ?? 'oauth2') == 'oauth2' ? 'checked' : '' }}>
                                                <i class="ri-key-line"></i> OAuth2 (Client ID + Secret)
                                            </label>
                                            <label class="btn btn-outline-info {{ old('mp_integration_type', $settings->mp_integration_type ?? 'oauth2') == 'checkout_pro' ? 'active' : '' }}">
                                                <input type="radio" name="mp_integration_type" value="checkout_pro" id="mp_integration_type_checkout_pro" {{ old('mp_integration_type', $settings->mp_integration_type ?? 'oauth2') == 'checkout_pro' ? 'checked' : '' }}>
                                                <i class="ri-shopping-cart-2-line"></i> Checkout Pro (Access Token)
                                            </label>
                                        </div>
                                        <small class="help-text d-block mt-2">
                                            <i class="ri-information-line"></i>
                                            <strong>OAuth2:</strong> Usa Client ID y Client Secret para obtener token dinámicamente (método tradicional).
                                            <strong>Checkout Pro:</strong> Usa Access Token fijo del panel de MercadoPago.
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Credenciales OAuth2 (Client ID + Secret) -->
                        <div class="mp-oauth2-fields">
                            <h6 class="form-section-title">
                                <i class="ri-key-line text-primary"></i>
                                Credenciales OAuth2
                                <span class="badge bg-primary ms-2">Requerido para OAuth2</span>
                            </h6>

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

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

                        <!-- Credenciales Checkout Pro (Access Token) -->
                        <div class="mp-checkout-pro-fields" style="display: none;">
                            <h6 class="form-section-title">
                                <i class="ri-key-line text-info"></i>
                                Credenciales Checkout Pro
                                <span class="badge bg-info ms-2">Requerido para Checkout Pro</span>
                            </h6>

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

                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="mp_production_access_token" class="form-label">Production Access Token <span class="text-danger mp-production-required">*</span></label>
                                            <div class="input-group">
                                                <input type="password" name="mp_production_access_token" id="mp_production_access_token" class="form-control credential-field @error('mp_production_access_token') is-invalid @enderror"
                                                       value="{{ old('mp_production_access_token', $settings->mp_production_access_token ?? '') }}"
                                                       placeholder="APP_USR-••••••••">
                                                <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="mp_production_access_token">
                                                    <i class="ri-eye-line"></i>
                                                </button>
                                            </div>
                                            <small class="help-text">
                                                <i class="ri-lock-line"></i>
                                                Token de acceso para el entorno de producción de Mercado Pago
                                            </small>
                                            @error('mp_production_access_token')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.mp-checkout-pro-fields -->

                        <h6 class="form-section-title">
                            <i class="ri-settings-3-line text-info"></i>
                            Configuración de Pagos
                        </h6>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mp_currency_code" class="form-label">Código de Moneda</label>
                                    <input type="text" name="mp_currency_code" id="mp_currency_code" class="form-control @error('mp_currency_code') is-invalid @enderror"
                                           value="{{ old('mp_currency_code', $settings->mp_currency_code ?? '') }}"
                                           placeholder="ARS">
                                    <small class="help-text">
                                        <i class="ri-money-dollar-circle-line"></i>
                                        Código de moneda para las transacciones (ARS, USD, etc.)
                                    </small>
                                    @error('mp_currency_code')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mp_amount_round_option" class="form-label">Opción de Redondeo</label>
                                    <select name="mp_amount_round_option" id="mp_amount_round_option" class="form-select @error('mp_amount_round_option') is-invalid @enderror">
                                        <option value="Round" {{ old('mp_amount_round_option', $settings->mp_amount_round_option ?? '') == 'Round' ? 'selected' : '' }}>Redondear</option>
                                        <option value="Up" {{ old('mp_amount_round_option', $settings->mp_amount_round_option ?? '') == 'Up' ? 'selected' : '' }}>Hacia Arriba</option>
                                        <option value="Down" {{ old('mp_amount_round_option', $settings->mp_amount_round_option ?? '') == 'Down' ? 'selected' : '' }}>Hacia Abajo</option>
                                    </select>
                                    <small class="help-text">
                                        <i class="ri-calculator-line"></i>
                                        Opción de redondeo para los montos de pago
                                    </small>
                                    @error('mp_amount_round_option')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mp_allowed_payment_categories" class="form-label">Categorías de Pago Permitidas</label>
                                    <input type="text" name="mp_allowed_payment_categories" id="mp_allowed_payment_categories" class="form-control @error('mp_allowed_payment_categories') is-invalid @enderror"
                                           value="{{ old('mp_allowed_payment_categories', $settings->mp_allowed_payment_categories ?? '') }}"
                                           placeholder="credit_card,debit_card,ticket">
                                    <small class="help-text">
                                        <i class="ri-list-check"></i>
                                        Categorías de pago permitidas (separadas por coma)
                                    </small>
                                    @error('mp_allowed_payment_categories')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mp_allowed_payment_methods" class="form-label">Métodos de Pago Permitidos</label>
                                    <input type="text" name="mp_allowed_payment_methods" id="mp_allowed_payment_methods" class="form-control @error('mp_allowed_payment_methods') is-invalid @enderror"
                                           value="{{ old('mp_allowed_payment_methods', $settings->mp_allowed_payment_methods ?? '') }}"
                                           placeholder="visa,master,pagofacil,rapipago">
                                    <small class="help-text">
                                        <i class="ri-bank-card-line"></i>
                                        Métodos de pago específicos permitidos (separados por coma)
                                    </small>
                                    @error('mp_allowed_payment_methods')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mp_blocked_payment_methods" class="form-label">Métodos de Pago Bloqueados</label>
                                    <input type="text" name="mp_blocked_payment_methods" id="mp_blocked_payment_methods" class="form-control @error('mp_blocked_payment_methods') is-invalid @enderror"
                                           value="{{ old('mp_blocked_payment_methods', $settings->mp_blocked_payment_methods ?? '') }}"
                                           placeholder="amex,diners">
                                    <small class="help-text">
                                        <i class="ri-forbid-line"></i>
                                        Métodos de pago bloqueados (separados por coma)
                                    </small>
                                    @error('mp_blocked_payment_methods')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mp_sponsor_id" class="form-label">Sponsor ID</label>
                                    <input type="text" name="mp_sponsor_id" id="mp_sponsor_id" class="form-control @error('mp_sponsor_id') is-invalid @enderror"
                                           value="{{ old('mp_sponsor_id', $settings->mp_sponsor_id ?? '') }}"
                                           placeholder="123456789">
                                    <small class="help-text">
                                        <i class="ri-handshake-line"></i>
                                        ID del patrocinador para socios de MercadoPago
                                    </small>
                                    @error('mp_sponsor_id')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <h6 class="form-section-title">
                            <i class="ri-toggle-line text-success"></i>
                            Opciones Avanzadas
                        </h6>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="mp_update_status_via_task_service" class="form-label">Actualizar Estado via Task Service</label>
                                    <select name="mp_update_status_via_task_service" id="mp_update_status_via_task_service" class="form-select @error('mp_update_status_via_task_service') is-invalid @enderror">
                                        <option value="1" {{ old('mp_update_status_via_task_service', $settings->mp_update_status_via_task_service ?? '') == '1' ? 'selected' : '' }}>Sí</option>
                                        <option value="0" {{ old('mp_update_status_via_task_service', $settings->mp_update_status_via_task_service ?? '') == '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                    <small class="help-text">
                                        <i class="ri-refresh-line"></i>
                                        Actualizar el estado a través del servicio de tareas
                                    </small>
                                    @error('mp_update_status_via_task_service')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="mp_validate_currency_code" class="form-label">Validar Código de Moneda</label>
                                    <select name="mp_validate_currency_code" id="mp_validate_currency_code" class="form-select @error('mp_validate_currency_code') is-invalid @enderror">
                                        <option value="1" {{ old('mp_validate_currency_code', $settings->mp_validate_currency_code ?? '') == '1' ? 'selected' : '' }}>Sí</option>
                                        <option value="0" {{ old('mp_validate_currency_code', $settings->mp_validate_currency_code ?? '') == '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                    <small class="help-text">
                                        <i class="ri-check-double-line"></i>
                                        Validar el código de moneda del cliente contra MercadoPago
                                    </small>
                                    @error('mp_validate_currency_code')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="mp_enable_paying_with_installments" class="form-label">Habilitar Pagos en Cuotas</label>
                                    <select name="mp_enable_paying_with_installments" id="mp_enable_paying_with_installments" class="form-select @error('mp_enable_paying_with_installments') is-invalid @enderror">
                                        <option value="1" {{ old('mp_enable_paying_with_installments', $settings->mp_enable_paying_with_installments ?? '') == '1' ? 'selected' : '' }}>Sí</option>
                                        <option value="0" {{ old('mp_enable_paying_with_installments', $settings->mp_enable_paying_with_installments ?? '') == '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                    <small class="help-text">
                                        <i class="ri-bank-card-line"></i>
                                        Habilitar pagos en cuotas/financiación
                                    </small>
                                    @error('mp_enable_paying_with_installments')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Flujo de Pago -->
                        <h6 class="form-section-title">
                            <i class="ri-route-line text-warning"></i>
                            Flujo de Pago
                        </h6>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="mp_payment_flow" class="form-label">Modo de Procesamiento <span class="text-danger">*</span></label>
                                    <select name="mp_payment_flow" id="mp_payment_flow" class="form-select @error('mp_payment_flow') is-invalid @enderror">
                                        <option value="email" {{ old('mp_payment_flow', $settings->mp_payment_flow ?? 'email') == 'email' ? 'selected' : '' }}>
                                            Email con Link de Pago (Manual)
                                        </option>
                                        <option value="direct" {{ old('mp_payment_flow', $settings->mp_payment_flow ?? 'email') == 'direct' ? 'selected' : '' }}>
                                            Redirección Automática a MercadoPago
                                        </option>
                                    </select>
                                    <small class="help-text">
                                        <i class="ri-information-line"></i>
                                        <strong>Email:</strong> Se crea el pedido y envía un email con link de pago.
                                        <strong>Direct:</strong> Redirige automáticamente al checkout de MercadoPago.
                                    </small>
                                    @error('mp_payment_flow')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Modo Sandbox -->
                        <div class="mp-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="mp_use_sandbox" class="form-check-input" id="mp_use_sandbox" {{ old('mp_use_sandbox', $settings->mp_use_sandbox ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mp_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 Pago. Las credenciales de Producción se deshabilitarán automáticamente.
                                            </small>
                                            @error('mp_use_sandbox')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

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

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

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

                        <div class="alert alert-info mt-3">
                            <i class="ri-information-line"></i>
                            <strong>¿Cómo obtener las credenciales de Mercado Pago?</strong>
                            <ol class="mb-0 mt-2">
                                <li>Ve a <a href="https://www.mercadopago.com.ar/developers" target="_blank">Mercado Pago Developers</a></li>
                                <li>Inicia sesión con tu cuenta de Mercado Pago</li>
                                <li>Crea una nueva aplicación o selecciona una existente</li>
                                <li>Ve a la sección "Credenciales" de tu aplicación</li>
                                <li>Copia las credenciales de producción y/o sandbox según necesites</li>
                            </ol>
                        </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 Pago
                </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><!-- /#mp-config-container -->

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

    var mpEnabledYes = document.getElementById('mp_enabled_yes');
    var mpEnabledNo = document.getElementById('mp_enabled_no');
    var mpConfigContent = mpContainer.querySelector('.mp-configuration-content');

    var mpSandboxCheckbox = document.getElementById('mp_use_sandbox');
    var mpSandboxFields = mpContainer.querySelectorAll('.mp-sandbox-field');
    var mpProductionFields = mpContainer.querySelector('.mp-production-fields');
    var mpProductionInputs = mpProductionFields ? mpProductionFields.querySelectorAll('input') : [];
    var mpProductionRequiredSpans = mpContainer.querySelectorAll('.mp-production-required');
    var mpSandboxRequiredSpans = mpContainer.querySelectorAll('.mp-sandbox-required');
    var mpForm = mpContainer.querySelector('form');

    // Integration type toggle elements
    var integrationTypeOauth2 = document.getElementById('mp_integration_type_oauth2');
    var integrationTypeCheckoutPro = document.getElementById('mp_integration_type_checkout_pro');
    var mpOauth2Fields = mpContainer.querySelector('.mp-oauth2-fields');
    var mpCheckoutProFields = mpContainer.querySelector('.mp-checkout-pro-fields');
    var mpSandboxSection = mpContainer.querySelector('.mp-sandbox-section');

    // Elements for dynamic text
    var mpEnabledYesText = document.getElementById('mp_enabled_yes_text');
    var mpEnabledNoText = document.getElementById('mp_enabled_no_text');

    // Toggle entire configuration content based on mp_enabled
    function toggleMercadoPago() {
        var isEnabled = mpEnabledYes.checked;
        if (isEnabled) {
            mpConfigContent.style.display = 'block';
            mpConfigContent.style.opacity = '1';
            mpEnabledYesText.textContent = 'Habilitado';
            mpEnabledNoText.textContent = 'Deshabilitar';
        } else {
            mpConfigContent.style.display = 'none';
            mpConfigContent.style.opacity = '0.3';
            mpEnabledYesText.textContent = 'Habilitar';
            mpEnabledNoText.textContent = 'Deshabilitado';
        }
    }

    // Toggle OAuth2 vs Checkout Pro fields
    function toggleIntegrationType() {
        var isOauth2 = integrationTypeOauth2.checked;
        if (isOauth2) {
            mpOauth2Fields.style.display = 'block';
            mpCheckoutProFields.style.display = 'none';
            mpSandboxSection.style.display = 'none';
        } else {
            mpOauth2Fields.style.display = 'none';
            mpCheckoutProFields.style.display = 'block';
            mpSandboxSection.style.display = 'block';
        }
    }

    // Toggle sandbox/production fields (solo aplica a Checkout Pro)
    function toggleMPEnvironmentFields() {
        var isSandbox = mpSandboxCheckbox.checked;

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

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

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

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

    // Before submit, enable all inputs so values are sent
    mpForm.addEventListener('submit', function() {
        if (mpProductionInputs.length) {
            mpProductionInputs.forEach(function(input) {
                input.disabled = false;
            });
        }
    });

    // Event listeners
    mpEnabledYes.addEventListener('change', toggleMercadoPago);
    mpEnabledNo.addEventListener('change', toggleMercadoPago);
    mpSandboxCheckbox.addEventListener('change', toggleMPEnvironmentFields);
    integrationTypeOauth2.addEventListener('change', toggleIntegrationType);
    integrationTypeCheckoutPro.addEventListener('change', toggleIntegrationType);

    // Toggle visibility buttons (ojito) - scoped to MP container
    mpContainer.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
    toggleMercadoPago();
    toggleIntegrationType();
    toggleMPEnvironmentFields();
});
</script>
@endpush