@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;
}

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

.analytics-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;
}

.google-analytics { background: linear-gradient(135deg, #4285f4 0%, #34a853 100%); }
.google-tag-manager { background: linear-gradient(135deg, #ff6f00 0%, #ffab00 100%); }
.google-ads { background: linear-gradient(135deg, #34a853 0%, #0f9d58 100%); }
.facebook-pixel { background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%); }
.general-tracking { background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); }

.platform-badge {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.privacy-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
}
</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">Configuración de Analytics</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('settings.analytics.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="analyticsTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="general-analytics-tab" data-bs-toggle="tab" data-bs-target="#general-analytics" 
                                    type="button" role="tab" aria-controls="general-analytics" aria-selected="true">
                                <i class="ri-line-chart-line tab-icon"></i>
                                Analytics General
                            </button>
                        </li>
                        <!-- Tabs preparados para futuras expansiones -->
                        <!--
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="conversion-tracking-tab" data-bs-toggle="tab" data-bs-target="#conversion-tracking" 
                                    type="button" role="tab" aria-controls="conversion-tracking" aria-selected="false">
                                <i class="ri-focus-2-line tab-icon"></i>
                                Seguimiento de Conversiones
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="custom-events-tab" data-bs-toggle="tab" data-bs-target="#custom-events" 
                                    type="button" role="tab" aria-controls="custom-events" aria-selected="false">
                                <i class="ri-cursor-line tab-icon"></i>
                                Eventos Personalizados
                            </button>
                        </li>
                        -->
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="analyticsTabContent">
                        
                        <!-- Analytics General -->
                        <div class="tab-pane fade show active" id="general-analytics" role="tabpanel" aria-labelledby="general-analytics-tab">
                            <div class="analytics-card">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="analytics-icon google-analytics">
                                        <i class="ri-line-chart-line"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Herramientas de Analytics y Seguimiento</h5>
                                        <p class="text-muted mb-0">Configura las principales plataformas de análisis para tu tienda online</p>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-google-fill text-warning"></i>
                                    Google Tag Manager
                                </h6>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-4">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="analytics-icon google-tag-manager me-3" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                    <i class="ri-price-tag-lines"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">Google Tag Manager</h6>
                                                    <small class="text-muted">Gestión centralizada de todas tus etiquetas de seguimiento</small>
                                                    <span class="platform-badge ms-2">
                                                        <i class="ri-stack-line"></i> Recomendado
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="google_tag_manager_id" class="form-label">ID de Google Tag Manager</label>
                                                <input type="text" name="google_tag_manager_id" id="google_tag_manager_id" class="form-control @error('google_tag_manager_id') is-invalid @enderror"
                                                       value="{{ old('google_tag_manager_id', $settings->google_tag_manager_id ?? '') }}"
                                                       placeholder="Ej: GTM-XXXXXXX">
                                                <small class="help-text">
                                                    <i class="ri-information-line"></i>
                                                    Formato: GTM- seguido de 7-8 caracteres alfanuméricos (Ej: GTM-ABC1234)
                                                </small>
                                                @error('google_tag_manager_id')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="alert alert-info">
                                                <i class="ri-lightbulb-line"></i>
                                                <strong>¿Cómo obtener tu ID de Google Tag Manager?</strong>
                                                <ol class="mb-0 mt-2">
                                                    <li>Ve a <a href="https://tagmanager.google.com" target="_blank">Google Tag Manager</a></li>
                                                    <li>Selecciona tu cuenta y contenedor</li>
                                                    <li>El ID del contenedor aparece en la parte superior (formato GTM-XXXXXXX)</li>
                                                    <li>Copia únicamente el ID del contenedor</li>
                                                </ol>
                                            </div>

                                            <div class="alert alert-warning">
                                                <i class="ri-error-warning-line"></i>
                                                <strong>⚠️ MUY IMPORTANTE:</strong> Si configuras Google Tag Manager (GTM), NO debes configurar también Google Analytics ni Google Ads directamente aquí, porque se contarían DOS VECES.
                                                <br><br>
                                                <strong>Regla:</strong>
                                                <ul class="mb-0 mt-2">
                                                    <li><strong>CON GTM:</strong> Solo configura GTM aquí. Luego gestiona Analytics, Ads y Pixel desde el panel de GTM.</li>
                                                    <li><strong>SIN GTM:</strong> Configura Analytics, Ads y Pixel directamente aquí.</li>
                                                </ul>
                                                <div class="mt-2">
                                                    <small><strong>El sistema automáticamente desactiva Analytics/Ads directos si detecta GTM configurado.</strong></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-google-fill text-primary"></i>
                                    Google Analytics
                                </h6>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-4">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="analytics-icon google-analytics me-3" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                    <i class="ri-google-fill"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">Google Analytics</h6>
                                                    <small class="text-muted">Análisis detallado del comportamiento de usuarios</small>
                                                    <span class="platform-badge ms-2">
                                                        <i class="ri-bar-chart-line"></i> Gratuito
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="google_analytics_id" class="form-label">ID de Google Analytics</label>
                                                <input type="text" name="google_analytics_id" id="google_analytics_id" class="form-control @error('google_analytics_id') is-invalid @enderror"
                                                       value="{{ old('google_analytics_id', $settings->google_analytics_id ?? '') }}"
                                                       placeholder="Ej: GA-XXXXXXXXX-X o G-XXXXXXXXXX">
                                                <small class="help-text">
                                                    <i class="ri-information-line"></i>
                                                    Puede ser formato Universal Analytics (UA-XXXXX-Y) o Google Analytics 4 (G-XXXXXXXXXX)
                                                </small>
                                                @error('google_analytics_id')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="alert alert-info">
                                                <i class="ri-lightbulb-line"></i>
                                                <strong>¿Cómo obtener tu ID de Google Analytics?</strong>
                                                <ol class="mb-0 mt-2">
                                                    <li>Ve a <a href="https://analytics.google.com" target="_blank">Google Analytics</a></li>
                                                    <li>Selecciona tu propiedad</li>
                                                    <li>Ve a Administrador → Información de seguimiento → Código de seguimiento</li>
                                                    <li>Copia el ID que aparece en la parte superior</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-google-fill text-success"></i>
                                    Google Ads
                                </h6>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-4">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="analytics-icon google-ads me-3" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                    <i class="ri-advertisement-line"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">Google Ads</h6>
                                                    <small class="text-muted">Seguimiento de conversiones para campañas de Google Ads</small>
                                                    <span class="platform-badge ms-2">
                                                        <i class="ri-focus-2-line"></i> Publicidad
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="google_ads_id" class="form-label">ID de Google Ads (Conversion ID)</label>
                                                <input type="text" name="google_ads_id" id="google_ads_id" class="form-control @error('google_ads_id') is-invalid @enderror"
                                                       value="{{ old('google_ads_id', $settings->google_ads_id ?? '') }}"
                                                       placeholder="Ej: AW-123456789">
                                                <small class="help-text">
                                                    <i class="ri-information-line"></i>
                                                    Formato: AW- seguido de números (Ej: AW-123456789 o AW-987654321)
                                                </small>
                                                @error('google_ads_id')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="alert alert-info">
                                                <i class="ri-lightbulb-line"></i>
                                                <strong>¿Cómo obtener tu ID de Google Ads?</strong>
                                                <ol class="mb-0 mt-2">
                                                    <li>Ve a <a href="https://ads.google.com" target="_blank">Google Ads</a></li>
                                                    <li>Haz clic en Herramientas y configuración → Medición → Conversiones</li>
                                                    <li>Selecciona o crea una acción de conversión</li>
                                                    <li>El ID de conversión aparece en formato AW-XXXXXXXXX</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-google-fill text-info"></i>
                                    Google Site Verification
                                </h6>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-4">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="analytics-icon general-tracking me-3" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                    <i class="ri-checkbox-circle-line"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">Google Site Verification</h6>
                                                    <small class="text-muted">Verifica la propiedad de tu sitio en Google Search Console</small>
                                                    <span class="platform-badge ms-2">
                                                        <i class="ri-search-line"></i> SEO
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="google_site_verification" class="form-label">Código de Verificación de Google</label>
                                                <input type="text" name="google_site_verification" id="google_site_verification" class="form-control @error('google_site_verification') is-invalid @enderror"
                                                       value="{{ old('google_site_verification', $settings->google_site_verification ?? '') }}"
                                                       placeholder="Ej: abc123def456ghi789jkl012mno345pqr678">
                                                <small class="help-text">
                                                    <i class="ri-information-line"></i>
                                                    Solo el código de verificación, sin la etiqueta meta completa
                                                </small>
                                                @error('google_site_verification')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>

                                            <div class="alert alert-info">
                                                <i class="ri-lightbulb-line"></i>
                                                <strong>¿Cómo obtener tu código de verificación?</strong>
                                                <ol class="mb-0 mt-2">
                                                    <li>Ve a <a href="https://search.google.com/search-console" target="_blank">Google Search Console</a></li>
                                                    <li>Agrega o selecciona tu propiedad</li>
                                                    <li>Elige el método "Etiqueta HTML"</li>
                                                    <li>Copia SOLO el contenido del atributo "content" (el código largo sin la etiqueta meta)</li>
                                                    <li>Ejemplo: Si ves <code>&lt;meta name="google-site-verification" content="abc123..."&gt;</code>, copia solo <strong>abc123...</strong></li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="form-section-title">
                                    <i class="ri-facebook-fill text-primary"></i>
                                    Facebook Pixel
                                </h6>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-4">
                                            <div class="d-flex align-items-center mb-3">
                                                <div class="analytics-icon facebook-pixel me-3" style="width: 40px; height: 40px; font-size: 1.2rem;">
                                                    <i class="ri-facebook-fill"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">Facebook Pixel</h6>
                                                    <small class="text-muted">Seguimiento para campañas publicitarias en Facebook</small>
                                                    <span class="platform-badge ms-2">
                                                        <i class="ri-focus-2-line"></i> Publicidad
                                                    </span>
                                                </div>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label for="facebook_pixel_id" class="form-label">ID de Facebook Pixel</label>
                                                <input type="text" name="facebook_pixel_id" id="facebook_pixel_id" class="form-control @error('facebook_pixel_id') is-invalid @enderror" 
                                                       value="{{ old('facebook_pixel_id', $settings->facebook_pixel_id ?? '') }}" 
                                                       placeholder="Ej: 1234567890123456">
                                                <small class="help-text">
                                                    <i class="ri-hashtag"></i>
                                                    Número único de 15-16 dígitos asignado a tu Pixel de Facebook
                                                </small>
                                                @error('facebook_pixel_id')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            
                                            <div class="alert alert-info">
                                                <i class="ri-lightbulb-line"></i>
                                                <strong>¿Cómo encontrar tu Facebook Pixel ID?</strong>
                                                <ol class="mb-0 mt-2">
                                                    <li>Ve a <a href="https://business.facebook.com" target="_blank">Facebook Business</a></li>
                                                    <li>Selecciona tu cuenta publicitaria</li>
                                                    <li>Ve a Herramientas → Píxeles</li>
                                                    <li>El ID aparece debajo del nombre de tu píxel</li>
                                                </ol>
                                            </div>

                                            <div class="alert alert-success">
                                                <i class="ri-checkbox-circle-line"></i>
                                                <strong>Facebook Pixel es independiente de GTM.</strong> Si configurás el ID aquí, se cargará siempre.
                                                <br><small class="text-muted">Si también tenés el Pixel configurado dentro de GTM, desactivá uno de los dos para evitar doble conteo.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="privacy-notice">
                                    <h6><i class="ri-shield-check-line text-warning"></i> Aviso de Privacidad</h6>
                                    <p class="mb-0">
                                        <strong>Importante:</strong> Al activar estas herramientas de seguimiento, asegúrate de:
                                    </p>
                                    <ul class="mb-0 mt-2">
                                        <li>Informar a los usuarios sobre el uso de cookies y seguimiento</li>
                                        <li>Cumplir con las regulaciones de privacidad locales (GDPR, CCPA, etc.)</li>
                                        <li>Proporcionar opciones para que los usuarios gestionen sus preferencias</li>
                                        <li>Actualizar tu política de privacidad según corresponda</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

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

@section('customJs')
@endsection