@extends('layouts.app')
@section('title', 'Test Connect')

@section('content')
<style>
.connection-card {
    transition: all 0.3s ease;
    border: 1px solid #e3e6f0;
}

.connection-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.connection-status .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.card-body {
    padding: 1.5rem;
}

.connection-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
</style>

<div id="layout-wrapper">
    @include('layouts.partials.header')
    @include('layouts.partials.sidebar')
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <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 font-size-18">Test connect</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Panel</a></li>
                                    <li class="breadcrumb-item active">Test connect</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Test de Conexión a Bases de Datos</h5>
                            </div>
                            <div class="card-body">
                                <div class="row" id="connection-tests">
                                    <!-- Los resultados se cargarán aquí -->
                                </div>
                                <div class="text-center mt-3">
                                    <button type="button" class="btn btn-primary" id="test-connections">
                                        <i class="fas fa-sync-alt"></i> Probar Conexiones
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-info text-center">
                            Panel de administración
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.partials.footer')
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const databases = [
        { name: 'aruba', label: 'Aruba', icon: 'fas fa-globe-americas', url: 'https://arubaedcard-2024.com' },
        { name: 'aruba-2', label: 'Aruba 2', icon: 'fas fa-globe-americas', url: 'https://www.arubaedcardtourist2025.com/' },
        { name: 'aruba-3', label: 'Aruba 3', icon: 'fas fa-globe-americas', url: 'https://arubaedtouristcard.com' },
        { name: 'malaysia', label: 'Malaysia', icon: 'fas fa-globe-asia' },
        { name: 'curacao', label: 'Curacao', icon: 'fas fa-globe-americas' },
        { name: 'maldives', label: 'Maldivas', icon: 'fas fa-globe-asia' },
        { name: 'colombia', label: 'Colombia', icon: 'fas fa-globe-americas' },
        { name: 'colombia-2', label: 'Colombia 2', icon: 'fas fa-globe-americas' },
        { name: 'thailand', label: 'Tailandia', icon: 'fas fa-globe-asia' },
        { name: 'thailand-2', label: 'Tailandia 2', icon: 'fas fa-globe-asia' },
        { name: 'thailand-3', label: 'Tailandia 3', icon: 'fas fa-globe-asia' },
        { name: 'egypt', label: 'Egipto', icon: 'fas fa-globe-africa' }
    ];

    function createConnectionCard(db) {
        return `
            <div class="col-md-6 col-lg-4 col-xl-3 mb-3">
                <div class="card connection-card border-0 shadow-sm h-100">
                    <div class="card-body text-center d-flex flex-column">
                        <div class="connection-icon mb-2">
                            <i class="${db.icon} fa-2x text-muted" id="icon-${db.name}"></i>
                        </div>
                        <h6 class="card-title font-weight-bold">${db.label}</h6>
                        <div class="connection-status mb-2" id="status-${db.name}">
                            <span class="badge badge-secondary">Sin probar</span>
                        </div>
                        <div class="text-muted mb-3">
                            <a href="${db.url}" target="_blank" class="text-decoration-none">${db.url}</a>
                        </div>
                        <div class="mt-auto">
                            <small class="text-muted" id="details-${db.name}"></small>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function renderConnectionCards() {
        const container = document.getElementById('connection-tests');
        container.innerHTML = databases.map(db => createConnectionCard(db)).join('');
    }

    function updateConnectionStatus(dbName, status, message = '') {
        const statusElement = document.getElementById(`status-${dbName}`);
        const iconElement = document.getElementById(`icon-${dbName}`);
        const detailsElement = document.getElementById(`details-${dbName}`);

        let badgeClass, iconClass;
        
        switch(status) {
            case 'testing':
                badgeClass = 'badge-warning';
                iconClass = 'text-warning';
                break;
            case 'success':
                badgeClass = 'badge-success';
                iconClass = 'text-success';
                break;
            case 'error':
                badgeClass = 'badge-danger';
                iconClass = 'text-danger';
                break;
            default:
                badgeClass = 'badge-secondary';
                iconClass = 'text-muted';
        }

        statusElement.innerHTML = `<span class="badge ${badgeClass}">${status === 'testing' ? 'Probando...' : status === 'success' ? 'Conectado' : status === 'error' ? 'Error' : 'Sin probar'}</span>`;
        iconElement.className = iconElement.className.replace(/text-\w+/, iconClass);
        detailsElement.textContent = message;
    }

    async function testConnection(dbName) {
        updateConnectionStatus(dbName, 'testing');
        
        try {
            const response = await fetch(`/test-connection/${dbName}`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });

            const data = await response.json();
            
            if (data.success) {
                updateConnectionStatus(dbName, 'success', data.message);
            } else {
                updateConnectionStatus(dbName, 'error', data.message);
            }
        } catch (error) {
            updateConnectionStatus(dbName, 'error', 'Error de conexión');
        }
    }

    function testAllConnections() {
        const button = document.getElementById('test-connections');
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Probando...';

        const promises = databases.map(db => testConnection(db.name));
        
        Promise.all(promises).finally(() => {
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-sync-alt"></i> Probar Conexiones';
        });
    }

    // Inicializar
    renderConnectionCards();
    
    // Event listener para el botón
    document.getElementById('test-connections').addEventListener('click', testAllConnections);
});
</script>

@endsection