@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.integration-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1.5rem;
    background: #f8f9fa;
    margin-bottom: 1.5rem;
}

.integration-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}

.environment-badge {
    background: #e8f5e8;
    color: #2e7d32;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.environment-badge.sandbox {
    background: #fff3cd;
    color: #856404;
}

.config-group {
    border-left: 3px solid #6c5ce7;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.sandbox-section {
    background: #f8f7ff;
    border: 1px solid #e3e1fc;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1.5rem;
}

.sandbox-field {
    margin-top: 1rem;
}

/* Eye toggle button styles */
.input-group .toggle-visibility {
    border-left: 0;
}

.credential-field {
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Integración Tienda Nube</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('integrations.tiendanube.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="tiendanubeTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-tiendanube-tab" data-bs-toggle="tab" data-bs-target="#general-tiendanube"
                                    type="button" role="tab" aria-controls="general-tiendanube" aria-selected="true">
                                <i class="ri-cloud-line tab-icon"></i>
                                Configuración General
                            </button>
                        </li>
                        <!-- Tabs preparados para futuras expansiones -->
                        <!--
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="webhook-config-tab" data-bs-toggle="tab" data-bs-target="#webhook-config"
                                    type="button" role="tab" aria-controls="webhook-config" aria-selected="false">
                                <i class="ri-webhook-line tab-icon"></i>
                                Configuración de Webhooks
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="sync-settings-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>
                                Configuración de Sincronización
                            </button>
                        </li>
                        -->
                    </ul>

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

                        <!-- Configuración General de Tienda Nube -->
                        <div class="tab-pane fade show active" id="general-tiendanube" role="tabpanel" aria-labelledby="general-tiendanube-tab">

                            <!-- ============================================ -->
                            <!-- 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="btn-group btn-group-toggle" data-bs-toggle="buttons">
                                    <label class="btn btn-outline-success {{ old('tn_enabled', $settings->tn_enabled ?? false) ? 'active' : '' }}">
                                        <input type="radio" name="tn_enabled" value="1" id="tn_enabled_yes" {{ old('tn_enabled', $settings->tn_enabled ?? false) ? 'checked' : '' }}>
                                        <i class="ri-checkbox-circle-line"></i> Habilitar
                                    </label>
                                    <label class="btn btn-outline-danger {{ old('tn_enabled', $settings->tn_enabled ?? false) ? '' : 'active' }}">
                                        <input type="radio" name="tn_enabled" value="0" id="tn_enabled_no" {{ old('tn_enabled', $settings->tn_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>
                                    Habilita o deshabilita completamente la integración con Tienda Nube. Cuando está deshabilitada, no aparecerá como opción disponible.
                                </small>
                            </div>

                            <!-- ============================================ -->
                            <!-- CONFIGURACIÓN (solo visible si está habilitado) -->
                            <!-- ============================================ -->
                            <div class="tn-configuration-content">
                                <div class="integration-card">
                                    <div class="d-flex align-items-center mb-4">
                                        <div class="integration-icon">
                                            <i class="ri-cloud-line"></i>
                                        </div>
                                        <div>
                                            <h5 class="mb-1">Tienda Nube - Plataforma E-commerce</h5>
                                            <p class="text-muted mb-0">Configura la integración con Tienda Nube para sincronizar datos entre plataformas</p>
                                            <span class="environment-badge mt-2 d-inline-block">
                                                <i class="ri-upload-cloud-line"></i> Plataforma Cloud
                                            </span>
                                        </div>
                                    </div>

                                    <!-- ============================================ -->
                                    <!-- SANDBOX TOGGLE -->
                                    <!-- ============================================ -->
                                    <div class="alert alert-warning mb-4">
                                        <h6 class="form-section-title mb-3">
                                            <i class="ri-flask-line text-warning"></i>
                                            Selección de Entorno
                                        </h6>

                                        <div class="form-check">
                                            <input type="checkbox" name="tn_use_sandbox" class="form-check-input" id="tn_use_sandbox" {{ old('tn_use_sandbox', $settings->tn_use_sandbox ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="tn_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 Tienda Nube. Desmarque para usar producción.
                                            </small>
                                            @error('tn_use_sandbox')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- ============================================ -->
                                    <!-- CREDENCIALES DE PRODUCCIÓN -->
                                    <!-- ============================================ -->
                                    <div id="production-fields">
                                        <h6 class="form-section-title">
                                            <i class="ri-key-line text-success"></i>
                                            Credenciales de API de Producción
                                        </h6>

                                        <div class="config-group">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="tn_production_api_key" class="form-label">
                                                            Production API Key
                                                            <span class="text-danger" id="tn_production_api_key_required">*</span>
                                                        </label>
                                                        <div class="input-group">
                                                            <input type="password" name="tn_production_api_key" id="tn_production_api_key"
                                                                   class="form-control credential-field @error('tn_production_api_key') is-invalid @enderror"
                                                                   value="{{ old('tn_production_api_key', $settings->tn_production_api_key ?? '') }}"
                                                                   placeholder="api_key_••••••••••••••••••••••••••••••••">
                                                            <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="tn_production_api_key">
                                                                <i class="ri-eye-line"></i>
                                                            </button>
                                                        </div>
                                                        <small class="help-text">
                                                            <i class="ri-key-line"></i>
                                                            Clave API para el entorno de producción de Tienda Nube
                                                        </small>
                                                        @error('tn_production_api_key')
                                                            <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

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

                                    <!-- ============================================ -->
                                    <!-- CREDENCIALES DE SANDBOX -->
                                    <!-- ============================================ -->
                                    <div id="sandbox-fields" style="display: none;">
                                        <div class="sandbox-section">
                                            <h6 class="form-section-title">
                                                <i class="ri-flask-line text-warning"></i>
                                                Credenciales de API de Sandbox (Pruebas)
                                            </h6>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label for="tn_sandbox_api_key" class="form-label">
                                                            Sandbox API Key
                                                            <span class="text-danger" id="tn_sandbox_api_key_required">*</span>
                                                        </label>
                                                        <div class="input-group">
                                                            <input type="password" name="tn_sandbox_api_key" id="tn_sandbox_api_key"
                                                                   class="form-control credential-field @error('tn_sandbox_api_key') is-invalid @enderror"
                                                                   value="{{ old('tn_sandbox_api_key', $settings->tn_sandbox_api_key ?? '') }}"
                                                                   placeholder="sandbox_api_key_••••••••••••••••••••••••••••••••">
                                                            <button type="button" class="btn btn-outline-secondary toggle-visibility" data-bs-target="tn_sandbox_api_key">
                                                                <i class="ri-eye-line"></i>
                                                            </button>
                                                        </div>
                                                        <small class="help-text">
                                                            <i class="ri-flask-line"></i>
                                                            Clave API para el entorno de pruebas de Tienda Nube
                                                        </small>
                                                        @error('tn_sandbox_api_key')
                                                            <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

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

                                    <div class="alert alert-info mt-3">
                                        <i class="ri-information-line"></i>
                                        <strong>¿Cómo obtener las credenciales de Tienda Nube?</strong>
                                        <ol class="mb-0 mt-2">
                                            <li>Accede a tu panel de administración de <a href="https://www.tiendanube.com" target="_blank">Tienda Nube</a></li>
                                            <li>Ve a "Configuración" → "Aplicaciones" → "Desarrollar aplicación"</li>
                                            <li>Crea una nueva aplicación o selecciona una existente</li>
                                            <li>En la configuración de la aplicación encontrarás tu API Key y Secret</li>
                                            <li>Configura los permisos necesarios para tu integración</li>
                                            <li>Copia las credenciales y pégalas en los campos correspondientes</li>
                                        </ol>
                                    </div>

                                    <div class="alert alert-success mt-3">
                                        <i class="ri-lightbulb-line"></i>
                                        <strong>Capacidades de integración con Tienda Nube:</strong>
                                        <ul class="mb-0 mt-2">
                                            <li><strong>Sincronización bidireccional:</strong> Productos, inventario y precios</li>
                                            <li><strong>Gestión de órdenes:</strong> Importar y procesar pedidos automáticamente</li>
                                            <li><strong>Sincronización de clientes:</strong> Mantener bases de datos unificadas</li>
                                            <li><strong>Webhooks:</strong> Notificaciones en tiempo real de cambios</li>
                                            <li><strong>Gestión de categorías:</strong> Mapeo automático entre plataformas</li>
                                            <li><strong>Control de stock:</strong> Evitar sobreventa con inventario centralizado</li>
                                        </ul>
                                    </div>

                                    <div class="alert alert-warning mt-3">
                                        <i class="ri-error-warning-line"></i>
                                        <strong>Consideraciones importantes:</strong>
                                        <ul class="mb-0 mt-2">
                                            <li>Asegúrate de tener los permisos adecuados en tu cuenta de Tienda Nube</li>
                                            <li>Las credenciales de sandbox solo funcionan en el entorno de pruebas</li>
                                            <li>Mantén tus credenciales seguras y no las compartas</li>
                                            <li>Revisa los límites de rate limiting de la API de Tienda Nube</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-info btn-lg">
                            <i class="ri-save-line me-2"></i>Actualizar Configuración de Tienda Nube
                        </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>


@endsection

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // ============================================
    // ENABLE/DISABLE TOGGLE
    // ============================================
    const enabledYesRadio = document.getElementById('tn_enabled_yes');
    const enabledNoRadio = document.getElementById('tn_enabled_no');
    const configurationContent = document.querySelector('.tn-configuration-content');

    function toggleConfiguration() {
        const isEnabled = enabledYesRadio.checked;
        configurationContent.style.display = isEnabled ? 'block' : 'none';
    }

    enabledYesRadio.addEventListener('change', toggleConfiguration);
    enabledNoRadio.addEventListener('change', toggleConfiguration);
    toggleConfiguration(); // Initial call

    // ============================================
    // SANDBOX/PRODUCTION TOGGLE
    // ============================================
    const sandboxCheckbox = document.getElementById('tn_use_sandbox');
    const productionFields = document.getElementById('production-fields');
    const sandboxFields = document.getElementById('sandbox-fields');

    function toggleEnvironmentFields() {
        const isSandbox = sandboxCheckbox.checked;

        // OCULTAR COMPLETAMENTE los campos según el modo
        if (isSandbox) {
            productionFields.style.display = 'none'; // Ocultar producción
            sandboxFields.style.display = 'block';   // Mostrar sandbox
        } else {
            productionFields.style.display = 'block'; // Mostrar producción
            sandboxFields.style.display = 'none';     // Ocultar sandbox
        }
    }

    sandboxCheckbox.addEventListener('change', toggleEnvironmentFields);
    toggleEnvironmentFields(); // Initial call

    // ============================================
    // EYE TOGGLE (Mostrar/Ocultar Credenciales)
    // ============================================
    document.querySelectorAll('.toggle-visibility').forEach(button => {
        button.addEventListener('click', function() {
            const targetId = this.getAttribute('data-target');
            const input = document.getElementById(targetId);
            const icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });
});
</script>
@endpush

@section('customJs')
@endsection