@extends('adminlte::page')
@section('title', 'Conectividad de Sedes')
@section('plugins.Sweetalert2', true)

@section('content_header')
    <h4>Conectividad de Sedes</h4>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-network-wired mr-2"></i>Estado de Conectividad
                    </h3>
                    <div class="card-tools">
                        <a href="{{ route('api.index') }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-arrow-left mr-1"></i>Volver
                        </a>
                        <button type="button" class="btn btn-success btn-sm ml-2" onclick="verificarTodas()">
                            <i class="fas fa-sync-alt mr-1"></i>Verificar Todas
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if($estados->isNotEmpty())
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Empresa</th>
                                        <th>Dominio</th>
                                        <th>RUC</th>
                                        <th>Estado</th>
                                        <th>Tiempo de Respuesta</th>
                                        <th>Última Verificación</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($estados as $estado)
                                        <tr>
                                            <td>
                                                <strong>{{ $estado['empresa']->razon_social }}</strong>
                                            </td>
                                            <td>
                                                <code>{{ $estado['dominio'] ?? $estado['empresa']->dominio }}</code>
                                            </td>
                                            <td>{{ $estado['empresa']->ruc }}</td>
                                            <td>
                                                @if($estado['conectado'])
                                                    <span class="badge badge-success">
                                                        <i class="fas fa-check-circle mr-1"></i>Conectado
                                                    </span>
                                                @else
                                                    <span class="badge badge-danger">
                                                        <i class="fas fa-times-circle mr-1"></i>Sin Conexión
                                                    </span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($estado['conectado'] && isset($estado['tiempo_respuesta']))
                                                    <span class="text-success">{{ $estado['tiempo_respuesta'] }}ms</span>
                                                @else
                                                    <span class="text-danger">Timeout</span>
                                                @endif
                                            </td>
                                            <td>{{ now()->format('d/m/Y H:i:s') }}</td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <button type="button" class="btn btn-info btn-sm"
                                                            onclick="verificarSede({{ $estado['empresa']->id }})">
                                                        <i class="fas fa-sync-alt"></i> Verificar
                                                    </button>
                                                    <button type="button" class="btn btn-warning btn-sm"
                                                            onclick="verDetalleDiagnostico({{ json_encode($estado) }})">
                                                        <i class="fas fa-info-circle"></i> Detalle
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <!-- Resumen -->
                        <div class="row mt-4">
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-success">
                                        <i class="fas fa-check-circle"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Conectadas</span>
                                        <span class="info-box-number">
                                            {{ $estados->where('conectado', true)->count() }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-danger">
                                        <i class="fas fa-times-circle"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Sin Conexión</span>
                                        <span class="info-box-number">
                                            {{ $estados->where('conectado', false)->count() }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-info">
                                        <i class="fas fa-building"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Total Sedes</span>
                                        <span class="info-box-number">{{ $estados->count() }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="info-box">
                                    <span class="info-box-icon bg-warning">
                                        <i class="fas fa-percentage"></i>
                                    </span>
                                    <div class="info-box-content">
                                        <span class="info-box-text">Disponibilidad</span>
                                        <span class="info-box-number">
                                            {{ $estados->count() > 0 ? round(($estados->where('conectado', true)->count() / $estados->count()) * 100, 1) : 0 }}%
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            No hay empresas configuradas con dominios para verificar conectividad.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Información adicional -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-info-circle mr-2"></i>Información de Conectividad
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Endpoints Verificados:</h5>
                            <ul>
                                <li><code>GET /api/health</code> - Verificación de salud del sistema</li>
                                <li><code>GET /api/guias-ingreso</code> - Obtención de guías de ingreso</li>
                                <li><code>GET /api/cobranzas</code> - Obtención de cobranzas</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h5>Configuración Requerida:</h5>
                            <ul>
                                <li>Dominio configurado en cada empresa</li>
                                <li>APIs habilitadas en cada sede</li>
                                <li>Conectividad de red estable</li>
                                <li>Certificados SSL válidos (HTTPS)</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<!-- Modal para diagnóstico detallado -->
<div class="modal fade" id="modalDiagnostico" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Diagnóstico Detallado de Conectividad</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modalDiagnosticoBody">
                <!-- Contenido dinámico -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script>
function verificarTodas() {
    Swal.fire({
        title: 'Verificando conectividad...',
        text: 'Por favor espera mientras verificamos todas las sedes.',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // Simular verificación (en una implementación real, esto sería una petición AJAX)
    setTimeout(() => {
        Swal.close();
        location.reload();
    }, 2000);
}

function verificarSede(empresaId) {
    Swal.fire({
        title: 'Verificando sede...',
        text: 'Por favor espera mientras verificamos la conectividad.',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    // Realizar verificación AJAX
    fetch('{{ route("api.verificar-sede") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            empresa_id: empresaId
        })
    })
    .then(response => response.json())
    .then(data => {
        Swal.close();

        if (data.conectado) {
            Swal.fire({
                title: '✅ Conectividad OK',
                text: `La sede responde correctamente (${data.tiempo_respuesta}ms)`,
                icon: 'success',
                timer: 2000
            });
        } else {
            Swal.fire({
                title: '❌ Sin Conectividad',
                text: data.error || 'Error desconocido',
                icon: 'error'
            });
        }

        // Recargar la página después de un momento
        setTimeout(() => {
            location.reload();
        }, 2000);
    })
    .catch(error => {
        Swal.close();
        Swal.fire({
            title: 'Error',
            text: 'Error al verificar la conectividad',
            icon: 'error'
        });
    });
}

function verDetalleDiagnostico(diagnostico) {
    const modalBody = document.getElementById('modalDiagnosticoBody');

    let endpointsHtml = '';
    if (diagnostico.endpoints) {
        Object.keys(diagnostico.endpoints).forEach(endpoint => {
            const ep = diagnostico.endpoints[endpoint];
            const statusBadge = ep.disponible ?
                '<span class="badge badge-success">Disponible</span>' :
                '<span class="badge badge-danger">No Disponible</span>';

            endpointsHtml += `
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">${endpoint.toUpperCase()}</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>Estado:</strong> ${statusBadge}</p>
                            ${ep.status ? `<p><strong>HTTP Status:</strong> ${ep.status}</p>` : ''}
                            ${ep.error ? `<p><strong>Error:</strong> <span class="text-danger">${ep.error}</span></p>` : ''}
                        </div>
                    </div>
                </div>
            `;
        });
    }

    modalBody.innerHTML = `
        <div class="row">
            <div class="col-md-6">
                <h6><strong>Información de la Empresa</strong></h6>
                <p><strong>Nombre:</strong> ${diagnostico.empresa.razon_social}</p>
                <p><strong>Dominio:</strong> <code>${diagnostico.dominio}</code></p>
                <p><strong>RUC:</strong> ${diagnostico.empresa.ruc}</p>
            </div>
            <div class="col-md-6">
                <h6><strong>Estado de Conectividad</strong></h6>
                <p><strong>Conectado:</strong> ${diagnostico.conectado ? '<span class="badge badge-success">Sí</span>' : '<span class="badge badge-danger">No</span>'}</p>
                ${diagnostico.tiempo_respuesta ? `<p><strong>Tiempo de Respuesta:</strong> ${diagnostico.tiempo_respuesta}ms</p>` : ''}
                ${diagnostico.error ? `<p><strong>Error:</strong> <span class="text-danger">${diagnostico.error}</span></p>` : ''}
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-12">
                <h6><strong>Estado de Endpoints</strong></h6>
                <div class="row">
                    ${endpointsHtml}
                </div>
            </div>
        </div>
    `;

    $('#modalDiagnostico').modal('show');
}
</script>
@stop