@extends('layouts.app')

@section('content')
    <div class="section">
        <h2>📡 Database Connections</h2>
        <div class="connection-status">
            <div>
                <strong>Magento 1:</strong>
                <span class="status-badge {{ $connectionTest['magento1'] ? 'success' : 'error' }}">
                    {{ $connectionTest['magento1'] ? '✓ Connected' : '✗ Failed' }}
                </span>
                @if(!$connectionTest['magento1'] && isset($connectionTest['magento1_error']))
                    <div style="color: #721c24; margin-top: 5px; font-size: 0.9em;">
                        {{ $connectionTest['magento1_error'] }}
                    </div>
                @endif
            </div>
            <div>
                <strong>Magento 2:</strong>
                <span class="status-badge {{ $connectionTest['magento2'] ? 'success' : 'error' }}">
                    {{ $connectionTest['magento2'] ? '✓ Connected' : '✗ Failed' }}
                </span>
                @if(!$connectionTest['magento2'] && isset($connectionTest['magento2_error']))
                    <div style="color: #721c24; margin-top: 5px; font-size: 0.9em;">
                        {{ $connectionTest['magento2_error'] }}
                    </div>
                @endif
            </div>
        </div>
        <button class="btn btn-secondary" onclick="testConnections()">Test Connections</button>
    </div>
@endsection

{{-- CSS is loaded globally via app.css --}}

@push('scripts')
    @vite(['resources/js/connections.js'])
    <div data-test-route="{{ route('connections.test-connections') }}" style="display: none;"></div>
@endpush