@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-option {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}
.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;
}
.config-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}
.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);
}
.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
}
</style>

<div class="container-fluid">
    <!-- Header -->
    <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>

    <!-- Selector de Fuente -->
    <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">
                    <!-- Stock Manager -->
                    <div class="col-md-6">
                        <div class="source-option" data-source="stock_manager">
                            <div class="config-badge">
                                <button class="btn btn-sm btn-warning" onclick="configureSource('stock_manager', event)">
                                    <i class="mdi mdi-cog"></i> Configurar
                                </button>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-broom icon text-primary" style="font-size: 2rem; margin-right: 15px;"></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" id="stock_manager_status">
                                        <i class="mdi mdi-circle text-danger"></i> No configurado
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tesauro -->
                    <div class="col-md-6">
                        <div class="source-option" data-source="tesauro">
                            <div class="config-badge">
                                <button class="btn btn-sm btn-warning" onclick="configureSource('tesauro', event)">
                                    <i class="mdi mdi-cog"></i> Configurar
                                </button>
                            </div>
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-book-open-page-variant icon text-success" style="font-size: 2rem; margin-right: 15px;"></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" id="tesauro_status">
                                        <i class="mdi mdi-circle text-danger"></i> No configurado
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Área de contenido dinámico -->
    <div id="importContent"></div>
</div>

<!-- 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="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" 
                                       value="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" 
                                       value="3306" required>
                            </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" required>
                        <small class="text-muted" id="database_name_hint"></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" 
                                       value="root" required>
                            </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">
                                <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="testConnection()">
                    <i class="mdi mdi-connection"></i> Probar Conexión
                </button>
                <button type="button" class="btn btn-primary" onclick="saveConfiguration()">
                    <i class="mdi mdi-content-save"></i> Guardar Configuración
                </button>
            </div>
        </div>
    </div>
</div>

<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>

<script>
let currentSource = null;
let configurations = {};

// Inicializar
$(document).ready(function() {
    loadConfigurations();
    
    // Click en las opciones de fuente
    $('.source-option').click(function(e) {
        // Si el click fue en el botón de configurar, no hacer nada
        if ($(e.target).closest('.config-badge').length) {
            return;
        }
        
        const source = $(this).data('source');
        selectSource(source);
    });
});

// Cargar configuraciones existentes
function loadConfigurations() {
    // Cargar configuración de stock_manager
    $.post('{{ route("import.getConfiguration") }}', {
        source_key: 'stock_manager',
        _token: '{{ csrf_token() }}'
    }).done(function(response) {
        if (response.success) {
            configurations.stock_manager = response.configuration;
            updateSourceStatus('stock_manager', response.configuration);
        }
    });
    
    // Cargar configuración de tesauro
    $.post('{{ route("import.getConfiguration") }}', {
        source_key: 'tesauro',
        _token: '{{ csrf_token() }}'
    }).done(function(response) {
        if (response.success) {
            configurations.tesauro = response.configuration;
            updateSourceStatus('tesauro', response.configuration);
        }
    });
}

// Actualizar estado visual de la fuente
function updateSourceStatus(source, config) {
    const statusEl = $('#' + source + '_status');
    if (config && config.last_connection_status === 'success') {
        statusEl.html('<i class="mdi mdi-circle text-success"></i> Configurado y conectado');
    } else if (config) {
        statusEl.html('<i class="mdi mdi-circle text-warning"></i> Configurado (sin probar)');
    } else {
        statusEl.html('<i class="mdi mdi-circle text-danger"></i> No configurado');
    }
}

// Configurar fuente
function configureSource(source, event) {
    event.stopPropagation();
    
    $('#source_key').val(source);
    
    if (source === 'stock_manager') {
        $('#source_name').val('Stock Manager (Limpieza)');
        $('#database_name').val('codeigniter_stock_manager');
        $('#database_name_hint').text('Base de datos típica: codeigniter_stock_manager');
        $('#configModalTitle').text('Configurar Stock Manager');
    } else if (source === 'tesauro') {
        $('#source_name').val('Tesauro (Librería)');
        $('#database_name').val('tesauro_db');
        $('#database_name_hint').text('Base de datos típica: tesauro_db');
        $('#configModalTitle').text('Configurar Tesauro');
    }
    
    // Si ya existe configuración, cargar los datos
    if (configurations[source]) {
        $('#database_host').val(configurations[source].database_host);
        $('#database_port').val(configurations[source].database_port);
        $('#database_name').val(configurations[source].database_name);
        $('#database_username').val(configurations[source].database_username);
        $('#database_password').val(''); // No mostrar la contraseña
    }
    
    $('#configModal').modal('show');
}

// Probar conexión
function testConnection() {
    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'
            });
        });
}

// Guardar configuración
function saveConfiguration() {
    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');
                    loadConfigurations(); // Recargar configuraciones
                });
            } 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'
            });
        });
}

// Seleccionar fuente
function selectSource(source) {
    // Verificar si está configurada
    if (!configurations[source]) {
        Swal.fire({
            title: 'Fuente no configurada',
            text: 'Debe configurar primero las credenciales de conexión para ' + source,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Configurar ahora',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                configureSource(source, event);
            }
        });
        return;
    }
    
    currentSource = source;
    $('.source-option').removeClass('active');
    $('.source-option[data-source="' + source + '"]').addClass('active');
    
    // Cargar el contenido de importación
    loadImportInterface(source);
}

// Cargar interfaz de importación
function loadImportInterface(source) {
    Swal.fire({
        title: 'Cargando datos...',
        text: 'Conectando con ' + configurations[source].source_name,
        icon: 'info',
        allowOutsideClick: false,
        showConfirmButton: false,
        willOpen: () => {
            Swal.showLoading();
        }
    });
    
    // Aquí cargarías la interfaz de importación con las estadísticas
    // Por ahora solo mostramos un mensaje de éxito
    setTimeout(() => {
        Swal.fire({
            title: '¡Conectado!',
            text: 'Conexión establecida con ' + configurations[source].source_name,
            icon: 'success',
            timer: 1500,
            showConfirmButton: false
        }).then(() => {
            // Recargar la página con la fuente seleccionada
            window.location.href = '{{ route("import.index") }}?source=' + source;
        });
    }, 1000);
}

// Función para limpiar datos locales
function cleanLocalData(type) {
    Swal.fire({
        title: '¿Limpiar datos locales?',
        text: 'Esta acción eliminará todos los ' + type + ' de la base de datos local',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Sí, limpiar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $.post('{{ route("import.cleanLocal") }}', {
                type: type,
                _token: '{{ csrf_token() }}'
            })
            .done(function(response) {
                if (response.success) {
                    Swal.fire({
                        title: '¡Limpieza Completada!',
                        text: response.message,
                        icon: 'success'
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Error',
                        text: response.message,
                        icon: 'error'
                    });
                }
            });
        }
    });
}
</script>

@endsection