@extends('admin.admin_master')
@section('admin')

<style>
.source-selector-card {
    border: 2px solid #dee2e6;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
.source-selector-card h5 {
    color: white;
    margin-bottom: 20px;
}
.source-option {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}
.source-option:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-color: #667eea;
}
.source-option.active {
    border-color: #28a745;
    background: #f0fff4;
}
.source-option .icon {
    font-size: 2rem;
    margin-right: 15px;
}
.import-card {
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 200px;
}
.import-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.import-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.import-card.disabled:hover {
    transform: none;
}
.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
}
.stat-diff {
    font-size: 1.2rem;
}
.progress-section {
    display: none;
}
.import-log {
    max-height: 300px;
    overflow-y: auto;
    background: #f8f9fa;
    border-radius: 5px;
    padding: 15px;
    margin-top: 20px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}
.connection-status-card {
    transition: all 0.3s ease;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container-fluid">

    <!-- Start Page Title -->
    <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">Importar Datos Masivos</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Tablero</a></li>
                        <li class="breadcrumb-item active">Importar Datos</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- Selector de Fuente de Datos -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="source-selector-card">
                <h5><i class="mdi mdi-database-import me-2"></i> Seleccione la Fuente de Datos</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="source-option {{ $selectedSource == 'stock_manager' ? 'active' : '' }}">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center" onclick="changeSource('stock_manager')" style="cursor: pointer; flex: 1;">
                                    <i class="mdi mdi-broom icon text-primary"></i>
                                    <div>
                                        <h6 class="mb-1 text-dark">Stock Manager (Limpieza)</h6>
                                        <p class="text-muted mb-0 small">Sistema de inventario para productos de limpieza</p>
                                        <small class="text-info">Base de datos: codeigniter_stock_manager</small>
                                        <span class="badge bg-success mt-1">Importación Segura</span>
                                    </div>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-warning" onclick="event.stopPropagation(); showConfigModal('stock_manager');">
                                        <i class="mdi mdi-cog"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="source-option {{ $selectedSource == 'tesauro' ? 'active' : '' }}">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center" onclick="changeSource('tesauro')" style="cursor: pointer; flex: 1;">
                                    <i class="mdi mdi-book-open-page-variant icon text-success"></i>
                                    <div>
                                        <h6 class="mb-1 text-dark">Tesauro (Librería)</h6>
                                        <p class="text-muted mb-0 small">Sistema de gestión para librería</p>
                                        <small class="text-info">Base de datos: tesauro_db</small>
                                    </div>
                                </div>
                                <div>
                                    <button class="btn btn-sm btn-warning" onclick="event.stopPropagation(); showConfigModal('tesauro');">
                                        <i class="mdi mdi-cog"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="source-option {{ $selectedSource == 'images_only' ? 'active' : '' }}" 
                             onclick="selectImagesOnly()">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-image-multiple icon text-warning"></i>
                                <div>
                                    <h6 class="mb-1 text-dark">Solo Imágenes por Código</h6>
                                    <p class="text-muted mb-0 small">Importar imágenes donde el nombre = código producto</p>
                                    <small class="text-info">Ej: HERRAM0001.jpg para producto código HERRAM0001</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Estado de Conexión -->
    @if($selectedSource && $selectedSource != 'images_only')
    <div class="row mb-4">
        <div class="col-12">
            <div class="card connection-status-card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        @if($connectionStatus['connected'])
                            <i class="mdi mdi-database-check text-success" style="font-size: 2rem;"></i>
                            <div class="ms-3">
                                <h5 class="mb-1">Conexión Establecida</h5>
                                <p class="text-muted mb-0">{{ $connectionStatus['message'] }}</p>
                                <small class="text-muted">Base de datos: {{ $connectionStatus['database'] ?? '' }}</small>
                            </div>
                        @else
                            <i class="mdi mdi-database-remove text-danger" style="font-size: 2rem;"></i>
                            <div class="ms-3">
                                <h5 class="mb-1">Sin Conexión</h5>
                                <p class="text-danger mb-0">{{ $connectionStatus['message'] }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($selectedSource == 'images_only')
    <!-- Sección de Solo Imágenes -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-warning text-white">
                    <h5 class="card-title mb-0">
                        <i class="mdi mdi-image-multiple me-2"></i> Importador de Imágenes por Código
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <h5 class="alert-heading">¿Cómo funciona?</h5>
                        <p>Este importador busca imágenes en una carpeta donde el nombre del archivo coincide exactamente con el código del producto.</p>
                        <hr>
                        <p class="mb-2"><strong>Ejemplos:</strong></p>
                        <ul class="mb-0">
                            <li>Producto con código <code>HERRAM0001</code> → busca <code>HERRAM0001.jpg</code> o <code>HERRAM0001.png</code></li>
                            <li>Producto con código <code>LIB-2345</code> → busca <code>LIB-2345.jpg</code> o <code>LIB-2345.png</code></li>
                            <li>Producto con código <code>194</code> → busca <code>194.jpg</code> o <code>194.png</code></li>
                        </ul>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="imagePath">Ruta de la carpeta con imágenes:</label>
                                <input type="text" id="imagePath" class="form-control" 
                                       placeholder="C:\ruta\a\carpeta\imagenes"
                                       value="{{ session('last_image_path', '') }}">
                                <small class="form-text text-muted">
                                    Ingrese la ruta completa de la carpeta donde están las imágenes
                                </small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>&nbsp;</label><br>
                                <div class="d-flex flex-wrap gap-2">
                                    <button class="btn btn-info" onclick="showImageInstructions()">
                                        <i class="mdi mdi-help-circle-outline me-1"></i> Ver Instrucciones
                                    </button>
                                    <button class="btn btn-warning" onclick="scanExistingImages()">
                                        <i class="mdi mdi-folder-sync me-1"></i> Escanear Existentes
                                    </button>
                                    <button class="btn btn-primary" onclick="analyzeImageFolder()">
                                        <i class="mdi mdi-folder-search me-1"></i> Analizar Carpeta
                                    </button>
                                    <button class="btn btn-secondary" onclick="clearImagePath()">
                                        <i class="mdi mdi-eraser me-1"></i> Limpiar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Resultados del análisis -->
                    <div id="imageAnalysisResults" class="mt-4" style="display: none;">
                        <hr>
                        <h5>Resultados del Análisis</h5>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="text-center p-3 bg-light rounded">
                                    <div class="stat-number text-info" id="totalImagesFound">0</div>
                                    <small>Imágenes encontradas</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center p-3 bg-light rounded">
                                    <div class="stat-number text-success" id="matchedProducts">0</div>
                                    <small>Productos coincidentes</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center p-3 bg-light rounded">
                                    <div class="stat-number text-warning" id="productsWithImages">0</div>
                                    <small>Ya tienen imagen</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center p-3 bg-light rounded">
                                    <div class="stat-number text-danger" id="noMatchImages">0</div>
                                    <small>Sin producto</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <button class="btn btn-success btn-lg" id="importImagesBtn" onclick="importImagesByCode()" disabled>
                                <i class="mdi mdi-upload me-1"></i> Importar Imágenes Coincidentes
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    @elseif($selectedSource && $connectionStatus['connected'] && isset($stats['external']))
    <!-- Estadísticas para importación desde BD -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Estadísticas de Importación</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Tipo de Dato</th>
                                    <th class="text-center">BD Externa</th>
                                    <th class="text-center">BD Local</th>
                                    <th class="text-center">Por Importar</th>
                                    <th class="text-center">Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><i class="mdi mdi-tag-multiple me-2"></i> Marcas</td>
                                    <td class="text-center">{{ $stats['external']['brands'] }}</td>
                                    <td class="text-center">{{ $stats['local']['brands'] }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $stats['diff']['brands'] > 0 ? 'warning' : 'success' }}">
                                            {{ $stats['diff']['brands'] }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if($stats['diff']['brands'] > 0)
                                            <span class="badge bg-warning">Pendiente</span>
                                        @else
                                            <span class="badge bg-success">Completo</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-folder me-2"></i> Categorías</td>
                                    <td class="text-center">{{ $stats['external']['categories'] }}</td>
                                    <td class="text-center">{{ $stats['local']['categories'] }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $stats['diff']['categories'] > 0 ? 'warning' : 'success' }}">
                                            {{ $stats['diff']['categories'] }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if($stats['diff']['categories'] > 0)
                                            <span class="badge bg-warning">Pendiente</span>
                                        @else
                                            <span class="badge bg-success">Completo</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-sitemap me-2"></i> Subcategorías</td>
                                    <td class="text-center">{{ $stats['external']['subcategories'] ?? 0 }}</td>
                                    <td class="text-center">{{ $stats['local']['subcategories'] ?? 0 }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ ($stats['diff']['subcategories'] ?? 0) > 0 ? 'warning' : 'success' }}">
                                            {{ $stats['diff']['subcategories'] ?? 0 }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if(($stats['diff']['subcategories'] ?? 0) > 0)
                                            <span class="badge bg-warning">Pendiente</span>
                                        @else
                                            <span class="badge bg-success">Completo</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-truck me-2"></i> Proveedores</td>
                                    <td class="text-center">{{ $stats['external']['suppliers'] }}</td>
                                    <td class="text-center">{{ $stats['local']['suppliers'] }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $stats['diff']['suppliers'] > 0 ? 'warning' : 'success' }}">
                                            {{ $stats['diff']['suppliers'] }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if($stats['diff']['suppliers'] > 0)
                                            <span class="badge bg-warning">Pendiente</span>
                                        @else
                                            <span class="badge bg-success">Completo</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-account-multiple me-2"></i> Clientes</td>
                                    <td class="text-center">{{ $stats['external']['customers'] }}</td>
                                    <td class="text-center">{{ $stats['local']['customers'] }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $stats['diff']['customers'] > 0 ? 'warning' : 'success' }}">
                                            {{ $stats['diff']['customers'] }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if($stats['diff']['customers'] > 0)
                                            <span class="badge bg-warning">Pendiente</span>
                                        @else
                                            <span class="badge bg-success">Completo</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-package-variant me-2"></i> Productos</td>
                                    <td class="text-center">{{ $stats['external']['products'] }}</td>
                                    <td class="text-center">{{ $stats['local']['products'] }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $stats['diff']['products'] > 0 ? 'warning' : 'success' }}">
                                            {{ $stats['diff']['products'] }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if($stats['diff']['products'] > 0)
                                            <span class="badge bg-warning">Pendiente</span>
                                        @else
                                            <span class="badge bg-success">Completo</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="mdi mdi-view-carousel me-2"></i> Sliders</td>
                                    <td class="text-center">{{ $stats['external']['sliders'] ?? 0 }}</td>
                                    <td class="text-center">{{ $stats['local']['sliders'] ?? 0 }}</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ ($stats['diff']['sliders'] ?? 0) > 0 ? 'warning' : 'success' }}">
                                            {{ $stats['diff']['sliders'] ?? 0 }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @if(($stats['diff']['sliders'] ?? 0) > 0)
                                            <span class="badge bg-warning">Pendiente</span>
                                        @else
                                            <span class="badge bg-success">Completo</span>
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Botón de limpieza general -->
    @if(($stats['local']['brands'] + $stats['local']['categories'] + $stats['local']['products'] + $stats['local']['suppliers'] + $stats['local']['customers']) > 0)
    <div class="row mb-3">
        <div class="col-12">
            <div class="alert alert-warning d-flex justify-content-between align-items-center">
                <div>
                    <i class="mdi mdi-alert me-2"></i>
                    <strong>Datos locales detectados:</strong> 
                    {{ $stats['local']['brands'] }} marcas, 
                    {{ $stats['local']['categories'] }} categorías, 
                    {{ $stats['local']['products'] }} productos,
                    {{ $stats['local']['suppliers'] }} proveedores,
                    {{ $stats['local']['customers'] }} clientes
                </div>
                <button class="btn btn-danger" onclick="event.stopPropagation(); cleanLocalData('all')">
                    <i class="mdi mdi-delete-sweep me-1"></i> Limpiar TODO
                </button>
            </div>
        </div>
    </div>
    @endif

    <!-- Tarjetas de Importación -->
    <div class="row">
        <!-- Importar Marcas -->
        <div class="col-md-4 mb-4">
            <div class="card import-card h-100" onclick="startImport('brands')" id="card-brands">
                <div class="card-body text-center">
                    <i class="mdi mdi-tag-multiple text-primary" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Importar Marcas</h5>
                    <div class="mt-3">
                        <div class="stat-number text-primary">{{ $stats['external']['brands'] }}</div>
                        <p class="text-muted mb-0">Total en BD externa</p>
                        @if($stats['diff']['brands'] > 0)
                            <p class="stat-diff text-warning">
                                <i class="mdi mdi-arrow-up"></i> {{ $stats['diff']['brands'] }} por importar
                            </p>
                        @else
                            <p class="stat-diff text-success">
                                <i class="mdi mdi-check"></i> Todas importadas
                            </p>
                        @endif
                    </div>
                    <button class="btn btn-primary btn-sm mt-3" type="button">
                        <i class="mdi mdi-import me-1"></i> Importar Ahora
                    </button>
                    @if($stats['local']['brands'] > 0)
                    <button class="btn btn-danger btn-sm mt-1" type="button" onclick="event.stopPropagation(); cleanLocalData('brands')">
                        <i class="mdi mdi-delete me-1"></i> Limpiar {{ $stats['local']['brands'] }} locales
                    </button>
                    @endif
                </div>
            </div>
        </div>

        <!-- Importar Categorías -->
        <div class="col-md-4 mb-4">
            <div class="card import-card h-100" onclick="startImport('categories')" id="card-categories">
                <div class="card-body text-center">
                    <i class="mdi mdi-folder text-info" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Importar Categorías</h5>
                    <div class="mt-3">
                        <div class="stat-number text-info">{{ $stats['external']['categories'] }}</div>
                        <p class="text-muted mb-0">Total en BD externa</p>
                        @if($stats['diff']['categories'] > 0)
                            <p class="stat-diff text-warning">
                                <i class="mdi mdi-arrow-up"></i> {{ $stats['diff']['categories'] }} por importar
                            </p>
                        @else
                            <p class="stat-diff text-success">
                                <i class="mdi mdi-check"></i> Todas importadas
                            </p>
                        @endif
                    </div>
                    <button class="btn btn-info btn-sm mt-3" type="button">
                        <i class="mdi mdi-import me-1"></i> Importar Ahora
                    </button>
                    @if($stats['local']['categories'] > 0)
                    <button class="btn btn-danger btn-sm mt-1" type="button" onclick="event.stopPropagation(); cleanLocalData('categories')">
                        <i class="mdi mdi-delete me-1"></i> Limpiar {{ $stats['local']['categories'] }} locales
                    </button>
                    @endif
                </div>
            </div>
        </div>

        <!-- Importar Subcategorías -->
        <div class="col-md-4 mb-4">
            <div class="card import-card h-100" onclick="startImport('subcategories')" id="card-subcategories">
                <div class="card-body text-center">
                    <i class="mdi mdi-sitemap text-secondary" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Importar Subcategorías</h5>
                    <div class="mt-3">
                        <div class="stat-number text-secondary">{{ $stats['external']['subcategories'] ?? 0 }}</div>
                        <p class="text-muted mb-0">Total en BD externa</p>
                        @if(($stats['diff']['subcategories'] ?? 0) > 0)
                            <p class="stat-diff text-warning">
                                <i class="mdi mdi-arrow-up"></i> {{ $stats['diff']['subcategories'] }} por importar
                            </p>
                        @else
                            <p class="stat-diff text-success">
                                <i class="mdi mdi-check"></i> Todas importadas
                            </p>
                        @endif
                    </div>
                    <button class="btn btn-secondary btn-sm mt-3" type="button">
                        <i class="mdi mdi-import me-1"></i> Importar Ahora
                    </button>
                    @if(($stats['local']['subcategories'] ?? 0) > 0)
                    <button class="btn btn-danger btn-sm mt-1" type="button" onclick="event.stopPropagation(); cleanLocalData('subcategories')">
                        <i class="mdi mdi-delete me-1"></i> Limpiar {{ $stats['local']['subcategories'] }} locales
                    </button>
                    @endif
                </div>
            </div>
        </div>

        <!-- Importar Proveedores -->
        <div class="col-md-4 mb-4">
            <div class="card import-card h-100" onclick="startImport('suppliers')" id="card-suppliers">
                <div class="card-body text-center">
                    <i class="mdi mdi-truck text-warning" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Importar Proveedores</h5>
                    <div class="mt-3">
                        <div class="stat-number text-warning">{{ $stats['external']['suppliers'] }}</div>
                        <p class="text-muted mb-0">Total en BD externa</p>
                        @if($stats['diff']['suppliers'] > 0)
                            <p class="stat-diff text-warning">
                                <i class="mdi mdi-arrow-up"></i> {{ $stats['diff']['suppliers'] }} por importar
                            </p>
                        @else
                            <p class="stat-diff text-success">
                                <i class="mdi mdi-check"></i> Todos importados
                            </p>
                        @endif
                    </div>
                    <button class="btn btn-warning btn-sm mt-3" type="button">
                        <i class="mdi mdi-import me-1"></i> Importar Ahora
                    </button>
                    @if($stats['local']['suppliers'] > 0)
                    <button class="btn btn-danger btn-sm mt-1" type="button" onclick="event.stopPropagation(); cleanLocalData('suppliers')">
                        <i class="mdi mdi-delete me-1"></i> Limpiar {{ $stats['local']['suppliers'] }} locales
                    </button>
                    @endif
                </div>
            </div>
        </div>

        <!-- Importar Clientes -->
        <div class="col-md-4 mb-4">
            <div class="card import-card h-100" onclick="startImport('customers')" id="card-customers">
                <div class="card-body text-center">
                    <i class="mdi mdi-account-multiple text-success" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Importar Clientes</h5>
                    <div class="mt-3">
                        <div class="stat-number text-success">{{ $stats['external']['customers'] }}</div>
                        <p class="text-muted mb-0">Total en BD externa</p>
                        @if($stats['diff']['customers'] > 0)
                            <p class="stat-diff text-warning">
                                <i class="mdi mdi-arrow-up"></i> {{ $stats['diff']['customers'] }} por importar
                            </p>
                        @else
                            <p class="stat-diff text-success">
                                <i class="mdi mdi-check"></i> Todos importados
                            </p>
                        @endif
                    </div>
                    <button class="btn btn-success btn-sm mt-3" type="button">
                        <i class="mdi mdi-import me-1"></i> Importar Ahora
                    </button>
                    @if($stats['local']['customers'] > 0)
                    <button class="btn btn-danger btn-sm mt-1" type="button" onclick="event.stopPropagation(); cleanLocalData('customers')">
                        <i class="mdi mdi-delete me-1"></i> Limpiar {{ $stats['local']['customers'] }} locales
                    </button>
                    @endif
                </div>
            </div>
        </div>

        <!-- Importar Productos -->
        <div class="col-md-4 mb-4">
            <div class="card import-card h-100" onclick="startImport('products')" id="card-products">
                <div class="card-body text-center">
                    <i class="mdi mdi-package-variant text-danger" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Importar Productos</h5>
                    <div class="mt-3">
                        <div class="stat-number text-danger">{{ $stats['external']['products'] }}</div>
                        <p class="text-muted mb-0">Total en BD externa</p>
                        @if($stats['diff']['products'] > 0)
                            <p class="stat-diff text-warning">
                                <i class="mdi mdi-arrow-up"></i> {{ $stats['diff']['products'] }} por importar
                            </p>
                        @else
                            <p class="stat-diff text-success">
                                <i class="mdi mdi-check"></i> Todos importados
                            </p>
                        @endif
                    </div>
                    <button class="btn btn-danger btn-sm mt-3" type="button">
                        <i class="mdi mdi-import me-1"></i> Importar Ahora
                    </button>
                    @if($stats['local']['products'] > 0)
                    <button class="btn btn-danger btn-sm mt-1" type="button" onclick="event.stopPropagation(); cleanLocalData('products')">
                        <i class="mdi mdi-delete me-1"></i> Limpiar {{ $stats['local']['products'] }} locales
                    </button>
                    @endif
                    <div class="alert alert-info mt-2 p-2" style="font-size: 0.75rem; margin-bottom: 0;">
                        <i class="mdi mdi-information-outline"></i> 
                        Los productos se asignarán automáticamente<br>a sus proveedores correspondientes
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Importar Sliders -->
        <div class="col-md-4 mb-4">
            <div class="card import-card h-100" onclick="startImport('sliders')" id="card-sliders">
                <div class="card-body text-center">
                    <i class="mdi mdi-view-carousel text-warning" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">Importar Sliders</h5>
                    <div class="mt-3">
                        <div class="stat-number text-warning">{{ $stats['external']['sliders'] ?? 0 }}</div>
                        <p class="text-muted mb-0">Total en BD externa</p>
                        @if(($stats['diff']['sliders'] ?? 0) > 0)
                            <p class="stat-diff text-warning">
                                <i class="mdi mdi-arrow-up"></i> {{ $stats['diff']['sliders'] ?? 0 }} por importar
                            </p>
                        @else
                            <p class="stat-diff text-success">
                                <i class="mdi mdi-check"></i> Todos importados
                            </p>
                        @endif
                    </div>
                    <button class="btn btn-warning btn-sm mt-3" type="button">
                        <i class="mdi mdi-import me-1"></i> Importar Ahora
                    </button>
                    @if(($stats['local']['sliders'] ?? 0) > 0)
                    <button class="btn btn-danger btn-sm mt-1" type="button" onclick="event.stopPropagation(); cleanLocalData('sliders')">
                        <i class="mdi mdi-delete me-1"></i> Limpiar {{ $stats['local']['sliders'] ?? 0 }} locales
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @elseif(!$selectedSource)
    <!-- Sin fuente seleccionada -->
    <div class="row">
        <div class="col-12">
            <div class="alert alert-info" role="alert">
                <h4 class="alert-heading">Seleccione una fuente de datos</h4>
                <p>Para comenzar la importación, seleccione una de las fuentes de datos disponibles arriba.</p>
            </div>
        </div>
    </div>
    @else
    <!-- Sin conexión -->
    <div class="row">
        <div class="col-12">
            <div class="alert alert-danger" role="alert">
                <h4 class="alert-heading">No se puede conectar a la base de datos</h4>
                <p>Verifique que la base de datos esté disponible y accesible.</p>
            </div>
        </div>
    </div>
    @endif

    <!-- Sección de Progreso -->
    <div class="row progress-section" id="progressSection">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="mdi mdi-loading mdi-spin me-2"></i>
                        <span id="progressTitle">Importando...</span>
                    </h5>
                </div>
                <div class="card-body">
                    <div class="progress mb-3" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             id="progressBar" 
                             role="progressbar" 
                             style="width: 0%">0%</div>
                    </div>
                    <p class="text-muted mb-0" id="progressStatus">Preparando importación...</p>
                    
                    <div class="import-log" id="importLog">
                        <!-- Los mensajes de log se agregarán aquí -->
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
let currentImport = null;
let importOffset = 0;
const importLimit = 100;

// Cambiar fuente de datos
function changeSource(source) {
    // Si es Stock Manager, redirigir a la nueva vista de importación segura
    if (source === 'stock_manager') {
        window.location.href = '/admin/import/safe';
        return;
    }
    
    // Mostrar loading
    Swal.fire({
        title: 'Verificando configuración...',
        text: 'Por favor espere',
        icon: 'info',
        allowOutsideClick: false,
        showConfirmButton: false,
        willOpen: () => {
            Swal.showLoading();
        }
    });
    
    // Marcar opción activa
    $('.source-option').removeClass('active');
    $('.source-option').each(function() {
        if ($(this).find('[onclick*="' + source + '"]').length > 0) {
            $(this).addClass('active');
        }
    });
    
    $.ajax({
        url: '{{ route("import.changeSource") }}',
        type: 'POST',
        data: {
            source: source,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: '¡Fuente Conectada!',
                    text: 'Conexión exitosa, cargando datos...',
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => {
                    // Recargar página con source parameter
                    window.location.href = '{{ route("import.index") }}?source=' + source;
                });
            } else {
                // Si no está configurado, preguntar si quiere configurar
                if (response.connectionStatus.message.includes('configurar')) {
                    Swal.fire({
                        title: 'Fuente No Configurada',
                        text: response.connectionStatus.message,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Configurar Ahora',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            showConfigModal(source);
                        }
                    });
                } else {
                    Swal.fire({
                        title: 'Error de Conexión',
                        text: response.connectionStatus.message,
                        icon: 'error'
                    });
                }
            }
        },
        error: function() {
            Swal.fire({
                title: 'Error',
                text: 'Error al conectar con la fuente de datos',
                icon: 'error'
            });
        }
    });
}

// Seleccionar opción de solo imágenes
function selectImagesOnly() {
    // Marcar opción activa
    $('.source-option').removeClass('active');
    $(event.currentTarget).addClass('active');
    
    // Guardar en sesión
    $.ajax({
        url: '{{ route("import.changeSource") }}',
        type: 'POST',
        data: {
            source: 'images_only',
            _token: '{{ csrf_token() }}'
        },
        success: function() {
            location.reload();
        }
    });
}

// Analizar carpeta de imágenes
function analyzeImageFolder() {
    const path = $('#imagePath').val().trim();
    
    if (!path) {
        toastr.warning('Por favor ingrese una ruta de carpeta');
        return;
    }
    
    // Guardar ruta en sesión
    sessionStorage.setItem('last_image_path', path);
    
    toastr.info('Analizando carpeta...');
    
    $.ajax({
        url: '{{ route("import.analyzeImages") }}',
        type: 'POST',
        data: {
            path: path,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                $('#imageAnalysisResults').show();
                $('#totalImagesFound').text(response.total);
                $('#matchedProducts').text(response.matched);
                $('#productsWithImages').text(response.withImages);
                $('#noMatchImages').text(response.noMatch);
                
                if (response.matched > 0) {
                    $('#importImagesBtn').prop('disabled', false);
                    toastr.success(`Se encontraron ${response.matched} productos con imágenes coincidentes`);
                } else {
                    toastr.warning('No se encontraron coincidencias');
                }
            } else {
                toastr.error(response.message);
            }
        },
        error: function() {
            toastr.error('Error al analizar la carpeta');
        }
    });
}

// Importar imágenes por código
function importImagesByCode() {
    const path = $('#imagePath').val().trim();
    
    Swal.fire({
        title: '¿Importar Imágenes?',
        text: '¿Desea importar las imágenes coincidentes?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) {
            return;
        }
        
        $('#progressSection').show();
        $('#progressTitle').text('Importando imágenes...');
        $('#importImagesBtn').prop('disabled', true);
    
    $.ajax({
        url: '{{ route("import.imagesByCode") }}',
        type: 'POST',
        data: {
            path: path,
            _token: '{{ csrf_token() }}'
        },
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            var progress = 0;
            var interval = setInterval(function() {
                if (progress < 90) {
                    progress += 10;
                    $('#progressBar').css('width', progress + '%').text(progress + '%');
                }
            }, 1000);
            
            xhr.addEventListener("loadend", function() {
                clearInterval(interval);
                $('#progressBar').css('width', '100%').text('100%');
            });
            
            return xhr;
        },
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: '¡Éxito!',
                    text: response.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            } else {
                Swal.fire({
                    title: 'Error',
                    text: response.message,
                    icon: 'error'
                });
                $('#progressSection').hide();
                $('#importImagesBtn').prop('disabled', false);
            }
        },
        error: function() {
            Swal.fire({
                title: 'Error',
                text: 'Error al importar imágenes',
                icon: 'error'
            });
            $('#progressSection').hide();
            $('#importImagesBtn').prop('disabled', false);
        }
    });
    }); // Cierre del then de SweetAlert
}

// Mostrar instrucciones específicas para subir imágenes
function showImageInstructions() {
    toastr.info('Obteniendo instrucciones...');
    
    $.ajax({
        url: '{{ route("import.instructions") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const instructions = response.instructions;
                
                // Crear contenido HTML para el modal
                let examplesHtml = '';
                instructions.examples.forEach(function(example) {
                    examplesHtml += `
                        <li>
                            <strong>${example.codigo}</strong> - ${example.name}<br>
                            <small class="text-muted">Nombre archivo: <code>${example.filename_example}</code></small>
                        </li>
                    `;
                });
                
                const modalContent = `
                    <div class="alert alert-success">
                        <h5><i class="mdi mdi-check-circle"></i> ¡Es muy fácil!</h5>
                        <p>Solo coloque las imágenes en la carpeta correcta con el nombre que corresponde al código del producto.</p>
                    </div>
                    
                    <h6>📂 <strong>Carpeta donde colocar las imágenes:</strong></h6>
                    <div class="bg-light p-3 rounded mb-3">
                        <code class="text-primary fs-6">${instructions.upload_path}</code>
                        <button class="btn btn-sm btn-outline-primary ms-2" onclick="copyToClipboard('${instructions.upload_path}')">
                            <i class="mdi mdi-content-copy"></i> Copiar
                        </button>
                    </div>
                    
                    <h6>📋 <strong>Ejemplos con productos actuales:</strong></h6>
                    <ul class="mb-3">${examplesHtml}</ul>
                    
                    <h6>📸 <strong>Formatos aceptados:</strong></h6>
                    <div class="d-flex gap-2 mb-3">
                        ${instructions.image_formats.map(format => `<span class="badge bg-info">.${format}</span>`).join('')}
                    </div>
                    
                    <div class="alert alert-warning">
                        <strong>💡 Importante:</strong> El nombre del archivo debe coincidir EXACTAMENTE con el código del producto.
                    </div>
                    
                    <p class="text-muted">
                        <strong>Total de productos:</strong> ${instructions.total_products} productos registrados
                    </p>
                `;
                
                Swal.fire({
                    title: '📸 Instrucciones para Subir Imágenes',
                    html: modalContent,
                    width: '800px',
                    confirmButtonText: 'Entendido',
                    confirmButtonColor: '#28a745',
                    customClass: {
                        popup: 'text-start'
                    }
                });
                
            } else {
                toastr.error('Error al obtener instrucciones');
            }
        },
        error: function() {
            toastr.error('Error al conectar con el servidor');
        }
    });
}

// Función auxiliar para copiar al portapapeles
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        toastr.success('Ruta copiada al portapapeles');
    }).catch(function() {
        toastr.warning('No se pudo copiar automáticamente');
    });
}

// Escanear imágenes que ya estén en la carpeta uploads/product
function scanExistingImages() {
    Swal.fire({
        title: '🔍 Escanear Imágenes Existentes',
        text: 'Esto buscará imágenes que ya estén en la carpeta uploads/product y las asignará automáticamente a los productos correspondientes.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#ffc107',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, escanear',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            toastr.info('Escaneando carpeta uploads/product...');
            
            $.ajax({
                url: '{{ route("import.scanExisting") }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        
                        if (response.assigned > 0) {
                            Swal.fire({
                                icon: 'success',
                                title: '¡Proceso Completado!',
                                html: `
                                    <p><strong>Imágenes encontradas:</strong> ${response.found}</p>
                                    <p><strong>Productos actualizados:</strong> ${response.assigned}</p>
                                `,
                                confirmButtonColor: '#28a745'
                            });
                        }
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Error al escanear imágenes');
                }
            });
        }
    });
}

// Limpiar ruta de imágenes
function clearImagePath() {
    $('#imagePath').val('');
    $('#imageAnalysisResults').hide();
    sessionStorage.removeItem('last_image_path');
}

// Iniciar importación desde BD
function startImport(type) {
    if (currentImport) {
        toastr.warning('Ya hay una importación en progreso');
        return;
    }
    
    // Confirmar importación con SweetAlert2
    const typeNames = {
        'brands': 'Marcas',
        'categories': 'Categorías',
        'subcategories': 'Subcategorías',
        'suppliers': 'Proveedores',
        'customers': 'Clientes',
        'products': 'Productos'
    };
    
    Swal.fire({
        title: '¿Confirmar Importación?',
        text: `¿Desea importar ${typeNames[type]}?`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            currentImport = type;
            importOffset = 0;
            
            // Mostrar sección de progreso
            $('#progressSection').show();
            $('#progressTitle').text(`Importando ${typeNames[type]}...`);
            $('#progressBar').css('width', '0%').text('0%');
            $('#progressStatus').text('Iniciando importación...');
            $('#importLog').empty();
            
            // Deshabilitar tarjeta
            $('#card-' + type).addClass('disabled');
            
            // Agregar log
            addLog(`Iniciando importación de ${typeNames[type]}...`);
            
            // Iniciar importación
            if (type === 'products') {
                importProductsBatch();
            } else {
                importData(type);
            }
        }
    });
}

function importData(type) {
    const routes = {
        'brands': '{{ route("import.brands") }}',
        'categories': '{{ route("import.categories") }}',
        'subcategories': '{{ route("import.subcategories") }}',
        'suppliers': '{{ route("import.suppliers") }}',
        'customers': '{{ route("import.customers") }}',
        'sliders': '{{ route("import.sliders") }}'
    };
    
    $.ajax({
        url: routes[type],
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                // Actualizar progreso
                $('#progressBar').css('width', '100%').text('100%');
                $('#progressStatus').text('Importación completada');
                
                // Agregar log
                addLog(`✓ ${response.message}`);
                addLog(`  Importados: ${response.imported}`);
                addLog(`  Omitidos: ${response.skipped}`);
                addLog(`  Errores: ${response.errors}`);
                
                // Mostrar notificación
                toastr.success(response.message);
                
                // Recargar página después de 3 segundos
                setTimeout(function() {
                    location.reload();
                }, 3000);
            } else {
                // Error
                $('#progressStatus').text('Error en la importación');
                addLog(`✗ Error: ${response.message}`);
                toastr.error(response.message);
            }
        },
        error: function(xhr) {
            $('#progressStatus').text('Error en la importación');
            addLog(`✗ Error: ${xhr.responseText}`);
            toastr.error('Error al importar datos');
        },
        complete: function() {
            currentImport = null;
        }
    });
}

function importProductsBatch() {
    const totalProducts = {{ isset($stats['external']['products']) ? $stats['external']['products'] : 0 }};
    
    $.ajax({
        url: '{{ route("import.products") }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            limit: importLimit,
            offset: importOffset
        },
        success: function(response) {
            if (response.success) {
                // Actualizar contadores
                importOffset += response.imported + response.skipped;
                
                // Calcular progreso
                const progress = Math.min(100, Math.round((importOffset / totalProducts) * 100));
                
                $('#progressBar').css('width', progress + '%').text(progress + '%');
                $('#progressStatus').text(`Procesados: ${importOffset} de ${totalProducts}`);
                
                // Agregar log
                addLog(`Lote procesado: ${response.imported} importados, ${response.skipped} omitidos`);
                
                // Si hay más productos, continuar
                if (response.hasMore && importOffset < totalProducts) {
                    setTimeout(function() {
                        importProductsBatch();
                    }, 1000);
                } else {
                    // Completado
                    $('#progressBar').css('width', '100%').text('100%');
                    $('#progressStatus').text('Importación completada');
                    addLog(`✓ Importación completada: ${importOffset} productos procesados`);
                    toastr.success('Productos importados exitosamente');
                    
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                }
            } else {
                $('#progressStatus').text('Error en la importación');
                addLog(`✗ Error: ${response.message}`);
                toastr.error(response.message);
                currentImport = null;
            }
        },
        error: function(xhr) {
            $('#progressStatus').text('Error en la importación');
            addLog(`✗ Error en el lote ${importOffset}`);
            toastr.error('Error al importar productos');
            currentImport = null;
        }
    });
}

function addLog(message) {
    const timestamp = new Date().toLocaleTimeString();
    $('#importLog').append(`[${timestamp}] ${message}\n`);
    $('#importLog').scrollTop($('#importLog')[0].scrollHeight);
}

// Cargar ruta guardada al iniciar
$(document).ready(function() {
    const savedPath = sessionStorage.getItem('last_image_path');
    if (savedPath) {
        $('#imagePath').val(savedPath);
    }
});

// NUEVAS FUNCIONES PARA CONFIGURACIÓN DINÁMICA
function showConfigModal(source) {
    $('#source_key').val(source);
    
    // Limpiar formulario
    $('#configForm')[0].reset();
    $('#source_key').val(source); // Restaurar después del reset
    
    if (source === 'stock_manager') {
        $('#source_name').val('Stock Manager (Limpieza)');
        $('#configModalTitle').text('Configurar Stock Manager');
        $('#database_name_hint').text('Ingrese el nombre exacto de la base de datos del sistema de limpieza');
    } else if (source === 'tesauro') {
        $('#source_name').val('Tesauro (Librería)');
        $('#configModalTitle').text('Configurar Tesauro');
        $('#database_name_hint').text('Ingrese el nombre exacto de la base de datos del sistema de librería');
    }
    
    // Establecer valores predeterminados
    $('#database_driver').val('mysql');
    $('#database_host').attr('placeholder', '127.0.0.1');
    $('#database_port').attr('placeholder', '3306');
    $('#database_username').attr('placeholder', 'root');
    updatePortDefaults();
    
    // Cargar configuración existente si la hay
    $.post('{{ route("import.getConfiguration") }}', {
        source_key: source,
        _token: '{{ csrf_token() }}'
    }).done(function(response) {
        if (response.success) {
            $('#database_driver').val(response.configuration.database_driver || 'mysql');
            $('#database_host').val(response.configuration.database_host);
            $('#database_port').val(response.configuration.database_port);
            $('#database_name').val(response.configuration.database_name);
            $('#database_username').val(response.configuration.database_username);
            $('#database_password').val(''); // No mostrar contraseña
            updatePortDefaults();
        }
    });
    
    $('#configModal').modal('show');
}

// Actualizar puertos y hints según el driver
function updatePortDefaults() {
    const driver = $('#database_driver').val();
    const portField = $('#database_port');
    const portHint = $('#port_hint');
    const hostField = $('#database_host');
    
    // Si el campo está vacío, actualizar placeholder
    if (!portField.val()) {
        switch (driver) {
            case 'mysql':
                portField.attr('placeholder', '3306');
                portHint.text('Puerto por defecto para MySQL: 3306');
                hostField.attr('placeholder', '127.0.0.1');
                break;
            case 'pgsql':
                portField.attr('placeholder', '5432');
                portHint.text('Puerto por defecto para PostgreSQL: 5432');
                hostField.attr('placeholder', '127.0.0.1');
                break;
            case 'sqlsrv':
                portField.attr('placeholder', '1433');
                portHint.text('Puerto por defecto para SQL Server: 1433');
                hostField.attr('placeholder', '127.0.0.1');
                break;
            case 'sqlite':
                portField.attr('placeholder', 'N/A');
                portHint.text('SQLite no requiere puerto');
                hostField.attr('placeholder', 'ruta/al/archivo.db');
                break;
        }
    }
}

function testConnectionConfig() {
    const formData = $('#configForm').serialize();
    
    Swal.fire({
        title: 'Probando conexión...',
        text: 'Por favor espere',
        icon: 'info',
        allowOutsideClick: false,
        showConfirmButton: false,
        willOpen: () => {
            Swal.showLoading();
        }
    });
    
    $.post('{{ route("import.saveConfiguration") }}', formData + '&_token={{ csrf_token() }}')
        .done(function(response) {
            if (response.success) {
                Swal.fire({
                    title: '¡Conexión Exitosa!',
                    text: 'La conexión a la base de datos fue verificada correctamente',
                    icon: 'success'
                });
            } else {
                Swal.fire({
                    title: 'Error de Conexión',
                    text: response.message,
                    icon: 'error'
                });
            }
        })
        .fail(function() {
            Swal.fire({
                title: 'Error',
                text: 'No se pudo verificar la conexión',
                icon: 'error'
            });
        });
}

function saveConfigurationData() {
    const formData = $('#configForm').serialize();
    
    Swal.fire({
        title: 'Guardando configuración...',
        text: 'Por favor espere',
        icon: 'info',
        allowOutsideClick: false,
        showConfirmButton: false,
        willOpen: () => {
            Swal.showLoading();
        }
    });
    
    $.post('{{ route("import.saveConfiguration") }}', formData + '&_token={{ csrf_token() }}')
        .done(function(response) {
            if (response.success) {
                Swal.fire({
                    title: '¡Configuración Guardada!',
                    text: response.message,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    $('#configModal').modal('hide');
                    location.reload(); // Recargar para actualizar estado
                });
            } else {
                Swal.fire({
                    title: 'Advertencia',
                    text: response.message,
                    icon: 'warning'
                });
            }
        })
        .fail(function(xhr) {
            let errorMsg = 'Error al guardar la configuración';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
            }
            Swal.fire({
                title: 'Error',
                text: errorMsg,
                icon: 'error'
            });
        });
}

// Función para limpiar datos locales con SweetAlert2
function cleanLocalData(type) {
    const typeNames = {
        'all': 'TODOS los datos',
        'brands': 'todas las marcas',
        'categories': 'todas las categorías',
        'subcategories': 'todas las subcategorías',
        'suppliers': 'todos los proveedores',
        'customers': 'todos los clientes',
        'products': 'todos los productos'
    };
    
    Swal.fire({
        title: '¿Limpiar datos locales?',
        text: `Esta acción eliminará ${typeNames[type]} de la base de datos local. ¡Esta acción no se puede deshacer!`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, limpiar',
        cancelButtonText: 'Cancelar',
        focusCancel: true
    }).then((result) => {
        if (result.isConfirmed) {
            // Mostrar progreso
            Swal.fire({
                title: 'Limpiando datos...',
                text: `Eliminando ${typeNames[type]}`,
                icon: 'info',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });
            
            $.post('{{ route("import.cleanLocal") }}', {
                type: type,
                _token: '{{ csrf_token() }}'
            })
            .done(function(response) {
                if (response.success) {
                    let message = `${typeNames[type]} eliminados exitosamente`;
                    if (response.deleted) {
                        const deletedCounts = Object.entries(response.deleted)
                            .map(([key, count]) => `${count} ${key}`)
                            .join(', ');
                        message += `\n\nEliminados: ${deletedCounts}`;
                    }
                    
                    Swal.fire({
                        title: '¡Limpieza Completada!',
                        text: message,
                        icon: 'success',
                        timer: 3000,
                        showConfirmButton: false
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: response.message,
                        icon: 'error'
                    });
                }
            })
            .fail(function() {
                Swal.fire({
                    title: 'Error',
                    text: 'Error al limpiar los datos',
                    icon: 'error'
                });
            });
        }
    });
}
</script>

<!-- Modal de Configuración -->
<div class="modal fade" id="configModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="configModalTitle">Configurar Conexión</h5>
                <button type="button" class="btn-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="configForm">
                    <input type="hidden" id="source_key" name="source_key">
                    <input type="hidden" id="source_name" name="source_name">
                    
                    <div class="alert alert-info">
                        <i class="mdi mdi-information me-2"></i>
                        Configure las credenciales de conexión para acceder a la base de datos remota. 
                        Las contraseñas se almacenan de forma segura y encriptada.
                    </div>
                    
                    <div class="mb-3">
                        <label for="database_driver" class="form-label">Tipo de Base de Datos</label>
                        <select class="form-select" id="database_driver" name="database_driver" required onchange="updatePortDefaults()">
                            <option value="mysql">MySQL / MariaDB</option>
                            <option value="pgsql">PostgreSQL</option>
                            <option value="sqlsrv">SQL Server</option>
                            <option value="sqlite">SQLite</option>
                        </select>
                        <small class="text-muted">Seleccione el tipo de base de datos a la que se conectará</small>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="database_host" class="form-label">Host / IP del Servidor</label>
                                <input type="text" class="form-control" id="database_host" name="database_host" 
                                       placeholder="127.0.0.1" required>
                                <small class="text-muted">Ej: 127.0.0.1, localhost, 192.168.1.100</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="database_port" class="form-label">Puerto</label>
                                <input type="text" class="form-control" id="database_port" name="database_port" 
                                       placeholder="3306" required>
                                <small class="text-muted" id="port_hint">Puerto por defecto para MySQL</small>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="database_name" class="form-label">Nombre de la Base de Datos</label>
                        <input type="text" class="form-control" id="database_name" name="database_name" 
                               placeholder="nombre_base_datos" required>
                        <small class="text-muted" id="database_name_hint">Ingrese el nombre exacto de la base de datos</small>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="database_username" class="form-label">Usuario</label>
                                <input type="text" class="form-control" id="database_username" name="database_username" 
                                       placeholder="root" required>
                                <small class="text-muted">Usuario de la base de datos</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="database_password" class="form-label">Contraseña</label>
                                <input type="password" class="form-control" id="database_password" name="database_password"
                                       placeholder="(opcional)">
                                <small class="text-muted">Dejar vacío si no tiene contraseña</small>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-info" onclick="testConnectionConfig()">
                    <i class="mdi mdi-connection"></i> Probar Conexión
                </button>
                <button type="button" class="btn btn-primary" onclick="saveConfigurationData()">
                    <i class="mdi mdi-content-save"></i> Guardar Configuración
                </button>
            </div>
        </div>
    </div>
</div>

@endsection