@extends('layouts.app')

@section('title', 'Detail Cell-ID Provider')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-6">
        <a href="{{ route('cell-id-provider-configs.index') }}" class="text-blue-400 hover:text-blue-300 text-sm mb-4 inline-flex items-center gap-2">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Kembali
        </a>
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-bold text-white">{{ $provider->name }}</h2>
                <p class="text-gray-400 text-sm mt-1">{{ $provider->provider }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('cell-id-provider-configs.edit', $provider) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition">
                    Edit
                </a>
                <button onclick="testConnection({{ $provider->id }})" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm transition">
                    Test Connection
                </button>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Basic Info -->
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4">Basic Information</h3>
            <div class="space-y-3">
                <div>
                    <span class="text-sm text-gray-400">Provider Code:</span>
                    <p class="text-white font-medium">{{ $provider->provider }}</p>
                </div>
                <div>
                    <span class="text-sm text-gray-400">Name:</span>
                    <p class="text-white font-medium">{{ $provider->name }}</p>
                </div>
                <div>
                    <span class="text-sm text-gray-400">Status:</span>
                    <span class="px-2 py-1 rounded text-xs font-medium {{ $provider->is_enabled ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400' }}">
                        {{ $provider->is_enabled ? 'Enabled' : 'Disabled' }}
                    </span>
                </div>
                <div>
                    <span class="text-sm text-gray-400">Priority:</span>
                    <p class="text-white font-medium">{{ $provider->priority }}</p>
                </div>
            </div>
        </div>

        <!-- API Configuration -->
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4">API Configuration</h3>
            <div class="space-y-3">
                <div>
                    <span class="text-sm text-gray-400">API URL:</span>
                    <p class="text-white font-mono text-sm break-all">{{ $provider->api_url }}</p>
                </div>
                <div>
                    <span class="text-sm text-gray-400">API Key:</span>
                    <p class="text-white font-mono text-sm break-all">{{ substr($provider->api_key, 0, 20) }}...</p>
                </div>
                <div>
                    <span class="text-sm text-gray-400">Configured:</span>
                    <span class="px-2 py-1 rounded text-xs font-medium {{ $provider->isConfigured() ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400' }}">
                        {{ $provider->isConfigured() ? 'Yes' : 'No' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Advanced Settings -->
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4">Advanced Settings</h3>
            <div class="space-y-3">
                <div>
                    <span class="text-sm text-gray-400">Timeout:</span>
                    <p class="text-white font-medium">{{ $provider->timeout_seconds }} seconds</p>
                </div>
                <div>
                    <span class="text-sm text-gray-400">Max Retries:</span>
                    <p class="text-white font-medium">{{ $provider->max_retries }}</p>
                </div>
            </div>
        </div>

        <!-- Description -->
        @if($provider->description)
        <div class="bg-surface border border-border rounded-xl p-6">
            <h3 class="text-lg font-semibold text-white mb-4">Description</h3>
            <p class="text-gray-300 text-sm">{{ $provider->description }}</p>
        </div>
        @endif
    </div>
</div>

<script>
async function testConnection(providerId) {
    const button = event.target;
    const originalText = button.textContent;
    button.textContent = 'Testing...';
    button.disabled = true;

    try {
        const response = await fetch(`/cell-id-provider-configs/${providerId}/test-connection`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json',
            },
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert('✅ Connection successful!');
        } else {
            alert('❌ Connection failed: ' + result.message);
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    } finally {
        button.textContent = originalText;
        button.disabled = false;
    }
}
</script>
@endsection